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'd need to explicitly enable it for lightning 1\ create the static resource https //live protectedpayments net/donationline/newnew/asperato form lighnting 1 0 js 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 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 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 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