> ## 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.
# 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
```js theme={null}
```
## 4. Initialize the SDK
Initialize the SDK using your publishable key and session identifier.
```js theme={null}
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.
```js theme={null}
```
## 6. Create & Mount Components
All payment fields are created using TBDropin.create()
and attached to the DOM using mount().
**Card Payment Components**
```js theme={null}
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`
```js theme={null}
{
element: "tb_cardNumber",
value: {
brand: null,
cvvLength: 3
},
isValid: false,
error: null,
componentUrl: "https://dropin.transactbridge.com/cardNumber"
}
```
cardExp `Card Expirey Object`
```js theme={null}
{
element: "tb_cardExp",
value: {
cardExp: ""
},
isValid: false,
error: {
message: "INCOMPLETE_EXP",
code: "INCOMPLETE_EXP"
},
componentUrl: "https://dropin.transactbridge.com/cardExp"
}
```
cardCvv `Card CVV Object`
```js theme={null}
{
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`
```js theme={null}
{
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**
```js theme={null}
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.
```js theme={null}
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.
```js theme={null}
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
```js theme={null}
TBDropin.create("tb_cardNumber", {
fonts,
});
```
**Input Style (inputStyle)**
Used to style the actual input field inside the iframe.
```js theme={null}
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.
```js theme={null}
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.
```js theme={null}
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.).
```js theme={null}
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
```js theme={null}
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.
```js theme={null}
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().
```js theme={null}
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 🚀