Skip to main content
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
}
FieldType
channelstring
upiAppNamestring
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
}
FieldType
channelstring

​
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 🚀