> ## 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.

# 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

```js theme={null}
Syntax: `component.mount(querySelector)`;
```

**Example**

```js theme={null}
component.mount("#componentContainer");
```

### 2. Unmount component

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

```js theme={null}
Syntax: `component.unmount()`;
```

### 3. Get component data

To get the data and state of a component

```js theme={null}
let data = component.data();
```

#### Return

```js theme={null}
{
  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

```js theme={null}
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

```js theme={null}
component.on("ready", function (data) {
  //data is same as component.data()
});
```

#### change

Triggers on component kind input whenever change happens for the value

```js theme={null}
component.on("change", function (data) {
  //data is same as component.data()
});
```

#### click

Triggers on component kind button when clicked

```js theme={null}
component.on("click", function (data) {
  //data is same as component.data()
});
```

#### close

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

```js theme={null}
tbInstance.on("close", function (data) {
  //data is same as component.data()
});
```