Paystack

Overview

This guide will help you integrate the Paystack payment gateway into your Chec/Commerce.js storefront using the Paystack Popup.

In this guide

1. Overview of the payment flow for processing payments with the Paystack gateway
2. Example application implementation
   • Integrate the Paystack Popup into your application
   • Example implementation of capturing a checkout with Chec/Commerce.js

Payment flow

Requirements and prerequisites

• Chec account with Paystack gateway enabled
• Credentials: Paystack public and secret live API keys for production, or test keys for sandbox transactions
• Some knowledge of JavaScript

Step by step

1. Load the Paystack popup library into your checkout
2. When the customer clicks on purchase, load the Paystack popup
3. Once they buyer authorizes the payment using the Paystack popup, use Commerce.js to send the payment reference returned by Paystack to the Chec API to capture the order.

Important! You need to pass the correct order total & currency in the smallest unit to Paystack

• You can find the order total & currency in the live object (live.total_with_tax.raw & live.currency.code)
• Convert order total amount into the smallest unit (usually the subunit) for your currency.
  • e.g. The smallest unit of a U.S. dollar is 1/100 of a dollar (one cent), so you need to specify 12300 to indicate $123.

Load the Paystack Popup library

Install the Paystack Popup script by including the following script in your webpage:

<script type='text/javascript' src='https://js.paystack.co/v1/inline.js'></script>

Embed the pre-built Paystack popup library into your checkout page

<form id='paymentForm'>
  <input id='email' name='email' type='text' />
  <input id='paystackReference' name='paystackReference' type='hidden' />
  <input id='captureOrder' type='submit' value='Submit'>
</form>

<script>
  var live = commerce.checkout.getLive(checkoutToken);
  var button = document.querySelector('#captureOrder');
  var form = document.querySelector('#paymentForm');

  button.addEventListener('click', (event) => {
    event.preventDefault();
    let handler = PaystackPop.setup({
      key: '<PAYSTACK_PUBLIC_KEY>', 
      // Note: We return all gateway public keys in our checkout token response objects, you can access it with the following key gateways.paystack.settings.public_key 
      email: document.getElementById('email').value,
      currency: live.currency.code, 
      amount: parseFloat(live.total_with_tax.raw) * 100, // The order total in the smallest unit for the currency
      onClose: function() {
        alert('Window closed.');
      },
      callback: function(response) {
        form.paystackReference.value = response.reference;
        // Continue call to Commerce.checkout.capture()
      }
  });

</script>

Once you have your Paystack reference you can pass the data along with the rest of the customer and order data to commerce.checkout.capture()

commerce.checkout.capture(checkoutToken, {
  ...orderData,
  payment: {
    gateway: 'paystack',
    paystack: {
      reference: document.getElementById('paystackReference').value // The returned Paytack reference id
    },
  },
}).then((order) => {
  // Payment and order capture was successful
  console.log(order);
  alert('Payment completed successfully!\nCheck browser developer console for more details');
}).catch((err) => {
  // Error handling for when the payment fails with Paystack
  console.error(err);
  alert('Payment failed to complete!\nCheck browser developer console for more details');
});