Embeddable UPI Payment Widget
The easiest way to add a UPI payment form to your Indian website is by using our embeddable widget. Just copy and paste the following HTML snippet into your webpage, and a fully functional payment form will appear. It's lightweight, secure, and requires no backend setup on your part. Perfect for Indian e-commerce sites, SaaS platforms, and business websites.
<iframe
src="https://upipg.cit.org.in/embed"
width="100%"
height="600px"
frameborder="0"
title="UPI Payment Generator"
></iframe>The widget will generate a unique payment page on UPI PG. You can adjust the height and width attributes to best fit your site's layout. Supports all major Indian UPI apps including Google Pay, PhonePe, Paytm, and bank UPI apps.
Manual UPI Deep Link Integration for Indian Apps
For more custom integrations in your Indian mobile app or website, you can create UPI deep links (also known as UPI URIs) directly within your application. These links, when clicked on a mobile device, will open the user's default UPI app with the payment details pre-filled. Ideal for Indian fintech startups, e-commerce platforms, and payment gateways.
The format for a UPI link is as follows:
upi://pay?pa=your-upi-id@bank&pn=Your%20Name&am=100.00&cu=INR&tn=Payment%20for%20GoodsUPI Parameters:
pa: Payee Address (Your UPI ID). This is the only mandatory parameter for Indian UPI transactions.pn: Payee Name. The name of the person or business receiving the payment in India.am: Transaction Amount. The exact amount to be paid in rupees (e.g., 100.00).cu: Currency Code. Should always be "INR" for Indian rupee transactions.tn: Transaction Note. A short description of the payment (e.g., 'Service fee', 'Product purchase').
You can generate this link dynamically on your server or with client-side JavaScript and embed it in a button or hyperlink. Remember to URL-encode the parameter values. This works seamlessly with all Indian UPI apps and banks.
Example UPI Deep Link ButtonDynamic QR Code Generation for Indian Businesses
You can also generate QR codes that contain the UPI deep link information. When an Indian customer scans this QR code with their UPI app, the payment details are automatically filled. This is perfect for Indian invoices, product pages, point-of-sale displays, restaurants, and retail stores.
To do this, take the UPI deep link you constructed and URL-encode it. Then, use it as the data source for any QR code generation library or API. We use and recommend `qrserver.com` for its simplicity and reliability for Indian businesses.
https://api.qrserver.com/v1/create-qr-code/?size=250x250&data=upi%3A%2F%2Fpay%3Fpa%3Dyour-upi-id%40bank%26pn%3DYour%2520Name%26am%3D100.00%26cu%3DINR%26tn%3DPayment%2520for%2520Goods