Skip to main content

​
Setup your development

To manually load Checkout.js, simply add the script link to the <head> of any page. 
<script src="https://cdn.transactbridge.com/scripts/v1.1/checkout.js"></script>

​
Overview

TBIframe v1.1 introduces an event-driven architecture using .on() and .off(). This version supports:
  • Multiple event listeners
  • KYC lifecycle tracking
  • Popup & redirection handling
  • Better iframe lifecycle control

​
Required HTML Elements

Make sure to add the following elements to your page:
Note: Root container must have the ID tb_root. 
<button id="buynow">Buy Now</button>
<button id="close_button">&#215;</button>
<div id="tb_root"></div>

​
Quick Start Example

/**
 * Custom Functions
 * */
function onSessionUpdate(data: object) {...};
function onTransactionUpdate(data: object) {...};
function onKycStatusUpdate(data: object) {...};
function onClose(data: object) {...};

const tbIframe = new TBIframe();

tbIframe.init("https://www.example.com/session/abc123",onSessionUpdate, onClose, onTransactionUpdate, {
  frameStyles: {
    minWidth: '340px',
    height: '600px',
    border: 'none'
  }
  redirectionTarget: '_blank' | '_self'
});
// You can also subscribe the events like this
tbIframe.on('sessionUpdate', onSessionUpdate);
tbIframe.on('transactionUpdate', onTransactionUpdate);
tbIframe.on('close', onClose);

// Kyc events can only be subscribed like this
tbIframe.on('kycStatusUpdate', onKycStatusUpdate);

​
⚠️ Important Note on Mandatory Handlers

Currently, the following handlers are mandatory parameters when calling init():
  • onSessionUpdate
  • onClose
  • onTransactionUpdate
tbIframe.init(
  payUrl,
  onSessionUpdate, // Required
  onClose, // Required
  onTransactionUpdate, // Required
  options,
);
These handlers must be provided during initialization, even if you also register them using the .on() method.

​
🔄 Upcoming Change (Future Versions)

In a future release, these handlers will no longer be required in the init() method. Instead, all event subscriptions will be handled exclusively using the event-driven pattern: 
tbIframe.on("sessionUpdate", onSessionUpdate);
tbIframe.on("transactionUpdate", onTransactionUpdate);
tbIframe.on("close", onClose);

​
1. Create Instance ( Constructor ).

const tbIframe = new TBIframe();

​
2. Initialization & Its Behavior

The init() method can only be executed once per TBIframe instance. If you need to load a new session, create a new instance. 
/**
 * Custom Functions
 * */
function onSessionUpdate(data: object) {...};
function onClose(data: object) {...};
function onTransactionUpdate(data: object) {...};

const payUrl = "https://www.example.com/session/abc123"; // Replace with your session URL

const options = {
  frameStyles: {
    minWidth: '340px',
    height: '600px',
    border: 'none'
  }
  redirectionTarget: '_blank', // opens bank page on new page
};

tbIframe.init(payUrl, onSessionUpdate, onClose, onTransactionUpdate, options);

​
Parameters for init(...):

NameTypeDescription
urlstringThe URL of the payment session.
onSessionUpdate(data: object) => voidTriggered when payment session updates (e.g., success, failure).
onClose(data: object) => voidTriggered when iframe is closed manually or automatically.
onTransactionUpdate(data: object) => voidTriggered when a transaction is initiated. Returns transaction IDs.
optionsTBIframeOptionsObject to customize iframe style and behavior.

​
Options (TBIframeOptions)

PropertyTypeDescription
frameStylesPartial<CSSStyleDeclaration>CSS styles to apply to the iframe.
redirectionTarget_self | _blankTarget for bank page.

​
3. Register Handlers using on

tbIframe.on('sessionUpdate', (data: object) => {
  console.log(data);
  // Do something with the data.
});
Supported Events
EventDescription
sessionUpdatePayment status updates
transactionUpdateTransaction creation
closeIframe closed
kycStatusUpdateKYC lifecycle updates

​
Parameters for on(...):

ParameterTypeDescription
handlerNamesessionUpdate | kycStatusUpdate | close | transactionUpdateHandler Name
callbackFnfunctionCustom function to set with handler name.

​
4. Remove Handlers using off

tbIframe.off("sessionUpdate");

​
Parameters for off(...):

ParameterTypeDescription
handlerNamesessionUpdate | kycStatusUpdate | close | transactionUpdateHandler Name

​
close()

Closes the iframe manually and triggers the onClose callback (if set). 
function closeIframe() {
  tbIframe.close();
}

document.getElementById("close_button").addEventListener("click", closeIframe);

​
Handler Reference

Functions that can be registered using the on method.
NameTypeDescription
sessionUpdate(data: object) => voidTriggered when payment session updates (e.g., success, failure).
close(data: object) => voidTriggered when iframe is closed manually or automatically.
transactionUpdate(data: object) => voidTriggered when a transaction is initiated. Returns transaction IDs.
kycStatusUpdate(data: object) => voidTriggered during the life cycle of KYC. Returns KYC Status.

​
Example Output

Session Data: {
  tbId: "abc123",
  status: "CLOSED",
  type: "billingSession",
  supplierRefId: "ref__001"
}

Transaction Data: {
  txnIds: ["txn_0011223344"],
  checkoutData: {
    payMethod: "UPI"
  }
}

Iframe closed: {
  tbId: "abc123",
  status: "CLOSED",
  type: "billingSession",
  supplierRefId: "ref__001"
}

KYC Data: {
  kycStatus: "PENDING" | "IN_PROGRESS" | "REVIEW_REQUIRED" | "DECLINED" | "VERIFIED" | "EXPIRED"
}

​
Notes

  • The tb_root container must be present in your DOM for the iframe to be injected.
  • You must provide a valid session URL for payments to work.