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.

You do not need a framework to use upiqrcode. Because the package is distributed as an ES module with a bundled WebAssembly binary, you can import it directly in any JavaScript file that is processed by a WASM-capable bundler. This guide shows you how to initialize the module, generate a QR code, and display the result in the DOM — all without React or any other library.
Prerequisites: A bundler that supports WebAssembly — Vite, webpack 5, or Rollup all work. Alternatively, any browser with native ES module support can load the package directly. Node.js is not a supported environment for the default npm build; use wasm-pack build --target nodejs if you need a Node.js build.

​
Steps

1

Install the package

Install upiqrcode from npm:
npm install upiqrcode
2

Import and initialize

Import the default init function and the named upiqrcode function. You must await init() before calling upiqrcode():
main.js
import init, { upiqrcode } from 'upiqrcode'

async function setup() {
  // Load the WebAssembly module — must complete before any other calls
  await init()
}

setup()
3

Generate a QR code

Call upiqrcode() with at least payeeVPA and payeeName. Both are required and have minimum length constraints (payeeVPA ≥ 5 characters, payeeName ≥ 4 characters). The function returns a promise that resolves with { qr, intent }:
main.js
import init, { upiqrcode } from 'upiqrcode'

async function generateQRCode() {
  await init()

  const result = await upiqrcode({
    payeeVPA: 'merchant@upi',
    payeeName: 'Acme Store',
    amount: '499.00',
    currency: 'INR',
    transactionNote: 'Invoice #2024-001',
  })

  return result // { qr: '<svg>...', intent: 'upi://pay?...' }
}

generateQRCode()
4

Display the result

Inject the SVG markup into a container element and set the href of an anchor tag to the intent URL:
main.js
import init, { upiqrcode } from 'upiqrcode'

async function generateQRCode() {
  await init()

  try {
    const result = await upiqrcode({
      payeeVPA: 'merchant@upi',
      payeeName: 'Acme Store',
      amount: '499.00',
      currency: 'INR',
      transactionNote: 'Invoice #2024-001',
    })

    // Inject SVG into the page
    const container = document.getElementById('qr-container')
    if (container) {
      container.innerHTML = result.qr
    }

    // Set the UPI deep link
    const link = document.getElementById('upi-link')
    if (link) {
      link.href = result.intent
      link.textContent = 'Open in UPI app'
    }
  } catch (err) {
    const errorEl = document.getElementById('error')
    if (errorEl) {
      errorEl.textContent = `Error: ${String(err)}`
    }
  }
}

generateQRCode()
And the corresponding HTML:
index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>UPI QR Code</title>
  </head>
  <body>
    <div id="qr-container"></div>
    <a id="upi-link" href="#" rel="noopener noreferrer"></a>
    <p id="error"></p>
    <script type="module" src="./main.js"></script>
  </body>
</html>

​
Bundler configuration

Different bundlers require different settings to handle WebAssembly. Choose the tab for your bundler: 
import { defineConfig } from 'vite'

export default defineConfig({
  optimizeDeps: {
    // Prevent Vite from pre-bundling the WASM package,
    // which breaks the binary loading path
    exclude: ['upiqrcode'],
  },
})
If you are using webpack 5, you must enable experiments.asyncWebAssembly in your webpack.config.js. Without this flag, webpack cannot parse the .wasm binary and the import will fail at runtime.

​
Error handling

upiqrcode() throws when required fields are missing or too short. Always wrap the call in a try/catch block: 
try {
  const result = await upiqrcode({
    payeeVPA: 'pay@upi',       // must be ≥ 5 characters
    payeeName: 'Shop',         // must be ≥ 4 characters
  })
  // use result.qr and result.intent
} catch (err) {
  // err is a string from WASM validation, e.g.:
  // "Virtual Payee's Address/Payee's Name is compulsory"
  // "Virtual Payee's Address/Payee's Name is too short."
  console.error('QR generation failed:', err)
}

​
Next steps

API reference: upiqrcode()

See the full parameter reference, return type, and validation rules for the upiqrcode function.

Build docs developers (and LLMs) love

Get started for freeTalk to us