How to use 'upiqrcode' package.

PRATYAY MUSTAFIPRATYAY MUSTAFI
3 min read

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

0
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.