JavaScript checkout SDK

Learn how to use the Payfi JavaScript checkout SDK.

Getting Started

📘

Live Base URL

https://api.payfi.ng/v1

📘

Staging Base URL

https://core-dev.payfi.ng/v1

📘

Live SDK URL

https://payfi-sdk-js.s3.amazonaws.com/payfi.js

📘

Staging SDK URL

https://payfi-sdk-js-staging.s3.eu-west-1.amazonaws.com/payfi.js

Parameters Table

Param	Required	Description
apiKey	YES	Public key attached to your account.
amount	YES	Amount in Kobo.
reference	YES	A unique transaction reference.
callback	NO	Function that runs when payment is successful.
onClose	NO	Function called if the customer closes the payment window.
meta	NO	You can add the order information to the meta object. The order is an array as the user may purchase multiple items at a time e.g meta={order:[{name, id, category, price, quantity}]} Check the table below for the order properties

Order param	Description
name	The name of the item the user is trying to purchase
id	The order Id, if any
category	The category of the order the user is trying to purchase, if any
price	The amount of the purchase
quantity	The number of each item the user is purchasing

Step 1

First initialize the SDK as shown below:

JavaScript

const payfi = new Payfi({
  apiKey: 'pk_ce082ddd-c15f-',
  callbackUrl: "http://test.com",
  meta: {
    order: [
   		{
    		name: '',
        id: '',
        category: '',
        price: '',
        quantity: '',
    	}
    ]
  },
  callback: reference => {
    document.getElementById("btn").removeAttribute("disabled")
    console.log('callback called', reference);
  },
  onClose: () => {
    document.getElementById("btn").removeAttribute("disabled")
    console.log('modal close')
  }
});

Step 2

📘

Initiate payment process passing the amount and reference.

payfi.pay({ amount, reference: ${Date.now()} })

step 3

On the callback function, the verify transaction endpoint needs to be called to verify the transaction.
Make a HTTP POST endpoint + /merchant/purchase/verify-by-reference

JSON

{
  "payfi-sec-key":"secret key"
}

Body

JSON

{
  "reference":"testing-now-igho"
}

Example Implementation

JavaScript

<script src="https://payfi-sdk-js.s3.amazonaws.com/payfi.js"></script>
  <script type="text/javascript">
     let amount;
     const buttonElement = document.getElementById("btn");
     const handleInputChange = e => {
       amount = document.getElementById("amount").value;
     }
     const handleFormSubmit = () => {
       payfi.pay({ amount, reference: `${Date.now()}` })
     }
     const payfi = new Payfi(
       {
         apiKey: 'pk_ce082ddd-c15f',
         callbackUrl: "http://test.com",
         meta: {
          order: [
            {
              name: 'leather shoe',
              id: 'order_1234',
              category: 'Men shoe',
              price: 40000,
              quantity: '1',
            }
          ]
 				 },
         callback: reference => {
          console.log('callback called', reference);
         },
         onClose: () => {
           console.log('modal close')
          }
        });
  </script>