How to use 'upiqrcode' package.
What is upiqrcode
?
upiqrcode
is a npm package for generating custom NPCI-compliant BASE64 QR codes with UPI intent links by generating UPI QR codes with this package it's possible to scan these QR codes with all standard UPI payment apps.
Let's see how to use this package.
To use this upiqrcode
package you have to first install upiqrcode package into your Node Js project.
npm i upiqrcode
then import into the file where you want to generate the NPCI-compliant UPI qrcode which can be scanned by all UPI apps.
import upiqrcode from "upiqrcode";
There are two mandatory parameters in the default upiqrcode
method which are payeeVPA
& payeeName
. other fields are not mandatory .
To check how to use this package properly let's refer to the project upi-pay which I have built using Next Js and Typescript.
Let's see how to use the package.
import { useState, useEffect } from "react";
import Image from "next/image"
import upiqrcode from "upiqrcode";
export default function Qr() {
const [qrCode, setQrCode] = useState("");
useEffect(() => {
upiqrcode({
payeeVPA: "pratyaymustafi@paytm",
payeeName: "Pratyay Mustafi",
})
.then((upi: { qr: string, intent: string }) => {
setQrCode(upi.qr);
})
.catch((err: Error) => {
console.log(err);
});
}, []);
return (
<>
<Image
src={qrCode}
alt="QR Code"
width={300}
height={300}
/>
</>
)
}
Fields | Description | Required |
payeeVPA | VPA address from UPI payment account | Mandatory |
payeeName | Merchant Name registered in UPI payment account | Mandatory |
payeeMerchantCode | Merchant Code from UPI payment account | Optional |
transactionId | Unique transactionid for merchant's reference | Optional |
transactionRef | Unique transactionid for merchant's reference | Optional |
transactionNote | A note will appear in the payment app while the transaction | Optional |
amount | Amount | Optional |
minimumAmount | The minimum amount that has to be transferred | Optional |
currency | Currency of amount (default: INR) | Optional |
transactionRefUrl | URL for the order | Optional |
You can also use the above methods according to your use cases. It's better to create a JSON file and use its data in the production code for proper code readability.
This is how you can generate an image with upiqrcode package in short report bugs and play with this package Also don't forget to contribute or suggest any ideas in Github, please make sure to 🌟 the GitHub repository upiqrcode if you are using this package for your project and like it. This motivates to maintain this package.
Happy coding :)
Want to support my work
Subscribe to my newsletter
Read articles from PRATYAY MUSTAFI directly inside your inbox. Subscribe to the newsletter, and don't miss out.
Written by
PRATYAY MUSTAFI
PRATYAY MUSTAFI
Hi, I’m Pratyay Mitra Mustafi. I’m a passionate developer and knowledge seeker. I’m always looking for new ways to learn and grow, and I’m excited to see what the future holds for me. I’ve been coding since I was 17 years old, and I’ve always loved the challenge of solving problems and creating new things. I’m also interested in artificial intelligence, machine learning, and web development. In my spare time, I enjoy reading, playing video games, and watching anime. I’m also a big fan of football (soccer) and chess. I’m looking forward to meeting new people and learning new things. Feel free to connect with me on different social medias.