@thepayulink/checkout 2.0.1 → 2.1.0

package/src/index.js

@@ -7,23 +7,46 @@
 //     order_id: orderId,                              // created by YOUR server
 //     prefill: { name: 'A Kumar', contact: '9876543210' },
 //     handler: (r) => {
-//       // POST these three to your server and verify the signature there.
+//       // POST these to your server and verify the signature there.
 //       // r.payulink_order_id, r.payulink_payment_id, r.payulink_signature
 //     },
-//     onDismiss: () => {},
 //   });
 //
-// The secret key is NEVER used here. The amount always comes from the stored
-// order, so nothing the browser does can change what is charged.
-import { openOverlay } from './overlay.js';
+// Renders the branded PayuLink modal in-page. The secret key is NEVER used here,
+// and the amount always comes from the stored order, so nothing the browser does
+// can change what is charged.
+import { openModal } from './modal.js';
+import qrcode from 'qrcode-generator';
 
 const DEFAULTS = {
   apiBase: 'https://payulink.io/api',
-  name: null,        // falls back to the merchant name on the order
-  theme: { color: '#38BDF8' },
+  assetBase: 'https://assetcdn.payulink.io/checkout/v1/assets',
+  name: null,          // falls back to the merchant name on the order
+  logo: null,
+  brandColor: null,
   pollMs: 2500,
 };
 
+/**
+ * Encode the UPI intent as a QR in the browser.
+ *
+ * The gateway mints the tracked QR server-side and hands us its `upi_intent_url`;
+ * we only draw it. That keeps a single source of truth for the payment itself —
+ * we are not re-implementing QR/pool logic here, and status still comes solely
+ * from the session endpoint.
+ */
+function toQrDataUrl(text) {
+  if (!text) return null;
+  try {
+    const qr = qrcode(0, 'M');       // type 0 = auto-size, medium ECC
+    qr.addData(String(text));
+    qr.make();
+    return qr.createDataURL(6, 2);   // cell size, margin
+  } catch {
+    return null;                     // modal falls back to the intent link
+  }
+}
+
 export default class PayuLink {
   constructor(options = {}) {
     if (typeof window === 'undefined' || typeof document === 'undefined') {
@@ -32,7 +55,7 @@ export default class PayuLink {
     }
     const key = options.key || options.keyId || options.key_id;
     if (!key) throw new Error('PayuLink: `key` (your publishable pl_live_… / pl_test_… key) is required');
-    if (/^pl_(live|test)_/.test(key) === false) {
+    if (!/^pl_(live|test)_/.test(key)) {
       console.warn('PayuLink: `key` should look like pl_live_… or pl_test_…');
     }
     // Guard the classic footgun.
@@ -55,6 +78,7 @@ export default class PayuLink {
   open(p = {}) {
     const o = Object.assign({}, this.options, p);
     const apiBase = String(o.apiBase || '').replace(/\/$/, '');
+    const assetBase = String(o.assetBase || `${apiBase}/assets`).replace(/\/$/, '');
     const orderId = o.order_id || o.orderId;
     if (!orderId) throw new Error('PayuLink: `order_id` is required. Create it on your server with POST /v1/orders.');
 
@@ -63,86 +87,108 @@ export default class PayuLink {
       else console.error('PayuLink:', e.message || e);
     };
 
-    const handle = { _overlay: null, _stop: null, close() { this._stop?.(); this._overlay?.close(); } };
-    let settled = false;
-
-    const finish = (result) => {
-      if (settled) return;
-      settled = true;
-      handle._stop?.();
-      handle._overlay?.close();
-      if (typeof o.handler === 'function') o.handler(result);
-      if (typeof o.onSuccess === 'function') o.onSuccess(result);
-    };
+    let session = null;    // the open session (carries session_token)
+    let handoff = null;    // captured from the poller — the ONLY source of the signature
 
-    (async () => {
-      // 1. Open a session with the PUBLISHABLE key. No secret, ever.
-      let session;
-      try {
-        const res = await fetch(`${apiBase}/v1/checkout/session`, {
-          method: 'POST',
-          headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify({
-            key_id: o.key,
-            order_id: orderId,
-            customer: o.prefill ? {
-              name: o.prefill.name,
-              contact: o.prefill.contact,
-              email: o.prefill.email,
-            } : undefined,
-          }),
-        });
-        session = await res.json().catch(() => ({}));
-        if (!res.ok) {
-          const err = session?.error || {};
-          throw new Error(err.description || `Could not start payment (HTTP ${res.status})`);
-        }
-      } catch (e) {
-        return onError(e);
-      }
-
-      // 2. Show the hosted payment page. It already handles the QR, UPI intent
-      //    and auto-verification — we deliberately don't reimplement that here.
-      handle._overlay = openOverlay({
-        url: session.payment_link,
-        upiIntentUrl: session.upi_intent_url,
-        amount: session.amount,
-        currency: session.currency,
-        merchantName: o.name || session.merchant_name,
-        themeColor: (o.theme && o.theme.color) || DEFAULTS.theme.color,
-        mode: session.mode,
-        onDismiss: () => {
-          if (settled) return;
-          settled = true;
-          handle._stop?.();
-          if (typeof o.onDismiss === 'function') o.onDismiss();
-        },
+    // 1. Open a session with the PUBLISHABLE key. No secret, ever.
+    //    The modal calls this once it has the customer's contact details.
+    const createOrder = async (customer) => {
+      const res = await fetch(`${apiBase}/v1/checkout/session`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          key_id: o.key,
+          order_id: orderId,
+          customer: customer ? {
+            name: customer.name,
+            contact: customer.mobile || customer.contact,
+            email: customer.email,
+          } : undefined,
+        }),
       });
+      const s = await res.json().catch(() => ({}));
+      if (!res.ok) throw new Error(s?.error?.description || `Could not start payment (HTTP ${res.status})`);
+      session = s;
+
+      return {
+        merchant_order_no: s.order_id,
+        // /v1 speaks PAISE; the modal's currency formatter expects rupees.
+        amount: s.amount / 100,
+        upi_intent_url: s.upi_intent_url,
+        payment_link: s.payment_link,
+        qr_data_url: toQrDataUrl(s.upi_intent_url),
+        // expires_at is epoch SECONDS — server_now must be in the same unit.
+        expires_at: s.expires_at,
+        server_now: Math.floor(Date.now() / 1000),
+      };
+    };
 
-      // 3. Poll for the authoritative result. The status endpoint is the only
-      //    place the signed handoff is released, and only for this session.
-      const poll = setInterval(async () => {
+    // 2. Poll the session for the authoritative result. This endpoint is the only
+    //    place the signed handoff is released, and only for this session.
+    const watchOrder = (_orderNo, onUpdate) => {
+      const tick = async () => {
+        if (!session?.session_token) return;
         try {
           const r = await fetch(`${apiBase}/v1/checkout/session/${encodeURIComponent(session.session_token)}`);
           const s = await r.json().catch(() => ({}));
           if (s.status === 'paid' && s.payulink_signature) {
-            finish({
+            handoff = {
               payulink_order_id: s.payulink_order_id,
               payulink_payment_id: s.payulink_payment_id,
               payulink_signature: s.payulink_signature,
-              utr: s.utr,
+              utr: s.utr || null,
               amount: s.amount,
-            });
-          } else if (s.status === 'failed' || s.status === 'expired') {
-            clearInterval(poll);
-            handle._overlay?.close();
-            onError(new Error(`Payment ${s.status}`));
+            };
           }
+          // Map to the status ints the modal understands.
+          onUpdate({
+            status: s.status === 'paid' ? 0
+                  : s.status === 'failed' ? 1
+                  : s.status === 'expired' ? 3
+                  : 2,
+            status_label: String(s.status || 'pending').toUpperCase(),
+            utr: s.utr || null,
+          });
         } catch { /* transient — keep polling */ }
-      }, o.pollMs);
-      handle._stop = () => clearInterval(poll);
-    })();
+      };
+      const t = setInterval(tick, o.pollMs || DEFAULTS.pollMs);
+      tick();
+      return () => clearInterval(t);
+    };
 
+    // Fetch the amount BEFORE rendering. This is a cheap, read-only preview —
+    // it allocates nothing. We never accept a client-supplied amount.
+    const handle = { _inner: null, close() { this._inner?.close(); } };
+    fetch(`${apiBase}/v1/checkout/order/${encodeURIComponent(orderId)}?key_id=${encodeURIComponent(o.key)}`)
+      .then(async (r) => {
+        const meta = await r.json().catch(() => ({}));
+        if (!r.ok) throw new Error(meta?.error?.description || 'Unknown or expired order');
+        handle._inner = openModal(Object.assign({}, {
+          apiBase,
+          assetBase,
+          name: o.name || meta.merchant_name,
+          logo: o.logo || `${assetBase}/payulink-logo.png`,
+          brandColor: o.brandColor,
+          note: o.note,
+          prefill: o.prefill || {},
+          amount: meta.amount / 100,          // PAISE -> rupees for the modal's formatter
+          description: o.description || o.item || meta.merchant_name,
+          createOrder,
+          watchOrder,
+          onSuccess: () => {
+            const result = handoff || {
+              payulink_order_id: session?.order_id || orderId,
+              payulink_payment_id: null,
+              payulink_signature: null,
+            };
+            if (typeof o.handler === 'function') o.handler(result);
+            if (typeof o.onSuccess === 'function') o.onSuccess(result);
+          },
+          onDismiss: () => { if (typeof o.onDismiss === 'function') o.onDismiss(); },
+          onError,
+        }));
+      })
+      .catch(onError);
     return handle;
   }
 
@@ -151,6 +197,7 @@ export default class PayuLink {
   }
 }
 
+// eslint-disable-next-line no-unused-vars
 if (typeof window !== 'undefined') {
   window.PayuLink = PayuLink;
   // Back-compat with the older global name.

package/src/modal.js

@@ -0,0 +1,362 @@
+// The checkout modal render engine. Framework-agnostic; renders into document.body.
+// Adapted from Elite Yatra's hosted PayulinkCheckout widget.
+import { injectStyles } from './style.js';
+
+const inr = (r) => '₹' + Number(r || 0).toLocaleString('en-IN', { maximumFractionDigits: 2 });
+const mmss = (s) => `${Math.floor(s / 60)}:${(s % 60) < 10 ? '0' : ''}${s % 60}`;
+const esc = (s) => String(s == null ? '' : s).replace(/[&<>"]/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;' }[c]));
+
+const SVG = (inner) => `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">${inner}</svg>`;
+const IC = {
+  qr: SVG('<rect width="5" height="5" x="3" y="3" rx="1"/><rect width="5" height="5" x="16" y="3" rx="1"/><rect width="5" height="5" x="3" y="16" rx="1"/><path d="M21 16h-3a2 2 0 0 0-2 2v3"/><path d="M21 21v.01"/><path d="M12 7v3a2 2 0 0 1-2 2H7"/><path d="M3 12h.01"/><path d="M12 3h.01"/><path d="M12 16v.01"/><path d="M16 12h1"/><path d="M21 12v.01"/><path d="M12 21v-1"/>'),
+  card: SVG('<rect width="20" height="14" x="2" y="5" rx="2"/><line x1="2" x2="22" y1="10" y2="10"/>'),
+  netbanking: SVG('<path d="M10 18v-7"/><path d="M11.119 2.205a2 2 0 0 1 1.762 0l7.84 3.846A.5.5 0 0 1 20.5 7h-17a.5.5 0 0 1-.22-.949z"/><path d="M14 18v-7"/><path d="M18 18v-7"/><path d="M3 22h18"/><path d="M6 18v-7"/>'),
+  wallet: SVG('<path d="M19 7V4a1 1 0 0 0-1-1H5a2 2 0 0 0 0 4h15a1 1 0 0 1 1 1v4h-3a2 2 0 0 0 0 4h3a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1"/><path d="M3 5v14a2 2 0 0 0 2 2h15a1 1 0 0 0 1-1v-4"/>'),
+  emi: SVG('<path d="M16 14v2.2l1.6 1"/><path d="M16 2v4"/><path d="M21 7.5V6a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h3.5"/><path d="M3 10h5"/><path d="M8 2v4"/><circle cx="16" cy="16" r="6"/>'),
+  back: SVG('<path d="M15 18l-6-6 6-6"/>'),
+  mail: SVG('<rect x="2" y="4" width="20" height="16" rx="2"/><path d="m22 7-10 5L2 7"/>'),
+  arrow: SVG('<path d="M5 12h14M13 6l6 6-6 6"/>'),
+  verified: SVG('<path d="M9 12l2 2 4-4"/><circle cx="12" cy="12" r="10"/>'),
+  lock: SVG('<rect width="18" height="11" x="3" y="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/>'),
+};
+const shield = '<svg width="13" height="13" viewBox="0 0 24 24" fill="currentColor"><path d="M12 1l9 4v6c0 5.5-3.8 10.7-9 12-5.2-1.3-9-6.5-9-12V5l9-4z"/></svg>';
+
+const SOON = [
+  { m: 'card', t: 'Cards', s: 'Visa, Mastercard & RuPay', ic: 'card' },
+  { m: 'netbanking', t: 'Netbanking', s: 'All Indian banks', ic: 'netbanking' },
+  { m: 'wallet', t: 'Wallet', s: 'Paytm, PhonePe & more', ic: 'wallet' },
+  { m: 'emi', t: 'EMI', s: 'EMI via cards & more', ic: 'emi' },
+];
+
+/**
+ * Renders the checkout modal. Returns a handle: { close() }.
+ * @param {object} o - options (see index.js for the public shape).
+ *   Required plumbing: o.createOrder(customer) -> order, o.watchOrder(orderNo, onUpdate) -> stopFn.
+ *   Optional: o.apiBase (used for the UTR fallback poll after success).
+ */
+export function openModal(o) {
+  injectStyles();
+  o = Object.assign({ name: 'Payment', description: '', amount: 0, assetBase: '/assets', logo: '/assets/payulink-logo.png', prefill: {}, apiBase: '' }, o);
+  const apiBase = String(o.apiBase || '').replace(/\/$/, '');
+  const amt = inr(o.amount);
+  const UPI = ['gpay', 'phonepe', 'paytm', 'bhim', 'amazonpay'].reduce((m, k) => (m[k] = `${o.assetBase}/upi/${k}.png`, m), {});
+  const APPS = ['phonepe', 'gpay', 'paytm', 'bhim', 'amazonpay'];
+
+  const state = { screen: 'loader', order: null, customer: null, timer: null, stop: null, done: false, utr: null, expiryMs: null };
+
+  const root = document.createElement('div');
+  root.id = 'pl-overlay';
+  if (o.brandColor) root.style.setProperty('--pl-brand', o.brandColor);
+  root.innerHTML = `
+    <div class="pl-modal" role="dialog" aria-modal="true">
+      <div class="pl-splash" id="pl-splash">
+        <div class="pl-shield">
+          <svg class="pl-shield-bg" viewBox="0 0 120 140" aria-hidden="true">
+            <defs><linearGradient id="pl-shgrad" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#5a93ff"/><stop offset="1" stop-color="#1f5fe0"/></linearGradient></defs>
+            <path d="M60 3 L113 25 V70 C113 105 90 128 60 137 C30 128 7 105 7 70 V25 Z" fill="url(#pl-shgrad)"/>
+          </svg>
+          <span class="pl-shield-shine"></span>
+          <img class="pl-shield-logo" src="${esc(o.assetBase)}/payulink-logo.png" alt="payulink">
+        </div>
+        <div class="pl-splash-foot">Secured By <span class="pl-pb"><img src="${esc(o.assetBase)}/payulink-logo.png" alt=""><strong>payulink</strong></span></div>
+      </div>
+      <aside class="pl-left">
+        <div class="pl-brandrow">
+          <div class="pl-logo"><img src="${esc(o.logo)}" alt=""></div>
+          <div class="pl-bmeta">
+            <div class="pl-bname">${esc(o.name)}</div>
+            <div class="pl-btrust">${IC.verified}<span>Trusted Business</span></div>
+          </div>
+        </div>
+        <div class="pl-summary">
+          <div class="pl-sl">Price Summary</div>
+          <div class="pl-samt">${amt}</div>
+          <div class="pl-snote">${esc(o.note || ('Paying for ' + (o.description || o.name)))}</div>
+        </div>
+        <svg class="pl-illus" viewBox="0 0 230 150" fill="none"><rect x="20" y="70" width="58" height="68" rx="5" fill="#fff" fill-opacity=".92"/><path d="M33 70c0-10 5-16 16-16s16 6 16 16" stroke="#fff" stroke-width="3.5"/><rect x="88" y="55" width="68" height="83" rx="5" fill="#fff"/><path d="M104 55c0-12 6-19 18-19s18 7 18 19" stroke="#fff" stroke-width="3.5"/><rect x="150" y="92" width="52" height="46" rx="4" fill="#fff" fill-opacity=".92"/><circle cx="178" cy="40" r="18" fill="#fff"/><path d="M178 30v20M168 40h20" stroke="currentColor" stroke-width="3.5" opacity=".5"/></svg>
+        <div class="pl-secured">${shield}Secured by <span class="pl-pb"><img src="${esc(o.assetBase)}/payulink-logo.png" alt=""><strong>payulink</strong></span></div>
+      </aside>
+      <section class="pl-main">
+        <header class="pl-head">
+          <button class="pl-hic pl-back" id="pl-back" aria-label="Back">${IC.back}</button>
+          <div class="pl-title" id="pl-title">Payment Options</div>
+          <button class="pl-hic pl-dots" aria-label="More">⋯</button>
+          <button class="pl-hic pl-close-x" id="pl-close" aria-label="Close">×</button>
+        </header>
+        <div class="pl-vp"><div class="pl-screen pl-active" id="pl-screen"></div></div>
+        <footer class="pl-foot">${IC.lock}<span>Encrypted &amp; secure payments</span></footer>
+      </section>
+    </div>`;
+  document.body.appendChild(root);
+  const prevOverflow = document.body.style.overflow;
+  document.body.style.overflow = 'hidden';
+
+  const vp = root.querySelector('.pl-vp');
+  const titleEl = root.querySelector('#pl-title');
+  const backEl = root.querySelector('#pl-back');
+
+  function dismiss() { cleanup(); o.onDismiss && o.onDismiss(); }
+  function cleanup() {
+    if (state.stop) { try { state.stop(); } catch {} }
+    clearInterval(state.timer);
+    root.classList.add('pl-closing');
+    document.body.style.overflow = prevOverflow;
+    setTimeout(() => root.remove(), 240);
+  }
+  root.querySelector('#pl-close').onclick = dismiss;
+  root.addEventListener('mousedown', (e) => { if (e.target.id === 'pl-overlay') dismiss(); });
+  backEl.onclick = () => { if (state.screen === 'contact' || state.screen === 'success') return; render('options'); };
+
+  const TITLES = { loader: 'Payment Options', contact: 'Contact Details', options: 'Payment Options', success: 'Payment Successful' };
+
+  function render(name) {
+    state.screen = name;
+    titleEl.textContent = TITLES[name] || 'Payment';
+    backEl.classList.toggle('pl-show', name === 'options');
+    clearInterval(state.timer);
+    const fresh = document.createElement('div');
+    fresh.className = 'pl-screen pl-active' + (name === 'options' ? ' pl-screen-options' : '');
+    fresh.innerHTML = SCREEN[name] ? SCREEN[name]() : '';
+    vp.replaceChildren(fresh);
+    bind(name, fresh);
+  }
+
+  const upiThumbs = APPS.slice(0, 4).map((k) => `<img src="${UPI[k]}" alt="">`).join('');
+  const appRow = APPS.map((k) => `<a class="pl-uapp" data-app="${k}" title="${k}"><img src="${UPI[k]}" alt="${k}"></a>`).join('');
+
+  const SCREEN = {
+    loader: () => `<div class="pl-loader"><div class="pl-bload"><img src="${esc(o.logo)}" alt=""><span class="pl-bring"></span><span class="pl-bripple"></span><span class="pl-bripple pl-bripple2"></span></div><p>Securely loading payment options…</p></div>`,
+
+    contact: () => `
+      <div class="pl-pad">
+        <div class="pl-h1">Contact details</div>
+        <div class="pl-sub">Enter your details to continue the payment</div>
+        <div class="pl-field"><label>Full Name</label>
+          <input class="pl-input" id="pl-name" type="text" placeholder="Enter your name" value="${esc(o.prefill.name || '')}"></div>
+        <div class="pl-field"><label>Mobile Number</label>
+          <div class="pl-phone"><div class="pl-cc">+91</div>
+            <input class="pl-input" id="pl-mobile" type="tel" maxlength="10" placeholder="Enter mobile number" value="${esc(o.prefill.contact || '')}"></div></div>
+        <div class="pl-field"><label>Email Address <span class="pl-opt">(optional)</span></label>
+          <div class="pl-inwrap"><span class="pl-inicon">${IC.mail}</span>
+            <input class="pl-input pl-padleft" id="pl-email" type="email" placeholder="Enter email address" value="${esc(o.prefill.email || '')}"></div></div>
+        <button class="pl-cta" id="pl-continue">Continue <span class="pl-cta-arr">${IC.arrow}</span></button>
+        <div class="pl-err" id="pl-cerr"></div>
+        <div class="pl-trust">${shield}100% secure payments</div>
+      </div>`,
+
+    options: () => `
+      <div class="pl-options">
+        <div class="pl-nav" id="pl-nav">
+          <div class="pl-navlabel">Recommended</div>
+          <div class="pl-navitem active" data-m="upi">
+            <div class="pl-ni-ic">${IC.qr}</div>
+            <div class="pl-ni-body"><div class="pl-ni-t">UPI</div></div>
+            <div class="pl-ni-apps">${upiThumbs}</div>
+          </div>
+          <div class="pl-navlabel">Cards, Banking &amp; More</div>
+          ${SOON.map((s) => `
+          <div class="pl-navitem pl-disabled" data-m="${s.m}">
+            <div class="pl-ni-ic pl-ic-${s.ic}">${IC[s.ic]}</div>
+            <div class="pl-ni-body"><div class="pl-ni-t">${s.t}</div><div class="pl-ni-s">${s.s}</div></div>
+            <span class="pl-soon">Coming soon</span>
+          </div>`).join('')}
+        </div>
+        <div class="pl-pane" id="pl-pane">${upiPane()}</div>
+      </div>`,
+
+    success: () => {
+      const colors = ['#00c060', '#3395ff', '#ffb020', '#ff5a5f', '#7a52d8', '#19c3c3'];
+      const confetti = Array.from({ length: 18 }, (_, i) => {
+        const ang = (i / 18) * Math.PI * 2 + (i % 2 ? 0.22 : -0.22);
+        const dist = 60 + ((i * 13) % 40);
+        const tx = Math.round(Math.cos(ang) * dist), ty = Math.round(Math.sin(ang) * dist);
+        const c = colors[i % colors.length];
+        const r = (i % 2 ? 1 : -1) * (140 + i * 14);
+        const w = i % 3 === 0 ? 6 : 8, h = i % 4 === 0 ? 6 : 12;
+        return `<i class="pl-confetti" style="--tx:${tx}px;--ty:${ty}px;--c:${c};--r:${r}deg;width:${w}px;height:${h}px;border-radius:${i % 4 === 0 ? '50%' : '2px'};animation-delay:${(0.15 + i * 0.024).toFixed(3)}s"></i>`;
+      }).join('');
+      return `
+      <div class="pl-success">
+        <div class="pl-burst">
+          ${confetti}
+          <span class="pl-ripple"></span><span class="pl-ripple pl-ripple2"></span>
+          <div class="pl-check"><svg viewBox="0 0 24 24"><path d="M5 13l4 4L19 7"/></svg></div>
+        </div>
+        <h2>Payment Successful</h2>
+        <p>${amt} paid${o.name ? ' to ' + esc(o.name) : ''}</p>
+        <div class="pl-pid" id="pl-pid">${esc((state.order && state.order.merchant_order_no) || '')}</div>
+        ${state.utr ? `<div class="pl-pid pl-utr">UTR ${esc(state.utr)}</div>` : ''}
+      </div>`;
+    },
+  };
+
+  function upiPane() {
+    return `
+      <div class="pl-paneh">UPI QR</div>
+      <div class="pl-qrcard">
+        <div class="pl-qrbox" id="pl-qr"><div class="pl-qrloading"></div></div>
+        <div class="pl-qrside">
+          <div class="pl-scan">Scan the QR using any UPI App</div>
+          <div class="pl-approw" id="pl-applist">${appRow}</div>
+          <div class="pl-validrow"><span class="pl-dot"></span><span id="pl-timer">Valid 5:00</span></div>
+        </div>
+      </div>
+      <div class="pl-paneh pl-paneh2">Pay with UPI ID / Number</div>
+      <div class="pl-vparow">
+        <input class="pl-vpa" id="pl-vpa" placeholder="example@okhdfcbank" autocomplete="off" spellcheck="false">
+        <button class="pl-verify" id="pl-verify">Verify and Pay</button>
+      </div>
+      <div id="pl-status" class="pl-pendrow"><span class="pl-mini-spin"></span> Waiting for payment…</div>`;
+  }
+
+  function bind(name, el) {
+    if (name === 'contact') {
+      el.querySelector('#pl-continue').onclick = () => {
+        const nm = el.querySelector('#pl-name').value.trim();
+        const mob = el.querySelector('#pl-mobile').value.replace(/\D/g, '');
+        const em = el.querySelector('#pl-email').value.trim();
+        const err = el.querySelector('#pl-cerr');
+        if (nm.length < 2) return (err.textContent = 'Please enter your name');
+        if (mob.length !== 10) return (err.textContent = 'Enter a valid 10-digit mobile number');
+        state.customer = { name: nm, mobile: mob, email: em };
+        render('options');
+      };
+    } else if (name === 'options') {
+      el.querySelectorAll('.pl-navitem').forEach((m) => (m.onclick = () => {
+        const k = m.dataset.m;
+        if (k === 'upi') return;
+        toast('Coming soon — please pay via UPI / QR for now');
+      }));
+      const vbtn = el.querySelector('#pl-verify');
+      if (vbtn) vbtn.onclick = () => {
+        const v = (el.querySelector('#pl-vpa').value || '').trim();
+        if (!/^[\w.\-]{2,}@[a-zA-Z]{2,}$/.test(v)) { el.querySelector('#pl-vpa').focus(); return toast('Enter a valid UPI ID, e.g. name@okhdfcbank'); }
+        const intent = state.order && (state.order.upi_intent_url || state.order.payment_link);
+        if (intent && /Android|iPhone|iPad|Mobile/i.test(navigator.userAgent)) { location.href = intent; }
+        else toast('Scan the QR with your phone’s UPI app to complete the payment.');
+      };
+      startTimer();
+      selectUpi(true);
+    }
+  }
+
+  let creating = false;
+  async function selectUpi(onScreen) {
+    if (!onScreen) render('options');
+    if (state.order) { fillQr(); return; }
+    if (creating) return;
+    creating = true;
+    try {
+      if (!state.customer) state.customer = { name: o.prefill.name || 'Customer', mobile: (o.prefill.contact || '').replace(/\D/g, ''), email: o.prefill.email || '' };
+      state.order = await o.createOrder(state.customer);
+      fillQr();
+      watch();
+    } catch (e) {
+      const q = root.querySelector('#pl-qr');
+      if (q) { q.innerHTML = `<div class="pl-qrerr"><span>${esc(e.message || 'Could not start payment')}</span><button class="pl-retry" id="pl-retry">Try again</button></div>`; const r = q.querySelector('#pl-retry'); if (r) r.onclick = () => { creating = false; q.innerHTML = '<div class="pl-qrloading"></div>'; selectUpi(true); }; }
+    } finally { creating = false; }
+  }
+
+  function fillQr() {
+    const ord = state.order; if (!ord) return;
+    setExpiryFromOrder(ord);
+    const q = root.querySelector('#pl-qr');
+    if (q) {
+      if (ord.qr_data_url) q.innerHTML = `<img src="${ord.qr_data_url}" alt="UPI QR">`;
+      else q.innerHTML = `<div class="pl-qrerr"><span>QR unavailable — use a UPI app below</span></div>`;
+    }
+    const intent = ord.upi_intent_url || ord.payment_link || '#';
+    const list = root.querySelector('#pl-applist');
+    if (list) list.querySelectorAll('.pl-uapp').forEach((a) => { a.setAttribute('href', intent); a.setAttribute('target', '_blank'); a.setAttribute('rel', 'noopener'); });
+    startTimer();
+  }
+
+  function setExpiryFromOrder(ord) {
+    if (ord && ord.expires_at && ord.server_now) {
+      state.expiryMs = Date.now() + Math.max(0, ord.expires_at - ord.server_now);
+    } else if (!state.expiryMs) {
+      state.expiryMs = Date.now() + 5 * 60 * 1000;
+    }
+  }
+
+  function expireQr() {
+    if (state.done) return;
+    const q = root.querySelector('#pl-qr');
+    if (q) q.innerHTML = `<div class="pl-qrerr"><span>QR code expired</span><button class="pl-retry" id="pl-regen">Generate new QR</button></div>`;
+    const b = root.querySelector('#pl-regen'); if (b) b.onclick = regenerate;
+    const t = root.querySelector('#pl-timer'); if (t) t.textContent = 'Expired';
+    const vr = root.querySelector('.pl-validrow'); if (vr) vr.classList.add('pl-expired');
+  }
+  function regenerate() {
+    if (state.stop) { try { state.stop(); } catch {} state.stop = null; }
+    state.order = null; state.expiryMs = null; creating = false;
+    const vr = root.querySelector('.pl-validrow'); if (vr) vr.classList.remove('pl-expired');
+    const q = root.querySelector('#pl-qr'); if (q) q.innerHTML = '<div class="pl-qrloading"></div>';
+    selectUpi(true);
+  }
+
+  function watch() {
+    if (!state.order || state.stop) return;
+    state.stop = o.watchOrder(state.order.merchant_order_no, (u) => {
+      if (!u || typeof u.status !== 'number') return;
+      if (u.status === 0) { state.utr = u.utr || state.utr; succeed(); }
+      else if (u.status === 3) { clearInterval(state.timer); state.expiryMs = Date.now(); expireQr(); setStatus('failed', 'QR expired — generate a new one'); }
+      else if ([1, 4].includes(u.status)) setStatus('failed', 'Payment ' + ((u.status_label || 'failed').toLowerCase()));
+      else if (u.status === 6) setStatus('pending', 'Processing payment…');
+    });
+  }
+  function setStatus(kind, text) {
+    const s = root.querySelector('#pl-status'); if (!s) return;
+    s.className = kind === 'failed' ? 'pl-pendrow pl-fail' : 'pl-pendrow';
+    s.innerHTML = (kind === 'pending' ? '<span class="pl-mini-spin"></span> ' : '') + esc(text);
+  }
+  function succeed() {
+    if (state.done) return; state.done = true;
+    clearInterval(state.timer);
+    render('success');
+    o.onSuccess && o.onSuccess({ merchant_order_no: state.order.merchant_order_no, utr: state.utr, amount: o.amount });
+    if (!state.utr) pollUtr();
+  }
+  async function pollUtr() {
+    for (let i = 0; i < 10 && !state.utr; i++) {
+      await new Promise((r) => setTimeout(r, 4000));
+      try {
+        const o2 = await fetch(`${apiBase}/api/order/${state.order.merchant_order_no}`).then((r) => r.json());
+        if (o2.utr) { state.utr = o2.utr; const pid = root.querySelector('#pl-pid'); if (pid && state.screen === 'success') pid.insertAdjacentHTML('afterend', `<div class="pl-pid pl-utr">UTR ${esc(o2.utr)}</div>`); break; }
+      } catch {}
+    }
+  }
+  function startTimer() {
+    clearInterval(state.timer);
+    const tick = () => {
+      const t = root.querySelector('#pl-timer'); if (!t) return;
+      if (!state.expiryMs) { t.textContent = 'Valid 5:00'; return; }
+      const left = Math.max(0, Math.round((state.expiryMs - Date.now()) / 1000));
+      t.textContent = left > 0 ? 'Valid ' + mmss(left) : 'Expired';
+      if (left <= 0) { clearInterval(state.timer); expireQr(); }
+    };
+    tick();
+    state.timer = setInterval(tick, 1000);
+  }
+
+  function toast(msg) {
+    let t = document.getElementById('pl-toast');
+    if (!t) { t = document.createElement('div'); t.id = 'pl-toast'; document.body.appendChild(t); }
+    t.textContent = msg; t.classList.add('pl-show');
+    clearTimeout(t._t); t._t = setTimeout(() => t.classList.remove('pl-show'), 2600);
+  }
+
+  // boot: secured splash -> options (or contact first if not prefilled)
+  render('loader');
+  setTimeout(() => {
+    const pf = o.prefill || {};
+    if (pf.name && (pf.contact || '').replace(/\D/g, '').length === 10) {
+      state.customer = { name: pf.name, mobile: pf.contact.replace(/\D/g, ''), email: pf.email || '' };
+      render('options');
+    } else render('contact');
+    const sp = root.querySelector('#pl-splash');
+    if (sp) { sp.classList.add('pl-splash-hide'); setTimeout(() => sp.remove(), 450); }
+  }, 1600);
+
+  return { close: cleanup };
+}