> ## Documentation Index
> Fetch the complete documentation index at: https://developer.transactbridge.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Iframe Checkout Solution

> Learn how to integrate the Transact Bridge iframe checkout solution into your website for a seamless payment experience.

It embeds the Transact Bridge subscription checkout within the merchant's webpage, allowing customers to complete the subscription payment and mandate authorization without leaving the merchant's page

## Workflow for Website

1. The merchant will create a subscription by calling the [**Create Subscription API**](https://docs.transactbridge.com/#307dc665-ae10-4e43-8853-5b7f04961825) at the backend.

2. The API will return a **redirect URL** and a **unique ID** for subscription.

3. The redirect URL is used to render the checkout page by passing the URL in the `init()` method of the `TBIframe` instance.
   Navigate to [TBIframe Quickstart](https://developer.transactbridge.com/checkout.js/web-sdk/iframe/quickstart)

4. This will open an **iframe within the merchant's page**, from where the customer can make the payment.

5. TB will display the **transaction status** in the iframe. However, the merchant can also display the payment status page based on the status/data received through the [**Handler reference**](https://developer.transactbridge.com/checkout.js/web-sdk/iframe/v1.1).

6. TB triggers a [**Webhook**](https://docs.transactbridge.com/#9d2ada6b-d973-4ec6-8552-bc3da0a5cef7) on the configured server URL provided by the merchant.

   The transaction status is also provided through the **Handler references**.

7. Subsequently, an **invoice based on the subscription (prepaid/postpaid)** is generated and sent to the customer.

<Note>
  * In case the payment fails, TB does not mark the subscription as inactive and allows **multiple transactions** until there is a successful transaction on that session. The customer can retry the transaction within the **same session**.

  * After a successful transaction, the iframe **automatically closes within 10 seconds**.

  * In case there is no activity on the iframe by the customer, or the customer closes the page, the session remains active by default for **24 hours**. However, this timeframe can be customized and reduced to **10 minutes** through backend configuration. To enable this configuration, you need to raise a request with us.
</Note>

## Payment Flow

```mermaid theme={null}
sequenceDiagram
    autonumber

    actor User
    participant A as Merchant Website 
    participant B as Merchant Server
    participant C as TB Server 
    participant D as Iframe SDK 

    User->>A: Clicks on payment button

    A->>B: Request order creation
    B->>C: Create order / payment request
    C-->>B: Returns payment URL
    B-->>A: Returns payment URL

    A->>D: Passes payment URL
    D-->>A: Renders payment iframe on merchant website

    User->>D: Attempts payment in iframe

    Note over B,C: TB processes the payment

    C-->>B: Sends payment webhook
    D-->>A: Sends payment status via callback functions
```

### Workflow for Android SDK

1. The merchant will create a subscription by calling the [**Create Subscription API**](https://docs.transactbridge.com/#307dc665-ae10-4e43-8853-5b7f04961825) at the backend.
2. The API will return a **redirect URL** and a **unique ID** for subscription.
3. Initialize the SDK onCreate()  in your main activity file.
4. The redirect URL is used to render the checkout page by passing the URL in the [**open()**](https://developer.transactbridge.com/checkout.js/android-sdk/web-view/v1.0#3-usage) method of the TransactBridge Instance
5. This will open a webview within the merchant app screen. Where merchant can complete the payment process.
6. TB will display the **transaction status** in the webview. However, the merchant can also display the payment status screen based on the status/data received through the [**EVENT HANDLING REFERENCE**](checkout.js/android-sdk/web-view/v1.0#4-event-handling)
7. TB triggers a [**Webhook**](https://docs.transactbridge.com/#9d2ada6b-d973-4ec6-8552-bc3da0a5cef7) on the configured server URL provided by the merchant.
8. Subsequently, an **invoice based on the subscription (prepaid/postpaid)** is generated and sent to the customer.