https://github.com/adityavijay21/upiqr
Generate customizable UPI QR codes with a simple API. Supports fixed and variable amounts, transaction notes, and multiple output formats (PNG, SVG).
https://github.com/adityavijay21/upiqr
fintech india javascript nodejs npm-packages payments qrcode react react-native typescript upi upi-qr-code upiqrcode
Last synced: 2 days ago
JSON representation
Generate customizable UPI QR codes with a simple API. Supports fixed and variable amounts, transaction notes, and multiple output formats (PNG, SVG).
- Host: GitHub
- URL: https://github.com/adityavijay21/upiqr
- Owner: adityavijay21
- License: mit
- Created: 2025-09-26T09:28:17.000Z (12 days ago)
- Default Branch: main
- Last Pushed: 2025-09-26T11:05:12.000Z (12 days ago)
- Last Synced: 2025-09-27T02:35:50.481Z (11 days ago)
- Topics: fintech, india, javascript, nodejs, npm-packages, payments, qrcode, react, react-native, typescript, upi, upi-qr-code, upiqrcode
- Language: TypeScript
- Homepage:
- Size: 10.7 KB
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# @adityavijay21/upiqr: UPI QR Code Generator
[](https://www.npmjs.com/package/@adityavijay21/upiqr)
[](https://github.com/adityavijay21/@adityavijay21/upiqr/actions/workflows/main.yml)
[](https://www.npmjs.com/package/@adityavijay21/upiqr)
[](https://github.com/adityavijay21/@adityavijay21/upiqr/blob/main/LICENSE)
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](https://your-demo-url.vercel.app/)** _(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
```bash
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.
```javascript
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 ![]()
tag.
console.log(qr);
}
generate();
```
### 2\. Variable Amount (Static QR)
Omit the `amount` field to let the person paying enter the amount themselves.
```javascript
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.
```jsx
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
Loading...;
return 
;
};
```
### 4\. React Native Example (using SVG)
For React Native, generating an SVG is the best approach. You'll need `react-native-svg`.
```jsx
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 Loading QR Code...;
return ;
};
```
-----
## 🛠️ 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` is an object: `{ qr: string, intent: string }`
-----
## 🤝 Contributing
Contributions, issues, and feature requests are welcome\! Feel free to check the [issues page](https://www.google.com/search?q=https://github.com/adityavijay21/@adityavijay21/upiqr/issues).
## 📄 License
This project is [MIT](https://www.google.com/url?sa=E&source=gmail&q=https://github.com/adityavijay21/@adityavijay21/upiqr/blob/main/LICENSE) licensed.