Skip to main content

PayBridge Inline JS

Paybridge Inline is the most convenient way to accept payments on your website. You simply import our lightweight JavaScript library into your checkout page. When a consumer clicks on your payment button, the PayBridgePayPop() method is called that processes your transaction.

Here's a demo below:

Steps​

  1. Using a script tag, you first incorporate the PayBridge Inline library:
<script src="https://inline.paybridge.africa/v1.js"></script>
  1. The next step is to initiate the payment process with a payment button. When a customer clicks this button, it will trigger a JavaScript function named processTrxn(). This function will handle the subsequent steps involved in processing the transaction.
<button type="button" onclick="processTrxn()">Pay Now</button>
  1. The processTrxn() function initializes an instance of the PayBridgePayPop() class. This class provides the necessary methods and properties to configure and initiate the payment process. The newTransaction() function is used to initiate a new transaction, specifying details like the amount, currency, and other meta information.
function processTrxn() {
  const payPop = new PayBridgePayPop();

  const request = {
    mode: "Live", // 'Test' or 'Live' environment
    publicKey: "replace with your public key",
    transactionId: Math.floor(Math.random() * 99999999) + "", // generate Trxn ID
    amount: "5000", // Sample amount in the lowest currency unit (e.g., 5000 kobo for NGN 50)
    currency: "NGN",
    email: "customer@example.com",
    phone: "08012345678",
    firstName: "John",
    lastName: "Doe",
    callBackUrl: "https://my-website.com", // Optional callback URL
  };

  // Start a new transaction
  payPop.newTransaction({
    request,
    onSuccess: function (response) {
      console.log("Succesful payment", response);
      alert("Payment was successful!");
    },
    onCancel: function () {
      alert("Payment was cancelled by user.");
    },
    onError: function (error) {
      console.error(error);
      alert("An error occurred during payment.");
    },
  });
}

Understanding the PayBridgePayPop Parameters​

  1. The publicKey is your PayBridge public API key. Login to your dashboard and then go to Settings > API Keys.

    ℹ️ Note: Since this code runs on the client side, it requires your publicKey instead of your secretKey.

  2. The transactionId serves as a unique identifier that should be created for every transaction.

  3. The mode specifies the environment by selecting either test or live mode.

  4. The amount represents the transaction total in the smallest currency unit (e.g., 5000 kobo for ₦50).

  5. Define the currency to indicate the monetary unit being used. Currently, only "₦" (Nigerian Naira) is supported.

  6. The email field is required to identify the customer and send payment-related updates

  7. The phone field contains the customer's mobile number for additional contact.

  8. Specify the customer's firstName to personalize the transaction details.

  9. Provide the customer’s lastName to complete their full name in the payment details.

  10. The callBackUrl is an optional URL where the payment status is sent after processing.

Payment Callback Handlers​

onSuccess Callback​

The onSuccess callback is triggered when the payment process is completed successfully. It is executed once the transaction has been confirmed, and the payment has been processed without issues.

Parameters:​
  • response: Contains the response data from the payment provider upon successful transaction completion. This includes information like transaction status, reference, and any additional metadata returned by the payment service.

onError Callback​

The onError callback is triggered when an error occurs during the payment process. This could be due to network issues, invalid credentials, or any other unexpected error.

Parameters:​

  • error: Contains details about the error that occurred, such as error codes, messages, or any other diagnostic information provided by the payment provider.

onCancel Callback​

The onCancel callback is called when the user chooses to cancel the payment process before completion. This could occur if the user decides not to proceed or if they exit the payment flow. This callback doesn't receive any parameters.