Skip to main content
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",
  });
});
EnvironmentTypeDescription
publishableKeystringYour TransactBridge publishable key
sessionIdstringBilling 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
FieldTypeDescription
elementstringComponent identifier
valueobjectComponent-specific data returned by the field
isValidbooleanField-specific value
errorobjectnull or Validation error (if any)
componentUrlstringHosted 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
OptionPurpose
fontsLoad and apply custom fonts
inputStyleStyle input fields
frameStyleStyle iframe container
iconConfigCustomize / hide icons
popupConfigCustomize payment popup

​
9. Triggering a Payment

Once components are valid, call pay(). 
const result = await TBDropin.pay({
  billingSessionId: "bs_xxxxx",
  payMethod: component,
  sessionToken,
});
FieldTypeDescription
billingSessionIdstringUsed for one-time payments.
subscriptionIdstringUsed for recurring payments (subscriptions).
mandateIdstringUsed during mandate setup for recurring payments.
sessionTokenstringToken received after creating a payment session; required to proceed with payment.
payMethodComponentPayment component/interface used to process the transaction.
cardTypestringType of card: CC (Credit Card) or DC (Debit Card).
updateMandateRequiredbooleanSet 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 🚀