Overview

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. With a simple script include and a few lines of JavaScript, merchants can:

Collect payment details securely
Trigger payments with a unified pay() API

What does the Drop-in SDK provide?

The Drop-in SDK offers a set of ready-to-use payment elements, including:

How TBDropin Works

TBDropin follows a component-based architecture similar to modern payment element SDKs.

Each payment input (Card Number, UPI ID, CVV, Expiry, etc.) runs inside a sandboxed iframe, isolating sensitive data and improving security.

Key Concepts

1. Initialization

Before using any component, the SDK must be initialized.

const TBDropin = window.TBDropin();

await TBDropin.init({
  mode: "sandbox", // or 'production'
  publishKey: "your_publish_key",
});

Initialization:

Sets the environment (sandbox / production)
Loads payment atom definitions
Prepares secure message handling between iframes

2. Payment Components (Elements)

TBDropin provides individual payment elements, such as:

tb_upiIntent
tb_upiQr
tb_cardNumber
tb_cardExp
tb_cardCvv
tb_cardHolder
tb_tnc

Each component:

Is created using TBDropin.create()
Is mounted into a DOM container
Emits lifecycle events like ready, change, clear

const upi = TBDropin.create('tb_<component>', {
  placeholder: 'Your placeholder here',
  styles: {...},
  fonts: [...]
});

upi.mount('#<elementId>');

3. Component Lifecycle & Events

Every component exposes event hooks:

component.on("ready", () => {
  console.log("Component is ready");
});

component.on("change", (data) => {
  console.log("Input changed", data);
});

4. Secure Iframe Architecture

All payment fields are rendered inside secure iframes created by the SDK. The Compliance Checks are also rendered inside a secure iframe when compliance information is required for a payment. Benefits:

PCI compliance
No raw card / UPI data exposed to merchant
Isolated DOM & styles
Safe cross-origin communication via postMessage

The SDK handles:

Iframe creation
Styling constraints
Event communication
Data aggregation during payment

5. Making a Payment

Once the required components are mounted and valid, payment is initiated using:

const response = await TBDropin.pay({
  billingSessionId,
  subscriptionId,
  mandateId,
  payMethod: selectedPaymentMethod,
  cardType: "CC", // only for cards
  sessionToken,
});

How Compliance Flow works

Some payment sessions may require additional customer information before payment can be initiated. When compliance is required, the SDK automatically opens a secure Compliance Check popup. The SDK:

Detects whether compliance is required.
Displays the Compliance Check automatically.
Collects the required customer information securely.
Continues the payment automatically after successful submission.

Rules:

Exactly one of billingSessionId, subscriptionId, or mandateId is required
T&C (tb_tnc) must be visible and accepted
All required inputs must be valid before payment proceeds

6. Getting Required IDs for Payment

Before calling TBDropin.pay(), merchants must obtain one of the following identifiers from the Transact Bridge APIs:

billingSessionId
subscriptionId
mandateId
sessionToken

For Drop-in integration, do not reuse the same session token for every request. Always use the latest session token generated for each new session, as session tokens are unique and valid only for their respective session

These IDs are generated server-side using Transact Bridge APIs and represent different payment flows. Important: Exactly one of these IDs must be provided when calling pay(). You can obtain the billingSessionId by creating a billing session using the Transact Bridge Sessions API. This API allows you to generate a unique payment session for one-time payments. Refer to the API documentation below for request structure, required parameters, and response details.

One Time Payment API Docs

View the Postman API Collection

Checkout

Web SDK

Android SDK

What does the Drop-in SDK provide?

How TBDropin Works

Key Concepts

1. Initialization

2. Payment Components (Elements)

3. Component Lifecycle & Events

4. Secure Iframe Architecture

5. Making a Payment

How Compliance Flow works

6. Getting Required IDs for Payment

One Time Payment API Docs

​What does the Drop-in SDK provide?

​How TBDropin Works

​Key Concepts

​1. Initialization

​2. Payment Components (Elements)

​3. Component Lifecycle & Events

​4. Secure Iframe Architecture

​5. Making a Payment

​How Compliance Flow works

​6. Getting Required IDs for Payment

One Time Payment API Docs

What does the Drop-in SDK provide?

How TBDropin Works

Key Concepts

1. Initialization

2. Payment Components (Elements)

3. Component Lifecycle & Events

4. Secure Iframe Architecture

5. Making a Payment

How Compliance Flow works

6. Getting Required IDs for Payment