Paypages
Embed Externally
Embed Paypage as Overlay
you can add a paypage to your website as an "overlay" on top of your current webpage this way, you can let customers make payments without leaving your site you can do this by adding a paypage template, in the form of a small amount of javascript code, to your website how it works when they click the button a payment form smoothly appears on top of your website content they fill in their payment details directly in this pop up form once they're done (whether they pay successfully or cancel), the payment form disappears, and they're still right where they started on your website flow sequencediagram participant c as customer participant m as your website participant a as asperato participant s as salesforce c >>m initiates payment m >>a paymentref=xyz\<br/>customerref=123\<br/>dit= critical payment processing a >>a validate dit token a >>a process payment a >>s update payment record option success a >>m success response m >>c confirmation message option failure a >>m error details m >>c error handling end this overlay is designed for basic use if you need more complex features or want to customize the payment process deeply, you'd need to dive into the actual code of this "overlay library" and create your own, more advanced version for simple use cases, this basic overlay is sufficient parameters to make the overlay work, you need to provide some information this information is the same as what you would find in a normal payment page web address ("ecommerce url") you can find this url as a payment record in salesforce think of parameters as pieces of information needed to configure the payment page the parameters that are used for setting up the overlay are equivalent to the parameters specified in the "ecommerce url" (which can be found on any payment record) url parameter overlay parameter description pid paymentref payment record id pmref customerref your organization id dit dit data integrity token example let's say you have this payment page url https //demo protectedpayments net/pmweb1?pmref=121\&pid=a031n00000xgkm5\&locale=en gb\&dit=9527c1725cc56eb739d452651a46bc29e286ac6d7b63994f16b035f746455179 from this url, we can see customerref (pmref) is 121 paymentref (pid) is a031n00000xgkm5 dit is 9527c1725cc56eb739d452651a46bc29e286ac6d7b63994f16b035f746455179 implementation you only need to add a few snippets of javascript code to your webpage to get the overlay working 1\ include the javascript library include this line of code within the \<head> section of your html document \<script src="https //live protectedpayments net/donationline/newnew/asperato form 1 1 js">\</script> 2\ initialize the payment form set up the paymentformdisplay payment form with your specific details you'll need to add this javascript code either inside \<script> tags in your html page (e g , in the \<head> or \<body>) within your existing javascript code that runs when the page loads (like in a function that runs on page load or inside window\ onload ) code reference customerref your asperato customer reference id you get this id when you connect your salesforce organization to asperato through the asperato setup page this is how the system knows it's your payment form environment use test or live as values for testing and production environments, respectively example let form = new paymentformdisplay( { customerref 9797, // important replace 9797 with your actual asperato customer reference id! environment "test" // important set to "test" for testing, "live" when you go live for real payments } ); you can additionally set parameters to the paymentformdisplay initialisation to set the iframe size iframeheight and iframewidth as an example let form = new paymentformdisplay( { customerref 1234, environment "test", iframeheight "300px", iframewidth "999px" }); 3\ trigger payment form lastly, you need to trigger the payment form to appear when a customer interacts with your page, like clicking a button you'll typically do this in the onclick event of a button or link let's say you have a button like this in your html \<button onclick="showpaymentoverlay()">donate now\</button> you need to create the javascript function showpaymentoverlay() (or whatever you want to name it) to display the form code reference paymentref the payment reference id from the specific payment record in your salesforce this tells the payment form which payment in salesforce it's related to dit data integrity token (dit) from the same salesforce payment record example function showpaymentoverlay() { form showform( { paymentref "a030y008393c4e4", // important replace with the actual payment reference from salesforce! dit "a030y008393c4e487647bdbnfjhsgvd83yghsd" // important replace with the data integrity token (dit) from your salesforce payment record! } ); } optional setting a default payment type you can also tell the payment form to default to a specific payment method when it first appears (like credit card, direct debit, etc ) to do this, add the defaultpaytype parameter to the showform() function code reference defaultpaytype payment type you can set this to card for credit card dd for direct debit paypal for paypal echeck for echeck (if supported) example function showpaymentoverlay() { form showform( { paymentref "a030y008393c4e4", defaultpaytype "dd", // optional set default payment type ("card", "dd", "paypal", "echeck") dit "a030y008393c4e487647bdbnfjhsgvd83yghsd" } ); } complete example pay now