CustomQrAmount/script.js at main · prashant64bit/CustomQrAmount · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
/**
 * UPI QR Generator - Main Application Script
 * @author Prashant Thakur (@prashant64bit)
 * @url https://prashantthakur.is-a.dev
 * @github https://github.com/prashant64bit
 * @license MIT
 * @desc Fast, secure, and free UPI QR code generator for instant payment QR codes with custom amounts.
 * @lastModified 2026-03-30
 *
 * Features:
 * - Generate UPI QR codes with custom amounts
 * - Edit payee name and UPI ID
 * - Browser-based processing (no server required)
 * - LocalStorage support for user preferences
 * - Progressive Web App (PWA) support
 * - Offline functionality with Service Worker
 * - Full keyboard accessibility
 */

const defaultPayeeName = window.UPI?.name;
const defaultUpiId = window.UPI?.id;
const defaultCurrency = window.UPI?.currency || 'INR';

let payeeName = localStorage.getItem('payeeName') || defaultPayeeName;
let upiId = localStorage.getItem('upiId') || defaultUpiId;

const payeeNameEl = document.getElementById('payeeName');
const upiIdEl = document.getElementById('upiId');
const amountInput = document.getElementById('amount');
const editBtn = document.getElementById('editBtn');
const generateBtn = document.getElementById('generateBtn');
const backBtn = document.getElementById('backBtn');
const inputArea = document.getElementById('inputArea');
const qrArea = document.getElementById('qrArea');
const qrBox = document.getElementById('qr');
const editModal = document.getElementById('editModal');
const editNameInput = document.getElementById('editName');
const editUpiIdInput = document.getElementById('editUpiId');
const saveEdit = document.getElementById('saveEdit');
const cancelEdit = document.getElementById('cancelEdit');

payeeNameEl.textContent = payeeName;
upiIdEl.textContent = upiId;

amountInput.addEventListener('input', (e) => {
  let value = e.target.value.replace(/[^0-9.]/g, '');
  const parts = value.split('.');
  if (parts.length > 2) value = parts[0] + '.' + parts.slice(1).join('');
  if (parts[1]) value = parts[0] + '.' + parts[1].substring(0, 2);
  e.target.value = value;
});

amountInput.addEventListener('keydown', (e) => {
  if (e.key === 'Enter') {
    generateBtn.click();
  }
});

editBtn.addEventListener('click', () => {
  editNameInput.value = payeeName;
  editUpiIdInput.value = upiId;
  editModal.style.display = 'flex';
});

cancelEdit.addEventListener('click', () => {
  editModal.style.display = 'none';
});

saveEdit.addEventListener('click', () => {
  payeeName = editNameInput.value.trim() || payeeName;
  upiId = editUpiIdInput.value.trim() || upiId;

  payeeNameEl.textContent = payeeName;
  upiIdEl.textContent = upiId;

  localStorage.setItem('payeeName', payeeName);
  localStorage.setItem('upiId', upiId);

  editModal.style.display = 'none';
});

generateBtn.addEventListener('click', () => {
  const amount = amountInput.value.trim();

  if (!amount || isNaN(parseFloat(amount)) || parseFloat(amount) <= 0) {
    alert('Please enter a valid amount');
    return;
  }

  if (!upiId) {
    alert('UPI ID is required. Please edit payee details.');
    return;
  }

  const encodedName = encodeURIComponent(payeeName);
  const encodedUpiId = encodeURIComponent(upiId);
  const encodedCurrency = encodeURIComponent(defaultCurrency);
  const upiString = `upi://pay?pa=${encodedUpiId}&pn=${encodedName}&am=${amount}&cu=${encodedCurrency}`;

  qrBox.innerHTML = '';

  new QRCode(qrBox, {
    text: upiString,
    width: 220,
    height: 220,
    colorDark: "#000000",
    colorLight: "#ffffff",
    correctLevel: QRCode.CorrectLevel.H
  });

  inputArea.style.display = 'none';
  generateBtn.style.display = 'none';
  qrArea.style.display = 'block';
  backBtn.style.display = 'block';
});

backBtn.addEventListener('click', () => {
  qrArea.style.display = 'none';
  backBtn.style.display = 'none';
  qrBox.innerHTML = '';

  inputArea.style.display = 'block';
  generateBtn.style.display = 'block';
  amountInput.value = '';
});

editModal.addEventListener('click', (e) => {
  if (e.target === editModal) {
    editModal.style.display = 'none';
  }
});