Package Exports
- smart-upiqr
Readme
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 codeQrExpireDays
andTransactionNote
andGST
doesn't support in all UPI Apps so it might not show/work after scan so do not worry
License
MIT