---
title: Lightning Aura Component
slug: payments/lightning-aura-component
description: Embed your Unaric Payments paypage within any Salesforce Lightning Aura component for quick payment capture.
docTags: 
createdAt: 2025-02-14T23:20:34.453Z
---

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

:::hint{type="info"}
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

1. [Download this script](https://live.protectedpayments.net/donationline/newnew/asperato-form-lighnting-1.0.js) and save it in a new JavaScript file.
2. On Salesforce, Navigate to **Setup > Custom Code > Static Resources **and click **New**. 
3. Upload the JavaScript file to Salesforce and name it *PayPageJS*. Click **Save**.

### 2. Add the Static Resource

1. Create or navigate to the Lightning Component where you want to use the payment overlay.
2. 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 `PayPageJS`Static 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

1. 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:

:::BlockQuote
(
\{      
    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`**:&#x20;**&#x59;our customer ID.
- `environment`**:** Set to `test` for testing or `live` for real payments (as explained in the previous tutorial.
- `paymentRef`**:&#x20;**&#x54;h&#x65;**&#x20;Payment Reference ID** from the specific payment record you are working with.
- `dit`**:&#x20;**&#x59;our ***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&#x20;**&#x69;n CSP Trusted Sites in Salesforce. You only need to add the base URL.

**How to add to CSP Trusted Sites:**

1. Go to Salesforce Setup. Search for *CSP Trusted Sites*.
2. Click **New Trusted Site**. Enter a name (e.g., *Unaric Payments Domain*).
3. 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.

1. Open your Lightning Component Markup (.cmp file).
2. 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.
3. Save it to finish.



##