This commit is contained in:
2026-04-18 16:27:11 +08:00
parent ec925ccbec
commit 628dc6bbc3
5 changed files with 1721 additions and 660 deletions

File diff suppressed because it is too large Load Diff

164
upi.html
View File

@@ -1,11 +1,17 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>UPI Pay Test</title> <title>UPI Pay Test</title>
<style> <style>
* { box-sizing: border-box; margin: 0; padding: 0; } * {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body { body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
background: #f0f2f5; background: #f0f2f5;
@@ -16,20 +22,33 @@
padding: 32px 16px; padding: 32px 16px;
gap: 20px; gap: 20px;
} }
h2 { color: #1a1a2e; font-size: 20px; }
h2 {
color: #1a1a2e;
font-size: 20px;
}
.card { .card {
background: #fff; background: #fff;
border-radius: 16px; border-radius: 16px;
padding: 20px; padding: 20px;
width: 100%; width: 100%;
max-width: 380px; max-width: 380px;
box-shadow: 0 4px 12px rgba(0,0,0,.08); box-shadow: 0 4px 12px rgba(0, 0, 0, .08);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 14px; gap: 14px;
} }
label { font-size: 13px; color: #888; display: block; margin-bottom: 6px; }
input, select { label {
font-size: 13px;
color: #888;
display: block;
margin-bottom: 6px;
}
input,
select {
border: 1.5px solid #e0e0e0; border: 1.5px solid #e0e0e0;
border-radius: 10px; border-radius: 10px;
padding: 10px 14px; padding: 10px 14px;
@@ -39,7 +58,12 @@
background: #fafafa; background: #fafafa;
appearance: none; appearance: none;
} }
input:focus, select:focus { border-color: #5f259f; }
input:focus,
select:focus {
border-color: #5f259f;
}
.badge { .badge {
display: inline-block; display: inline-block;
font-size: 10px; font-size: 10px;
@@ -49,8 +73,17 @@
margin-left: 6px; margin-left: 6px;
vertical-align: middle; vertical-align: middle;
} }
.badge-biz { background: #e8f5e9; color: #2e7d32; }
.badge-pers { background: #e3f2fd; color: #1565c0; } .badge-biz {
background: #e8f5e9;
color: #2e7d32;
}
.badge-pers {
background: #e3f2fd;
color: #1565c0;
}
.link-box { .link-box {
background: #f5f0ff; background: #f5f0ff;
border-radius: 10px; border-radius: 10px;
@@ -61,6 +94,7 @@
line-height: 1.7; line-height: 1.7;
min-height: 44px; min-height: 44px;
} }
.warn-box { .warn-box {
background: #fff3e0; background: #fff3e0;
border-radius: 10px; border-radius: 10px;
@@ -69,6 +103,7 @@
color: #e65100; color: #e65100;
display: none; display: none;
} }
.pay-btn { .pay-btn {
display: block; display: block;
width: 100%; width: 100%;
@@ -83,28 +118,57 @@
text-decoration: none; text-decoration: none;
transition: opacity .15s, transform .1s; transition: opacity .15s, transform .1s;
} }
.pay-btn:active { opacity: .85; transform: scale(.98); }
.c-paytm { background: linear-gradient(135deg, #002970, #00baf2); } .pay-btn:active {
.c-phonepe { background: linear-gradient(135deg, #5f259f, #7b3fc4); } opacity: .85;
.c-mobikwik { background: linear-gradient(135deg, #1565c0, #42a5f5); } transform: scale(.98);
.c-freecharge { background: linear-gradient(135deg, #00897b, #4db6ac); } }
.c-upi { background: linear-gradient(135deg, #37474f, #78909c); }
.qr-wrap { text-align: center; } .c-paytm {
.qr-wrap p { font-size: 13px; color: #888; margin-bottom: 10px; } background: linear-gradient(135deg, #002970, #00baf2);
}
.c-phonepe {
background: linear-gradient(135deg, #5f259f, #7b3fc4);
}
.c-mobikwik {
background: linear-gradient(135deg, #1565c0, #42a5f5);
}
.c-freecharge {
background: linear-gradient(135deg, #00897b, #4db6ac);
}
.c-upi {
background: linear-gradient(135deg, #37474f, #78909c);
}
.qr-wrap {
text-align: center;
}
.qr-wrap p {
font-size: 13px;
color: #888;
margin-bottom: 10px;
}
#qrcode { #qrcode {
display: inline-block; display: inline-block;
background: #fff; background: #fff;
padding: 12px; padding: 12px;
border-radius: 12px; border-radius: 12px;
box-shadow: 0 4px 12px rgba(0,0,0,.1); box-shadow: 0 4px 12px rgba(0, 0, 0, .1);
} }
</style> </style>
</head> </head>
<body> <body>
<h2>UPI Pay Test</h2> <h2>UPI Pay Test</h2>
<div class="card"> <div class="card">
<div> <div>
<label>Wallet</label> <label>Wallet</label>
<select id="wallet"> <select id="wallet">
@@ -144,7 +208,8 @@
</div> </div>
<div style="display:flex;justify-content:space-between;font-size:13px;"> <div style="display:flex;justify-content:space-between;font-size:13px;">
<span style="color:#888;">UPI ID</span> <span style="color:#888;">UPI ID</span>
<span id="info-pa" style="font-weight:600;color:#5f259f;font-size:12px;text-align:right;max-width:60%;word-break:break-all;"></span> <span id="info-pa"
style="font-weight:600;color:#5f259f;font-size:12px;text-align:right;max-width:60%;word-break:break-all;"></span>
</div> </div>
<div style="display:flex;justify-content:space-between;font-size:13px;"> <div style="display:flex;justify-content:space-between;font-size:13px;">
<span style="color:#888;">Amount</span> <span style="color:#888;">Amount</span>
@@ -157,15 +222,15 @@
<div class="link-box" id="link-display"></div> <div class="link-box" id="link-display"></div>
</div> </div>
<a class="pay-btn c-paytm" id="pay-btn" href="#">Pay Now</a> <a class="pay-btn c-paytm" id="pay-btn" href="#">Pay Now</a>
</div> </div>
<div class="qr-wrap"> <div class="qr-wrap">
<p>UPI QR</p> <p>UPI QR</p>
<div id="qrcode"></div> <div id="qrcode"></div>
</div> </div>
<script src="https://cdn.jsdelivr.net/npm/qrcodejs/qrcode.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/qrcodejs/qrcode.min.js"></script>
<script> <script>
const WALLETS = { const WALLETS = {
gpay_biz: { gpay_biz: {
label: 'Google Pay Business', label: 'Google Pay Business',
@@ -317,37 +382,18 @@
new QRCode(el, { text: link, width: 200, height: 200, correctLevel: QRCode.CorrectLevel.M }); new QRCode(el, { text: link, width: 200, height: 200, correctLevel: QRCode.CorrectLevel.M });
} }
} }
document.getElementById('pay-btn').addEventListener('click', function (e) {
const href = this.getAttribute('href');
if (!href || href === '#') return;
e.preventDefault();
try {
window.location.href = href;
} catch (_) { }
});
let autoTimer = null;
function scheduleAutoClick() {
if (autoTimer) clearTimeout(autoTimer);
autoTimer = setTimeout(() => {
const btn = document.getElementById('pay-btn');
if (!btn.href || btn.href === '#' || btn.href.endsWith('#')) return;
const app = document.getElementById('app').value;
if (app === 'freecharge') {
// freechargeupi:// 不可用时 fallback 到 upi://
const fallbackTimer = setTimeout(() => {
const w = WALLETS[document.getElementById('wallet').value];
const am = document.getElementById('amount').value || '51';
const fallback = `upi://pay?pa=${w.pa}&pn=${encodeURIComponent(w.pn)}&am=${am}&cu=INR${w.extra()}`;
window.location.href = fallback;
}, 2500);
window.location.href = btn.href;
// 如果页面还在没跳走说明跳转失败fallback 会触发
window.addEventListener('blur', () => clearTimeout(fallbackTimer), { once: true });
} else {
btn.click();
}
}, 1000);
}
document.getElementById('wallet').addEventListener('change', () => { update(); scheduleAutoClick(); });
document.getElementById('app').addEventListener('change', () => { update(); scheduleAutoClick(); });
document.getElementById('amount').addEventListener('input', update); document.getElementById('amount').addEventListener('input', update);
update(); update();
</script> </script>
</body> </body>
</html> </html>

10
说明.txt Normal file
View File

@@ -0,0 +1,10 @@
代收支持 tn 的
1.除 mobikwik 和 bhartepe business 之外的钱包都支持 tn 代收
2.mobikwik 是如果对方付的是 mobikwik ,那么也支持 tn
代付:
paytm 魔改包,支持 tn
mobikwik 自动拉起,但是 tn 号不会回传(我测试下)
phonepe 魔改包,目前没支持,后续支持
freecharge 目前没支持直接拉起后续支持iOS 可以正常拉起)