upiqrcode

Generate UPI QR codes as SVG — compiled to WebAssembly.

Installation

npm install upiqrcode

Usage

upiqrcode(params) → Promise<UpiqrcodeResult>

Generates a UPI payment QR code as an SVG string along with the UPI intent URL.

import { useState, useEffect } from "react";
import init, { upiqrcode, type UpiqrcodeResult } from "upiqrcode";

function UPIQRCode() {
  const [qrSvg, setQrSvg] = useState("");
  const [intent, setIntent] = useState("");
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState("");

  useEffect(() => {
    const generateQR = async () => {
      setLoading(true);
      try {
        await init();

        const result = (await upiqrcode({
          payeeVPA: "pratyay2003@upi",
          payeeName: "pratyay mustafi",
          amount: "100.00",
          transactionNote: "Payment for services",
        })) as UpiqrcodeResult;

        setQrSvg(result.qr);
        setIntent(result.intent);
      } catch (err) {
        console.error("Error generating QR code:", err);
        setError(err instanceof Error ? err.message : String(err));
      } finally {
        setLoading(false);
      }
    };

    generateQR();
  }, []);

  if (loading) return <div>Loading...</div>;
  if (error) return <div>Error: {error}</div>;

  return (
    <div>
      <h2>UPI Payment QR Code</h2>
      <div dangerouslySetInnerHTML={{ __html: qrSvg }} />
      <p>UPI Intent: {intent}</p>
    </div>
  );
}


export default UPIQRCode;

API

UpiqrcodeParams

Field	Type	Required	Description
payeeVPA	string	✅	UPI Virtual Payment Address (VPA)
payeeName	string	✅	Name of the payee
amount	string	—	Transaction amount
minimumAmount	string	—	Minimum acceptable amount
currency	string	—	Currency code (default: INR)
transactionId	string	—	Unique transaction ID
transactionRef	string	—	Transaction reference
transactionNote	string	—	Note or description
payeeMerchantCode	string	—	Merchant category code
transactionRefUrl	string	—	Reference URL

UpiqrcodeResult

Field	Type	Description
qr	string	SVG markup of the QR code
intent	string	Generated UPI intent URL

React Example

import { useState, useEffect } from "react";
import init, { upiqrcode, type UpiqrcodeResult } from "upiqrcode";

function UPIQRCode() {
  const [qrSvg, setQrSvg] = useState("");
  const [intent, setIntent] = useState("");

  useEffect(() => {
    (async () => {
      await init();
      const result = (await upiqrcode({
        payeeVPA: "example@upi",
        payeeName: "John Doe",
        amount: "100.00",
        transactionNote: "Payment for services",
      })) as UpiqrcodeResult;

      setQrSvg(result.qr);
      setIntent(result.intent);
    })();
  }, []);

  return (
    <div>
      <div dangerouslySetInnerHTML={{ __html: qrSvg }} />
      <p>Intent: {intent}</p>
    </div>
  );
}

Building from Source

Requires Rust and wasm-pack.

wasm-pack build --target bundler

License

Apache-2.0