@adityavijay21/upiqr: UPI QR Code Generator

A lightweight, modern, and customizable UPI QR code generator for Node.js, browsers, and React Native. Generate static and dynamic UPI QR codes with a simple, fluent API.

🌐 Live Demo

Test out the package in a live environment! The React demo app we built is a perfect showcase.

➡️ Launch the Live Demo (You can deploy the React demo to a service like Vercel or Netlify to get this link)

✨ Features

• ✅ Fluent API: Easy-to-use, chainable methods for a clean development experience.
• ✅ Framework Agnostic: Works in Node.js, browsers, React, Vue, Svelte, and more.
• ✅ React Native Support: First-class support for React Native via SVG output.
• ✅ Flexible Output: Generate QR codes as Base64 PNGs (dataURL), SVG strings, or UTF8 strings.
• ✅ Fully Typed: Written in TypeScript for a great developer experience with autocompletion.
• ✅ Easy Installation: No peer dependencies to manage. It just works.

⚙️ How It Works

The library simplifies the process of creating a valid UPI intent URL and encoding it into a QR code.

Your Data ➡️ UPIQR Class ➡️ UPI Intent String ➡️ QR Code

📦 Installation

npm install @adityavijay21/upiqr

🚀 Usage Examples

1. Basic Usage (Node.js or Browser)

Create a QR code with a fixed amount and a transaction note.

import { UPIQR } from '@adityavijay21/upiqr';

async function generate() {
  const { qr, intent } = await new UPIQR()
    .set({
      upiId: 'adityavijay21@okicici',
      name: 'Aditya Vijay',
      amount: 150.75,
      transactionNote: 'For the awesome project!',
    })
    .generate();
    
  // qr is a base64 PNG dataURL string that can be used in an <img> tag.
  console.log(qr);
}

generate();

2. Variable Amount (Static QR)

Omit the amount field to let the person paying enter the amount themselves.

import { UPIQR } from '@adityavijay21/upiqr';

const { qr } = await new UPIQR()
  .set({
    upiId: 'adityavijay21@okicici',
    name: 'Aditya Vijay',
    // No amount is specified
  })
  .generate();

3. React Example

A simple React component to display a generated QR code.

import React, { useState, useEffect } from 'react';
import { UPIQR } from '@adityavijay21/upiqr';

function PaymentQRCode() {
  const [qrCode, setQrCode] = useState('');
  
  useEffect(() => {
    async function getQRCode() {
      const { qr } = await new UPIQR()
        .set({
          upiId: 'shop@ybl',
          name: 'My Awesome Shop',
          amount: 250,
        })
        .generate();
      setQrCode(qr);
    };

    getQRCode();
  }, []);

  if (!qrCode) return <div>Loading...</div>;

  return <img src={qrCode} alt="UPI QR Code" />;
};

4. React Native Example (using SVG)

For React Native, generating an SVG is the best approach. You'll need react-native-svg.

import React, { useState, useEffect } from 'react';
import { View, Text } from 'react-native';
import { SvgXml } from 'react-native-svg';
import { UPIQR } from '@adityavijay21/upiqr';

function PaymentQRCodeNative() {
  const [qrSvg, setQrSvg] = useState(null);

  useEffect(() => {
    async function getQRCode() {
      const { qr } = await new UPIQR()
        .set({ upiId: 'shop@ybl', name: 'React Native Shop' })
        .setOptions({ outputType: 'svg' }) // Generate an SVG string
        .generate();
      setQrSvg(qr);
    };

    getQRCode();
  }, []);

  if (!qrSvg) return <Text>Loading QR Code...</Text>;

  return <SvgXml xml={qrSvg} width="250" height="250" />;
};

🛠️ API Reference

.set(params)

Sets the UPI payment parameters.

| Field | Type | Description | Required | | :--- | :--- | :--- | :--- | | upiId | String | The UPI ID of the payee (e.g., user@bank). | Yes | | name | String | The registered name of the payee. | Yes | | amount| Number | Amount to be paid. Omit for variable amount. | No | | payeeMerchantCode | String | Your Merchant Category Code. | No | | transactionId | String | A unique transaction ID for your reference. | No | | transactionRef | String | A reference ID for the transaction (e.g., Invoice #).| No | | transactionNote | String | A note for the payment (e.g., "Coffee Payment"). | No | | minimumAmount | Number | The minimum amount allowed for payment. | No | | currency | String | Currency code (defaults to INR). | No |

.setOptions(options)

Customizes the visual appearance of the generated QR code.

| Field | Type | Description | Default | | :--- | :--- | :--- | :--- | | outputType | 'dataURL', 'svg', 'utf8' | The desired output format of the QR code. | 'dataURL' | | width | Number | The width of the QR code image in pixels. | undefined | | margin | Number | The width of the quiet zone border. | 4 | | color.dark| String (Hex)| The color of the dark modules (e.g., #000000). | #000000FF| | color.light| String (Hex)| The color of the light modules (e.g., #FFFFFF). | #FFFFFFFF| | errorCorrectionLevel| 'L', 'M', 'Q', 'H' | The level of error correction. | 'M' |

.generate()

Generates the QR code.

• Returns: Promise<UPIQRResult>
• UPIQRResult is an object: { qr: string, intent: string }

🤝 Contributing

Contributions, issues, and feature requests are welcome! Feel free to check the issues page.

📄 License

This project is MIT licensed.