The simplest way of using the template is as an overlay - this can be achieved by inserting minimal Javascript into an existing web page.

Please note that this overlay library is intended to be used as a simple mechanism to show a payment page overlay that then returns back to the place it started from. If you want to do anything more sophisticated then you should look at the source of the library and create your own version of it.

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):

  • The "pid" parameter on the URL is the "paymentRef" parameter on the overlay;

  • The "pmRef" parameter on the URL is the "customerRef" parameter on the overlay.

For example, if the URL on a payment record is, then the customerRef parameter would be 121, and the paymentRef parameter would be a031n00000XGkm5.

To use the template as an overlay, just three bits of Javascript are needed:

  • The following should be inserted in the <head> tag of the document:

  • The following also needs to be inserted somewhere in the initialisation of the page (eg. in <head> or window.onload):

    As per the comment, the customer reference 9797 is an example and will need to be changed to your unique reference (obtained when you sign up for an Asperato account.)

  • The following code will need to be called to show the form (such as in the onclick attribute of a button):

    The above example will show the form for a particular payment reference in Salesforce, and will be pre-populated with the relevant details (amount, frequency, and so on.)

    You may also set the default payment type shown on the payment page:

Warnings & Errors

If you run into problems then we would advise keeping an eye on your browser's console - many common issues (unknown fields, required fields not specified, field vales in the wrong format, etc.) are printed there as warnings or errors.