---
title: Web integration Architecture
slug: web-integration-architecture
icon: 🌐
docTags: 
createdAt: 2020-10-16T16:26:26.000Z
---

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

***

# How the web integration works?

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

![](https://api.archbee.com/api/optimize/uMLzTav_HIzdTyGRmLuEG/0b5Fd-sMfwNyrYRGQtRsf_screenshot-2023-03-30-at-123723-pm.png "Web Integratio")

# Step 1: Hosted checkout on client side

- When the customer reaches the checkout page, they choose to pay with **Latitude Pay** and click the payment button.
- The API response will contain the `pre-checkout token`.

# Step 2: Authenticate user & create checkout

- The checkout experience is rendered by OctiFi-websdk.js, and when the customer confirms the payment, a `checkout_token` is generated.
- This token is then included in the return client to your callback URL.

# Step 3: Initiate a charge and save the charge\_id

- Your **server** code receives the `checkout_token` and then uses it to initiate a charge using our `/charge/create` API.
- The API response will contain the `charge_id`
- 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.