> ## 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.
## Subscription 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 Subscription API**](https://docs.transactbridge.com/#307dc665-ae10-4e43-8853-5b7f04961825) to generate a session. Which in return gives a **unique subscription ID** and a **session token** which is used to complete the payment.
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.
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/#9d2ada6b-d973-4ec6-8552-bc3da0a5cef7) 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 based on the subscription (prepaid/postpaid) is generated and sent to the customer.
10. In case the user does not completes the txn on the page. Merchant can rely on the pendingExpire param passed in the create subs api bases on which the status of the subscription can be traced in case of merchant inactivity.
**pendingExpire**: Number of minutes after which, if the status of the subscription is PENDING (Customer did not pay), it becomes PENDING\_EXPIRED, which is a terminal state, and now customers cannot pay on the same subscription.
By default that subs will be marked as expired by the system after 24 hrs. However, with the help of the pendingExpire param, this time can be reduced to a minimum: 10 mins to a max of 7 days.
## 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 subscription
B->>C: Create Subscription API
C-->>B: Session Token + Subscription ID
B-->>A: Session Token + Subscription ID
A->>D: pay(sessionToken, payMethod,subscriptionId)
D->>C: Initialize Payment
C-->>D: Payment result
D-->>A: Payment status
C->>B: Webhook: Subscription status update
B->>B: Process webhook
B-->>A: Shows payment and subscription 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 Subscription API**](https://docs.transactbridge.com/#307dc665-ae10-4e43-8853-5b7f04961825) to generate a session. Which in return gives a **unique subscription ID** and a **session token** which is used to complete the payment.
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.
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/#9d2ada6b-d973-4ec6-8552-bc3da0a5cef7) 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 based on the subscription (prepaid/postpaid) is generated and sent to the customer.
11. In case the user does not completes the txn on the page. Merchant can rely on the pendingExpire param passed in the create subs api bases on which the status of the subscription can be traced in case of merchant inactivity.