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.

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

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

Returned Value upiIntent UPI Intent Object

{
 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

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

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

UPI QR payments are supported only on desktop browsers.

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

Returned Value upiQr UPI QR Object

{
 element: "tb_upiQr",
 value: {
  channel: 'QR'
 },
 isValid: true,
 ready: true
}

Field	Type
channel	`string`

Code Snippet for upiQr component

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.

Customize Your SDK -> UPI QR

Learn how to customize the UPI QR payment UI

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:

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

Checkout

Web SDK

Android SDK

UPI Intent

UPI QR

Code Snippet for upiQr component

UPI QR Customization

Customize Your SDK -> UPI QR

​UPI Intent

​UPI QR

​Code Snippet for upiQr component

​UPI QR Customization

Customize Your SDK -> UPI QR

UPI Intent

UPI QR

Code Snippet for upiQr component

UPI QR Customization