smart-upiqr

Easily generate branded UPI QR codes and payment links with customizable options for JavaScript and Node.js.

Installation

npm install smart-upiqr

yarn add smart-upiqr

pnpm add smart-upiqr

Using SmartUpiQr from a CDN

Currently CDN of this package is not available and workable to use. In future it can be available to use in Vanilla website via CDN.

So now you can use it after installation via NPM or Yarn or PNPM

Usage After Installation

Importing

// ES Module
import { UPILink, UPIQR } from "smart-upiqr";

// CommonJS
const { UPILink, UPIQR } = require("smart-upiqr");

Basic Example

// Example usage after installing your package from npm

// Generate UPI link (can be used in <a href={upiLink} target="_blank">Pay Now</a>)
generateUPILink();

function generateUPILink() {
  const upiLink = UPILink({
    PayeeUPI: "test@upi",
    PayeeName: "Smart Demo",
    Amount: 499,  // Must be > 0
    TransactionNote: 'ID|lSDFG23llsd|Note',
    QrExpireDays: 5 // The QR payment link won't work after 5 days, For more info, read below
  });

  console.log("Payment Link:", upiLink);

  // Save in state if using React, or just return/use directly
  setUpiLink(upiLink);
}

// Generate UPI QR (can be used in <img src={upiQR} alt="UPI QR" />)
generateUPIQR();

async function generateUPIQR() {
  try {
    const upiQR = await UPIQR({
      PayeeUPI: "test@upi",
      PayeeName: "Smart Demo",
      Amount: 275, // Must be > 0
      QrExpireDays: 10, // The QRcode scan won't work after 10 days, For more info, read below
      logo: "https://example.com/logo.png", // remote or local path like "/logo.png" or "/src/assets/logo.png"
      logoSize: 80,
      color: {
        dark: "#f50baf", // QR code itself color
        light: "#FFFFFF" // QR code background color
      }
    });

    console.log("Payment QR:", upiQR);

    // Save in state if using React, or return directly
    setUpiQrSrc(upiQR);
  } catch (err) {
    console.error("Error while generating UPIQR:", err);
  }
}

API

SmartUpiQr(options)

Generates a UPIQr / UPILink with flexible options.

| Option | Type | Required | Description | |-----------------|------------------------------------|----------|-----------------------------------------------------------------------------| | PayeeUPI | string | Yes | Payment Receiver (Payee) Person/Business/Merchant UPI ID | | PayeeName | string | Yes | Payment Receiver (Payee) Person/Business/Merchant Name | | Amount | number | Yes | Total amount to receive | | TransactionNote | string | No | Transaction Note (max 50 chracter and can use same TransactionId) | | MerchantCode | string | No | Merchant Category Code (max 4 digit) | | TransactionRef | string | No | Transaction Reference (max 35 character and Can use same TransactionId) | | TransactionId | string | No | Transaction ID (max 35 character and Transaction id of payment or any unique id for reference) | | invoiceNo | string | No | Invoice number | | invoiceDate | boolean | No | Whether to include invoice date (If passed true then automatic add current DateTime) | | QrExpireDays | number | No | QR Code expiry in days (Pass number values greater than 0 to make QR expirable after that day from now) | | QrTimestamp | boolean | No | Whether to add timestamp in QR (If passed true then will automatic add current DateTime) | | GSTno | string | No | GST Number of business | | logo (QR Only) | string (URL/local path) | No | Logo image URL like 'https://domain.com/brandlogo.png' or '/person.png' or 'src/assets/logo.png' | | logoSize (QR Only) | number | No | Logo size value greater than 5-10 for better view | | color (QR Only) | { dark?: string, light?: string} | No | QR code hex colors (dark for QR itself: Default #000000 and light for background: Default #FFFFFF) |

Note:

• Fields marked (QR Only) apply only when generating QR images so do not pass these marked option if generating UPI payment link
• Pass only correct values/details, Passing invalid/wrong values or extra spaces/symbols might cause not working UPI link / QR
• Required fields: PayeeUPI, PayeeName, Amount. for UPI payment Link and UPI QR code
• QrExpireDays and TransactionNote and GST doesn't support in all UPI Apps so it might not show/work after scan so do not worry

License

MIT