Onsite Checkout - How It Works

How The Onsite Checkout Works

  1. A customer arrives on your website and clicks on a payment button.
  2. Your website loads up the Hubtel Payment page within your website preferably in an iframe.
  3. The customer selects how they wish to make payment.
  4. The customer verifies their identity by inputing their mobile number to receive an OTP or scanning a QR Code with their Hubtel app.
  5. The customer proceeds to choose a suitable payment option or add a new payment option.
  6. When payment is completed, a success or failure notification is presented to the customer.
  7. The customer is finally redirected back to your website via your redirect URL

API Request Flow

Onsite Checkout FlowOnsite Checkout Flow

Onsite Checkout Flow

Step by Step

  1. Your app makes an HTTP POST request to the Online Checkout API to create an invoice.
  2. Your app receives a response with a checkoutDirectUrl.
  3. Your app then loads the checkoutDirectUrl within your website in an iframe
  4. After payment is fulfilled, A Callback is sent to your callbackUrl and your returnUrl is loaded.
  5. Your app then makes a request to check and confirm the status of the payment if required.
  6. The checkout invoice has three (3) statuses: pending, completed and cancelled.

Updated about a year ago

Onsite Checkout - How It Works

Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.