1. Include the Aeropay script once

Preferably included in the head of the HTML.

Aeropay will be available through the window object.

<script src='https://sdk.aeropay.com/ap/aeropay.js'></script>

2. Configure the environment.

window.AeroPay.init({
  env: 'staging'
});

3. Create a success callback function

You can also provide an optional event callback function.

3a. Creating the success callback function

Here, the function onSuccess will be called immediately after a successful transaction through the Aeropay popup. Relative data will be passed back, depending on transaction type

👍

Recommended

checkout, selfCheckout

var onSuccess = function(uuid) {
  // uuid (string), a transient id. Send the uuid back to your
  //   server and use AeroPay API endpoint /transactionInfo
  //   to retrieve transaction data.
};
 Recommended

userAuthorize, subscription

var onSuccess = function(result) {
  // userAuthorize: result is an object containing id, total,
  //   merchantId, and userId. Type userAuthorize can also return
  //   an attributes array with tip data.
  // subscription: result is an object containing id, total,
  //   merchantId, userId, subscribeDate, nextDate, periodicity,
  //   and periodDate.
};

📘

Note:

For transaction types checkout and selfCheckout, it is now recommended to utilize the Aeropay API when retrieving transaction data. Send the uuid back to your server and use endpoint /transactionInfo.

📘

Note:

By default, AeroPay generates the returned UUID. However in step 4, if a UUID is generated and provided by you, it will be returned here instead by the onSuccess function. You can therefore optionally verify the returned uuid client or server side before retrieving the transaction data server side.

3b. Create the optional event callback function

Create the optional event callback function to expose message events from the Aeropay popup.

var onEvent = function(event) {
  // Event occurred
};

4. Create an error callback function

Create the onError function to handle errors from the Aeropay backend

var onError = function(event) {
  console.error(event)
};

event is an object containing code and error, for example:

{ code: 'AP304', error: 'Transaction amount exceeds limit.' }

5. Create an Aeropay button instance

Create an Aeropay payment button, passing the merchant ID, transaction type, success event callback function, and any optional parameters.

var ap = window.AeroPay.button({
  forceIframe: false, // optional, true if forcing SDK to open in iframe
  location: '',
  type: '',
  uuid: '',
  onSuccess: onSuccess,
  onEvent: onEvent
});

6. Generate the Aeropay button or use your own button.

6a. Option 1 : Automatically generate the Aeropay button

Automatically generate the Aeropay button in a div by passing the div ID to the render function.

<div id="aeropay-button-container"></div>

ap.render('aeropay-button-container');

📘

Note:

You can update (or get) the amount, subscriptionId, and selectedAmount using these functions. Calling these functions without passing a parameter will return the current value if previously set. Calling these functions with null resets the value.

checkout, userAuthorize

ap.total(amount);  // string in dollars e.g. '19.50'

subscription

ap.subId(subscriptionId);  // string, provided by AeroPay portal

// Passing a selectedAmount (string in dollars e.g.'3.99')
//   is optional, and can be passed if a user selects an amount
//   through your site. This amount will be presented to the
//   user instead of your predefined plans.
ap.subAmount(selectedAmount);

6b. Option 2 : Use your own button

When pressed, you should call one of the following functions, depending on type

selfCheckout

ap.launch();

🚧

Avoiding SDK popup blockers

The SDK currently relies on window.open() to launch the Aeropay popup. The popup should be launched as a result of a user action, for example a button click.

If you add an ajax call (or code that chains) etc. inside of the button click event, it may no longer be considered a user action, and the Aeropay popup will be blocked. Try to keep your event handler as shallow as possible to avoid popup blockers.

checkout, userAuthorize

// amount is a string in dollars e.g. '14.39'
ap.launch(amount);

subscription

// subscriptionId is a string, and is required
// selectedAmount is a string in dollars e.g. '7.25',
//   and is optional
ap.launchSub(subscriptionId, selectedAmount);

7. Optional - Check if the popup exists or is open

If the popup object doesn’t exist yet, null will be returned. true if popup exists and is open for users. false if the popup exists but it is not open for users. undefined if the parameter passed to status is not recognized.

ap.status('popup');