Generate secure, NPCI compatible UPI payment QR codes directly in the browser using Rust and WebAssembly.
Introducing upiqrcode
What if you could generate a UPI payment QR code instantly, on any device, without sending payment details to a server?
Meet upiqrcode — an open-source WebAssembly (WASM) library that generates UPI payment intent links and renders them as vector SVG QR codes, entirely on the client side.
Whether you’re building a payment page, a small business checkout, a donation flow, or a personal payment tool, upiqrcode makes it easy to generate dynamic UPI QR codes directly in the browser.
No backend round trips. No unnecessary data collection. Just fast, local QR code generation.
What Is Dynamic UPI?
UPI (Unified Payments Interface) has made digital payments incredibly accessible across India. From small street vendors to large online businesses, UPI QR codes have become a convenient way to receive payments.
A dynamic UPI QR code contains a payment intent that can include details such as:
- UPI ID: The recipient’s Virtual Payment Address (VPA).
- Payee name: The name displayed in the payment app.
- Amount: An optional, predefined payment amount.
- Transaction note: A short description of the payment.
- Transaction reference: An optional identifier for the transaction.
When someone scans the QR code using a compatible UPI app — such as PhonePe, Google Pay, Paytm, or BHIM — the app can read the payment details and prefill the payment screen.
The user reviews the information and confirms the payment in their UPI app.
With upiqrcode, these payment details can be turned into a QR code dynamically, without requiring a server to generate the image.
How Does upiqrcode Work?
The core idea behind upiqrcode is simple: move QR generation to the device instead of relying on a remote service.
The library is written in Rust and compiled to WebAssembly. The resulting WASM module runs inside the browser, allowing the application to construct a UPI payment URI and generate a vector SVG QR code locally.
Here’s the typical workflow:
1. Enter the payment details
Provide the recipient’s UPI ID and payee name.
For example:
- UPI ID: success@upi
- Payee name: Example Store
- Amount: 150.00
- Transaction note: Order payment
2. Generate the payment intent
The library constructs a UPI payment URI using the supplied details.
3. Render the QR code
The WASM module generates a QR code that can be rendered as an SVG. Since SVG is a vector format, the QR code can scale to different screen sizes without becoming blurry.
4. Scan or open the payment app
The generated QR code can be scanned by a compatible UPI app. An application may also offer an Open in App action to launch a compatible payment handler where supported.
The payment itself is completed through the user’s chosen UPI app — generating the QR code does not initiate or authorize a payment.
Why Rust and WebAssembly?
Using Rust and WebAssembly makes it possible to run the QR generation logic efficiently in the browser.
Here are some of the key benefits.
1. Client-Side Performance
QR generation happens locally, eliminating the need to send a request to a backend just to create a QR code.
This makes the workflow lightweight and responsive.
2. Privacy by Design
Payment details can remain on the user’s device during QR generation.
Because the library does not need a server to construct the QR code, there is no need to transmit the recipient details or payment amount to a remote QR-generation service.
Actual privacy also depends on how the surrounding application is built, including its analytics, logging, and network requests.
3. Cross-Platform Compatibility
WebAssembly enables the compiled library to run in supported browser environments across desktop and mobile devices.
That means developers can integrate the same core generation logic into different web applications without implementing the entire QR-generation process separately for every platform.
4. Crisp, Scalable SVG Output
SVG QR codes are useful for web interfaces, printable receipts, invoices, and payment pages.
They can be resized while maintaining their vector quality, making them suitable for both small mobile screens and larger displays.
Understanding the UPI QR Code Format
At its core, a UPI QR code encodes a payment intent URI.
A simplified example looks like this:
upi://pay?pa=success%40upi&pn=Example%20Store&am=150.00&cu=INR&tn=Order%20payment
The URI contains the information that a compatible UPI application uses to populate the payment screen.
Supported Payment Parameters
ParameterDescriptionRequired?paPayee's UPI ID (VPA)YespnPayee nameYesamPayment amountOptionalcuCurrency, typically INROptionaltnTransaction noteOptionaltrTransaction reference IDOptional
Note: This is a simplified representation. Implementations should follow the applicable UPI intent specification and validate parameters according to their intended use.
QR Data Fields
The application can work with structured data before constructing the payment URI.
For example:
- payeeVPA — the recipient's UPI ID.
- payeeName — the recipient's display name.
- amount — the requested payment amount, if specified.
- currency — the currency code, typically INR.
- transactionNote — an optional description of the payment.
- transactionId — an optional unique transaction reference, where supported by the implementation.
The exact data structure depends on the library’s API, but the goal is the same: accept payment details, construct a valid intent URI, and encode that URI into a QR code.
What Happens When Someone Scans the QR Code?
The process is straightforward:
- The QR scanner reads the encoded upi://pay URI.
- The compatible UPI application parses the payment parameters.
- The payment screen displays the available recipient and transaction details.
- The user reviews the details and authorizes the payment through the app.
Where Can You Use Dynamic UPI QR Codes?
Dynamic QR generation is useful in several scenarios.
E-commerce checkout: Generate a QR code with the order amount already filled in.
Small businesses: Display payment QR codes for individual purchases without manually creating a new image each time.
Donations and fundraising: Include a predefined amount or a descriptive transaction note.
Invoices and receipts: Embed payment QR codes directly into generated documents.
Personal payment tools: Share a QR code with a recipient and optional payment details.
Web applications: Integrate QR generation into browser-based applications without operating a dedicated QR generation API.
For payment verification, the responsible party must have an escrow account in place to receive and process webhooks from banks.
Privacy and Security Considerations
Keeping QR generation on the client side is a useful privacy advantage, but it is important to understand what it does — and does not — protect.
- Payment details used to generate the QR code can stay in browser memory.
- A back end is not required solely for constructing the QR image.
- The library does not itself authorize a payment or move money.
- The receiving UPI app remains responsible for presenting the payment details and obtaining user confirmation.
The Bigger Picture
upiqrcode demonstrates how WebAssembly can make browser-based utilities more capable without adding unnecessary infrastructure.
By combining Rust’s performance, WebAssembly’s portability, and SVG’s flexibility, it provides a practical approach to generating UPI payment QR codes directly on a user’s device.
For developers building payment interfaces, this means one less server-side operation to maintain — and a simpler way to keep QR generation local.
Final Thoughts
Dynamic UPI QR codes are a small feature that can make payment experiences much smoother.
With upiqrcode, developers can generate UPI payment intent links and vector QR codes directly in the browser, customize payment details, and integrate the results into a variety of applications.
The most interesting part is not just generating a QR code. It’s doing so with a lightweight, privacy-conscious architecture powered by Rust and WebAssembly.
If you’re building tools around UPI payments, upiqrcode is worth exploring.
Explore the project, try it in your application, and build something useful with it.
There is a website demonstrating upiqrcode you can check this out.
Originally published at pratyay.online.
Top comments (0)