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.

Prerequisites

Before you begin, ensure you have:

A Billing Session ID, Subscription ID, or Mandate ID
Your TransactBridge Publishable Key
A Session Token returned when creating a Billing Session, Subscription, or Mandate

You can obtain all the required credentials and payment identifiers from the TransactBridge platform and APIs. Refer to the documentation below.

API Reference

View the API documentation

1. Load the SDK

To manually load Checkout.js, simply add the script link to the <head> of any page.

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

2. Initialize TBDropin

Initialize the SDK using your publishable key and mode (sandbox or production).

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

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

Environment	Type	Description
publishableKey	`string`	Your TransactBridge publishable key. You can obtain it from the Merchant Dashboard or your TransactBridge account representative.
mode	`string`	Specifies the environment in which the SDK operates. Supported values are `sandbox` for testing and `production` for live transactions.

3. Create payment components

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

<div id="cardNumber"></div>
<div id="cardHolder"></div>
<div id="cardExp"></div>
<div id="cardCvv"></div>
<div id="tnc"></div>

4. Mount components into the DOM

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");

Terms & Conditions Use the TNC component to display Terms & Conditions and capture user consent before initiating payment. A component used to render Terms & Conditions text along with a configurable Pay button label.

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

tnc.mount("#tnc");

5. Trigger payment using pay()

Once components are valid, call pay().

const result = await TBDropin.pay({
  billingSessionId: "bs_xxxxx", // billingSessionId || subscriptionId || mandateId
  payMethod: cardNumber,
  cardType: "CC"
  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`	A short-lived token returned when creating a Billing Session, Subscription, or Mandate. It is required to securely initialize the SDK and process payments.
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`.

Response

pay() returns a promise that resolves with the transaction initiation status. Example Success Response

{
  "status": "success",
  "data": {
    "reqId": "req_h6rb9f1rc2",
    "tbId": "6a33e9e8436f050db3d44bfd",
    "type": "billingSession",
    "supplierRefId": "6a33e9e8436f050db3d44bfd_10",
    "status": "CLOSED",
    "transactionId": "1648237qr8723r923",
    "transactionStatus": "SUCCESS",
    "error": null
  }
}

Example Failed Response

{
  "status": "error",
  "data": {
    "reqId": "req_xxxxx",
    "tbId": "6a33e9e8436f050db3d44bfd",
    "type": "billingSession",
    "supplierRefId": "6a33e9e8436f050db3d44bfd_9",
    "status": "STARTED",
    "transactionId": "164823712128723923",
    "transactionStatus": "FAILED",
    "error": {
      "code": "DEBIT_HAS_BEEN_FAILED",
      "message": "Debit has been failed"
    }
  }
}

Note: The pay() method initiates the payment flow and returns the transaction state. The final payment outcome (Success or Failed) is determined through the payment status flow and status events.

Next Steps

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

Checkout

Web SDK

Android SDK

Prerequisites

API Reference

1. Load the SDK

2. Initialize TBDropin

3. Create payment components

4. Mount components into the DOM

5. Trigger payment using pay()

Response

​Prerequisites

API Reference

​1. Load the SDK

​2. Initialize TBDropin

​3. Create payment components

​4. Mount components into the DOM

​5. Trigger payment using pay()

​Response

Prerequisites

1. Load the SDK

2. Initialize TBDropin

3. Create payment components

4. Mount components into the DOM

5. Trigger payment using pay()

Response