Web (Pop-up)

Leatherback Popup provides an easy payment flow for the web. It can be integrated as shown in the guide below.

Import the CDN

Add the Leatherback Popup script to your page:

<script src="https://leatherbackstorage.blob.core.windows.net/frontend/Aaas/cdn/leatherbackpopup.js"></script>

Generate the Payment Popup

const popUp = new LeatherbackPopUp({
  amount: 0,
  currencyCode: "NGN",
  key: "sk_test_0f1h622b2h06b9h9e97h6h91a17he4673d55g35",
  showPersonalInformation: true,
  customerEmail: "[email protected]",
  customerName: "Marcia Cole",
  reference: "HSK877",
  disableCloseAfterTransaction: true,
  channels: ["Card", "PayByTransfer", "PayByAccount"],
  onSuccess: function(arg) {
    console.log(arg, "ARGUMENT");
  },
});

popUp.generatePaymentPopUp();

Parameter	Type	Required	Description
`amount`	`Number`	Yes	The amount to charge the customer
`currencyCode`	`String`	Yes	Currency code (e.g., `"NGN"`, `"GBP"`)
`key`	`String`	Yes	Your public key, available in the service settings on your dev portal
`showPersonalInformation`	`Boolean`	Yes	`true`: Leatherback collects customer name and email on the popup. `false`: you must provide `customerName` and `customerEmail`.
`disableCloseAfterTransaction`	`Boolean`	No	Set to `true` to keep the popup open after a transaction completes
`customerEmail`	`String`	No	Customer's email address. Not required when `showPersonalInformation` is `true`.
`customerName`	`String`	No	Customer's full name. Not required when `showPersonalInformation` is `true`.
`reference`	`String`	No	Your unique transaction reference
`channels`	`Array`	No	Payment channels to display (e.g., `["Card", "PayByTransfer", "PayByAccount"]`)

💡
If showPersonalInformation is true, there is no need to send customerName and customerEmail — they will be collected on the popup. The key should be your public key, available in the service settings on your dev portal.

Callback Functions

Callback	Returns Data	Description
`onSuccess(data)`	Yes	Fires when the payment succeeds.
`onError(data)`	Yes	Fires when the payment fails.
`callback(data)`	Yes	Fires regardless of whether the payment succeeds or fails. Can be used in place of `onSuccess` and `onError`.
`onClose()`	No	Fires when the popup is closed. Does not return any data.

Sample responses:

// onSuccess
{ "status": "SUCCESS", "message": "Your payment was successful" }

// onError
{ "status": "ERROR", "message": "Your payment was not successful" }