Skip to main content
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. Setup for sandbox 
<script src="https://cdn.transactbridge.com/scripts/v1.1/dropin.js"></script>
<script>
  const dropin = new window.TBDropin({
    publishableKey: "pk_test_xxxxxxxxx",
    sessionId: "bs_xxxxxxxxx",
    environment: "sandbox"
  });
</script>
Setup for Production 
<script src="https://cdn.transactbridge.com/scripts/v1.1/dropin.js"></script>
<script>
  const dropin = new window.TBDropin({
    publishableKey: "pk_test_xxxxxxxxx",
    sessionId: "bs_xxxxxxxxx",
    environment: "production"
  });
</script>

​
3. Initialize the SDK

Initialize the SDK using your publishable key and session identifier. 
window.addEventListener("load", async () => {
  await TBDropin.init({
    mode: "sandbox",
    publishKey: "YOUR_PUBLISHABLE_KEY",
  });
});
EnvironmentTypeDescription
publishableKeystringYour TransactBridge publishable key
sessionIdstringBilling Session / Subscription / Mandate ID

​
3. 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>

<div id="upi-collect"></div>

​
4. 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
UPI Collect Component 
const upi = TBDropin.create("tb_upiCollect", {
  placeholder: "Enter UPI ID",
});

upi.mount("#upiCollect");
Return Value upiCollect UPI Collect Object 
{
  element: "tb_upiCollect",
  value: {
    upiId: "user@upi"
  },
  isValid: true,
  error: null,
  componentUrl: "https://dropin.transactbridge.com/upiCollect"
}
UPI Properties
FieldType
upiIdstring
Terms & Conditions 
const tnc = TBDropin.create("tb_tnc", {
  buttonText: "Pay",
});

tnc.mount("#tnc");

​
5. 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");
});

​
6. 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
  • tb_upiCollect
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 (popupConfigStyle) Used to customize the payment popup UI (success, failure, processing, timer, etc.). 
const popupConfigStyle = {
  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 
await TBDropin.init({
  mode: "sandbox",
  publishKey: "YOUR_PUBLISHABLE_KEY",
  popupConfig: popupConfigStyle,
});
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

​
7. Triggering a Payment

Once components are valid, call pay(). 
const result = await TBDropin.pay({
  billingSessionId: "bs_xxxxx",
  payMethod: cardNumber, // or upi component
  cardType: "CC", // optional: CC / DC
});
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 🚀