NextJs Example

This is a simple example of nextjs with react and tailwindcss. you can use this as a starting point for your own project.

First you need to setup the NextJs project. You can refer to NextJs documentation for that: https://nextjs.org/docs (opens in a new tab)

This package supports all the latest version of NextJs.

After setting up, install the upiqr package using npm:

npm i @omkarbhosale/upiqr

After installation, you can now make a custome component for generating UPI QR code in your NextJs project.

// app/components/Qrcode.jsx
 
"use client";
 
import { useState, useEffect } from "react";
import Image from "next/image";
import generateQR from "@omkarbhosale/upiqr";
 
const Qrcode = ({ amount }) => {
  const [qrCode, setQrCode] = useState(null);
  const [error, setError] = useState(null);
 
  console.log(process.env.NEXT_PUBLIC_UPI_ID);  // Save your UPI ID in .env file and check on the client console if it is working!
 
  useEffect(() => {
    const fetchQRCode = async () => {
      try {
        // Generate the QR code as a Base64 URL
        const data = await generateQR({
          UPI_ID: process.env.NEXT_PUBLIC_UPI_ID,
          AMOUNT: amount,
        });
        setQrCode(data);
      } catch (error) {
        setError("Error generating QR code");
        console.error("Error generating QR code:", error);
      }
    };
 
    fetchQRCode();
  }, [amount]);  // QR Code will be automatically updated when amount changes.
 
  return (
    <div>
      <h2>UPI QR Code</h2>
      {error ? (
        <p>{error}</p>
      ) : qrCode ? (
        <Image src={qrCode} width={200} height={200} alt="QR Code image" />
      ) : (
        <p>Generating QR Code...</p>
      )}
    </div>
  );
};
 
export default Qrcode;
 

Following is a full breakdown of your Qrcode component and how each part works:

1. Imports:

   • useState and useEffect are React hooks used for managing state and side effects.
   • Image component from the Next.js Image library is used to display the generated QR code image.
   • generateQR is imported from your @omkarbhosale/upiqr package and is responsible for generating a QR code as a Base64-encoded URL.

2. Component Definition:

   • Qrcode is a functional component that takes two props, upi_id and amount, representing the UPI ID and the amount to include in the QR code.

3. State Variables:

   • qrCode: Stores the Base64 URL of the generated QR code image. Initially, it’s null.
   • error: Stores any error message if QR code generation fails. Initially, it’s null.

4. useEffect:

   • useEffect is used here to perform a side effect — fetching a QR code when the component mounts or whenever the upi_id or amount props change.
   • Dependency Array [upi_id, amount]: Adding upi_id and amount as dependencies ensures that fetchQRCode re-runs each time these props change, so if a new UPI ID or amount is passed, a new QR code is generated.

5. fetchQRCode Function:

   • Defined as an async function to allow the use of await for generating the QR code.
   • Try-Catch Block:
     • Inside the try block, generateQR is called with the upi_id and amount props, and the result is saved in the data variable.
     • The resulting data (Base64 URL for the QR code image) is then stored in qrCode using setQrCode(data).
     • If an error occurs, setError is called to store a custom error message, and the error details are logged to the console.