Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/Pratyay360/upiqrcode/llms.txt

Use this file to discover all available pages before exploring further.

In this quickstart you will install upiqrcode, initialize the WebAssembly module, call the upiqrcode() function with a payee VPA and name, and render the resulting SVG QR code and UPI intent URL in your project.
Always await init() before calling upiqrcode() or svg_qr_code(). The init() call loads the .wasm binary asynchronously and only needs to happen once per page load.
1

Install

Add upiqrcode to your project using your preferred package manager.
npm install upiqrcode
2

Initialize the WASM module

Import the default init export and call it once before using any other function. This loads and compiles the .wasm binary.
import init from "upiqrcode";

await init();
You only need to call init() once per page load. After it resolves, the module is ready and subsequent calls to upiqrcode() are synchronous under the hood.
3

Generate a QR code

Call upiqrcode() with at least a payeeVPA and payeeName. The function returns a Promise that resolves to an object with two fields: qr (an SVG string) and intent (a upi://pay? URL).
import init, { upiqrcode, type UpiqrcodeResult } from "upiqrcode";

await init();

const result = (await upiqrcode({
  payeeVPA: "example@upi",
  payeeName: "Jane Doe",
  amount: "250.00",
  transactionNote: "Payment for invoice #42",
})) as UpiqrcodeResult;

console.log(result.qr);     // SVG markup string
console.log(result.intent); // upi://pay?pa=example%40upi&pn=Jane%20Doe&am=250.00&tn=Payment%20for%20invoice%20%2342
payeeVPA must be at least 5 characters and payeeName must be at least 4 characters. If either value is too short or missing, the Promise will reject with a validation error.
4

Display the result

Inject result.qr as innerHTML to render the QR code, and use result.intent as an href for a mobile payment button.
// Render the SVG QR code
const container = document.getElementById("qr-container");
if (container) {
  container.innerHTML = result.qr;
}

// Create a deep-link button for mobile users
const payButton = document.getElementById("pay-button") as HTMLAnchorElement;
if (payButton) {
  payButton.href = result.intent;
}

​
Full examples

The examples below show complete working implementations you can copy into your project.

​
React (useState / useEffect)

This pattern initializes the WASM module inside a useEffect hook and stores the result in component state. 
import { useState, useEffect } from "react";
import init, { upiqrcode, type UpiqrcodeResult } from "upiqrcode";

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

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

        const result = (await upiqrcode({
          payeeVPA: "example@upi",
          payeeName: "Jane Doe",
          amount: "250.00",
          transactionNote: "Payment for invoice #42",
        })) as UpiqrcodeResult;

        setQrSvg(result.qr);
        setIntent(result.intent);
      } catch (err) {
        setError(err instanceof Error ? err.message : String(err));
      } finally {
        setLoading(false);
      }
    };

    generateQR();
  }, []);

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

  return (
    <div>
      <h2>Scan to pay</h2>
      <div dangerouslySetInnerHTML={{ __html: qrSvg }} />
      <a href={intent}>Open in payment app</a>
    </div>
  );
}

export default UPIQRCode;

​
Vanilla JavaScript (ESM)

This example works in any project with a bundler that supports ESM and WebAssembly. 
import init, { upiqrcode } from "upiqrcode";

async function renderQRCode() {
  await init();

  const result = await upiqrcode({
    payeeVPA: "example@upi",
    payeeName: "Jane Doe",
    amount: "250.00",
    transactionNote: "Payment for invoice #42",
  });

  document.getElementById("qr-container").innerHTML = result.qr;
  document.getElementById("pay-button").href = result.intent;
}

renderQRCode();

​
Next steps

React guide

A complete React integration guide with state management and error handling patterns.

Vanilla JS guide

Use upiqrcode in a plain JavaScript or TypeScript project without a framework.

API reference

Explore every parameter in UpiqrcodeParams and every field in UpiqrcodeResult.

Build docs developers (and LLMs) love

Get started for freeTalk to us