Echezona Inline JS

Echezona 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 EchezonaPayPop() method is called that processes your transaction.

Here's a demo below:

Steps

1. Using a script tag, you first incorporate the Echezona Inline library:

<script src="https://inline.echezona.com/v1.js"></script>

2. 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>

3. The processTrxn() function initializes an instance of the EchezonaPayPop() 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 EchezonaPayPop();

  const request = {
    mode: "Live",
    apiKey: "replace with your api key",
    transactionId: Math.floor(Math.random() * 99999999) + "",
    amount: "5000",
    currency: "NGN",
    email: "customer@example.com",
    phone: "08012345678",
    firstName: "John",
    lastName: "Doe",
    callBackUrl: "https://my-website.com/payment-callback",
  };

  // 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 EchezonaPayPop Parameters

Parameter	Description
apiKey	Your Echezona API key. Login to your dashboard and navigate to Settings > API Keys.
transactionId	A unique identifier that should be created for every transaction.
mode	Specifies the environment by selecting either test or live mode.
amount	The transaction total in the smallest currency unit (e.g., 5000 kobo for ₦50).
currency	Indicates the monetary unit. Currently, only "₦" (Nigerian Naira) is supported.
email	Required to identify the customer and send payment-related updates.
phone	Contains the customer’s mobile number for additional contact.
firstName	The customer's first name to personalize the transaction details.
lastName	The customer’s last name to complete their full name in the payment details.
callBackUrl	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.