Lightning Web Component

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\ create & configure web component create a new lightning web component and name it asperatopaypage see create lightning web component in salesforce developer documentation in the component's asperatopaypage html file , add the following code \<template> \<! you can also give a different data id value, remember to pass the same in js > \<div data id="paypage container">\</div> \</template> 3\ in asperatopaypage js , add this code import { lightningelement, api } from 'lwc'; import { loadscript } from 'lightning/platformresourceloader'; import paypagejs from '@salesforce/resourceurl/paypagejs'; export default class asperatopaypage 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 open your js meta xml file in your lwc's folder ensure \<isexposed>true\</isexposed> is present the component won't be visible without this locate the \<targets> section if it doesn't exist, add \<targets> tags to create it 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 create a new file in your component folder named asperatopaypage css use this file for styling for example, iframestyle{background color rgb(191, 201, 241); // you may add other styles too} add the css file class to your asperatopaypage html for example \<template> \<div class="iframestyle" data id="paypage container">\</div> \</template>