Overview

Learn about the components which are available with Transact bridge. The TB Drop-in SDK provides small, isolated iframe-based payment components such as:

Card Number
Card Holder
Expiry
CVV
UPI Intent
UPI QR

Each atom runs inside a secure sandboxed iframe and communicates with the parent page using a message-based architecture. The parent page interacts with all atoms using the TBDropin SDK. This overview explains:

How the SDK loads
What atoms are
How mounting works
How events & communication work
What happens during payment
Folder & architecture summary

Methods

1. Mount component

A component can be mounted in DOM container

Syntax: `component.mount(querySelector)`;

Example

component.mount("#componentContainer");

2. Unmount component

To unmount a component from DOM container. Use component.mount to mount again

Syntax: `component.unmount()`;

3. Get component data

To get the data and state of a component

let data = component.data();

Return

{
  element: string,
  value: object,
  error: object | null,
  isValid: boolean,
  componentUrl: string
}

Fields Explained

Name	Description	Default
element	Unique identifier / type of the component (e.g. `tb_cardNumber`, `tb_upiCollect`)	`undefined`
value	Current value of the component. Shape depends on component type	`{}`
error	Error object returned by the component, if any	`null`
isValid	Indicates whether the component input is valid	`false`
componentUrl	URL of the iframe source used to render the component	`undefined`

4. Clear component

Trigger clear on component to empty it. Can only be applied if kind of the component is input

Syntax: component.clear();

Events

You can register a callback function to various events that occur with a component. The basic syntax is component.on(eventName, callBackFunction)

ready

Triggers when a component is ready for user interaction

component.on("ready", function (data) {
  //data is same as component.data()
});

change

Triggers on component kind input whenever change happens for the value

component.on("change", function (data) {
  //data is same as component.data()
});

click

Triggers on component kind button when clicked

component.on("click", function (data) {
  //data is same as component.data()
});

close

Triggered when the payment status screen is closed after the transaction finishes.

tbInstance.on("close", function (data) {
  //data is same as component.data()
});

Checkout

Web SDK

Android SDK

Methods

1. Mount component

2. Unmount component

3. Get component data

Return

4. Clear component

Events

ready

change

click

close

​Methods

​1. Mount component

​2. Unmount component

​3. Get component data

​Return

​4. Clear component

​Events

​ready

​change

​click

​close

Methods

1. Mount component

2. Unmount component

3. Get component data

Return

4. Clear component

Events

ready

change

click

close