Quick Start

Integrate TBDropin into your website in minutes. This guide provides a step-by-step walkthrough to help you integrate TBDropin into your website or application within minutes. You’ll learn how to load the SDK, initialize it, mount payment components, and trigger a payment.

1. Prerequisites

Before you begin, ensure you have:

A Billing Session ID, Subscription ID, or Mandate ID

2. Initialize TBDropin

Initialize the SDK using your publishable key and session identifier.

3.Inject the Dropin SDK

<script src="https://cdn.transactbridge.com/scripts/v1.0/dropin.js"></script>

4. Initialize the SDK

Initialize the SDK using your publishable key and session identifier.

window.addEventListener("load", async () => {
  const TBDropin = window.TBDropin();

  await TBDropin.init({
    mode: "sandbox",
    publishKey: "YOUR_PUBLISHABLE_KEY",
  });
});

Environment	Type	Description
publishableKey	`string`	Your TransactBridge publishable key
sessionId	`string`	Billing Session / Subscription / Mandate ID

5. Mount Payment Components

Create container elements in your HTML where components will be mounted.

<div id="card-number"></div>
<div id="card-holder"></div>
<div id="card-exp"></div>
<div id="card-cvv"></div>

6. Create & Mount Components

All payment fields are created using TBDropin.create() and attached to the DOM using mount(). Card Payment Components

const cardNumber = TBDropin.create("tb_cardNumber", {
  placeholder: "Enter card number",
});

const cardHolder = TBDropin.create("tb_cardHolder", {
  placeholder: "Card holder name",
});

const cardExp = TBDropin.create("tb_cardExp");
const cardCvv = TBDropin.create("tb_cardCvv");

cardNumber.mount("#cardNumber");
cardHolder.mount("#cardHolder");
cardExp.mount("#cardExp");
cardCvv.mount("#cardCvv");

Returned Value cardNumber Card Number Object

{
  element: "tb_cardNumber",
  value: {
    brand: null,
    cvvLength: 3
  },
  isValid: false,
  error: null,
  componentUrl: "https://dropin.transactbridge.com/cardNumber"
}

cardExp Card Expirey Object

{
  element: "tb_cardExp",
  value: {
    cardExp: ""
  },
  isValid: false,
  error: {
    message: "INCOMPLETE_EXP",
    code: "INCOMPLETE_EXP"
  },
  componentUrl: "https://dropin.transactbridge.com/cardExp"
}

cardCvv Card CVV Object

{
  element: "tb_cardCvv",
  value: {
    cardCvv: ""
  },
  isValid: false,
  error: {
    message: "INVALID_CVV_LENGTH",
    code: "INVALID_CVV_LENGTH"
  },
  componentUrl: "https://dropin.transactbridge.com/cardCvv"
}

cardHolder Card Holder Object

{
  element: "tb_cardHolder",
  value: {
    cardHolder: "Test User"
  },
  isValid: true,
  error: null
}

Fields Explained

Field	Type	Description
element	`string`	Component identifier
value	`object`	Component-specific data returned by the field
isValid	`boolean`	Field-specific value
error	`object`	null or Validation error (if any)
componentUrl	`string`	Hosted component URL

Terms & Conditions

const tnc = TBDropin.create("tb_tnc", {
  buttonText: "Pay",
});

tnc.mount("#tnc");

7. Terms & Conditions

Each component emits updates whenever the user types or validation changes.

cardNumber.on("change", (data) => {
  console.log(data);
});

cardNumber.on("ready", () => {
  console.log("Card Number component mounted");
});

8. Customization & Configuration Options

TBDropin allows you to customize the appearance and behavior of all components using configuration objects. These options can be reused across Card, UPI, and Popup components. Fonts Configuration You can load and use custom fonts inside TBDropin components.

const fonts = [
  {
    cssSrc:
      "https://fonts.googleapis.com/css2?family=Roboto:wght@100..900&display=swap",
  },
  {
    cssSrc:
      "https://fonts.googleapis.com/css2?family=Orbitron:wght@400..900&display=swap",
  },
];

Usage

TBDropin.create("tb_cardNumber", {
  fonts,
});

Input Style (inputStyle) Used to style the actual input field inside the iframe.

const inputStyle = {
  fontFamily: '"Roboto", sans-serif',
  padding: "12px",
  color: "darkslategray",
  borderRadius: "8px",
  border: "1px solid #d9d9d9",
  height: "38px",

  [":focus"]: {
    border: "1px solid #007aff",
  },

  [":hover"]: {
    border: "1px solid #007aff",
    outline: "3px solid #007aff40",
  },

  ["::placeholder"]: {
    color: "gray",
  },
};

Applicable To

tb_cardNumber
tb_cardHolder
tb_cardExp
tb_cardCvv

Frame Style (frameStyle) Controls the iframe container that wraps the input.

const frameStyle = {
  height: "44px",
  width: "100%",
  borderRadius: "8px",
  border: "none",
};

Why this matters

Adjust spacing
Match your design system
Avoid iframe overflow issues

Icon Configuration (iconConfig) Used to customize or hide card / UPI icons.

const iconConfig = {
  // hide: true, // optional (default: false)
  styles: {
    width: "20px",
    height: "20px",
  },
};

Popup Configuration (popupOptions) Used to customize the payment popup UI (success, failure, processing, timer, etc.).

const popupOptions = {
  fonts,

  components: {
    success: {
      backgroundColor: "#68c577",
      color: "white",
    },
    failed: {
      backgroundColor: "#e06d6d",
      color: "white",
    },
    processing: {
      backgroundColor: "gold",
      color: "white",
    },
    instruction: {
      fontFamily: '"Roboto", sans-serif',
      color: "gray",
      fontSize: "14px",
    },
  },

  frameStyle: {
    width: "40px",
    height: "60px",
    borderRadius: "15px",
    zIndex: "99999999",
  },
};

Apply Popup Config at Init

const TBDropin = window.TBDropin();

await TBDropin.init({
  mode: "sandbox",
  publishKey: "YOUR_PUBLISHABLE_KEY",
  popupConfig: popupOptions,
});

Passing Options to Components All customization options are passed during component creation.

TBDropin.create("tb_cardNumber", {
  placeholder: "Enter Card Number",
  styles: inputStyle,
  frameStyle,
  icon: iconConfig,
  fonts,
});

Summary of Customization Options

Option	Purpose
fonts	Load and apply custom fonts
inputStyle	Style input fields
frameStyle	Style iframe container
iconConfig	Customize / hide icons
popupConfig	Customize payment popup

9. Triggering a Payment

Once components are valid, call pay().

const result = await TBDropin.pay({
  billingSessionId: "bs_xxxxx",
  payMethod: component,
  sessionToken,
});

Field	Type	Description
billingSessionId	`string`	Used for one-time payments.
subscriptionId	`string`	Used for recurring payments (subscriptions).
mandateId	`string`	Used during mandate setup for recurring payments.
sessionToken	`string`	Token received after creating a payment session; required to proceed with payment.
payMethod	`Component`	Payment component/interface used to process the transaction.
cardType	`string`	Type of card: CC (Credit Card) or DC (Debit Card).
updateMandateRequired	`boolean`	Set to `true` when a subscription is upgraded or downgraded and a new mandate setup is required. Use only with `subscriptionId`.

Next Steps

A Customize component styles
Add multiple payment methods using tabs
Handle payment confirmation on backend
Set up webhooks for payment status

Need Help? Explore the following sections for more details:

API Reference
Customization
Examples
FAQ

If you need assistance, our support team is here to help 🚀

Checkout

Web SDK

Android SDK

1. Prerequisites

2. Initialize TBDropin

3.Inject the Dropin SDK

4. Initialize the SDK

5. Mount Payment Components

6. Create & Mount Components

7. Terms & Conditions

8. Customization & Configuration Options

9. Triggering a Payment

​1. Prerequisites

​2. Initialize TBDropin

​3.Inject the Dropin SDK

​4. Initialize the SDK

​5. Mount Payment Components

​6. Create & Mount Components

​7. Terms & Conditions

​8. Customization & Configuration Options

​9. Triggering a Payment

1. Prerequisites

2. Initialize TBDropin

3.Inject the Dropin SDK

4. Initialize the SDK

5. Mount Payment Components

6. Create & Mount Components

7. Terms & Conditions

8. Customization & Configuration Options

9. Triggering a Payment