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",
      merchantAccount: 11334,
      basicAuth: "your-basic-auth-here",
    };

    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 your business information. branding or "disabled" to hide it. default is enabled
callbackUrl	string	Yes	Your callback Url
merchantAccount	number	Yes	The merchant account ID.
basicAuth	string	Yes	Basic auth credentials.
integrationType	string	Yes	Specifies the integration type. Default is "External" which is the type used for external integration.