How to use 'upiqrcode'  package.

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}
                />
        </>
    )
}
FieldsDescriptionRequired
payeeVPAVPA address from UPI payment accountMandatory
payeeNameMerchant Name registered in UPI payment accountMandatory
payeeMerchantCodeMerchant Code from UPI payment accountOptional
transactionIdUnique transactionid for merchant's referenceOptional
transactionRefUnique transactionid for merchant's referenceOptional
transactionNoteA note will appear in the payment app while the transactionOptional
amountAmountOptional
minimumAmountThe minimum amount that has to be transferredOptional
currencyCurrency of amount (default: INR)Optional
transactionRefUrlURL for the orderOptional

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

Did you find this article valuable?

Support PRATYAY MUSTAFI by becoming a sponsor. Any amount is appreciated!