v1.0 - TransactBridge Developer Kit

TBIframe (Version 1) is a simple JavaScript-based integration that allows merchants to embed Transact Bridge’s hosted payment flow inside an iframe.

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:

A TBIframe instance is created.
init() is called with the session URL.
The iframe opens and loads the payment flow.
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" },
  mode: 'sandbox' // 'sandbox' | 'production'
};

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:

Name	Type	Description
`url`	`string`	Session URL.
`onSessionUpdate`	`(data: object) => void`	Callback triggered on payment session update (e.g., completion).
`onClose`	`(data: object) => void`	Callback triggered when iframe closes manually or automatically.
`onTransactionUpdate`	`(data: string[]) => void`	Callback triggered on payment trigger; returns an array of transaction IDs.
`options`	`TBIframeOptions`	Object for customizing iframe styles and behavior.

Options TBIframeOptions Properties:

Property	Type	Description
`frameStyles`	`Partial<CSSStyleDeclaration>`	Custom styles for the iframe itself.
`mode`	`sandbox or production`	Application Environment

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" },
    mode: 'sandbox' // 'sandbox' | 'production'
  },
);

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

​Setup your development

​Usage

​1. Required HTML Structure

​2. Initialize and Use TBIframe

​TBIframe API Reference

​Constructor

​Methods

​1. init

Parameters:

Options TBIframeOptions Properties:

Example:

​2. close()

Example:

Setup your development

Usage

1. Required HTML Structure

2. Initialize and Use `TBIframe`

TBIframe API Reference

Constructor

Methods

1. `init`

2. `close()`