Skip to main content
There are three UPI components as listed below:

​
upiCollect

A component to accept user’s vpa/upi id 
const upi = TBDropin.create("tb_upiCollect", {
  placeholder: "Enter UPI ID",
});

upi.mount("#upiCollect");
Return Value upiCollect UPI Collect Object 
{
  element: "tb_upiCollect",
  value: {
    upiId: "user@upi"
  },
  isValid: true,
  error: null,
  componentUrl: "https://dropin.transactbridge.com/upiCollect"
}
UPI Properties
FieldType
upiIdstring

​
upiIntent

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?.toUpperCase(),//UPI App Name
    },
})

component.mount('#' + upiApp);
UPI Intent Properties
FieldTypeDescription
upiAppNamestringName of the UPI application that will be triggered for the payment
Example 
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");
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:
  • API Reference
  • Customization
  • Examples
  • FAQ
If you need assistance, our support team is here to help 🚀