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