JavaScript Subscription SDK

Learn how to use the Payfi JavaScript subscription SDK.

Getting Started

This SDK allows users to onboard on Payfi without the need to download the mobile app. The checkout SDK can also be called when

📘

Live Base URL

https://api.payfi.ng/v1

📘

Staging Base URL

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

📘

Staging SDK URL

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

Parameters Table

Param	Required	Description
apiKey	YES	Public key attached to your account.
data	YES	This contains the basic information about the user. This is an object, check the data params table for more information

Data param table

Data param	Description
firstName	User's first name
lastName	User's last name
email	User'a email address
address	This is an object of the user's address. Check the address param table for more information
phone	The is the user's phone number and the format is [phone]

Address param table

Address param	Description
houseNo	User's house number
street	Street on the address
state	State where the address is located
city	City where the address is located
country	Country where the address is located

Step 1

First initialize the SDK as shown below:

JavaScript

const payfi = new PayfiSubscribe({
  apiKey: 'pk_ce082ddd-c15f-',
  callbackUrl: "http://test.com",
  data: {
    firstName: '',
    lastName: '',
    email: '',
    address: {
      houseNo: '',
      street: '',
      state: '',
      city: '',
      country: '',
    },
    phone: '',
  },
  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 reference.

payfi.subscribe({ reference: ${Date.now()} })

step 3

Sometimes, you might want to know if the user is already onboarded to determine whether to launch the checkout SDK or the subscription SDK. You can use this endpoint to confirm this.
Make a HTTP POST endpoint + /onboarding/user/status

JSON

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

Body

JSON

{
  "email":"[email protected]"
}

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",
         data: {
          firstName: 'mattt',
          lastName: 'joe',
          email: '[email protected]',
          address:{
          	houseNo: 'no 3',
            street: 'olowogbowo street',
            state: 'Lagos',
            city: 'Marina',
            country: 'Nigeria',
          },
          phone: '[phone]',
        },
         callback: reference => {
          console.log('callback called', reference);
         },
         onClose: () => {
           console.log('modal close')
          }
        });
  </script>