This is a simple guide on how to integrate a payment gateway using an inline JavaScript popup. The provided code sample includes an HTML document with an embedded script that triggers a checkout modal.

The payment gateway integration is facilitated through the use of the "HydrogenPGIntegration.js" script hosted on Azure Blob Storage.

🚧

QA Script: https://hydrogenshared.blob.core.windows.net/paymentgateway/paymentGatewayInegration.js

βœ…

PROD Script: https://hydrogenshared.blob.core.windows.net/paymentgateway/HydrogenPGIntegration.js

Request parameters

MandatoryNameComment
YesamountThe amount to be charged for the transaction.
YesemailThe customer's email address.
YescurrencyThe currency in which the transaction is to be processed (e.g., "NGN").
YescustomerNameCustomer's Name
YesdescriptionA brief description of the transaction.
YesmetaAdditional metadata or information related to the transaction.
YesisAPIA boolean indicating whether the transaction is initiated via API (true/false).

Below are the integration steps

Include the Required Scripts

Ensure to specify the necessary scripts in the section of your HTML document.

<!-- for QA script -->
<script src="https://hydrogenshared.blob.core.windows.net/paymentgateway/paymentGatewayIntegration.js" module></script>

Create a Checkout Button

Add a button to your HTML page that will trigger the checkout modal. In this example, the button has an ID of "myBtn" and calls the openDialogModal() function when clicked.

<button id="myBtn" onclick="openDialogModal()">Checkout</button>

Include Payment Information

Set up a JavaScript object (obj) with the necessary parameters for the payment transaction. This object will be used to initiate the payment link through an API.

let obj = {
  amount: 100,
  email: "[email protected]",
  currency: "NGN",
  description: "test desc",
  meta: "test meta",
  isAPI: false,
};

Authorization Token

Obtain an authorization token (token) from Hydrogenpay dashboard based on your testing or production requirements.

// For QA
let token = "E2E411B102072296C73F76339497FB8529FF552F0D6817E0F3B46A243961CA21";

Payment Gateway Function

Implement the openDialogModal function, which calls the handlePgData function from the external script with the defined payment information and token.

async function openDialogModal() {
  let res = handlePgData(obj, token);
  console.log("return transaction ref", await res);
}

The above steps can help you to easily integrate the provided code sample into your web application to enable a seamless payment gateway experience with an inline JavaScript popup.