@thepayulink/checkout 1.0.0 → 2.0.1

package/src/index.js

@@ -1,122 +1,158 @@
-// @thepayulink/checkout — public API.
-// Opens the Elite Yatra / PayuLink UPI checkout modal and drives the real payment
-// through an Elite Yatra pay server (POST /api/checkout + SSE /api/order/:id/events).
-import { openModal } from './modal.js';
+// @thepayulink/checkout — browser checkout for the PayuLink Checkout API (v1).
+//
+//   import PayuLink from '@thepayulink/checkout';
+//
+//   const pl = new PayuLink({ key: 'pl_live_…' });   // PUBLISHABLE key only
+//   pl.open({
+//     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.
+//       // 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';
 
 const DEFAULTS = {
-  // Where the Elite Yatra pay server is reachable. Override for staging/local.
-  apiBase: 'https://eliteyatra.vip',
-  // Base URL that serves /upi/*.png and /payulink-logo.png (defaults to `${apiBase}/assets`).
-  assetBase: null,
-  // Brand shown on the left panel.
-  name: 'Elite Yatra',
-  logo: null,          // falls back to `${assetBase}/payulink-logo.png`
-  brandColor: null,    // accent for the left panel gradient, e.g. '#0b3068'
+  apiBase: 'https://payulink.io/api',
+  name: null,        // falls back to the merchant name on the order
+  theme: { color: '#38BDF8' },
+  pollMs: 2500,
 };
 
-function normalizeAmount(amount) {
-  const n = Math.round(Number(amount) || 0);
-  if (!(n >= 1)) throw new Error('PayulinkCheckout: `amount` (in rupees) is required and must be >= 1');
-  return Math.min(10000000, n);
-}
-
-export default class PayulinkCheckout {
+export default class PayuLink {
   constructor(options = {}) {
     if (typeof window === 'undefined' || typeof document === 'undefined') {
-      throw new Error('PayulinkCheckout runs in the browser only. In React Native use a WebView pointing at the hosted /pay page.');
+      throw new Error('PayuLink checkout runs in the browser only. On React Native use '
+        + '@thepayulink/checkout-react-native; on a server use @thepayulink/server.');
+    }
+    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) {
+      console.warn('PayuLink: `key` should look like pl_live_… or pl_test_…');
     }
-    this.options = Object.assign({}, DEFAULTS, options);
+    // Guard the classic footgun.
+    if (options.keySecret || options.key_secret) {
+      throw new Error('PayuLink: never pass a key_secret to the browser SDK. It belongs on your server only.');
+    }
+    this.options = Object.assign({}, DEFAULTS, options, { key });
   }
 
   /**
-   * Open the checkout modal.
-   * @param {object} payment
-   * @param {number} payment.amount   Amount in rupees (required).
-   * @param {string} [payment.item]   Description of what's being paid for.
-   * @param {string} [payment.note]   Sub-line under the price summary.
-   * @param {object} [payment.prefill] { name, contact, email } — skips the contact form when name + 10-digit contact are present.
-   * @param {function} [payment.handler]   Called on success: ({ merchant_order_no, utr, amount }).
-   * @param {function} [payment.onDismiss] Called when the user closes the modal without paying.
-   * @param {string}   [payment.key]        Optional public key sent as `x-payulink-key` header.
+   * Open the checkout for a server-created order.
+   * @param {object} p
+   * @param {string} p.order_id      Required. From POST /v1/orders on your backend.
+   * @param {object} [p.prefill]     { name, contact, email }
+   * @param {function} [p.handler]   Called on success with the signed handoff.
+   * @param {function} [p.onDismiss] Called if the customer closes without paying.
+   * @param {function} [p.onError]
    * @returns {{ close: () => void }}
    */
-  open(payment = {}) {
-    const o = Object.assign({}, this.options, payment);
+  open(p = {}) {
+    const o = Object.assign({}, this.options, p);
     const apiBase = String(o.apiBase || '').replace(/\/$/, '');
-    if (!apiBase) throw new Error('PayulinkCheckout: `apiBase` is required');
-    const assetBase = String(o.assetBase || `${apiBase}/assets`).replace(/\/$/, '');
-    const key = o.key || o.publicKey;
-    const orderId = o.orderId || o.order_id || null;
+    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.');
 
-    const headers = () => Object.assign({ 'Content-Type': 'application/json' }, key ? { 'x-payulink-key': key } : {});
-    const post = async (body) => {
-      const res = await fetch(`${apiBase}/api/checkout`, { method: 'POST', headers: headers(), body: JSON.stringify(body) });
-      let data = {};
-      try { data = await res.json(); } catch { throw new Error(`Server busy (HTTP ${res.status})`); }
-      if (!res.ok) throw new Error(data.error || 'Could not start payment');
-      return data;
+    const onError = (e) => {
+      if (typeof o.onError === 'function') o.onError(e);
+      else console.error('PayuLink:', e.message || e);
     };
 
-    const watchOrder = (orderNo, onUpdate) => {
-      let es = null;
-      try {
-        es = new EventSource(`${apiBase}/api/order/${orderNo}/events`);
-        es.onmessage = (e) => { try { onUpdate(JSON.parse(e.data)); } catch {} };
-        es.onerror = () => {};
-      } catch {}
-      const poll = setInterval(async () => {
-        try { onUpdate(await fetch(`${apiBase}/api/order/${orderNo}`).then((r) => r.json())); } catch {}
-      }, 20000);
-      return () => { clearInterval(poll); if (es) es.close(); };
-    };
+    const handle = { _overlay: null, _stop: null, close() { this._stop?.(); this._overlay?.close(); } };
+    let settled = false;
 
-    const common = {
-      apiBase, assetBase,
-      name: o.name,
-      logo: o.logo || `${assetBase}/payulink-logo.png`,
-      brandColor: o.brandColor,
-      note: o.note,
-      prefill: o.prefill || {},
-      watchOrder,
-      onSuccess: (info) => { if (typeof o.handler === 'function') o.handler(info); if (typeof o.onSuccess === 'function') o.onSuccess(info); },
-      onDismiss: () => { if (typeof o.onDismiss === 'function') o.onDismiss(); },
+    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);
     };
-    const onError = (e) => { if (typeof o.onError === 'function') o.onError(e); else console.error('PayulinkCheckout:', e.message); };
 
-    // SECURE flow — open a server-created order by id; the amount is fixed on the backend.
-    if (orderId) {
-      const handle = { _inner: null, close() { if (this._inner) this._inner.close(); } };
-      fetch(`${apiBase}/api/order/${orderId}`)
-        .then((r) => r.json())
-        .then((meta) => {
-          if (!meta || typeof meta.amount !== 'number') throw new Error('Unknown or expired order');
-          handle._inner = openModal(Object.assign({}, common, {
-            amount: meta.amount,
-            description: meta.item || o.item || o.name,
-            createOrder: (customer) => post({ order_id: orderId, customer }),
-          }));
-        })
-        .catch(onError);
-      return handle;
-    }
+    (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();
+        },
+      });
+
+      // 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 () => {
+        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({
+              payulink_order_id: s.payulink_order_id,
+              payulink_payment_id: s.payulink_payment_id,
+              payulink_signature: s.payulink_signature,
+              utr: s.utr,
+              amount: s.amount,
+            });
+          } else if (s.status === 'failed' || s.status === 'expired') {
+            clearInterval(poll);
+            handle._overlay?.close();
+            onError(new Error(`Payment ${s.status}`));
+          }
+        } catch { /* transient — keep polling */ }
+      }, o.pollMs);
+      handle._stop = () => clearInterval(poll);
+    })();
 
-    // Convenience flow — amount supplied by the client (enable server-side via PAYULINK_ALLOW_CLIENT_AMOUNT).
-    const amount = normalizeAmount(o.amount);
-    const item = o.item || o.description || o.name;
-    return openModal(Object.assign({}, common, {
-      amount,
-      description: item,
-      createOrder: (customer) => post({ amount, item, customer }),
-    }));
+    return handle;
   }
 
-  /** Convenience: build + open in one call. */
   static open(options = {}) {
-    return new PayulinkCheckout(options).open(options);
+    return new PayuLink(options).open(options);
   }
 }
 
-// UMD/global convenience when loaded via a plain <script> (esbuild build attaches this too).
 if (typeof window !== 'undefined') {
-  window.PayulinkCheckout = PayulinkCheckout;
+  window.PayuLink = PayuLink;
+  // Back-compat with the older global name.
+  window.PayulinkCheckout = PayuLink;
 }

package/src/overlay.js

@@ -0,0 +1,141 @@
+// Checkout overlay — hosts the PayuLink payment page in a focused modal.
+//
+// Deliberately thin: the hosted page (/pay/{token}) already renders the QR, the
+// UPI intent and the auto-verification polling. Reimplementing that here would
+// mean a second copy of money-path UI drifting out of sync with the real one.
+//
+// Self-contained (its own styles), with no dependency on the pre-v1 modal that
+// drove the removed client-supplied-amount flow.
+
+const NS = 'plco';
+let stylesInjected = false;
+
+const isMobile = () => typeof window !== 'undefined'
+  && window.matchMedia('(max-width: 640px)').matches;
+
+function injectStyles(themeColor) {
+  if (stylesInjected) return;
+  stylesInjected = true;
+  const css = `
+.${NS}-root{position:fixed;inset:0;z-index:2147483000;display:flex;align-items:center;justify-content:center;
+  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,system-ui,sans-serif}
+.${NS}-backdrop{position:absolute;inset:0;background:rgba(8,12,20,.62);backdrop-filter:blur(4px)}
+.${NS}-sheet{position:relative;width:100%;max-width:420px;max-height:92vh;display:flex;flex-direction:column;
+  background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 24px 70px -20px rgba(0,0,0,.5);
+  animation:${NS}-in .22s cubic-bezier(.16,1,.3,1)}
+@keyframes ${NS}-in{from{opacity:0;transform:translateY(10px) scale(.99)}to{opacity:1;transform:none}}
+.${NS}-head{display:flex;align-items:center;gap:10px;padding:14px 14px 12px;border-bottom:1px solid rgba(15,23,42,.08)}
+.${NS}-brand{flex:1;min-width:0}
+.${NS}-name{font-size:13px;font-weight:600;color:#0f172a;line-height:1.2;
+  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.${NS}-amount{font-size:20px;font-weight:700;color:#0f172a;letter-spacing:-.02em;margin-top:2px;
+  font-variant-numeric:tabular-nums}
+.${NS}-badge{font-size:10px;font-weight:700;letter-spacing:.08em;color:#92400e;background:#fef3c7;
+  padding:3px 7px;border-radius:5px}
+.${NS}-close{border:0;background:rgba(15,23,42,.05);color:#475569;width:30px;height:30px;border-radius:8px;
+  font-size:20px;line-height:1;cursor:pointer;transition:background .15s}
+.${NS}-close:hover{background:rgba(15,23,42,.1)}
+.${NS}-close:focus-visible{outline:2px solid ${themeColor || '#38BDF8'};outline-offset:2px}
+.${NS}-body{flex:1;min-height:420px;background:#f8fafc}
+.${NS}-frame{width:100%;height:100%;min-height:420px;border:0;display:block}
+.${NS}-msg{padding:36px 20px;text-align:center;color:#64748b;font-size:13px}
+.${NS}-cta{display:block;margin:10px 14px 0;padding:13px;border-radius:10px;text-align:center;text-decoration:none;
+  font-weight:700;font-size:14px;color:#06121f;background:${themeColor || '#38BDF8'}}
+.${NS}-foot{padding:10px;text-align:center;font-size:11px;color:#94a3b8}
+@media (max-width:640px){
+  .${NS}-sheet{max-width:100%;height:100%;max-height:100%;border-radius:0}
+}
+@media (prefers-reduced-motion:reduce){.${NS}-sheet{animation:none}}`;
+  const el = document.createElement('style');
+  el.setAttribute('data-payulink', 'checkout');
+  el.textContent = css;
+  document.head.appendChild(el);
+}
+
+/**
+ * @param {object} o
+ * @param {string} o.url            Hosted payment page URL.
+ * @param {string} [o.upiIntentUrl] Deep link, offered on mobile where an iframe is awkward.
+ * @param {number} o.amount         In paise.
+ * @param {string} [o.currency]
+ * @param {string} [o.merchantName]
+ * @param {string} [o.themeColor]
+ * @param {string} [o.mode]         'test' shows a badge.
+ * @param {function} [o.onDismiss]
+ * @returns {{ close: () => void }}
+ */
+export function openOverlay(o = {}) {
+  injectStyles(o.themeColor);
+
+  const money = formatMoney(o.amount, o.currency);
+  const prevOverflow = document.body.style.overflow;
+  document.body.style.overflow = 'hidden';
+
+  const root = document.createElement('div');
+  root.className = `${NS}-root`;
+  root.setAttribute('role', 'dialog');
+  root.setAttribute('aria-modal', 'true');
+  root.setAttribute('aria-label', 'Payment');
+  root.innerHTML = `
+    <div class="${NS}-backdrop" data-close="1"></div>
+    <div class="${NS}-sheet">
+      <div class="${NS}-head">
+        <div class="${NS}-brand">
+          <div class="${NS}-name">${escapeHtml(o.merchantName || 'Payment')}</div>
+          <div class="${NS}-amount">${money}</div>
+        </div>
+        ${o.mode === 'test' ? `<span class="${NS}-badge">TEST</span>` : ''}
+        <button class="${NS}-close" aria-label="Close" data-close="1">&times;</button>
+      </div>
+      <div class="${NS}-body">
+        ${o.url
+          ? `<iframe class="${NS}-frame" src="${escapeHtml(o.url)}" allow="clipboard-write" referrerpolicy="origin"></iframe>`
+          : `<div class="${NS}-msg">Could not load the payment page.</div>`}
+      </div>
+      ${o.upiIntentUrl && isMobile()
+        ? `<a class="${NS}-cta" href="${escapeHtml(o.upiIntentUrl)}">Pay ${money} in a UPI app</a>`
+        : ''}
+      <div class="${NS}-foot">Secured by PayuLink</div>
+    </div>`;
+
+  let closed = false;
+  const close = () => {
+    if (closed) return;
+    closed = true;
+    document.removeEventListener('keydown', onKey);
+    document.body.style.overflow = prevOverflow;
+    root.remove();
+  };
+  const dismiss = () => {
+    close();
+    if (typeof o.onDismiss === 'function') o.onDismiss();
+  };
+  const onKey = (e) => { if (e.key === 'Escape') dismiss(); };
+
+  root.addEventListener('click', (e) => {
+    if (e.target instanceof Element && e.target.closest(`[data-close]`)) dismiss();
+  });
+  document.addEventListener('keydown', onKey);
+  document.body.appendChild(root);
+  root.querySelector(`.${NS}-close`)?.focus();
+
+  return { close };
+}
+
+function formatMoney(paise, currency) {
+  const n = Number(paise || 0) / 100;
+  try {
+    return new Intl.NumberFormat('en-IN', {
+      style: 'currency',
+      currency: currency || 'INR',
+      minimumFractionDigits: n % 1 === 0 ? 0 : 2,
+    }).format(n);
+  } catch {
+    return '₹' + n;
+  }
+}
+
+function escapeHtml(s) {
+  return String(s ?? '').replace(/[&<>"']/g, (c) =>
+    ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[c]));
+}