> ## 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.
# v1.0
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 **\** of any page.
```js theme={null}
```
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.
```html theme={null}
```
### 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:
```js theme={null}
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
```js theme={null}
const tbIframe = new TBIframe();
```
* Initializes the `TBIframe` instance.
***
### Methods
#### 1. `init`
Loads the payment iframe and manages session updates and UI customization.
```js theme={null}
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` | Custom styles for the iframe itself. |
| `mode` | `sandbox or production` | Application Environment |
##### Example:
```js theme={null}
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`.
```js theme={null}
tbIframe.close();
```
##### Example:
```js theme={null}
// Close payment iframe manually
function closeIframe() {
tbIframe.close();
}
document
.getElementById("close_button")
.addEventListener("click", () => closeIframe());
```