Pop Up

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

Integration Guide

To implement the popup on your platform, kindly follow the steps below.

Import the CDN

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

The SDK can be imported as shown above for plain HTML. For JavaScript frameworks like Vue/Nuxt, import can be done globally attaching it to the config.js file.

script: [

      {src: ‘https://leatherbackstorage.blob.core.windows.net/frontend/Aaas/cdn/leatherbackpopup.js’ }
]

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

OnSuccess(data) Sample data {"status": "SUCCESS", "message": "Your payment was successful"}

OnError(data) Sample data{"status": "ERROR", "message": "Your payment was not successful"}

Callback(data)Irrespective of whether the payment fails or not, data is returned. This can be used in place of the above functions
OnClose ( ) Occurs when the popup is closed. It does not return any data

API DOCUMENTATION

Pop Up

Integration Guide

Related articles