DEV Community

PRATYAY MUSTAFI
PRATYAY MUSTAFI

Posted on Originally published at pratyaywrites.hashnode.dev on

A Beginner's Guide to Using the 'UpiQRCode' Package

#useupiqrcode #upi #node #npm

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
Enter fullscreen mode Exit fullscreen mode

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";
Enter fullscreen mode Exit fullscreen mode

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}
                />
        </>
    )
}
Enter fullscreen mode Exit fullscreen mode

| 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

Top comments (0)