NPM Library - PayBridge Pop

A framework-agnostic JavaScript library for integrating with the PayBridge API, a payment solution for seamless online transactions.

Installation

npm install paybridge-pop

Usage

import PayBridgePayPop from "paybridge-pop";

// Initialize PayBridge Pop
const payPop = new PayBridgePayPop();

// Example: Initialize Payment Popup
payPop.newTransaction({
  onSuccess: (transaction) => {
    // Payment complete! transactionId: transaction.transactionId
  },
  onError: (transaction) => {
    // Payment failed! transactionId: transaction.transactionId
  },
  onCancel: () => {
    // user closed the popup
  },
  authorizeUrl: "https://checkout.paybridge.africa/******",
  request: {
    amount: "2000.00",
    transactionId: Math.floor(Math.random() * 1000000),
    email: "sample@mail.com",
    publicKey: "xxxxxxxxxxxxxxxxxxxxxxxxxx",
    currency: "NGN",
    mode: "Live",
    productId: "1001",
    applyConviniencyCharge: true,
    productDescription: "MTN",
    bodyColor: "#0000",
    buttonColor: "#0000",
    footerText: "Powered by Echezona Ltd",
    footerLink: "http://paybridge.africa",
    footerLogo: "http://paybridge.africa/logo.png",
    metadata: [
      {
        name: "sample",
        value: "test",
      },
    ],
  },
});

Request Parameters for Initializing Payment

To implement payment initialization from the backend, simply pass the authorizeUrl and leave the request parameter blank.

To initiate the transaction, you'll need to pass details like email, amount, transaction ID, public key, etc. Email and amount are required fields. Other optional details can be added to the metadata object. Below is a list of parameters you can use:

Parameter	Type	Default	Required	Description
amount	string	undefined	true	The amount you want to debit from the customer, e.g., 1000.00, 10.00...
transactionId	string	undefined	true	Unique, case-sensitive transaction ID
email	string	undefined	true	Customer's email address
publicKey	string	undefined	true	Your public key from PayBridgePay
currency	string	NGN	true	Currency for the transaction. Only NGN is supported
productId	string	undefined	false	Unique ID for the product your customer is paying for
applyConviniencyCharge	boolean	false	false	Whether to apply a convenience fee for the transaction
productDescription	string	undefined	false	Description of the product being purchased
mode	string	Debug	true	Mode of operation: Test or Live
callBackUrl	string	current URL	false	URL to redirect the customer to upon successful payment
bodyColor	string	null	false	Custom color for the payment page body
buttonColor	string	null	false	Custom color for the payment page buttons
footerText	string	null	false	Custom text for the payment page footer
footerLogo	string	null	false	Custom logo for the payment page footer
metadata	object	{}	false	Extra metadata to attach to the transaction (can be any key-value pairs)

Example Callback

const payPop = new PayBridgePayPop();
payPop.newTransaction({
  onSuccess: (transaction) => {
    console.log("Payment successful:", transaction.transactionId);
  },
  onError: (transaction) => {
    console.log("Payment failed:", transaction.transactionId);
  },
  onCancel: () => {
    console.log("User closed the popup");
  },
  request: {
    amount: "1000.00",
    transactionId: Math.floor(Math.random() * 99999999) + "", // generate Trxn ID
    email: "customer@mail.com",
    publicKey: "public-key-here",
    currency: "NGN",
    mode: "Live",
    productId: "1001",
    applyConviniencyCharge: true,
    productDescription: "Sample Product",
    footerText: "Powered by Echezona Ltd",
    footerLogo: "https://paybridge.africa/logo.png",
  },
});