### TBIframe Initialization and Event Handling

Source: https://developer.transactbridge.com/checkout.js/web-sdk/iframe/v1.1

Provides a quick start example for initializing TBIframe, including mandatory handlers and event subscription methods.

```APIDOC
## Quick Start Example

```js
/**
 * Custom Functions
 * */
function onSessionUpdate(data: object) {...};
function onTransactionUpdate(data: object) {...};
function onKycStatusUpdate(data: object) {...};
function onClose(data: object) {...};

const tbIframe = new TBIframe();

tbIframe.init("https://www.example.com/session/abc123",onSessionUpdate, onClose, onTransactionUpdate, {
  frameStyles: {
    minWidth: '340px',
    height: '600px',
    border: 'none'
  },
  redirectionTarget: '_blank' | '_self'
});
// You can also subscribe the events like this
tbIframe.on('sessionUpdate', onSessionUpdate);
tbIframe.on('transactionUpdate', onTransactionUpdate);
tbIframe.on('close', onClose);

// Kyc events can only be subscribed like this
tbIframe.on('kycStatusUpdate', onKycStatusUpdate);
```

### ⚠️ Important Note on Mandatory Handlers

Currently, the following handlers are mandatory parameters when calling `init()`:

* `onSessionUpdate`
* `onClose`
* `onTransactionUpdate`

```js
tbIframe.init(
  payUrl,
  onSessionUpdate, // Required
  onClose, // Required
  onTransactionUpdate, // Required
  options,
);
```

These handlers must be provided during initialization, even if you also
register them using the .on() method.

### 🔄 Upcoming Change (Future Versions)

In a future release, these handlers will no longer be required in the `init()` method. Instead, all event subscriptions will be handled exclusively using the event-driven pattern:

```js
tbIframe.on("sessionUpdate", onSessionUpdate);
tbIframe.on("transactionUpdate", onTransactionUpdate);
tbIframe.on("close", onClose);
```
```

--------------------------------

### UPI Intent Examples for Different Apps

Source: https://developer.transactbridge.com/checkout.js/web-sdk/dropin/components/upi

Examples demonstrating how to create and mount the upiIntent component for specific UPI applications like Google Pay, PhonePe, and Paytm. Ensure the target element IDs are correctly set.

```javascript
const gpay = TBDropin.create("tb_upiIntent", {
  value: { upiAppName: "GPAY" }
});

gpay.mount("#gPay");

const phonepe = TBDropin.create("tb_upiIntent", {
  value: { upiAppName: "PHONEPE" }
});

phonepe.mount("#phonePe");

const paytm = TBDropin.create("tb_upiIntent", {
  value: { upiAppName: "PAYTM" }
});

paytm.mount("#payTm");
```

--------------------------------

### Initiate Checkout Session

Source: https://developer.transactbridge.com/checkout.js/android-sdk/web-view/v1.0

Start a checkout session by creating a `TransactBridge.Builder` and opening the session.

```APIDOC
## Usage

To start a checkout session, create a `TransactBridge.Builder` to configure listeners and session-specific settings. Then, call the `open()` method on the `TransactBridge` singleton instance.

```java
import com.transactbridge.sdk.TransactBridge;
import com.transactbridge.sdk.listeners.*;
import android.os.Bundle;

// ... inside your Activity or Fragment

TransactBridge.Builder builder = new TransactBridge.Builder()
    .setTransactionListener(transactionData -> {
        // Handle transaction data
    })
    .setSessionListener(sessionData -> {
        // Handle session data
    })
    .setCloseListener(() -> {
        // Handle close event
    })
    .setErrorListener((errorCode, errorMessage, extras) -> {
        // Handle error
    })
    .setAutoClose(true); // Optional: Override global setting for this session

// Start the checkout session
TransactBridge.getInstance().open(this, "YOUR_CHECKOUT_URL", builder);
```
```

--------------------------------

### SDK Initialization

Source: https://developer.transactbridge.com/checkout.js/android-sdk/web-view/v1.0

Initialize the TransactBridge SDK once when your application starts. The SDK uses a singleton pattern.

```APIDOC
## Initialization

Initialize the SDK in your Application's `onCreate` method. This only needs to be done once when your application starts. The SDK uses a singleton pattern for all interactions.

```java
import com.transactbridge.sdk.TransactBridge;
import android.app.Application;

public class MyApplication extends Application {
    @Override
    public void onCreate() {
        super.onCreate();
        // Initialize the TransactBridge singleton
        TransactBridge.getInstance().initialize(this, TransactBridge.LogLevel.ERROR); // Or LogLevel.VERBOSE, LogLevel.NONE
    }
}
```
```

--------------------------------

### Open Checkout Session with Listeners

Source: https://developer.transactbridge.com/checkout.js/android-sdk/web-view/v1.0

Initiate a checkout session by creating a TransactBridge.Builder to configure listeners and session-specific settings, then call open() on the singleton instance. This example demonstrates setting various listeners and optionally overriding the global auto-close setting.

```java
import com.transactbridge.sdk.TransactBridge;
import com.transactbridge.sdk.listeners.*;
import android.os.Bundle;

// ... inside your Activity or Fragment

TransactBridge.Builder builder = new TransactBridge.Builder()
    .setTransactionListener(transactionData -> {
        // Handle transaction data
    })
    .setSessionListener(sessionData -> {
        // Handle session data
    })
    .setCloseListener(() -> {
        // Handle close event
    })
    .setErrorListener((errorCode, errorMessage, extras) -> {
        // Handle error
    })
    .setAutoClose(true); // Optional: Override global setting for this session

// Start the checkout session
TransactBridge.getInstance().open(this, "YOUR_CHECKOUT_URL", builder);
```

--------------------------------

### Initialize TransactBridge SDK

Source: https://developer.transactbridge.com/checkout.js/android-sdk/web-view/v1.0

Initialize the TransactBridge singleton in your Application's onCreate method. This should be done once when the application starts.

```java
import com.transactbridge.sdk.TransactBridge;
import android.app.Application;

public class MyApplication extends Application {
    @Override
    public void onCreate() {
        super.onCreate();
        // Initialize the TransactBridge singleton
        TransactBridge.getInstance().initialize(this, TransactBridge.LogLevel.ERROR); // Or LogLevel.VERBOSE, LogLevel.NONE
    }
}
```

--------------------------------

### List Available UPI Apps

Source: https://developer.transactbridge.com/checkout.js/android-sdk/dropin/v1.0

Retrieve a list of available UPI applications installed on the user's device using PaymentSDK.getUpiApps(). Handle the case where no UPI apps are found.

```java
List<UpiApp> upiApps = PaymentSDK.getUpiApps(this);
if (upiApps.isEmpty()) {
    // Handle case where no UPI apps are found
} else {
    // Display the list of upiApps to the user
}
```

--------------------------------

### Sample Billing Session API Request

Source: https://developer.transactbridge.com/checkout.js/checkout/overview

This JSON payload is an example of a request to the generateBillingSession API. It includes customer email, currency, return URL, user ID, and product details. Adjust 'quoteCurrCode' and 'items' based on your specific products and currency.

```json
{
  "email": "example@gmail.com",
  "quoteCurrCode": "INR",
  "returnUrl": "https://www.transactbridge.com",(Your website url)
  "userId": "692406f30e7db4832a0a7987",
  "items": [
    {
      "name": "Product name",
      "description": "Product description",
      "amount": 100,
      "quantity": 5,
    }
  ]
}
```

--------------------------------

### Sample HTML File with Checkout.js Integration

Source: https://developer.transactbridge.com/checkout.js/web-sdk/iframe/quickstart

A complete HTML file demonstrating how to load and initialize Checkout.js for a payment experience. Remember to update 'payUrl' and 'src' for production environments. This sample is configured for the sandbox environment.

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Transact Bridge Sample Demo</title>
  </head>
  <body style="margin: 0px">
    <style>
      #close_button {
        font-size: x-large;
        font-weight: lighter;
        padding: 0;
        width: 25px;
        height: 25px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 6px;
        background-color: #fff;
        border: 1px solid #007aff;
        color: #007aff;
        position: absolute;
        top: -30px;
        right: -20px;
      }
      #tb_root {
        padding: 6px;
        background: #fff;
        border-radius: 6px;
      }

      dialog {
        background: transparent;
        border: none;
        padding: 0;
        margin-top: 10vw;
        overflow: visible;
      }

      dialog::backdrop {
        background-color: #2b2b2b87;
      }

      .container {
        position: relative;
      }
    </style>
    <button id="buynow">Buy</button>
    <dialog>
      <div class="container">
        <button id="close_button">&#215;</button>
        <div id="tb_root"></div>
      </div>
    </dialog>
    <script>
      const payUrl =
        "https://sandboxpay.transactbridge.com/customer/singlePage/product?billingSessionId=67a472a4a991a5786a5e0bb5"; //replace your link

      const buyButton = document.getElementById("buynow");
      const dialog = document.querySelector("dialog");
      const closeButton = document.getElementById("close_button");

      function closeIframe() {
        dialog.close();
        //do somthing...
      }

      function getSessionData(sessionData) {
        //do somthing...
        console.log({ sessionData });
      }

      function getTxnData(txData) {
        //do somthing...
        console.log({ txData });
      }
    </script>

    <script src="https://cdn.transactbridge.com/scripts/v1.1/checkout.js"></script>
    <script>
      const tbIframe = new TBIframe();

      function buyNow() {
        dialog.showModal();
        tbIframe.init(payUrl, getSessionData, closeIframe, getTxnData);
      }

      buyButton.addEventListener("click", () => {
        buyNow();
      });

      closeButton.addEventListener("click", () => {
        tbIframe.close();
      });
    </script>
  </body>
</html>
```

--------------------------------

### Initialize TBDropin SDK

Source: https://developer.transactbridge.com/checkout.js/web-sdk/dropin/overview

Initialize the TBDropin SDK with the desired environment (sandbox or production) and your publish key. This step is required before using any TBDropin components.

```javascript
await TBDropin.init({
  mode: "sandbox", // or 'production'
  publishKey: "your_publish_key",
});
```

--------------------------------

### Initialize TBDropin SDK for Production

Source: https://developer.transactbridge.com/checkout.js/web-sdk/dropin/quickstart

Load the TBDropin SDK script and initialize it with your publishable key and session ID for the production environment.

```javascript
<script src="https://cdn.transactbridge.com/scripts/v1.1/dropin.js"></script>
<script>
  const dropin = new window.TBDropin({
    publishableKey: "pk_test_xxxxxxxxx",
    sessionId: "bs_xxxxxxxxx",
    environment: "production"
  });
</script>
```

--------------------------------

### Get Unique ID from Terms & Conditions View

Source: https://developer.transactbridge.com/checkout.js/android-sdk/dropin/v1.0

In your Activity or Fragment, obtain the unique ID from the TermsAndConditionsView instance. This ID is necessary for generating payment requests.

```java
TermsAndConditionsView termsAndConditionsView = findViewById(R.id.upi_terms_and_conditions);
String termsId = termsAndConditionsView.getUniqueId();
```

--------------------------------

### Initialize TBDropin SDK with Event Listener

Source: https://developer.transactbridge.com/checkout.js/web-sdk/dropin/quickstart

Initialize the TBDropin SDK after the window loads, specifying the mode and your publishable key. Ensure you replace 'YOUR_PUBLISHABLE_KEY' with your actual key.

```javascript
window.addEventListener("load", async () => {
  await TBDropin.init({
    mode: "sandbox",
    publishKey: "YOUR_PUBLISHABLE_KEY",
  });
});
```

--------------------------------

### Get Component Data

Source: https://developer.transactbridge.com/checkout.js/web-sdk/dropin/components/overview

Retrieves the current data and state of a component. The returned object includes element type, value, error status, validity, and the component's URL.

```javascript
let data = component.data();
```

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

--------------------------------

### Initialize TBDropin with Popup Configuration

Source: https://developer.transactbridge.com/checkout.js/web-sdk/dropin/quickstart

Initialize the TBDropin SDK using 'TBDropin.init', providing the 'mode', 'publishKey', and the custom 'popupConfig' object.

```javascript
await TBDropin.init({
  mode: "sandbox",
  publishKey: "YOUR_PUBLISHABLE_KEY",
  popupConfig: popupConfigStyle,
});
```

--------------------------------

### Initialize SDK with Popup Configuration

Source: https://developer.transactbridge.com/checkout.js/web-sdk/dropin/customize-your-sdk

Initialize the TBDropin SDK with sandbox mode and provide a popup configuration object that includes custom styles for various popup elements.

```javascript
await TBDropin.init({
  mode: "sandbox",
  publishKey: "<your-key>",
  popupConfig: popupConfigStyle,
});
```

--------------------------------

### Initialize TBDropin SDK for Sandbox

Source: https://developer.transactbridge.com/checkout.js/web-sdk/dropin/quickstart

Load the TBDropin SDK script and initialize it with your publishable key and session ID for the sandbox environment.

```javascript
<script src="https://cdn.transactbridge.com/scripts/v1.1/dropin.js"></script>
<script>
  const dropin = new window.TBDropin({
    publishableKey: "pk_test_xxxxxxxxx",
    sessionId: "bs_xxxxxxxxx",
    environment: "sandbox"
  });
</script>
```

--------------------------------

### TBIframe Initialization Method

Source: https://developer.transactbridge.com/checkout.js/web-sdk/iframe/v1.1

Details on how to initialize the TBIframe instance, including parameters and options.

```APIDOC
### 2. Initialization & Its Behavior

The `init()` method can only be executed once per `TBIframe` instance.
If you need to load a new session, create a new instance.

```js
/**
 * Custom Functions
 * */
function onSessionUpdate(data: object) {...};
function onClose(data: object) {...};
function onTransactionUpdate(data: object) {...};

const payUrl = "https://www.example.com/session/abc123"; // Replace with your session URL

const options = {
  frameStyles: {
    minWidth: '340px',
    height: '600px',
    border: 'none'
  },
  redirectionTarget: '_blank', // opens bank page on new page
};

tbIframe.init(payUrl, onSessionUpdate, onClose, onTransactionUpdate, options);
```

#### Parameters for `init(...)`:

| Name                  | Type                     | Description                                                         |
| --------------------- | ------------------------ | ------------------------------------------------------------------- |
| `url`                 | `string`                 | The URL of the payment session.                                     |
| `onSessionUpdate`     | `(data: object) => void` | Triggered when payment session updates (e.g., success, failure).    |
| `onClose`             | `(data: object) => void` | Triggered when iframe is closed manually or automatically.          |
| `onTransactionUpdate` | `(data: object) => void` | Triggered when a transaction is initiated. Returns transaction IDs. |
| `options`             | `TBIframeOptions`        | Object to customize iframe style and behavior.                      |

#### Options (`TBIframeOptions`)

| Property            | Type                           | Description                        |
| ------------------- | ------------------------------ | ---------------------------------- |
| `frameStyles`       | `Partial<CSSStyleDeclaration>` | CSS styles to apply to the iframe. |
| `redirectionTarget` | `_self | _blank`              | Target for bank page.              |
```

--------------------------------

### Launch UPI Payment with Request Details

Source: https://developer.transactbridge.com/checkout.js/android-sdk/dropin/v1.0

Initiate a UPI payment using the payUpi method. Provide all necessary details including billing session ID, token, terms ID, selected UPI app, and timeout. Implement callbacks for success, failure, and cancellation.

```java
UpiPaymentRequest request = new UpiPaymentRequest(
        currentBillingSessionId,
        currentToken,
        termsId, // Obtained from TermsAndConditionsView.getUniqueId()
        0, // Sequence number (if applicable, otherwise 0)
        selectedUpiApp,
        1000L // Timeout in milliseconds
);

PaymentSDK.payUpi(this, request, new PaymentResultListener() {
    @Override
    public void onSuccess(PaymentResult result) {
        // Payment successful
        Toast.makeText(YourActivity.this, "Payment Success: " + result.getTransactionId(), Toast.LENGTH_LONG).show();
        // Further actions like verifying payment status with your backend
    }

    @Override
    public void onFailure(PaymentResult result) {
        // Payment failed
        String error = result.getError() != null ? result.getError().getMessage() : "Unknown error";
        Toast.makeText(YourActivity.this, "Payment Failed: " + error, Toast.LENGTH_LONG).show();
    }

    @Override
    public void onCancel() {
        // User cancelled the payment
        Toast.makeText(YourActivity.this, "Payment Cancelled", Toast.LENGTH_LONG).show();
    }
});
```

--------------------------------

### TBIframe Constructor

Source: https://developer.transactbridge.com/checkout.js/web-sdk/iframe/v1.1

Demonstrates how to create a new instance of the TBIframe.

```APIDOC
### 1. Create Instance ( Constructor ).

```js
const tbIframe = new TBIframe();
```
```

--------------------------------

### Initialize TransactBridge PaymentSDK

Source: https://developer.transactbridge.com/checkout.js/android-sdk/dropin/quickstart

Initialize the PaymentSDK in your Application class's onCreate method. Replace 'YOUR_PUBLISH_KEY' with your actual key and choose the appropriate environment.

```java
import com.transactbridge.sdk.PaymentSDK;
import com.transactbridge.sdk.Environment;

public class MyApplication extends Application {
    @Override
    public void onCreate() {
        super.onCreate();
        PaymentSDK.initialize(this, "YOUR_PUBLISH_KEY", Environment.UAT); // Choose PRODUCTION, SANDBOX, or UAT
    }
}
```

--------------------------------

### Initialize TBIframe with Options

Source: https://developer.transactbridge.com/checkout.js/web-sdk/iframe/v1.1

Initialize the TBIframe with a session URL, required handlers, and optional configuration for frame styles and redirection target. The init() method can only be called once per instance.

```javascript
/**
 * Custom Functions
 * */
function onSessionUpdate(data: object) {...};
function onClose(data: object) {...};
function onTransactionUpdate(data: object) {...};

const payUrl = "https://www.example.com/session/abc123"; // Replace with your session URL

const options = {
  frameStyles: {
    minWidth: '340px',
    height: '600px',
    border: 'none'
  }
  redirectionTarget: '_blank', // opens bank page on new page
};

tbIframe.init(payUrl, onSessionUpdate, onClose, onTransactionUpdate, options);
```

--------------------------------

### Create and Mount upiIntent Component

Source: https://developer.transactbridge.com/checkout.js/web-sdk/dropin/components/upi

Use this to create and mount the upiIntent component for initiating UPI payments via UPI apps. This component only works on mobile devices.

```javascript
const upiIntent = TBDropin.create("tb_upiIntent", {
  value: {
     upiAppName: upiApp?.toUpperCase(),//UPI App Name
    },
})

component.mount('#' + upiApp);
```

--------------------------------

### Initialize TBIframe with Event Handlers

Source: https://developer.transactbridge.com/checkout.js/web-sdk/iframe/v1.1

Initialize the TBIframe instance and subscribe to various events using the .on() method. Note that 'kycStatusUpdate' can only be subscribed via .on().

```javascript
/**
 * Custom Functions
 * */
function onSessionUpdate(data: object) {...};
function onTransactionUpdate(data: object) {...};
function onKycStatusUpdate(data: object) {...};
function onClose(data: object) {...};

const tbIframe = new TBIframe();

tbIframe.init("https://www.example.com/session/abc123",onSessionUpdate, onClose, onTransactionUpdate, {
  frameStyles: {
    minWidth: '340px',
    height: '600px',
    border: 'none'
  }
  redirectionTarget: '_blank' | '_self'
});
// You can also subscribe the events like this
tbIframe.on('sessionUpdate', onSessionUpdate);
tbIframe.on('transactionUpdate', onTransactionUpdate);
tbIframe.on('close', onClose);

// Kyc events can only be subscribed like this
tbIframe.on('kycStatusUpdate', onKycStatusUpdate);
```

--------------------------------

### Create and Mount Terms & Conditions Component

Source: https://developer.transactbridge.com/checkout.js/web-sdk/dropin/quickstart

Instantiate the Terms & Conditions component using TBDropin.create() and mount it to its designated DOM element. The button text can be customized.

```javascript
const tnc = TBDropin.create("tb_tnc", {
  buttonText: "Pay",
});

tnc.mount("#tnc");
```

--------------------------------

### Initiate a Payment

Source: https://developer.transactbridge.com/checkout.js/web-sdk/dropin/overview

Initiate a payment using the TBDropin.pay() method. Ensure that one of the required IDs (billingSessionId, subscriptionId, or mandateId) is provided, the T&C component is accepted, and all inputs are valid.

```javascript
const response = await TBDropin.pay({
  billingSessionId,
  subscriptionId,
  mandateId,
  payMethod: selectedPaymentMethod,
  cardType: "CC", // only for cards
});
```

--------------------------------

### SDK Configuration

Source: https://developer.transactbridge.com/checkout.js/android-sdk/web-view/v1.0

Configure SDK settings such as log level and auto-close behavior.

```APIDOC
## Configuration

You can configure the SDK instance after initialization.

### Log Level

The SDK provides three log levels:

* `TransactBridge.LogLevel.VERBOSE`: Logs all messages.
* `TransactBridge.LogLevel.ERROR`: Logs only error messages. This is the default.
* `TransactBridge.LogLevel.NONE`: Disables all logging.

```java
// Set the log level at any time
TransactBridge.getInstance().setLogLevel(TransactBridge.LogLevel.VERBOSE);
```

### Auto Close

By default, the checkout view will close automatically when the flow is complete. You can disable this behavior globally:

```java
TransactBridge.getInstance().setAutoClose(false);
```

You can also override this setting for a specific session using the `Builder`.
```

--------------------------------

### Create and Mount TNC Component

Source: https://developer.transactbridge.com/checkout.js/web-sdk/dropin/components/terms-and-conditions

Use this to create a TNC component instance, configure its appearance and behavior, and mount it to a DOM element. Ensure the target element exists before mounting.

```javascript
const tnc = TBDropin.create('tb_tnc', {
  buttonText: 'Pay',
  styles: {
    fontFamily: fontRoboto,
    fontSize: '12px',
    color: 'gray'
  },
  link: {
    color: 'blue',
    ':hover': {
      color: 'red'
    }
  },
  fonts
  tnc.mount('#tnc');
});
```

--------------------------------

### Create Card Component

Source: https://developer.transactbridge.com/checkout.js/web-sdk/dropin/customize-your-sdk

Use this to create and configure a card input component. Ensure `inputStyle`, `frameStyle`, `iconConfig`, and `fonts` are defined.

```javascript
const cardNumber = TBDropin.create("tb_cardNumber", {
  placeholder: "Enter Card Number",
  styles: inputStyle,
  frameStyle,
  icon: iconConfig,
  fonts,
});
```

--------------------------------

### Create and Mount Card Payment Components

Source: https://developer.transactbridge.com/checkout.js/web-sdk/dropin/quickstart

Use TBDropin.create() to instantiate card payment fields (card number, holder, expiry, CVV) and mount them to their respective DOM elements.

```javascript
const cardNumber = TBDropin.create("tb_cardNumber", {
  placeholder: "Enter card number",
});

const cardHolder = TBDropin.create("tb_cardHolder", {
  placeholder: "Card holder name",
});

const cardExp = TBDropin.create("tb_cardExp");
const cardCvv = TBDropin.create("tb_cardCvv");

cardNumber.mount("#cardNumber");
cardHolder.mount("#cardHolder");
cardExp.mount("#cardExp");
cardCvv.mount("#cardCvv");
```

--------------------------------

### Initialize and Create Card Holder Component

Source: https://developer.transactbridge.com/checkout.js/web-sdk/dropin/components/cards

Initializes the TransactBridge Drop-in and creates a card holder component with custom styles and event listeners.

```javascript
await TBDropin.init({
  mode: "sandbox", //  sandbox mode or Production mode
  publishKey: "", // your publish key goes here
  popupConfig: popupConfigStyle,
});
cardHolderComp = TBDropin.create("tb_cardHolder", {
  placeholder: "Enter Card Holder Name",
  styles: inputStyle,
  frameStyle: frameStyle,
  fonts,
});
cardHolderComp.mount(`#cardHolder${type.toUpperCase()}`);

cardHolderComp.on("change", (data) => console.log("cardHolder", data));
```

--------------------------------

### Handler Reference

Source: https://developer.transactbridge.com/checkout.js/web-sdk/iframe/v1.1

This section provides a detailed reference for all available handler functions that can be registered using the `on` method, including their types and descriptions.

```APIDOC
## Handler Reference

### Description
Reference for functions that can be registered using the `on` method.

### Handlers

- **sessionUpdate** (`(data: object) => void`)
  - Description: Triggered when payment session updates (e.g., success, failure).
  - Example Output: `{
  tbId: "abc123",
  status: "CLOSED",
  type: "billingSession",
  supplierRefId: "ref__001"
}`

- **close** (`(data: object) => void`)
  - Description: Triggered when iframe is closed manually or automatically.
  - Example Output: `{
  tbId: "abc123",
  status: "CLOSED",
  type: "billingSession",
  supplierRefId: "ref__001"
}`

- **transactionUpdate** (`(data: object) => void`)
  - Description: Triggered when a transaction is initiated. Returns transaction IDs.
  - Example Output: `{
  txnIds: ["txn_0011223344"],
  checkoutData: {
    payMethod: "UPI"
  }
}`

- **kycStatusUpdate** (`(data: object) => void`)
  - Description: Triggered during the life cycle of KYC. Returns KYC Status.
  - Example Output: `{
  kycStatus: "PENDING" | "IN_PROGRESS" | "REVIEW_REQUIRED" | "DECLINED" | "VERIFIED" | "EXPIRED"
}`
```

--------------------------------

### Create and Mount a UPI Collect Component

Source: https://developer.transactbridge.com/checkout.js/web-sdk/dropin/overview

Create a UPI collect payment component using TBDropin.create() and mount it into a specified DOM element. Configure placeholder text, styles, and fonts as needed.

```javascript
const upi = TBDropin.create('tb_upiCollect', {
  placeholder: 'Enter UPI ID',
  styles: {...},
  fonts: []
});

upi.mount('#upiCollect');
```

--------------------------------

### Define Popup Styles

Source: https://developer.transactbridge.com/checkout.js/web-sdk/dropin/customize-your-sdk

Configure extensive styles for the SDK popup, including fonts, component-specific styles (timer, success/failed/processing screens, text elements), and frame styling. This allows for a fully branded payment flow.

```javascript
const popupConfigStyle = {
  fonts,
  components: {
    // Timer
    timer: {
      circle: {
        stroke: "gold !important",
      },
      styles: {
        fontFamily: fontOrbitron,
        color: "dimgray",
        backgroundColor: "white",
      },
    },

    // Status Screens
    success: {
      backgroundColor: "#68c577",
      color: "white",
    },
    failed: {
      backgroundColor: "#e06d6d",
      color: "white",
    },
    processing: {
      backgroundColor: "gold",
      color: "white",
    },

    // Text & Labels
    instruction: {
      fontFamily: fontRoboto,
      color: "gray",
      fontSize: "14px",
    },
    bullet: {
      height: "24px",
      width: "24px",
      backgroundColor: "dimgray",
    },
    label: {
      fontFamily: fontRoboto,
      color: "darkgray",
      fontWeight: "500",
    },
    value: {
      fontFamily: fontRoboto,
      color: "dimgray",
      fontWeight: "normal",
    },
    note: {
      fontFamily: fontRoboto,
      color: "gray",
      fontSize: "10px",
      fontWeight: "500",
    },
    base: {
      fontFamily: fontRoboto,
      backgroundColor: "#fff",
      color: "darkslategray",
    },
    link: {
      color: "blue",
      textDecoration: "none",
      ":hover": {
        cursor: "pointer",
        color: "blueviolet",
      },
    },
    closeButton: {
      color: "darkslategray",
      pointerEvents: "auto",
      backgroundColor: "white",
      height: "24px",
      width: "24px",
    },
  },

  // Popup Frame Styling
  frameStyle: {
    width: "40px",
    height: "60px",
    borderRadius: "15px",
    zIndex: "99999999",
  },
};
```

--------------------------------

### Create TBIframe Instance

Source: https://developer.transactbridge.com/checkout.js/web-sdk/iframe/v1.1

Instantiate the TBIframe object. A new instance should be created for each new session.

```javascript
const tbIframe = new TBIframe();
```

--------------------------------

### Handle Deep Links in Activity

Source: https://developer.transactbridge.com/checkout.js/android-sdk/web-view/v1.0

Override onNewIntent to forward deep link intents to TransactBridge when using non-standard launch modes.

```java
import android.content.Intent;

// ... other imports

@Override
protected void onNewIntent(Intent intent) {
    super.onNewIntent(intent);
    TransactBridge.handleDeepLink(intent);
}
```

--------------------------------

### Initialize and Create Card Number Component

Source: https://developer.transactbridge.com/checkout.js/web-sdk/dropin/components/cards

Initializes the TransactBridge Drop-in in sandbox mode and creates a card number component with custom styles and event listeners.

```javascript
await TBDropin.init({
  mode: "sandbox", //  sandbox mode or Production mode
  publishKey: "", // your publish key goes here
  popupConfig: popupConfigStyle,
});
cardComp = TBDropin.create("tb_cardNumber", {
  placeholder: "Enter Card Number",
  styles: inputStyle,
  frameStyle: frameStyle,
  icon: iconConfig,
  fonts,
});
cardComp.mount(`#cardNumber${type.toUpperCase()}`);

cardComp.on("change", (data) => console.log("cardNumber", data));
```

--------------------------------

### Checkout.js Integration

Source: https://developer.transactbridge.com/checkout.js/web-sdk/iframe/v1.1

Instructions on how to manually load the Checkout.js script into your HTML.

```APIDOC
## Setup your development

To manually load **Checkout.js**, simply add the script link to the **<head>** of any page.

```html
<script src="https://cdn.transactbridge.com/scripts/v1.1/checkout.js"></script>
```
```

--------------------------------

### Initialize and Create Card CVV Component

Source: https://developer.transactbridge.com/checkout.js/web-sdk/dropin/components/cards

Initializes the TransactBridge Drop-in and creates a card CVV component with custom styles and event listeners. Note: The provided code snippet is for cardCvv but the description mentions cardHolder component.

```javascript
await TBDropin.init({
  mode: "sandbox", //  sandbox mode or Production mode
  publishKey: "", // your publish key goes here
  popupConfig: popupConfigStyle,
});
cardCvvComp = TBDropin.create("tb_cardCvv", {
  styles: inputStyle,
  frameStyle: frameStyle,
  fonts,
});
cardCvvComp.mount(`#cardCvv${type.toUpperCase()}`);

cardCvvComp.on("change", (data) => console.log("cardCvv", data));
```

--------------------------------

### Listen to Component Events

Source: https://developer.transactbridge.com/checkout.js/web-sdk/dropin/quickstart

Use the 'on' method to listen for 'change' and 'ready' events from components like cardNumber. This is useful for tracking user input and component lifecycle.

```javascript
cardNumber.on("change", (data) => {
  console.log(data);
});

cardNumber.on("ready", () => {
  console.log("Card Number component mounted");
});
```

--------------------------------

### Create and Mount upiCollect Component

Source: https://developer.transactbridge.com/checkout.js/web-sdk/dropin/components/upi

Use this to create and mount the upiCollect component for accepting UPI IDs. Ensure the target element ID matches.

```javascript
const upi = TBDropin.create("tb_upiCollect", {
  placeholder: "Enter UPI ID",
});

upi.mount("#upiCollect");
```

--------------------------------

### Handle Component Ready Event

Source: https://developer.transactbridge.com/checkout.js/web-sdk/dropin/components/overview

Registers a callback function to be executed when a component is ready for user interaction. The callback receives data identical to `component.data()`.

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

--------------------------------

### TransactBridge Singleton API

Source: https://developer.transactbridge.com/checkout.js/android-sdk/web-view/v1.0

Reference for the static methods available on the TransactBridge singleton instance.

```APIDOC
## TransactBridge Singleton API

### `getInstance()`

*   **Description**: Returns the singleton instance of the SDK.
*   **Method**: Static

### `initialize(Context, LogLevel)`

*   **Description**: Initializes the SDK. Should be called once.
*   **Method**: Static

### `setLogLevel(LogLevel)`

*   **Description**: Sets the log level for the SDK.
*   **Method**: Static

### `setAutoClose(boolean)`

*   **Description**: Enables or disables automatic closing globally.
*   **Method**: Static

### `open(Context, String, TransactBridge.Builder)`

*   **Description**: Opens the checkout flow with session-specific listeners and settings.
*   **Method**: Static

### `close()`

*   **Description**: Manually closes the SDK. **Note:** To prevent potential deadlocks, you should not call `TransactBridge.close()` from within the `SessionListener.onSessionData()` callback. The SDK will ignore any `close()` requests made from this callback.
*   **Method**: Static
```

--------------------------------

### Create Card CVV Component

Source: https://developer.transactbridge.com/checkout.js/web-sdk/dropin/components/cards

Use this to create a component for accepting the card CVV. This component does not accept any parameters.

```javascript
const cardCvv = TBDropin.create("tb_cardCvv");
```

--------------------------------

### Component Mounting API

Source: https://developer.transactbridge.com/checkout.js/web-sdk/dropin/components/overview

API methods for mounting and unmounting payment components.

```APIDOC
## Mount Component

### Description
Mounts a payment component into a specified DOM container.

### Method
`mount`

### Endpoint
N/A (Client-side SDK method)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```javascript
component.mount("#componentContainer");
```

## Unmount Component

### Description
Unmounts the currently mounted payment component from its DOM container.

### Method
`unmount`

### Endpoint
N/A (Client-side SDK method)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```javascript
component.unmount();
```
```

--------------------------------

### Customize Payment Popup UI

Source: https://developer.transactbridge.com/checkout.js/web-sdk/dropin/quickstart

Create a 'popupConfigStyle' object to customize the appearance of the payment popup, including fonts, colors for success/failure/processing states, and instruction text styles.

```javascript
const popupConfigStyle = {
  fonts,

  components: {
    success: {
      backgroundColor: "#68c577",
      color: "white",
    },
    failed: {
      backgroundColor: "#e06d6d",
      color: "white",
    },
    processing: {
      backgroundColor: "gold",
      color: "white",
    },
    instruction: {
      fontFamily: '"Roboto", sans-serif',
      color: "gray",
      fontSize: "14px",
    },
  },

  frameStyle: {
    width: "40px",
    height: "60px",
    borderRadius: "15px",
    zIndex: "99999999",
  },
};
```

--------------------------------

### Create Terms & Conditions Component

Source: https://developer.transactbridge.com/checkout.js/web-sdk/dropin/customize-your-sdk

Customize the Terms & Conditions component, including button text, styling, and link colors. Ensure `fontRoboto` and `fonts` are defined.

```javascript
const tnc = TBDropin.create("tb_tnc", {
  buttonText: "Pay",
  styles: {
    fontFamily: fontRoboto,
    fontSize: "12px",
    color: "gray",
  },
  link: {
    color: "blue",
    ":hover": {
      color: "red",
    },
  },
  fonts,
});
```

--------------------------------

### Create TBDropin Card Number Component with Custom Fonts

Source: https://developer.transactbridge.com/checkout.js/web-sdk/dropin/quickstart

Initialize a 'tb_cardNumber' component using TBDropin.create, passing a configuration object that includes the custom 'fonts' array.

```javascript
TBDropin.create("tb_cardNumber", {
  fonts,
});
```

--------------------------------

### Create UPI Intent Component

Source: https://developer.transactbridge.com/checkout.js/web-sdk/dropin/customize-your-sdk

Initialize a UPI Intent component to redirect users to their preferred UPI app. The `upiAppName` must be one of the supported values. This flow is only supported on mobile devices.

```javascript
const component = TBDropin.create("tb_upiIntent", {
  value: {
    upiAppName: upiApp?.toUpperCase(),,
  },
});

component.mount('#' + upiApp)
```

--------------------------------

### Create Card Holder Component

Source: https://developer.transactbridge.com/checkout.js/web-sdk/dropin/components/cards

Use this to create a component for accepting the cardholder's name. It accepts a placeholder value.

```javascript
const cardHolder = TBDropin.create("tb_cardHolder", {
  placeholder: "Card holder name",
});
```

--------------------------------

### Mount Component

Source: https://developer.transactbridge.com/checkout.js/web-sdk/dropin/components/overview

Mounts a component into a specified DOM container. Use this to render payment input fields like card number or CVV.

```javascript
component.mount("#componentContainer");
```

--------------------------------

### Configure Icon Styles

Source: https://developer.transactbridge.com/checkout.js/web-sdk/dropin/customize-your-sdk

Define styles for payment component icons, such as width and height, to maintain brand consistency.

```javascript
const iconConfig = {
  styles: {
    width: "20px",
    height: "20px",
  },
};
```

--------------------------------

### Initiate Payment with TBDropin

Source: https://developer.transactbridge.com/checkout.js/web-sdk/dropin/quickstart

Call the 'TBDropin.pay' method with a 'billingSessionId', the payment method component (e.g., cardNumber), and optionally the 'cardType' to trigger a payment.

```javascript
const result = await TBDropin.pay({
  billingSessionId: "bs_xxxxx",
  payMethod: cardNumber, // or upi component
  cardType: "CC", // optional: CC / DC
});
```

--------------------------------

### Add SDK Dependency (build.gradle)

Source: https://developer.transactbridge.com/checkout.js/android-sdk/web-view/quickstart

Add this line to your app's build.gradle file to include the TransactBridge SDK.

```gradle
implementation 'com.transactbridge:sdk:1.0.0'
```

--------------------------------

### Declare TransactBridge SDK Dependencies

Source: https://developer.transactbridge.com/checkout.js/android-sdk/dropin/quickstart

Include these essential dependencies in your app's build.gradle file for the TransactBridge SDK to function correctly.

```gradle
dependencies {
    // ... other dependencies

    // TransactBridge SDK dependencies
    implementation 'com.google.code.gson:gson:2.10.1'
    implementation 'com.android.volley:volley:1.2.1'
    implementation 'com.squareup.okhttp3:okhttp:4.12.0'
    implementation 'com.squareup.okhttp3:logging-interceptor:4.12.0'
```

--------------------------------

### Future Event Subscription Pattern

Source: https://developer.transactbridge.com/checkout.js/web-sdk/iframe/v1.1

In future versions, mandatory handlers will be removed from init(). All event subscriptions will exclusively use the .on() method.

```javascript
tbIframe.on("sessionUpdate", onSessionUpdate);
tbIframe.on("transactionUpdate", onTransactionUpdate);
tbIframe.on("close", onClose);
```

--------------------------------

### Event Handling Listeners

Source: https://developer.transactbridge.com/checkout.js/android-sdk/web-view/v1.0

Handle various events during the checkout process using provided listeners.

```APIDOC
## Event Handling

The SDK uses listeners to notify your application of events for a specific session.

### TransactionListener

* `onTxnData(TransactionData transactionData)`: Called with transaction details.

**TransactionData**

| Method              | Description                                      |
| ------------------- | ------------------------------------------------ |
| `getTxnIds()`       | Returns a `List<String>` of transaction IDs.     |
| `getCheckoutData()` | Returns `CheckoutData` with payment method info. |

### SessionListener

* `onSessionData(SessionData sessionData)`: Called for session-related events.

**SessionData**

| Method        | Description                                      |
| ------------- | ------------------------------------------------ |
| `getStatus()` | Returns the status of the session as a `String`. |
| `getTbId()`   | Returns the TransactBridge ID as a `String`.     |
| `getType()`   | Returns the type of session event as a `String`. |

### CloseListener

* `onClose()`: Called when the sdk is closed.

### TransactBridgeErrorListener

* `onError(int errorCode, String message, @Nullable Bundle extras)`: Called when an error occurs.

The `errorCode` provides a specific reason for the error.

| Error Code                   | Value | Description                                                                                                     |
| ---------------------------- | ----- | --------------------------------------------------------------------------------------------------------------- |
| `ERROR_INTENT_LAUNCH_FAILED` | 1001  | Failed to launch an external application, such as a UPI or other payment app.                                   |
| `ERROR_WEBVIEW_LOAD_FAILED`  | 1002  | The WebView failed to load the checkout page due to a network error, SSL issue, or other configuration problem. |
| `INVALID_URL`                | 1003  | The URL provided when opening the checkout session was invalid.                                                 |
```

--------------------------------

### Add SDK Dependency (build.gradle.kts)

Source: https://developer.transactbridge.com/checkout.js/android-sdk/web-view/quickstart

Add this line to your app's build.gradle.kts file to include the TransactBridge SDK.

```kotlin
implementation("com.transactbridge:sdk:1.0.0");
```

--------------------------------

### Create Card Number Component

Source: https://developer.transactbridge.com/checkout.js/web-sdk/dropin/components/cards

Use this to create a component for accepting card numbers. It requires a placeholder value.

```javascript
const cardNumber = TBDropin.create("tb_cardNumber", {
  placeholder: "Enter card number",
});
```

--------------------------------

### Create Card Expiry Component

Source: https://developer.transactbridge.com/checkout.js/web-sdk/dropin/components/cards

Use this to create a component for accepting the card expiry date. This component does not accept any parameters.

```javascript
const cardExp = TBDropin.create("tb_cardExp");
```

--------------------------------

### Initialize and Create Card Expiry Component

Source: https://developer.transactbridge.com/checkout.js/web-sdk/dropin/components/cards

Initializes the TransactBridge Drop-in and creates a card expiry component with custom styles and event listeners. Note: The provided code snippet is for cardExp but the description mentions cardHolder component.

```javascript
await TBDropin.init({
  mode: "sandbox", //  sandbox mode or Production mode
  publishKey: "", // your publish key goes here
  popupConfig: popupConfigStyle,
});
cardExpComp = TBDropin.create("tb_cardExp", {
  styles: inputStyle,
  frameStyle: frameStyle,
  fonts,
});
cardExpComp.mount(`#cardExp${type.toUpperCase()}`);

cardExpComp.on("change", (data) => console.log("cardExp", data));
```

--------------------------------

### Load Checkout.js Script

Source: https://developer.transactbridge.com/checkout.js/web-sdk/iframe/quickstart

Include this script tag in the <head> of your HTML to manually load Checkout.js.

```javascript
<script src="https://cdn.transactbridge.com/scripts/v1.1/checkout.js"></script>
```

--------------------------------

### Mandatory Handlers for init()

Source: https://developer.transactbridge.com/checkout.js/web-sdk/iframe/v1.1

The 'onSessionUpdate', 'onClose', and 'onTransactionUpdate' handlers are currently mandatory parameters for the init() method. They must be provided even if registered via .on().

```javascript
tbIframe.init(
  payUrl,
  onSessionUpdate, // Required
  onClose, // Required
  onTransactionUpdate, // Required
  options,
);
```

--------------------------------

### Register Event Handlers using `on`

Source: https://developer.transactbridge.com/checkout.js/web-sdk/iframe/v1.1

This section explains how to register callback functions for various events emitted by the TransactBridge iframe. The `on` method allows you to listen for specific events and execute custom logic when they occur.

```APIDOC
## POST /tbIframe.on

### Description
Registers a callback function to handle specific events from the TransactBridge iframe.

### Method
POST (simulated for documentation purposes, actual usage is a method call)

### Endpoint
N/A (Method call on `tbIframe` object)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
- **handlerName** (string) - Required - The name of the event handler to register. Supported values: `sessionUpdate`, `kycStatusUpdate`, `close`, `transactionUpdate`.
- **callbackFn** (function) - Required - The custom function to be executed when the specified event is triggered.

### Request Example
```javascript
tbIframe.on('sessionUpdate', (data) => {
  console.log(data);
});
```

### Response
This method does not return a value directly, but it registers a callback function.

#### Success Response (200)
N/A

#### Response Example
N/A
```

--------------------------------

### Deep Link Configuration

Source: https://developer.transactbridge.com/checkout.js/android-sdk/web-view/v1.0

Configuration for handling deep links when using specific launch modes in your Activity.

```APIDOC
## Deep Link Configuration

If your app's Activity that integrates the TransactBridge SDK uses a `launchMode` other than `standard` (e.g., `singleTop`, `singleTask`, or `singleInstance`), you must forward deep link intents to the SDK.

In your Activity, override the `onNewIntent` method and pass the `Intent` to the `TransactBridge.handleDeepLink()` method:

```java
@Override
protected void onNewIntent(Intent intent) {
    super.onNewIntent(intent);
    TransactBridge.handleDeepLink(intent);
}
```
```

--------------------------------

### Configure Card/UPI Icons

Source: https://developer.transactbridge.com/checkout.js/web-sdk/dropin/quickstart

Define an 'iconConfig' object to customize the size of card or UPI icons, or to hide them entirely by setting 'hide: true'.

```javascript
const iconConfig = {
  // hide: true, // optional (default: false)
  styles: {
    width: "20px",
    height: "20px",
  },
};
```

--------------------------------

### HTML Structure for Payment Components

Source: https://developer.transactbridge.com/checkout.js/web-sdk/dropin/quickstart

Define container elements in your HTML for mounting various payment components like card details and UPI.

```html
<div id="card-number"></div>
<div id="card-holder"></div>
<div id="card-exp"></div>
<div id="card-cvv"></div>

<div id="upi-collect"></div>
```

--------------------------------

### TransactBridge.Builder API

Source: https://developer.transactbridge.com/checkout.js/android-sdk/web-view/v1.0

Reference for the methods available on the TransactBridge.Builder class for configuring a checkout session.

```APIDOC
## TransactBridge.Builder API

The builder is used to configure a single checkout session.

### `setTransactionListener(...)`

*   **Description**: Sets the `TransactionListener` for the session.
*   **Method**: Instance

### `setSessionListener(...)`

*   **Description**: Sets the `SessionListener` for the session.
*   **Method**: Instance

### `setCloseListener(...)`

*   **Description**: Sets the `CloseListener` for the session.
*   **Method**: Instance

### `setErrorListener(...)`

*   **Description**: Sets the `TransactBridgeErrorListener` for the session.
*   **Method**: Instance

### `setAutoClose(boolean)`

*   **Description**: Overrides the global auto-close setting for this specific session.
*   **Method**: Instance
```

--------------------------------

### Add Terms & Conditions View in XML

Source: https://developer.transactbridge.com/checkout.js/android-sdk/dropin/v1.0

Include the TermsAndConditionsView in your layout XML file to display terms and conditions to the user. This view provides a unique ID required for payment requests.

```xml
<com.transactbridge.sdk.view.TermsAndConditionsView
    android:id="@+id/upi_terms_and_conditions"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="16dp" />
```

--------------------------------

### Apply Multiple Styles to Card Number Component

Source: https://developer.transactbridge.com/checkout.js/web-sdk/dropin/quickstart

When creating a 'tb_cardNumber' component, pass an object containing 'placeholder', 'styles' (inputStyle), 'frameStyle', 'icon' (iconConfig), and 'fonts' to customize its appearance and behavior.

```javascript
TBDropin.create("tb_cardNumber", {
  placeholder: "Enter Card Number",
  styles: inputStyle,
  frameStyle,
  icon: iconConfig,
  fonts,
});
```