Menu

Post image 1
Post image 2
1 / 2
0

Embedding UPI QR Codes in PDF Invoices with qr-code-styling and pdf-lib in Next.js

DEV Community·Shaishav Patel·21 days ago
#KJpOlNRn
Reading 0:00
15s threshold

The Problem Our Invoice Generator already used pdf-lib to generate PDFs client-side and qr-code-styling for QR generation elsewhere in the app. Adding a UPI payment QR to Indian invoices seemed straightforward — but there's one non-obvious step: qr-code-styling produces a Blob , and pdf-lib needs a Uint8Array . You can't just pass one to the other. This post covers the exact pipeline: UPI deep link → QR PNG blob → ArrayBuffer → Uint8Array → pdf-lib embedPng → page render. The UPI Deep Link Format Every UPI app in India (GPay, PhonePe, Paytm, BHIM, all bank apps) understands a standard deep link format: upi://pay?pa=<upi-id>&am=<amount>&cu=INR Enter fullscreen mode Exit fullscreen mode pa = payee address (your UPI ID: name@bank ) am = amount in rupees, two decimal places cu = currency code (always INR ) When a UPI app scans a QR encoding this URL, it opens the payment confirmation screen with all fields pre-filled. The user just confirms with PIN or biometric.…

Continue reading — create a free account

Join HashtagPLUS to read full articles, follow hashtags, vote, and join the conversation.

Read More