website logo
⌘K
πŸš€Getting Started
Welcome Developers
Web integration Architecture
Integration Prerequisite
πŸ”Authentication
πŸ“ŒSandbox and Live Environment
πŸ› οΈIntegration Options
POS Integration Guide
Direct API integration Guide
βš™οΈPlugins
πŸ‡²πŸ‡ΎMalaysia
πŸ‡ΈπŸ‡¬Singapore
πŸ›οΈMarketing brand guide
πŸ”Logo introduction
πŸ–₯️Sitewide
πŸ‘—Product & service pages
πŸ‘œCheckout and cart page
🌐Website Assets
API REFERENCE
Docs powered byΒ archbeeΒ 
8min

Web integration Architecture

Render LatitudePay hosted-checkout on your web, iOS, or Android application.

How the web integration works?

Quite easy! Two steps as labelled in the following diagram:

ο»Ώ

web integration
web integration

ο»Ώ

Step 1: Hosted checkout on client side

  • On the checkout page(front-end), the customer decides to pay with octifi and submits the payment button.
  • OctiFi-websdk.js renders the checkout experience and on payment confirmation by the customer returns aΒ checkout_token.
  • Your front-end sends the checkout_token to your server (via POST, GET or a Webhook)

Step 2: Initiate a charge

  • Your server code receives the checkout_token and then uses it to initiate a charge using our /charge/createapi and returns a charge_id.

Step 3: Save the charge_id in your database

  • We recommend that you save both the checkout_token and the charge_id in your database along with your order details.
  • The charge_id is required for any further operations like cancellation or refund on the order.
Updated 23 Apr 2022
Did this page help you?
Yes
No
UP NEXT
Integration Prerequisite
Docs powered byΒ archbeeΒ 
TABLE OF CONTENTS
How the web integration works?
Step 1: Hosted checkout on client side
Step 2: Initiate a charge
Step 3: Save the charge_id in your database