Paystack Inline is a Javascript library that loads the Paystack Checkout form. This offers a simple, secure and convenient payment flow for web and mobile and can be integrated in a few lines of code. It makes it possible for you to start and end the payment flow on the same page, avoiding redirect fatigue.

The easiest way to use Paystack Inline is to add your transactions parameters to a script tag in a form. When the transaction is successful, it will call the action on the form.

<form action="/process" method="POST" >
  <script
    src="https://js.paystack.co/v2/inline.js"
    data-key="pk_test_221221122121"
    data-email="customer@email.com"
    data-amount="10000"
    data-first-name="Opemipo"
    data-last-name="Aikomo"
  >
  </script>
</form>

Transaction parameters should be passed as dashed data attributes. To see a list of all transaction parameters, click here. You can also pass additional attributes for styling

To set up your custom implementation of Popup, include the javascript directly on your site

<script src="https://js.paystack.co/v2/inline.js">

or import from npm

import PaystackPop from '@paystack/inline-js';

Start a new Paystack transaction and show a message when it is successful

const paystackInstance = new PaystackPop();
const onSuccess = transaction => alert(`Succesful! Ref: ${transaction.reference}`);
paystackInstance.newTransaction({
  key: 'pk_test_TYooMQauvdEDq54NiTphI7jx',
  email: 'demo@paystack.com',
  amount: 10000,
  onSuccess
});

• PaystackPop.isLoaded()
• PaystackPop.newTransaction()
• PaystackPop.resumeTransaction()
• PaystackPop.cancelTransaction()
• PaystackPop.preloadTransaction()
• PaystackPop.checkout()
• PaystackPop.paymentRequest()

This method checks if PaystackPop has downloaded and set up the checkout form. It returns true or false.

This method starts a new transaction on the checkout form.

This method returns a PopupTransaction Instance

You can add any information you want to save to the transaction in your metadata. However, for the information to be visible on your Paystack dashboard, the metadata has to include the custom_fields property, an array of objects containing display_name, variable_name, and value.

const parameters = {
  key: 'pk_test_TYooMQauvdEDq54NiTphI7jx',
  email: 'demo@paystack.com',
  amount: 10000,
  metadata: {
    custom_fields: [{
      display_name: 'Cart ID',
      variable_name: 'cart_id',
      value: '8393',
    }],
  },
};

This method resumes a transaction using the access code created on your server with the Paystack API.

This method returns a PopupTransaction Instance

When you call PaystackPop.newTransaction(), it first checks if there is any abandoned transaction attempted with the same parameters. If there is one, it resumes that transaction instead of creating a new one.

Use this to cancel a transaction and hide the checkout iFrame.

Cancel Popup and use Paystack Redirect if the transaction doesn't load after 10 seconds.

const paystackInstance = new PaystackPop();
const transaction = paystackInstance.newTransaction({
  key: 'pk_test_TYooMQauvdEDq54NiTphI7jx',
  email: 'demo@paystack.com',
  amount: 10000,
  onLoad() {
    window.clearInterval(redirectTimer);
  },
});

let timeElapsed = 0;
const timeLimit = 10;
const redirectURL = 'https://link/to/your/server';
const redirectTimer = setInterval(() => {
  timeElapsed += 1;
  if (timeElapsed === timeLimit) {
    paystackPop.cancelTransaction(transaction);
    window.location.href = redirectURL;
  }
}, 1000);

This method loads a transaction on the checkout form without opening it. It returns a function that can be used to open the checkout form at a later time.

All General and Custom configuration options that are accepted by PaystackPop.newTransaction

This method returns a function to open the checkout form

Load the transaction for a checkout form and enable a button on the page to open the checkout form when a user clicks it

const paystackPop = new PaystackPop();

try {
  const loadPopup = paystackPop.preloadTransaction({
    key: config.publicLiveKey,
    email: 'testuser@paystack.com',
    amount: 10000,
    currency: "NGN"
  });
	
  document.querySelector("#pay-with-paystack").onclick = loadPopup;

} catch (error) {

}

This method loads a transaction on the checkout form but shows a pre checkout modal before loading the form if a wallet payment e.g Apple Pay is supported.

All General and Custom configuration options that are accepted by PopupTransaction Instance

This method returns a Promise which resolves to a PopupTransaction Instance

const myPopup = new PaystackPop();

const baseParameters = {
  key: config.publicLiveKey,
  email: "testuser@paystack.com",
  channels: ["card", "apple_pay"],
};

const onSuccess = (response) => {
  alert("success. transaction ref is " + response.reference);
};

const onLoad = (response) => {
  console.log(`Successfully loaded transaction: ${response.id}`);
};

const onCancel = (response) => {
  console.log("Transaction cancelled");
};

const onError = (error) => {
  console.log(`Error occured: ${error.message}`);
};

const callbacks = {
  onError,
  onLoad,
  onSuccess,
  onCancel,
};

async function checkout(amount) {
  try {
    const parameters = { ...baseParameters, ...callbacks, amount };
    document.querySelector("#pay-button").disabled = true;
    document.querySelector("#pay-button").innerHTML = "Please wait...";
    const transaction = await myPopup.checkout(parameters);
    document.querySelector("#pay-button").disabled = false;
    document.querySelector("#pay-button").innerHTML = "Pay";
  } catch (e) {
    console.log(e);
  }
}

This method mounts a wallet payment button e.g Apple pay on a provided div and also provides the option to allow a provided button open the checkout form.

All General and Custom configuration options that are accepted by PaystackPop.newTransaction

This method returns a Promise which resolves to a PopupTransaction Instance

Mount a payment button and change the text of the button to open the checkout form if the apple pay button mounts

<div id="payment-request-buttons"></div>
<button id="pay-button">Pay</button>

const paystackPop = new PaystackPop();

const onElementsMount = (elements) => {
  if (elements && elements.applePay) {
    document.querySelector("#pay-button").innerText = "More Payment Options";
  }
}

async function loadApplePayButton() {
  try {
    await paystackPop.paymentRequest({
      key: config.publicLiveKey,
      email: 'testuser@paystack.com',
      amount: 10000,
      currency: "NGN",
      container: 'payment-request-buttons',
      loadPaystackCheckoutButton: 'pay-button',
      styles: {
        theme: 'dark',
        applePay: {
          width: '100%',
          height: '50px',
          borderRadius: '3px',
          type: 'plain',
          locale: 'en'
        }
      },
      onElementsMount,
    });
  } catch(error) {

  }
}

loadApplePayButton()

PaystackPop.newTransaction() and PaystackPop.resumeTransaction() both return an instance of PopupTransaction.

const paystackInstance = new PaystackPop();
const transaction = paystackInstance.newTransaction({
  key: 'pk_test_TYooMQauvdEDq54NiTphI7jx',
  email: 'demo@paystack.com',
  amount: 10000,
});
typeof transaction === PopupTransaction; // true

This method returns all available transaction information. This is populated throughout the lifecycle of the transaction.

Paystack Inline is designed to support all recent versions of major browsers. The distributed file (https://js.paystack.co/v2/inline.js) is compiled to ES5 and poly-filled to ensure it can work on as many devices as possible. We do not support outdated browsers like IE9 nor browsers that disable the use of Javascript, like Opera mini*.

• We support Chrome and Safari on all platforms and Firefox on desktop platforms.
• We support the Android native browser on Android 4.4 and later.
• We require TLS 1.2 to be supported by the browser.

If you have an issue with Paystack Inline on a specific browser, kindly reach out to us so we can quickly resolve any issues.

• We don't support Opera Mini because Javascript is disabled in it. We support the Opera browser however, except in super saver mode where JS is disabled as well.