> ## 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.

# Dropin

TBDropin is a JavaScript-based Drop-in Payments SDK that allows merchants to easily embed secure, PCI-compliant payment components into their web applications.
It provides pre-built payment elements (UPI, Cards, T\&C, etc.) that are rendered inside secure iframes, ensuring sensitive payment data never touches the merchant’s servers.

## Drop-in Flow for website

1. Merchant injects [**TBdropin SDK**](https://developer.transactbridge.com/checkout.js/web-sdk/dropin/quickstart) and initializes it with Publish key and mode(environemnt).

2. Merchant can now use the SDK on their checkout page.

3. Once the user clicks on buy now/Proceed to pay button at merchants website, now the merchant renders checkout page hosted by them. Where Transact Bridge components are mounted.

4. Merchant calls the [**Create Session API**](https://docs.transactbridge.com/#d4607171-457b-4d24-8277-6d9a79a997dd) to generate a session. Which in return gives a **unique session ID** and a **session token** which is used to complete the payment.

<Note>
  Merchant can generate a session at the time of opening their checkout page or at the time when user clicks on pay button of merchant hosted checkout page.
</Note>

5. Merchant collects the payment details from the customer on their checkout page.

6. Once the user clicks on Pay button. Merchant needs to calls the **pay()** method([**Triggering a Payment**](/checkout.js/web-sdk/dropin/quickstart#triggering-a-payment)) at the checkout with the payment details entered by the user and the session token.

7. Payment is completed, TB shares the status of the txn which merchant can show that on their own customized page.

8. TB triggers a [**Webhook**](https://docs.transactbridge.com/#5ff84b04-3f5d-4e85-a7c8-2c07e1e65536) on the configured server URL provided by the merchant.

   And also the transaction status is also provided in the pay method response.

9. Subsequently, an invoice for a successful transactionis generated and sent to the customer.

## Payment Flow

```mermaid theme={null}
sequenceDiagram
autonumber

    actor User
    participant A as Merchant Website
    participant B as Merchant Backend
    participant C as TB Backend
    participant D as Drop-in SDK

    User->>A: Clicks "Buy Now"
    A->>A: Opens Merchant-hosted Checkout Page

    User->>A: Enters payment details
    User->>A: Clicks "Pay"

    A->>B: Request to create session
    B->>C: Create Session API
    C-->>B: Session Token + Session ID

    B-->>A: Session Token + Session ID

    A->>D: pay(sessionToken, payMethod,sessionId)
    D->>C: Initialize Payment
    C-->>D: Payment result

    D-->>A: Payment status
   
    C->>B: Webhook: Session status update
    B->>B: Process webhook
    B-->>A: Shows payment and session status
    

```

## Workflow for Android SDK

1. Merchant adds the [**AAR**](https://developer.transactbridge.com/checkout.js/android-sdk/dropin/v1.0#1-download-the-aar) file in their project and the [**required dependencies**](https://developer.transactbridge.com/checkout.js/android-sdk/dropin/v1.0#3-declare-required-dependencies)  in app/build.gradle .
2. Now  initialize the TransactBridge PaymentSDK at [**onCreate()**](https://developer.transactbridge.com/checkout.js/android-sdk/dropin/v1.0#4-initialize-the-sdk) method in the main activity file.
3. Merchant can now use the SDK on their checkout screen.
4. Once the user clicks on buy now/Proceed to pay button at checkout screen , where Transact Bridge components are mounted.
5. Merchant calls the [**Create Session API**](https://docs.transactbridge.com/#307dc665-ae10-4e43-8853-5b7f04961825) to generate a session. Which in return gives a **unique session ID** and a **session token** which is used to complete the payment.

<Note>
  Merchant can generate a session at the time of opening their checkout screen or at the time when user clicks on pay button of merchant checkout screen.
</Note>

6. Merchant collects the payment details from the customer on their checkout screen.

7. Once the user clicks on Pay button. Merchant needs to calls the [**payUpi()**](https://developer.transactbridge.com/checkout.js/android-sdk/dropin/v1.0#8-launch-upi-payment) method.

8. Payment is completed, TB shares the status of the txn which merchant can show that on their own customized screen.

9. TB triggers a [**Webhook**](https://docs.transactbridge.com/#5ff84b04-3f5d-4e85-a7c8-2c07e1e65536) on the configured server URL provided by the merchant.

   And also the transaction status is also provided in the [**PaymentResultListener**](https://developer.transactbridge.com/checkout.js/android-sdk/dropin/v1.0#9-handling-payment-results)

10. Subsequently, an invoice for a succesfull transaction is generated and sent to the customer.