---
title: Lightning Web Component
slug: payments/lightning-web-component
description: Embed your Unaric Payments paypages within Salesforce Lightning Web components.
createdAt: 2025-02-15T05:15:10.928Z
---

Embed your paypages within Lightning Web components.

## 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. Create & configure web component

1. Create a new Lightning Web Component and name it **UnaricPaymentsPayPage**. See [Create Lightning Web Component](https://developer.salesforce.com/docs/platform/lwc/guide/create-components-introduction.html) in Salesforce Developer documentation.
2. In the component's` UnaricPaymentsPayPage.html` file**,** add the following code:

:::BlockQuote
\<template>
\<!-- You can also give a different data-id value, remember to pass the same in js -->
&#x20; \<div data-id="paypage-container">\</div>
\</template>
:::

&#x20;   3\.  In `UnaricPaymentsPayPage.js`, add this code:

```javascript
import { LightningElement, api } from 'lwc';
import { loadScript } from 'lightning/platformResourceLoader';
import PayPageJS from '@salesforce/resourceUrl/PayPageJS';
export default class UnaricPaymentsPayPage extends LightningElement {
@api error ='';

connectedCallback(){
    loadScript(this, PayPageJS)
    .then(() => {
        let form = new PaymentFormDisplay(
            {
                customerRef: 10531, //Replace with your customer reference
                environment: "test" //"test", "live"
            }
        );
        form.showForm(
            {
                paymentRef: "a040C000004SsajQAC",
                dit: "f654815b4b7a189bd9239d0ef3defdcada3560aec64b66ff8ef61f21e6e33999", //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
                container: this.template.querySelector('[data-id="paypage-container"]') // Obtain the value of “data-id” from the component where you've passed in. No need to change if it's the same
            }
        );
    })
    .catch((error) => {
        console.log('Error---> '+error);
    });
  }
}
```

## 3.  Set the component's visibility

Modify your component's `js-meta.xml` file to specify which types of pages and areas in Salesforce will allow you to place your component.

1. Open your `js-meta.xml` file in your LWC's folder.
2. Ensure `<isExposed>true</isExposed>` is present. The component won't be visible without this.
3. Locate the `<targets>` sectio&#x6E;**.&#x20;**&#x49;f it doesn't exist, add `<targets>` tags to create it.
4. Within this section, add \<target> tags for each page type you want to target, then save the file and deploy it. Use this table for reference:

| **Target Tag**                                 | **Page Type where Component is Visible**              |
| ---------------------------------------------- | ----------------------------------------------------- |
| `<target>lightning__HomePage</target>`         | Lightning Home Pages                                  |
| `<target>lightning__RecordPage</target>`       | Lightning Record Pages (Account, Contact, etc.)       |
| `<target>lightningCommunity__Page</target>`    | Experience Cloud (Community) - Generic Pages          |
| `<target>lightningCommunity__Default</target>` | Experience Cloud (Community) - Default Template Pages |
| `<target>lightning__AppPage</target>`          | Lightning App Pages                                   |
| `<target>lightning__FlowScreen</target>`       | Flow Screens                                          |
| `<target>lightning__UtilityBar</target>`       | Lightning Utility Bar                                 |

## Styling

CSS can add custom styling to the paypage by adding a CSS file to the component.

1. &#x20;Create a new file in your component folder named `UnaricPaymentsPayPage.css`. Use this file for styling. For example, `iframeStyle{background-color: rgb(191, 201, 241); // you may add other styles too}`.
2. Add the CSS file class to your `UnaricPaymentsPayPage.html`. For example:

:::BlockQuote
\<template>
\<div class="iframeStyle" data-id="paypage-container">\</div>
\</template>
:::