File: /var/www/vhosts/sethsawariyabizmart.com/httpdocs/masterAir/newUI.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>UPI Payment</title>
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0
}
:root {
--teal: #0ABFBC;
--teal-lt: #E6FAFA;
--purple: #6C63FF;
--purple-lt: #F0EEFF;
--green: #22C55E;
--green-lt: #EDFBF2;
--amber: #F59E0B;
--amber-lt: #FEF9EC;
--red: #EF4444;
--bg: #F4F6FB;
--white: #FFF;
--txt: #1E2537;
--muted: #7B82A0;
--bdr: #E4E8F3;
--r: 14px;
--rs: 10px;
}
/* ── PAGE SHELL ── */
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
background: var(--bg);
display: flex;
flex-direction: column;
align-items: center;
}
.page-wrap {
width: 100%;
max-width: 460px;
}
/* ── WARN BAR ── */
.warn-bar {
background: #FFFBEB;
border-bottom: 1px solid #FDE68A;
padding: 8px 16px;
display: flex;
align-items: center;
gap: 8px;
font-size: 12px;
color: #92400E;
font-weight: 500;
flex-shrink: 0;
}
/* ── TOP BAR */
.topbar {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 16px;
flex-shrink: 0;
}
.secure-pill {
display: flex;
align-items: center;
gap: 5px;
background: var(--green-lt);
border-radius: 20px;
padding: 4px 10px;
font-size: 11.5px;
color: #166534;
font-weight: 500;
}
.dot-g {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--green);
flex-shrink: 0
}
.lang-sel {
border: 1.5px solid var(--bdr);
background: var(--white);
border-radius: 20px;
padding: 5px 26px 5px 10px;
font-size: 12px;
font-weight: 500;
color: var(--txt);
cursor: pointer;
outline: none;
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%237B82A0'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 8px center;
transition: border-color .2s;
}
.lang-sel:hover {
border-color: var(--teal)
}
.lang-sel option {
background: #fff;
color: #1E2537
}
/* ── CARD ─ */
.card {
background: var(--white);
border-radius: var(--r) var(--r) 0 0;
border: 1px solid var(--bdr);
border-bottom: 0;
position: relative;
overflow: hidden;
}
/* ── AMOUNT HEADER ─ */
.amt-head {
background: linear-gradient(135deg, #0ABFBC 0%, #6C63FF 100%);
border-radius: var(--r) var(--r) 0 0;
padding: 22px 20px 20px;
text-align: center;
color: #fff;
position: relative;
overflow: hidden;
flex-shrink: 0;
}
.amt-head::before {
content: '';
position: absolute;
top: -30px;
right: -30px;
width: 110px;
height: 110px;
border-radius: 50%;
background: rgba(255, 255, 255, .07)
}
.amt-head::after {
content: '';
position: absolute;
bottom: -40px;
left: -20px;
width: 90px;
height: 90px;
border-radius: 50%;
background: rgba(255, 255, 255, .05)
}
.upi-chip {
display: inline-flex;
align-items: center;
gap: 5px;
background: rgba(255, 255, 255, .2);
border-radius: 20px;
padding: 3px 10px;
font-size: 11px;
font-weight: 600;
letter-spacing: .5px;
margin-bottom: 10px;
}
.amt-lbl {
font-size: 13px;
opacity: .8;
margin-bottom: 4px
}
.amt-val {
font-size: 36px;
font-weight: 700;
letter-spacing: -1px;
line-height: 1
}
.amt-sym {
font-size: 20px;
font-weight: 500;
vertical-align: super;
opacity: .85;
margin-right: 2px
}
/* ── TIMER ── */
.timer-row {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 9px 16px;
background: var(--amber-lt);
border-bottom: 1px solid #FDE68A;
font-size: 13px;
color: #92400E;
font-weight: 500;
}
.t-pill {
background: #fff;
border: 1.5px solid #FDE68A;
border-radius: 8px;
padding: 2px 10px;
font-size: 14px;
font-weight: 700;
color: var(--amber);
min-width: 52px;
text-align: center;
}
.t-pill.urg {
color: var(--red);
border-color: #FCA5A5;
background: #FFF5F5;
animation: bl .7s infinite
}
@keyframes bl {
0%,
100% {
opacity: 1
}
50% {
opacity: .45
}
}
/* ── BODY ── */
.pbody {
padding: 18px 16px 0;
}
.sec-lbl {
font-size: 11px;
font-weight: 700;
color: var(--muted);
text-transform: uppercase;
letter-spacing: .8px;
margin-bottom: 12px
}
/* ── OPTION ROWS ── */
.opt {
display: flex;
align-items: center;
gap: 12px;
padding: 13px 14px;
border: 2px solid var(--bdr);
border-radius: var(--rs);
margin-bottom: 9px;
cursor: pointer;
position: relative;
overflow: hidden;
transition: border-color .15s, background .15s;
background: var(--white);
-webkit-tap-highlight-color: transparent;
}
.opt:hover {
border-color: var(--teal);
background: var(--teal-lt)
}
.opt.sel {
border-color: var(--teal);
background: var(--teal-lt)
}
.opt.sel::after {
content: '✓';
position: absolute;
right: 12px;
top: 50%;
transform: translateY(-50%);
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--teal);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 11px;
font-weight: 700;
}
.oi {
width: 42px;
height: 42px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
font-size: 10px;
font-weight: 700;
flex-shrink: 0;
overflow: hidden
}
.oi img {
width: 100%;
height: 100%;
object-fit: contain;
display: block
}
.ic-pp {
background: #5F259F
}
.ic-gp {
background: #fff;
border: 1.5px solid #E8EAED
}
.ic-pt {
background: #00B9F1
}
.ic-ot {
background: var(--purple-lt);
color: var(--purple);
font-size: 22px;
font-weight: 400
}
.on {
font-size: 14px;
font-weight: 600;
color: var(--txt)
}
.os {
font-size: 12px;
color: var(--muted);
margin-top: 1px
}
.otag {
font-size: 10.5px;
font-weight: 600;
padding: 2px 8px;
border-radius: 20px;
margin-left: auto;
margin-right: 24px;
white-space: nowrap;
flex-shrink: 0
}
.t-fast {
background: var(--green-lt);
color: #166534
}
.t-pop {
background: var(--purple-lt);
color: #4338CA
}
/* ── DO-NOT-CLOSE NOTE ── */
.nc-note {
display: flex;
align-items: center;
gap: 7px;
background: var(--purple-lt);
border: 1px solid #C7C3FF;
border-radius: 8px;
padding: 9px 12px;
margin: 14px 16px 14px;
font-size: 12px;
color: #3730A3;
font-weight: 500;
line-height: 1.4;
}
/* ─ STICKY FOOTER CTA ── */
.cta-wrap {
position: sticky;
bottom: 0;
width: 100%;
padding: 12px 16px 16px;
background: var(--white);
border-top: 1px solid var(--bdr);
box-shadow: 0 -4px 16px rgba(30, 37, 55, .08);
}
.pay-btn {
width: 100%;
background: linear-gradient(135deg, #0ABFBC, #6C63FF);
color: #fff;
border: none;
border-radius: var(--rs);
padding: 15px 16px;
font-size: 15px;
font-weight: 700;
font-family: inherit;
cursor: pointer;
letter-spacing: .2px;
transition: all .2s;
display: flex;
align-items: center;
justify-content: center;
gap: 7px;
}
.pay-btn:hover:not(:disabled) {
transform: translateY(-1px);
filter: brightness(1.06)
}
.pay-btn:active:not(:disabled) {
transform: scale(.98)
}
.pay-btn:disabled {
background: #C8CDD8;
cursor: not-allowed;
filter: none;
transform: none
}
.cta-note {
text-align: center;
font-size: 11px;
color: var(--muted);
margin-top: 7px;
display: flex;
align-items: center;
justify-content: center;
gap: 4px
}
/* ── EXPIRED ─ */
.exp-wrap {
display: none;
text-align: center;
padding: 40px 24px 30px
}
.exp-ic {
width: 68px;
height: 68px;
border-radius: 50%;
background: #FFF0F0;
margin: 0 auto 14px;
display: flex;
align-items: center;
justify-content: center;
font-size: 30px
}
.exp-title {
font-size: 19px;
font-weight: 700;
color: var(--txt);
margin-bottom: 7px
}
.exp-sub {
font-size: 13px;
color: var(--muted);
margin-bottom: 20px;
line-height: 1.5
}
.retry-btn {
background: linear-gradient(135deg, #0ABFBC, #6C63FF);
color: #fff;
border: none;
border-radius: var(--rs);
padding: 12px 32px;
font-size: 14px;
font-weight: 700;
font-family: inherit;
cursor: pointer;
transition: all .2s
}
.retry-btn:hover {
filter: brightness(1.07);
transform: translateY(-1px)
}
/* ── MODAL OVERLAY (absolute, iframe-safe) ── */
.modal-bg {
display: none;
position: absolute;
inset: 0;
background: rgba(20, 28, 55, .6);
border-radius: var(--r) var(--r) 0 0;
align-items: center;
justify-content: center;
z-index: 99;
padding: 16px;
}
.modal-bg.show {
display: flex
}
.modal-box {
background: var(--white);
border-radius: var(--r);
padding: 30px 22px 24px;
width: 100%;
max-width: 300px;
text-align: center;
animation: popIn .32s cubic-bezier(.34, 1.56, .64, 1);
}
@keyframes popIn {
from {
transform: scale(.85);
opacity: 0
}
to {
transform: scale(1);
opacity: 1
}
}
/* ── SPINNER ── */
.spin {
width: 64px;
height: 64px;
border-radius: 50%;
border: 4px solid var(--teal-lt);
border-top-color: var(--teal);
animation: sp .85s linear infinite;
margin: 0 auto 18px;
position: relative;
}
.spin::after {
content: '';
position: absolute;
inset: 5px;
border-radius: 50%;
border: 3px solid transparent;
border-top-color: var(--purple);
animation: sp 1.3s linear infinite reverse
}
@keyframes sp {
to {
transform: rotate(360deg)
}
}
/* ─ SUCCESS ANIMATION ── */
.success-ring {
display: none;
width: 72px;
height: 72px;
border-radius: 50%;
background: var(--green-lt);
margin: 0 auto 18px;
align-items: center;
justify-content: center;
animation: scaleIn .4s cubic-bezier(.34, 1.56, .64, 1);
}
.success-ring.show {
display: flex
}
@keyframes scaleIn {
from {
transform: scale(0);
opacity: 0
}
to {
transform: scale(1);
opacity: 1
}
}
/* SVG checkmark path animation */
.check-svg {
width: 36px;
height: 36px
}
.check-path {
fill: none;
stroke: var(--green);
stroke-width: 3;
stroke-linecap: round;
stroke-linejoin: round;
stroke-dasharray: 40;
stroke-dashoffset: 40;
animation: draw .5s .3s ease forwards;
}
@keyframes draw {
to {
stroke-dashoffset: 0
}
}
/* ripple ring on success circle */
.success-ring::before {
content: '';
position: absolute;
width: 72px;
height: 72px;
border-radius: 50%;
border: 2px solid var(--green);
animation: ripRing .8s .4s ease-out forwards;
opacity: 0;
}
@keyframes ripRing {
0% {
transform: scale(1);
opacity: .6
}
100% {
transform: scale(1.7);
opacity: 0
}
}
.m-title {
font-size: 16px;
font-weight: 700;
color: var(--txt);
margin-bottom: 4px
}
.m-sub {
font-size: 12px;
color: var(--muted);
margin-bottom: 16px;
line-height: 1.5
}
/* ─ SINGLE STEP ROW ─ */
.step-row {
display: flex;
align-items: center;
gap: 9px;
background: var(--bg);
border-radius: 8px;
padding: 10px 13px;
font-size: 13px;
color: var(--txt);
margin-bottom: 14px;
}
.sdot {
width: 9px;
height: 9px;
border-radius: 50%;
flex-shrink: 0;
transition: background .3s
}
.sdot.proc {
background: var(--amber);
animation: bl .7s infinite
}
.sdot.done {
background: var(--green);
animation: none
}
.m-alert {
background: var(--amber-lt);
border: 1px solid #FDE68A;
border-radius: 8px;
padding: 8px 12px;
font-size: 12px;
color: #92400E;
display: flex;
gap: 7px;
align-items: center;
text-align: left
}
/* ── SUCCESS STATE IN MODAL ─ */
.success-msg {
display: none;
margin-bottom: 16px
}
.success-msg.show {
display: block
}
.success-amount {
font-size: 26px;
font-weight: 700;
color: var(--green);
margin-bottom: 3px
}
.success-label {
font-size: 12px;
color: var(--muted)
}
.success-btn {
width: 100%;
background: var(--green);
color: #fff;
border: none;
border-radius: var(--rs);
padding: 13px;
font-size: 14px;
font-weight: 700;
font-family: inherit;
cursor: pointer;
transition: all .2s;
margin-top: 4px;
}
.success-btn:hover {
filter: brightness(1.06)
}
/* ─ RIPPLE ── */
.rpl {
position: absolute;
border-radius: 50%;
background: rgba(10, 191, 188, .14);
animation: rp .5s linear forwards;
pointer-events: none
}
@keyframes rp {
from {
transform: scale(0);
opacity: 1
}
to {
transform: scale(5);
opacity: 0
}
}
</style>
</head>
<body>
<div class="page-wrap">
<!-- TOP BAR -->
<div class="warn-bar" style="justify-content: center;">
<span></span>
<span id="warnTxt">Do not close or refresh this tab during payment</span>
</div>
<div class="topbar">
<div class="secure-pill">
<div class="dot-g"></div>
<span id="secureTxt">256-bit SSL Secured</span>
</div>
<select class="lang-sel" onchange="setLang(this.value)">
<option value="en">🇮🇳 English</option>
<option value="hi">हिंदी</option>
<option value="gu">ગુજરાતી</option>
<option value="mr">मरठी</option>
<option value="ta">தமிழ்</option>
<option value="te">తలుగు</option>
<option value="kn">ಕನ್ನಡ</option>
<option value="bn">বাংলা</option>
<option value="ml">മലയളം</option>
<option value="pa">ਪੰਜਾਬੀ</option>
<option value="or">ଡ଼ିଆ</option>
</select>
</div>
<div class="card" id="mainCard">
<!-- HEADER -->
<div class="amt-head">
<div class="upi-chip">⚡ UPI Payment</div>
<div class="amt-lbl" id="amtLbl">Total Amount</div>
<div class="amt-val"><span class="amt-sym">₹</span><?php echo $amount ?? 0 ?></div>
</div>
<!-- TIMER -->
<div class="timer-row">
<span>⏱</span>
<span id="timerLbl">Complete payment within</span>
<span class="t-pill" id="tEl">05:00</span>
</div>
<!-- OPTIONS -->
<div class="pbody" id="pbody">
<div class="sec-lbl" id="secLbl">Select Payment App</div>
<div class="opt" id="o-pp" onclick="pick(this,'pp',event)">
<div class="oi ">
<img src="images/phonepe-icon.png" alt="PhonePe"
onerror="this.parentElement.innerHTML='<span style=color:#fff;font-size:11px;font-weight:700>Pe</span>'">
</div>
<div>
<div class="on">PhonePe</div>
<div class="os" id="s-pp">Instant UPI transfer</div>
</div>
</div>
<div class="opt" id="o-gp" onclick="pick(this,'gp',event)">
<div class="oi ">
<img src="images/google-pay-icon.png" alt="GPay"
onerror="this.parentElement.innerHTML='<span style=font-size:18px;font-weight:700>G</span>'">
</div>
<div>
<div class="on">Google Pay</div>
<div class="os" id="s-gp">Pay via Google UPI</div>
</div>
</div>
<div class="opt" id="o-pt" onclick="pick(this,'pt',event)">
<div class="oi ">
<img src="images/paytm-icon.png" alt="Paytm"
onerror="this.parentElement.innerHTML='<span style=color:#fff;font-weight:700;font-size:11px>Ptm</span>'">
</div>
<div>
<div class="on">Paytm</div>
<div class="os" id="s-pt">Wallet & UPI payments</div>
</div>
</div>
<div class="opt" id="o-ot" onclick="pick(this,'ot',event)">
<div class="oi ">
<img src="images/upi-icon.png" alt="UPI"
onerror="this.parentElement.innerHTML='<span style=color:#fff;font-weight:700;font-size:11px>Ptm</span>'">
</div>
<div>
<div class="on" id="otName">Other UPI App</div>
<div class="os" id="s-ot">Use your preferred UPI app</div>
</div>
</div>
<!-- Do-not-close note -->
<div class="nc-note" id="ncNote">
<span style="font-size:15px;flex-shrink:0">🔒</span>
<span id="ncTxt">Do not press back or close the browser - your payment is being processed safely.</span>
</div>
</div>
<!-- Modal overlay -->
<div class="modal-bg" id="modal">
<div class="modal-box">
<!-- Spinner (shown during processing) -->
<div class="spin" id="spinEl"></div>
<!-- Success ring (shown after confirm) -->
<div class="success-ring" id="successRing" style="position:relative">
<svg class="check-svg" viewBox="0 0 36 36">
<path class="check-path" d="M8 18 l7 7 l13-13" />
</svg>
</div>
<div class="m-title" id="mTitle">Processing Payment</div>
<div class="m-sub" id="mSub">Please wait. Do not press back or close the app.</div>
<!-- Single step row -->
<div class="step-row" id="stepRow">
<div class="sdot proc" id="sdot"></div>
<span id="stepTxt">Confirming transaction...</span>
</div>
<!-- Success amount (hidden until success) -->
<div class="success-msg" id="successMsg">
<div class="success-amount">₹<?php echo $amount ?? 0 ?></div>
<div class="success-label" id="successLbl">Payment Successful!</div>
</div>
<div class="m-alert" id="mAlert">
<span style="font-size:14px;flex-shrink:0">⚠️</span>
<span id="mWarn">Do not close this tab or press back. Your money is safe.</span>
</div>
</div>
</div>
</div>
<!-- BUTTON -->
<div class="cta-wrap" id="ctaWrap">
<button class="pay-btn" id="payBtn" onclick="startPay()" disabled>
<span style="font-size:14px;opacity:.85">🔒</span>
<span id="payTxt">Select a payment method</span>
</button>
<div class="cta-note">
<span>🛡</span>
<span id="footTxt">Safe & Secure</span>
</div>
</div>
</div>
<!-- ===== JS ===== -->
<script>
let tmr = null;
const AMOUNT = "<?php echo $amount ?? 0; ?>";
const L = {
en: { secure: '256-bit SSL Secured', warn: 'Do not close or refresh this tab during payment', tLbl: 'Complete payment within', aLbl: 'Total Amount', sLbl: 'Select Payment App', sPp: 'Instant UPI transfer', sGp: 'Pay via Google UPI', sPt: 'Wallet & UPI payments', oNm: 'Other UPI App', sOt: 'Enter UPI ID manually', tF: 'Fast', tP: 'Popular', uLbl: 'Enter your UPI ID', uPh: 'yourname@upi', pDef: 'Select a payment method', pRdy: 'Pay Securely', foot: 'Safe & Secure · Powered by NPCI UPI', nc: 'Do not press back or close the browser your payment is being processed safely.', mT: 'Processing Payment', mS: 'Please wait. Do not press back or close the app.', sTxt: 'Confirming transaction...', mW: 'Do not close this tab or press back. Your money is safe.', eT: 'Session Expired', eS: 'Payment time limit reached. Please go back and try again.', rB: 'Try Again', sucLbl: 'Payment Successful!' },
hi: { secure: '256-बिट SSL सुरक्षित', warn: 'भुगतान के दौरान टैब बंद या िफ्रेश न करं', tLbl: 'समय सीमा', aLbl: 'कुल राश', sLbl: 'भुगतान ऐ चुनें', sPp: 'तुंत UPI ट्रांसर', sGp: 'Google UPI से ुगतान', sPt: 'वॉलेट और UPI भुगतन', oNm: 'अन्य UPI ऐ', sOt: 'UPI ID दर्ज करें', tF: 'तेज़', tP: 'लोकप्रिय', uLbl: 'UPI ID दर्ज करे', uPh: 'yourname@upi', pDef: 'भगतान विधि चनें', pRdy: ' ुरक्षित भुतान करें', foot: 'ुरक्षित · NPCI UPI', nc: 'बैक बटन न दबाएं — भुगान सुरक्षित हो रहा है।', mT: 'भुगतान हो रा है', mS: 'कृपया प्रतीक्षा करें।', sTxt: 'लेनदेन की पुष्टि हो रही है...', mW: 'इस टैब को बं न करें। पैसा सुरक्षित है।', eT: 'सत्र समप्त', eS: 'समय समा समाप्त। ापस जाकर पुः प्रयास करं।', rB: 'पुनः प्रयास', sucLbl: 'भुगान सफल!' },
gu: { secure: '256-બિટ SSL સુરક્ષિત', warn: 'ચૂકવણી દરમ્યાન ટૅબ બંધ ન કર', tLbl: 'સમય મર્યદા', aLbl: 'કુલ રકમ', sLbl: 'ચુકવણી પ પસંદ કરો', sPp: 'તાત્કાલિક UPI ટ્રાન્સફર', sGp: 'Google UPI ચૂકવણ', sPt: 'વૉલેટ અન UPI', oNm: 'અન્ય UPI એપ', sOt: 'UPI ID દાખલ રો', tF: 'ઝડપી', tP: 'ોકપ્રિય', uLbl: 'UPI ID દાખલ કરો', uPh: 'yourname@upi', pDef: 'ચૂકવણી પદ્ધતિ પસંદ કરો', pRdy: ' સુરક્ષિત ચૂકવો', foot: 'સુરક્ષિત · NPCI UPI', nc: 'બૅક દબાવો નિ — ચૂકવણી સરક્ષિત છે.', mT: 'ચૂકવણી ચાલ છે', mS: 'રાહ જુ.', sTxt: 'વ્યવહારી પુષ્ટિ ચાુ...', mW: 'ટૅબ બં ન કરો. પૈસા ુરક્ષિત.', eT: 'સત્ર સમાપ્ત', eS: 'સમય મર્યાદ સમાપ્ત.', rB: 'ફી પ્રયાસ', sucLbl: 'ચૂકવણી સફળ!' },
mr: { secure: '256-बिट SSL सुरक्षित', warn: 'पेमेंट दरमयान टॅब बंद रू नका', tLbl: 'वेळ मर्यादा', aLbl: 'एकूण रक्कम', sLbl: 'पेमेंट ॲप िवडा', sPp: 'त्वित UPI हस्तांरण', sGp: 'Google UPI पेेंट', sPt: 'वॉले आणि UPI', oNm: 'इतर UPI ॲप', sOt: 'UPI ID प्विष्ट करा', tF: 'जलद', tP: 'लोकप्िय', uLbl: 'UPI ID प्रिष्ट करा', uPh: 'yourname@upi', pDef: 'पेमेट पद्धत निवा', pRdy: ' सुक्षित पेमेट', foot: 'सुरक्षत · NPCI UPI', nc: 'बॅक दाबू नका — पमेंट सुरक्षित आहे.', mT: 'पेमेंट होत आहे', mS: 'प्रतीक्षा रा.', sTxt: 'व्यवहार पुष्टी होत आहे...', mW: 'टॅब बंद करू नका. ैसे सुरक्षत.', eT: 'सत्र संले', eS: 'वेळ संपली.', rB: 'पुन्हा प्रयत्न', sucLbl: 'ेमेंट यशस्ी!' },
ta: { secure: '256-பட் SSL பாதுகா்பு', warn: 'கட்டத்தின் போது தாவலை மூட வண்டாம்', tLbl: 'நர வரம்பு', aLbl: 'ொத்த தொகை', sLbl: 'கட்டண செயல தேர்ந்தெட', sPp: 'உடனடி UPI பிமாற்றம்', sGp: 'Google UPI கட்டணம', sPt: 'வாலட் & UPI', oNm: 'மற்ற UPI செயி', sOt: 'UPI ID உள்ளடவும்', tF: 'வேகான', tP: 'பிரபலமான', uLbl: 'UPI ID உள்ிடவும்', uPh: 'yourname@upi', pDef: 'கட்டண ுறை தேர்ந்தெடுக்கவும்', pRdy: 'பாதுாப்பாக', foot: 'பதுகாப்பானத · NPCI UPI', nc: 'திரும்பு அழுத்த வேண்டாம் — கட்டணம் பாதுாப்பு.', mT: 'கடடணம் செயலாக்கம்', mS: 'காத்ிருங்கள்.', sTxt: 'பரிவர்த்தனை உறுதிப்படத்துகிறது...', mW: 'தாவலை மூட வேண்டாம்.', eT: 'மர்வு காலாதி', eS: 'நேரம் முடிந்தது.', rB: 'ீண்டும் முற்சி', sucLbl: 'கட்டணம் வெற்றி!' },
te: { secure: '256-బిట SSL భద్రత', warn: 'ెల్లింపు సమయంలో ట్యాబ్ మూయవద్దు', tLbl: 'సమయ పరిమితి', aLbl: 'మొత్తం', sLbl: 'చెల్లింపు యాప్ ఎంచుకోంి', sPp: 'తక్షణ UPI బదిలీ', sGp: 'Google UPI చెల్లింపు', sPt: 'వాలెట్ & UPI', oNm: 'ఇతర UPI యాప్', sOt: 'UPI ID నమోదు', tF: 'ేగవంతమైన', tP: 'ప్రసిద్ధ', uLbl: 'UPI ID నమోదు', uPh: 'yourname@upi', pDef: 'చెల్లింపు పద్ధతి ఎంచుకోండి', pRdy: 'సురక్ితంగా', foot: 'సుక్షితం · NPCI UPI', nc: 'వెనుకకు వళ్లవద్దు — ెల్లింపు సురక్షితం.', mT: 'చల్లింపు ప్ాసెస్', mS: 'వేచ ఉండండి.', sTxt: 'ావాదేవీ నిర్ధారణ...', mW: 'ట్ాబ్ మూయవద్దు.', eT: 'సెషన్ ముగిసింది', eS: 'సయం ముగిసింది.', rB: 'మళ్లీ ప్రయత్నం', sucLbl: 'చల్లింపు వియవంతం!' },
kn: { secure: '256-ಬಿಟ್ SSL ಭದರ', warn: 'ಪಾವತಿ ಸಯದಲ್ಲಿ ಟ್ಯಬ್ ಮುಚ್ಚಬೇಡಿ', tLbl: 'ಸಮಯ ಮಿತ', aLbl: 'ಒಟ್ಟು ಮೊ್ತ', sLbl: 'ಪಾವತಿ ಆಪ್ ಆಯ್ಕೆ', sPp: 'ತ್ವರಿತ UPI', sGp: 'Google UPI ಪಾವತಿ', sPt: '್ಯಾಲೆಟ್ & UPI', oNm: 'ಇತರ UPI ಆಪ್', sOt: 'UPI ID ನಮೂದಿಸಿ', tF: 'ವೇಗ', tP: 'ಜನಪ್ಿಯ', uLbl: 'UPI ID ನಮೂಿಸಿ', uPh: 'yourname@upi', pDef: 'ಪಾವತಿ ವಿಧನ ಆಯ್ಕೆ', pRdy: ' ಸುರಕ್ಷಿ', foot: 'ಸುರಕ್ಷಿ · NPCI UPI', nc: 'ಹಿಂದ ಒತ್ತಬೇಡಿ — ಪಾವತಿ ಸುರಕ್ಿತ.', mT: 'ಪಾವತಿ ್ರಕ್ರಿಯೆ', mS: 'ನಿರೀಕ್ಷಿಸಿ.', sTxt: 'ವ್ಯವಹಾರ ದೃಢೀಕರಣ...', mW: 'ಟಯಾಬ್ ಮುಚ್ಚಬೇಡಿ.', eT: 'ಸೆಷನ್ ಮುಗಿದಿದೆ', eS: 'ಮಯ ಮುಗಿದಿದೆ.', rB: 'ಮತ್ತೆ ಪ್ರಯತ್ನ', sucLbl: 'ಪಾವಿ ಯಶಸ್ವಿ!' },
bn: { secure: '256-বিট SSL সুরক্ষিত', warn: 'পেমেন্টের সম় ট্যাব বন্ করবেন না', tLbl: 'সময় সীমা', aLbl: 'মোট পরিমাণ', sLbl: 'পেমেন্ট অযাপ বেছে নি', sPp: 'তাৎক্ষণক UPI', sGp: 'Google UPI পেমেন্ট', sPt: 'ওয়লেট ও UPI', oNm: 'অন্যান্য UPI', sOt: 'UPI ID লিখুন', tF: 'দ্ুত', tP: 'জনপ্রিয়', uLbl: 'UPI ID লিখন', uPh: 'yourname@upi', pDef: 'েমেন্ট পদ্তি বেছে নিন', pRdy: ' নিরাদে পেমেন্ট', foot: 'নিরাপদ · NPCI UPI', nc: 'পিছনে যােন না — পেমেন্ট নিরাপদ।', mT: 'পেমেন্ট পরক্রিয়া', mS: 'নুগ্রহ করে পেক্ষা করু।', sTxt: 'লেনদেন িশ্চিত হচ্ে...', mW: 'ট্যাব বন্ধ করবেন না।', eT: 'সেশন মেযাদোত্তীর্ণ', eS: 'সময় শেষ।', rB: 'আবার চেষ্া', sucLbl: 'পেমেন্ট সফল!' },
ml: { secure: '256-ബിറ്റ് SSL സരക്ഷ', warn: 'പേമന്റ് സമയം ടബ് അടയ്ക്കരുത്', tLbl: 'സമയ പിധി', aLbl: 'മൊത്ം തുക', sLbl: 'പേമന്റ് ആപ്പ് ിരഞ്ഞെടുക്കുക', sPp: 'തൽക്ഷ UPI', sGp: 'Google UPI', sPt: 'ാലറ്റ് & UPI', oNm: 'മറ്റ് UPI ആപ്പ്', sOt: 'UPI ID നൽകുക', tF: 'വേഗം', tP: 'ജന്രിയം', uLbl: 'UPI ID ൽകുക', uPh: 'yourname@upi', pDef: 'പേമെന്റ രീതി തിരഞ്െടുക്കുക', pRdy: ' സുരക്ഷതമായി', foot: 'സുക്ഷിതം · NPCI UPI', nc: 'പിന്നോട്് പോകരുത് — േമെന്റ് സുക്ഷിതം.', mT: 'പേമെന്റ് ചെയ്ുന്നു', mS: 'കാത്തിരിക്കൂ.', sTxt: 'ഇടപാട് സ്ഥിരീകരണം...', mW: 'ാബ് അടയ്ക്കരുത്.', eT: 'സെഷൻ കഴിഞ്ഞു', eS: 'സയം കഴിഞ്ഞു.', rB: 'വീണ്ടും ശ്രമിക്കുക', sucLbl: 'പേമെന്റ് വജയകരം!' },
pa: { secure: '256-ਬਿੱਟ SSL ਸੁੱਖਿਅਤ', warn: 'ਭੁਤਾਨ ਦੌਰਾਨ ਟਬ ਬੰਦ ਨਾ ਕਰੋ', tLbl: 'ਸਮਾਂ ਸੀਮਾ', aLbl: 'ਕੁੱਲ ਰਕਮ', sLbl: 'ਭੁਗਤਾਨ ਐਪ ਚੁਣੋ', sPp: 'ਤੁਰੰ UPI', sGp: 'Google UPI ਭੁਤਾਨ', sPt: 'ਵਾਲਿਟ ਅਤੇ UPI', oNm: 'ਹੋਰ UPI ਐਪ', sOt: 'UPI ID ਦਰਜ ਕਰੋ', tF: 'ਤੇਜ਼', tP: 'ਪ੍ਰਸਿੱਧ', uLbl: 'UPI ID ਦਰਜ ਕਰੋ', uPh: 'yourname@upi', pDef: 'ਭੁਗਤਾਨ ਢੰਗ ਚੁਣੋ', pRdy: ' ਸੁਰੱਖਿਅਤ ਭੁਗਤਾਨ', foot: 'ਸੁਰੱਖਿਅਤ · NPCI UPI', nc: 'ਬੈਕ ਨਾ ਰੋ — ਭੁਗਤਾਨ ਸੁਰੱਖਿਅਤ।', mT: 'ਭੁਗਤਾਨ ਹੋ ਰਹਾ', mS: 'ਉਡੀਕ ਕਰੋ।', sTxt: 'ਲੈਣ-ਦੇ ਪੁਸ਼ਟੀ ਹੋ ਰੀ...', mW: 'ਟੈਬ ਬੰ ਨਾ ਕਰੋ।', eT: 'ਸਸ਼ਨ ਖਤਮ', eS: 'ਸਮਾਂ ਖਤਮ।', rB: 'ਦੁਾਰਾ ਕੋਸ਼ਿਸ', sucLbl: 'ਭੁਗਤਾਨ ਫਲ!' },
or: { secure: '256-ିଟ୍ SSL ସୁରକ୍', warn: 'ପେମେଣ୍ଟ ମୟ ଟ୍ୟାବ ବନଦ ନ କରନ୍ତୁ', tLbl: 'ସମୟ ସୀମା', aLbl: 'ମୋଟ ରାଶି', sLbl: 'ଦେୟ ଆପ ବାଛନ୍ତୁ', sPp: 'ତ୍ୱରିତ UPI', sGp: 'Google UPI', sPt: 'ୱଲେଟ ଏବଂ UPI', oNm: 'ନ୍ୟ UPI ଆପ', sOt: 'UPI ID ପ୍ରବେଶ', tF: 'ଦରୁତ', tP: 'ଲୋକପ୍ରିୟ', uLbl: 'UPI ID ପ୍ବେଶ', uPh: 'yourname@upi', pDef: 'ଦେୟ ପଦ୍ଧତ ବାଛନ୍ତୁ', pRdy: ' ସୁରକ୍ଷିତ', foot: 'ସୁରକ୍ଷିତ · NPCI UPI', nc: 'ବ୍ୟକ ନ ଦବାନ୍ତୁ ଦେୟ ସୁରକ୍ଷତ.', mT: 'ଦେୟ ଚାଲ', mS: 'ଅପେକ୍ଷା ରନ୍ତୁ.', sTxt: 'ଲେଦେଣ ନିଶ୍ଚି...', mW: 'ଟ୍ୟାବ ବନ୍ଦ ନ କରନ୍ତୁ.', eT: 'ସ୍ଵୀକ ଶେଷ', eS: 'ସମୟ ଶେଷ.', rB: 'ପୁଣି ଚେଷ୍ଟା', sucLbl: 'ଦେୟ ସଫଳ!' }
};
let cur = 'en';
const $ = id => document.getElementById(id);
const tx = (id, v) => { const e = $(id); if (e) e.textContent = v };
function setLang(l) {
cur = l; const t = L[l] || L.en;
tx('secureTxt', t.secure); tx('warnTxt', t.warn);
tx('timerLbl', t.tLbl); tx('amtLbl', t.aLbl); tx('secLbl', t.sLbl);
tx('s-pp', t.sPp); tx('s-gp', t.sGp); tx('s-pt', t.sPt);
tx('otName', t.oNm); tx('s-ot', t.sOt);
tx('tag-fast', t.tF); tx('tag-pop', t.tP);
tx('payTxt', sel ? t.pRdy : t.pDef);
tx('mTitle', t.mT); tx('mSub', t.mS);
tx('stepTxt', t.sTxt); tx('mWarn', t.mW);
tx('expTitle', t.eT); tx('expSub', t.eS); tx('retryBtn', t.rB);
tx('successLbl', t.sucLbl);
}
const UPI_LINK = "<?php echo $data['QRCODE_STRING']; ?>";
const CALLBACK_URL = "<?php echo $callback_url; ?>";
const STATUS_URL = "<?php echo $checkStatusUrl; ?>";
const UPDATE_URL = "<?php echo $linkUpdateUrl; ?>";
let sel = "pp";
// SELECT OPTION
function pick(el, id, ev) {
document.querySelectorAll('.opt').forEach(o => o.classList.remove('sel'));
el.classList.add('sel');
sel = id;
tx('payTxt', (L[cur] || L.en).pRdy);
$('payBtn').disabled = false;
if (ev) {
const r = el.getBoundingClientRect(), sp = document.createElement('span');
sp.className = 'rpl';
const sz = Math.max(r.width, r.height);
sp.style.cssText = `width:${sz}px;height:${sz}px;left:${ev.clientX - r.left - sz / 2}px;top:${ev.clientY - r.top - sz / 2}px`;
el.appendChild(sp); setTimeout(() => sp.remove(), 600);
}
}
// START PAYMENT
function startPay() {
document.getElementById('modal').classList.add('show');
document.getElementById('payBtn').remove();
let finalLink = UPI_LINK;
if (sel === "pp") {
finalLink = "phonepe://pay?" + UPI_LINK.split("upi://pay?")[1];
} else if (sel === "pt") {
finalLink = "paytmmp://pay?" + UPI_LINK.split("upi://pay?")[1];
} else if (sel === "gp") {
finalLink = "tez://upi/pay?" + UPI_LINK.split("upi://pay?")[1];
}
fetch(UPDATE_URL, {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({}),
keepalive: true
});
setTimeout(() => {
window.location.href = finalLink;
}, 500);
}
function showSuccess() {
// Swap spinner → success ring
$('spinEl').style.display = 'none';
$('successRing').classList.add('show');
// Update text
const t = L[cur] || L.en;
tx('mTitle', t.sucLbl);
$('mSub').style.display = 'none';
// Swap step row success amount
$('stepRow').style.display = 'none';
$('sdot').className = 'sdot done';
$('successMsg').classList.add('show');
// Swap alert → done button
$('mAlert').style.display = 'none';
// Stop timer
clearInterval(tmr);
}
// TIMER
let secs = 300;
let timer = document.getElementById("tEl");
tmr = setInterval(() => {
let m = Math.floor(secs / 60);
let s = secs % 60;
timer.textContent = `${String(m).padStart(2, '0')}:${String(s).padStart(2, '0')}`;
if (secs <= 0) {
clearInterval(tmr);
window.location.href = CALLBACK_URL;
}
secs--;
}, 1000);
// STATUS CHECK
let checkStatusInterval = setInterval(checkStatus, 10000);
function checkStatus() {
fetch(STATUS_URL, {
method: "POST",
headers: { "Content-Type": "application/json" }
})
.then(res => res.json())
.then(data => {
if (data.status === "SUCCESS") {
showSuccess();
clearInterval(checkStatusInterval);
setTimeout(() => {
window.location.href = CALLBACK_URL;
}, 4000);
}
});
}
</script>
</body>
</html>