Skip to main content
This version of the TransactBridge Web SDK has been deprecated and will be removed in a future release. Please use the latest SDK version v1.1 for new integrations.

​
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.0/checkout.js"></script>
This version focuses on callback-based communication, where the merchant application listens to important payment events through function parameters passed during initialization. Using v1.0, you can:
  • Open a secure payment iframe
  • Receive payment session updates
  • Track transaction creation
  • Detect when the iframe is closed (manually or automatically) This version is best suited for basic payment flows where advanced event handling or KYC tracking is not required.

​
Usage

​
1. Required HTML Structure

Include a Buy Now button, a modal dialog, and an iframe container:
📝 Note: Root element ID must be tb_root — this is where the iframe will be injected. 
<button id="buynow">Buy Now</button>
<button id="close_button">&#215;</button>
<div id="tb_root"></div>

​
2. Initialize and Use TBIframe

When the user clicks Buy Now, the following happens:
  1. A TBIframe instance is created.
  2. init() is called with the session URL.
  3. The iframe opens and loads the payment flow.
  4. During the payment lifecycle:
  • onSessionUpdate is called when payment status changes
  • onTransactionUpdate is called when a transaction is initiated
  • onClose is called when the iframe closes
Create an instance and handle the payment session: 
const payUrl = "https://www.example.com"; // your session URL

const options = {
  frameStyles: { minWidth: "340px" },
};

const tbIframe = new TBIframe();

// Callback on iframe close
function onCloseIframe(sessionData) {
  console.log("Iframe closed:", sessionData);
  // do something...
}

// Handle session updates
function getSessionData(sessionData) {
  console.log("Session Data:", sessionData);
  // do something...
}

// Handle transaction updates
function getTxnData(txData) {
  console.log("Transaction Data:", txData);
  // do something...
}

// Open payment iframe
function startIframe() {
  tbIframe.init(payUrl, getSessionData, onCloseIframe, getTxnData, options);
}

document
  .getElementById("buynow")
  .addEventListener("click", () => startIframe());

​
TBIframe API Reference

​
Constructor

const tbIframe = new TBIframe();
  • Initializes the TBIframe instance.

​
Methods

​
1. init

Loads the payment iframe and manages session updates and UI customization. 
tbIframe.init(url, onSessionUpdate, onClose, onTransactionUpdate, options);
Parameters:
NameTypeDescription
urlstringSession URL.
onSessionUpdate(data: object) => voidCallback triggered on payment session update (e.g., completion).
onClose(data: object) => voidCallback triggered when iframe closes manually or automatically.
onTransactionUpdate(data: string[]) => voidCallback triggered on payment trigger; returns an array of transaction IDs.
optionsTBIframeOptionsObject for customizing iframe styles and behavior.
Options TBIframeOptions Properties:
PropertyTypeDescription
frameStylesPartial<CSSStyleDeclaration>Custom styles for the iframe itself.
Example:
tbIframe.init(
  "https://www.example.com",
  (sessionData) => console.log("Session:", sessionData),
  (sessionData) => console.log("Iframe closed", sessionData),
  (txnData) => console.log("Transaction:", txnData),
  {
    frameStyles: { minWidth: "340px" },
  },
);

​
2. close()

Closes the iframe and removes it from the DOM.
Also triggers the onClose callback if it was provided during init. 
tbIframe.close();
Example:
// Close payment iframe manually
function closeIframe() {
  tbIframe.close();
}

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