Skip to main content
The TB Drop-in SDK provides small, isolated iframe-based payment components (called Atoms) such as:
  • Card Number
  • Card Holder
  • Expiry
  • CVV
  • UPI
  • UPI Intent
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
NameDescriptionDefault
elementUnique identifier / type of the component (e.g. tb_cardNumber, tb_upiCollect)undefined
valueCurrent value of the component. Shape depends on component type{}
errorError object returned by the component, if anynull
isValidIndicates whether the component input is validfalse
componentUrlURL of the iframe source used to render the componentundefined

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