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

# UPI

Use the UPI Component to collect UPI information from the customer.

### UPI Intent

A component that allows customers to pay using UPI Intent, which opens a UPI app (such as Google Pay, PhonePe, Paytm, etc.) on the user's device.

<Note>
  UPI Intent works only on mobile devices, since it relies on installed UPI apps
  to complete the payment.
</Note>

```js theme={null}
const upiIntent = TBDropin.create("tb_upiIntent", {
  value: {
    upiAppName: upiApp, // GPAY, PHONEPE etc..
  },
});
```

**Returned Value**

**upiIntent** `UPI Intent Object`

```js theme={null}
{
 element: "tb_upiIntent",
 value: {
   channel: "INTENT"
   upiAppName: upiApp, // GPAY, PHONEPE etc..
 },
 isValid: true,
 ready: false
}
```

| Field          | Type     |
| -------------- | -------- |
| **channel**    | `string` |
| **upiAppName** | `string` |

**Code Snippet for upiIntent component**

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

You can view all supported apps here: [Supported UPI Apps](/checkout.js/web-sdk/dropin/customize-your-sdk#9-supported-upi-apps)

### UPI QR

Use the UPI QR Component to collect payments through QR-based UPI flows.

The SDK automatically renders a QR code that customers can scan using any supported UPI application such as PhonePe, Google Pay, Paytm, BHIM, etc.

The QR component supports:

* Popup QR Flow

* Full UI Customization

* Payment Status Handling

<Note>UPI QR payments are supported only on desktop browsers.</Note>

```js theme={null}
const upiQr = TBDropin.create("tb_upiQr", qrOptions);
```

**Returned Value**

upiQr `UPI QR Object`

```js theme={null}
{
 element: "tb_upiQr",
 value: {
  channel: 'QR'
 },
 isValid: true,
 ready: true
}
```

| Field       | Type     |
| ----------- | -------- |
| **channel** | `string` |

### Code Snippet for upiQr component

```js theme={null}
const TBDropin = window.TBDropin();

await TBDropin.init({
  mode: "sandbox", // sandbox or production
  publishKey: "", // your publish key goes here
  popupConfig: popupOptions,
});

const upiQr = TBDropin.create("tb_upiQr", qrOptions);

upiQr.mount("#upiQr");

upiQr.on("ready", (data) => console.log("upiQr", data));
```

### UPI QR Customization

The UPI QR payment UI can be customized using `qrOptions`.

<Card title="Customize Your SDK -> UPI QR" icon="code" href="/checkout.js/web-sdk/dropin/customize-your-sdk#9-upi-qr-qr-based-payments">
  Learn how to customize the UPI QR payment UI
</Card>

`qrOptions` works similarly to popupOptions, but with higher priority.

* Styles defined inside qrOptions overwrite popupOptions
* Missing styles automatically fallback to popupOptions

**Next Steps**

* **A Customize component styles**
* **Add multiple payment methods using tabs**
* **Handle payment confirmation on backend**
* **Set up webhooks for payment status**

**Need Help?**

Explore the following sections for more details:

* <a href="/checkout.js/web-sdk/dropin/overview">**Dropin Overview**</a>
* <a href="/checkout.js/web-sdk/dropin/quickstart">**Quickstart**</a>
* <a href="/checkout.js/web-sdk/dropin/customize-your-sdk">**Customization**</a>

If you need assistance, our support team is here to help 🚀