Lightning Aura Component

You can embed the payment page overlay inside an Lightning Aura Component.

If you were using older Visualforce page technology in a Lightning Community, you need to explicitly enable it for Lightning.

1. Create the Static Resource

Download this script and save it in a new JavaScript file.

On Salesforce, Navigate to Setup > Custom Code > Static Resources and click New.

Upload the JavaScript file to Salesforce and name it PayPageJS. Click Save.

2. Add the Static Resource

Create or navigate to the Lightning Component where you want to use the payment overlay.

within the <aura:component>tags of your Lightning Component's markup file (.cmp file), add this code <ltng="{!$Resource.PayPageJS}" afterScriptsLoaded="{!c.onScriptLoad}">. .

scripts="{!$Resource.PayPageJS}": This attribute tells the <ltng:scripts> tag to load Javascript files. {!$Resource.PayPageJS} is a special syntax in Lightning that refers to the PayPageJSStatic Resource.

afterScriptsLoaded="{!c.onScriptLoad}": This attribute specifies a controller function (in your Lightning Component's Javascript controller file) that should be executed after PayPageJS has been successfully loaded. {!c.onScriptLoad} means it will call a function named onScriptLoad in your component's controller. This is important because you need to make sure the payment library is fully loaded before trying to use it.

3. Implement the function in your Component controller

To initialize the payment form and display it, create or edit the controller file (.js file) associated with your Lightning Component and add this Javascript code inside it:

( { onScriptLoad: function(component, event, helper) { var form = new PaymentFormDisplay( { customerRef: 9797, //Replace with your customer reference environment : "test" //"test", "live" } ); form.showForm( { paymentRef: "a030Y008393c4E4", // Replace with payment Id dit: "a030Y008393c4E487647bdbnfjhsgvd83yghsd" //Obtain the value of "dit" from "data integrity token" field available on payment record. This field is available 2.17+ and is used to enforce the data integrity } ); } })

Code reference

customerRef: Your customer ID.

environment: Set to test for testing or live for real payments (as explained in the previous tutorial.

paymentRef: The Payment Reference ID from the specific payment record you are working with.

dit: Your Data Integrity Token (DIT) from the same payment record.

4. Configure CSP Trusted Sites for Salesforce Communities

If you intend to use this Lightning Component within a Salesforce Community, you must configure CSP Trusted Sites to allow the Community to load resources from the payment provider's domain. This is done by adding the payment provider's base URL to "CSP Trusted Sites". For example, if the URL on a payment record is ... https://live.protectedpayments.net/PMWeb1?... ... then add https://live.protectedpayments.net in CSP Trusted Sites in Salesforce. You only need to add the base URL.

How to add to CSP Trusted Sites:

Go to Salesforce Setup. Search for CSP Trusted Sites.

Click New Trusted Site. Enter a name (e.g., Unaric Payments Domain).

For Trusted Site URL, enter the base URL (e.g., https://live.protectedpayments.net). Make sure Is Active is checked.

You might need to adjust other settings based on your specific CSP requirements, but for this basic integration, just adding the base URL should be sufficient. You need to do this within the Community Builder settings for your specific Salesforce Community.

5. Implement the forceCommunity Interface (For Salesforce Communities)

If you are using this Lightning Component in a Salesforce Community, you need to declare that it's intended for community use by implementing the forceCommunity interface.

Open your Lightning Component Markup (.cmp file).

Modify the opening aura:component tag and add the <aura implements="forceCommunity">attribute. This signals to Salesforce that this component is designed to work within the community context and should have access to community-specific features and resources.

Save it to finish.