UPI Pay Button
A Pay with UPI button for any website. Opens GPay, PhonePe or Paytm with the amount filled in on phones, shows a QR code on desktop.
What it does
Take UPI payments on your website without a payment gateway. Put in your UPI ID, and the button
builds a upi://pay link with your name, amount and note.
- On a phone: tapping the button opens GPay, PhonePe, Paytm or any UPI app, ready to pay.
- On a desktop: it shows a QR code to scan with any UPI app.
- No backend, no fees. Money goes straight to your UPI ID.
- Two versions: plain HTML (no build step, one
<div>) and a React / Next.js component. - Change the colours with three CSS variables.
Good to know: the button opens the UPI app, it does not confirm the payment to your site. Check the payment in your bank app before you ship. A business UPI ID works best; some apps limit links to personal IDs.
What's inside
- upi-pay-button-v1.0.0.zip20 KB
Stack
- HTML
- CSS
- JavaScript
- React
- TypeScript
Licence
Commercial use: personal and client projects, including paid ones. Don't resell or share the files themselves.
- Includes qrcode-generator 2.0.4 (MIT) from https://github.com/kazuhikoarase/qrcode-generator
Changelog
- v1.0.02026-11-03First release. Plain HTML and React versions.
More from Web
GST Invoice Kit
Make GST invoices, bills of supply, credit and debit notes as clean A4 PDFs. A ready invoice maker for shop owners, plus a React component for developers.
Home Bakery Landing Page
One-page website for a home bakery or sweets maker. Menu with prices, WhatsApp order on every item, Tamil + English. Plain HTML and CSS.
Landing Template Pack
Five one-page websites for a clinic, tuition centre, textile shop, restaurant and CA office. Five styles, English + Tamil, WhatsApp built in. Plain HTML and Next.js.