JS Checkout

NPM Package to Integrate FirstBank's Checkout to JS Web Applications

This repository is currently under development. Please dont use for production applications.

Installation

To install this application, you can run:

npm i firstchekout

Usage

To use the checkout, initiate a payment by running

import FBNCheckout from 'firstchekout'; 

... Function 

const initiatePayment = ()=>{
   
  const txn = {
    live: false,
    ref: "unique_txn_ref21", // Unique translation reference compulsory
    amount: 100, // transaction amount compulsory
    customer: {
      firstname: "firstname",
      lastname: "lastname",
      email: "[email protected]", // Customer email compulsory
      id: "customer id",
    },
    fees: [
        {
          amount: 233,
          label:"Label"
        }
    ],
    meta: {},
    publicKey: "lv-pk-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx", // Merchant public key from your dashboard compulsory
    description: "Payment description",
    currency: "NGN",
    callback: (res)=>console.log(res), // Your callback function
    onClose:  ()=>console.log("onclose"), // Your onclose function
    options: ["QR", "CARD","WALLET","PAYATTITUE"]
  };
  
  const addressUrl = {
      BaseFrame : 'Enter the BaseURL of checkout frame ',
      InitiatePaymentURI : 'Enter checkout payment URI here',
      ImageLogoURL : 'Enter your custom logo url or data:image/png;base64,{base64string}.' //optional
  }

    //To make payment
     await FBNCheckout.initiateTransactionAsync(txn,addressUrl); 





}

To get a payme link that can be used for payment at a later time.

import FBNCheckout from 'firstchekout'; 

... Function 

const initiatePayment = ()=>{
   
  const txn = {
    live: false,
    ref: "unique_txn_ref21", // Unique translation reference compulsory
    amount: 100, // transaction amount compulsory
    customer: {
      firstname: "firstname",
      lastname: "lastname",
      email: "[email protected]", // Customer email compulsory
      id: "customer id",
    },
    fees: [
        {
          amount: 233,
          label:"Label"
        }
    ],
    meta: {},
    publicKey: "lv-pk-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx", // Merchant public key from your dashboard compulsory
    description: "Payment description",
    currency: "NGN",
    callback: (res)=>console.log(res), // Your callback function
    onClose:  ()=>console.log("onclose"), // Your onclose function
    options: ["QR", "CARD","WALLET","PAYATTITUE"]
  };

      const addressUrl = {
      BaseFrame : 'Enter the BaseURL of checkout frame ',
      InitiatePaymentURI : 'Enter checkout payment URI here',
      ImageLogoURL : 'https://www.website.com/logo.png'
  }

    //Generate payme link
    await FBNCheckout.generatePaymentLinkAsync(txn,addressUrl);
}

API Description

| Key | Value | Composulsory | Description | --- | --- | --- | --- | | live | boolean | false | If the environment is live. Defaults to false. | | ref | string | true | Unique reference for this transaction. | | amount | float | true | Amount to be charged. | | customer | object | true | Basic information about the paying customer. Email is compulsory. | | fees | object | false | Fees breakdown for the transaction. Array of { label:string, amount: double } whose amount sums up to the main amount provided. | | meta | object | false | Object of key value pair to be returned on callback and passed to webhooks. | | publicKey | string | true | Your public key from your dashboard compulsory | | description | string | false | Description of the transaction. | | currency | string | false | Currency to be debited. Defaults to "NGN"| | callback | string | true | Callback function for on success or failure of the transaction. Resolves onsuccess. Rejects on error | | onClose | string | false | Callback function when payment frame is closed before transaction completes. Only options activated on your dashboard can be used|

Learn More

You can learn more in the By reaching out to the development team.