Redirect Integration

The redirect method opens the checkout page in a new tab or window. This is done by calling the redirect method of the Checkout SDK instance and passing the purchase information and configuration options as parameters.

Installation

To use the Hubtel Checkout SDK to collect payment, install the NPM Package or include the the CDN link in your HTML file:

npm install @hubteljs/checkout

Then import it in the component where you want to use it

import CheckoutSdk from "@hubteljs/checkout";

TIP

Note: Before calling the Checkout SDK, most internal apps would call a Pre-Checkout API provided by their backend team.

Sample Pre-checkout Request:

{
  "amount": "1",
  "phoneNumber": "0200000000"
}

Sample Pre-checkout Response:

{
  "message": "success",
  "code": "200",
  "data": {
    "description": "Payment of GHS 1.00 for (18013782) (MR SOMUAH STA ADANE-233557913587) ",
    "clientReference": "f03dbdcf8d4040dd88d0a82794b0229f",
    "amount": 1.0,
    "customerMobileNumber": "233557913587",
    "callbackUrl": "https://instantservicesproxy.hubtel.com/v2.1/checkout/callback"
  }
}

The response from the Pre-Checkout API usually contains all information needed for a successful checkout. Once retrieved the data is then passed onto the Hubtel Checkout SDK to begin the checkout.

Example Usage

Collect the purchase information and configuration options and pass them to the redirect method of the Checkout SDK instance.

<!-- In your HTML   -->

<form id="checkout-form">
  <div>
    <label for="amount">Amount:</label>
    <input type="number" id="amount" name="amount" required />
  </div>

  <div>
    <label for="description">Description:</label>
    <input type="text" id="description" name="description" required />
  </div>

  <div>
    <label for="phone">Customer Phone Number:</label>
    <input type="tel" id="phone" name="phone" required />
  </div>

  <button type="submit">Pay Now</button>
</form>

// In your javascript code

document
  .getElementById("checkout-form")
  .addEventListener("submit", function (event) {
    event.preventDefault();

    const amount = document.getElementById("amount").value;
    const description = document.getElementById("description").value;
    const phone = document.getElementById("phone").value;

    const checkout = new CheckoutSdk();

    const purchaseInfo = {
      amount: amount,
      purchaseDescription: description,
      customerPhoneNumber: phone,
      clientReference: "unique-client-reference-12345",
    };

    const config = {
      branding: "enabled",
      callbackUrl: "https://yourcallbackurl.com", // Replace with your callback URL
      bearerToken: "[TOKEN]", // Replace with your actual token.
      integrationType: "Internal",
      branchId: "7", // Replace with branchId
      businessId: "ericacormey", // Replace with businessId
    };

    checkout.redirect({ purchaseInfo, config });
  });

Parameters

Parameter	Type	Required	Description
purchaseInfo	Object	Yes	Contains details about the purchase.
amount	number	Yes	The purchase amount.
purchaseDescription	string	Yes	A brief description of the purchase.
customerPhoneNumber	string	Yes	The customer’s phone number.
clientReference	string	Yes	A unique reference for the purchase.
config	Object	Yes	Contains configuration options.
branding	string	Yes	Set to "enabled" to show Hubtel branding or "disabled" to hide it.
callbackUrl	string	Yes	The URL to which the SDK will send the response.
bearerToken	string	Yes	Bearer Token
integrationType	string	Yes	Specifies the integration type. Must be set to "Internal", which is the type used for internal integration.
branchId	string	Yes	The branch ID of the business
businessId	string	Yes	The ID of the business