@billing-io/designs 1.0.0

package/src/billing-js/billing.js

@@ -0,0 +1,876 @@
+/**
+ * billing.js — Checkout overlay for billing.io
+ *
+ * Load via:
+ *   <script src="https://js.billing.io/v1/billing.js"></script>
+ *
+ * Usage:
+ *   billing.openCheckout({
+ *     checkoutId: "co_123",
+ *     variation: "centered",  // "centered" | "panel" | "bottom" | "fullscreen" | "popup"
+ *     onSuccess: ({ checkoutId, txHash }) => {},
+ *     onClose: () => {},
+ *     onError: (err) => {}
+ *   });
+ *
+ *   billing.redirectToCheckout({ checkoutId: "co_123" });
+ */
+(function () {
+  "use strict";
+
+  // ---------------------------------------------------------------------------
+  // Config
+  // ---------------------------------------------------------------------------
+
+  var BILLING_HOST = (function () {
+    if (document.currentScript && document.currentScript.getAttribute("data-host")) {
+      return document.currentScript.getAttribute("data-host");
+    }
+    if (window.__BILLING_HOST__) return window.__BILLING_HOST__;
+    if (document.currentScript && document.currentScript.src) {
+      try { return new URL(document.currentScript.src).origin; } catch (e) { /* noop */ }
+    }
+    return window.location.origin;
+  })();
+
+  var NAMESPACE = "billing";
+  var VERSION = "1.0.0";
+  var MSG_PREFIX = "billing:";
+  var Z_INDEX = 2147483647;
+
+  // Spring-like easing curves
+  var EASE_OUT_EXPO = "cubic-bezier(0.16, 1, 0.3, 1)";
+  var EASE_OUT_QUINT = "cubic-bezier(0.22, 1, 0.36, 1)";
+  var EASE_IN_EXPO = "cubic-bezier(0.7, 0, 0.84, 0)";
+
+  // ---------------------------------------------------------------------------
+  // State
+  // ---------------------------------------------------------------------------
+
+  var _overlay = null;
+  var _iframe = null;
+  var _callbacks = {};
+  var _currentCheckoutId = null;
+  var _variation = parseInt(localStorage.getItem("billing_overlay_variation") || "1", 10);
+  var _isOpen = false;
+  var _lastStatus = null;
+
+  // ---------------------------------------------------------------------------
+  // Variation name ↔ number mapping
+  // ---------------------------------------------------------------------------
+
+  var VARIATION_NAMES = {
+    centered: 1, card: 1,
+    panel: 2, side: 2, sidepanel: 2,
+    bottom: 3, sheet: 3, bottomsheet: 3,
+    fullscreen: 4, full: 4, takeover: 4,
+    popup: 5, floating: 5, pill: 5,
+  };
+
+  function resolveVariation(v) {
+    if (typeof v === "number" && VARIATIONS[v]) return v;
+    if (typeof v === "string") {
+      var n = VARIATION_NAMES[v.toLowerCase().replace(/[\s_-]/g, "")];
+      if (n) return n;
+    }
+    return _variation;
+  }
+
+  // ---------------------------------------------------------------------------
+  // Variation definitions
+  // ---------------------------------------------------------------------------
+
+  var VARIATIONS = {
+    // V1: Centered card (Stripe-like)
+    1: {
+      name: "Centered Card",
+      desc: "Classic centered modal, backdrop blur",
+      build: buildCenteredModal,
+    },
+    // V2: Right slide-in panel
+    2: {
+      name: "Side Panel",
+      desc: "Right-anchored slide-in sheet",
+      build: buildSidePanel,
+    },
+    // V3: Bottom sheet (mobile-first)
+    3: {
+      name: "Bottom Sheet",
+      desc: "Mobile-friendly bottom sheet",
+      build: buildBottomSheet,
+    },
+    // V4: Full-screen takeover
+    4: {
+      name: "Fullscreen",
+      desc: "Immersive full-screen overlay",
+      build: buildFullscreen,
+    },
+    // V5: Floating popup (compact)
+    5: {
+      name: "Floating Popup",
+      desc: "Compact bottom-right popup",
+      build: buildFloatingPopup,
+    },
+  };
+
+  // ---------------------------------------------------------------------------
+  // Shared helpers
+  // ---------------------------------------------------------------------------
+
+  function raf(fn) {
+    requestAnimationFrame(function () { requestAnimationFrame(fn); });
+  }
+
+  function styleIframe(iframe, css) {
+    iframe.style.cssText = css;
+    iframe.setAttribute("allow", "clipboard-write");
+    iframe.setAttribute("sandbox", "allow-scripts allow-same-origin allow-popups allow-forms allow-clipboard-write");
+  }
+
+  function lockScroll() {
+    document.body.style.overflow = "hidden";
+    document.body.style.touchAction = "none";
+  }
+
+  function unlockScroll() {
+    document.body.style.overflow = "";
+    document.body.style.touchAction = "";
+  }
+
+  function buildCloseButton(onClick) {
+    var btn = document.createElement("button");
+    btn.type = "button";
+    btn.setAttribute("aria-label", "Close checkout");
+    btn.style.cssText =
+      "width:32px;height:32px;border-radius:10px;border:none;" +
+      "background:#f3f4f6;cursor:pointer;display:flex;align-items:center;" +
+      "justify-content:center;transition:background 0.15s ease, transform 0.15s ease;" +
+      "color:#6b7280;font-family:-apple-system,BlinkMacSystemFont,sans-serif;" +
+      "outline:none;";
+    btn.innerHTML =
+      '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">' +
+      '<line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>';
+    btn.addEventListener("mouseenter", function () { btn.style.background = "#e5e7eb"; btn.style.transform = "scale(1.05)"; });
+    btn.addEventListener("mouseleave", function () { btn.style.background = "#f3f4f6"; btn.style.transform = "scale(1)"; });
+    btn.addEventListener("mousedown", function () { btn.style.transform = "scale(0.95)"; });
+    btn.addEventListener("mouseup", function () { btn.style.transform = "scale(1.05)"; });
+    btn.addEventListener("click", function (e) { e.stopPropagation(); onClick(); });
+    return btn;
+  }
+
+  function buildBrandBadge(size) {
+    var s = size || "md";
+    var dim = s === "sm" ? 18 : s === "lg" ? 24 : 20;
+    var br = s === "sm" ? 4 : s === "lg" ? 6 : 5;
+    return '<div style="width:' + dim + 'px;height:' + dim + 'px;background:#000;border-radius:' + br + 'px;display:flex;align-items:center;justify-content:center;overflow:hidden;">' +
+      '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" width="' + dim + '" height="' + dim + '">' +
+      '<rect width="1024" height="1024" fill="#000"/>' +
+      '<path fill="#fff" d="M648.077,530.65c0,46.2-18.34,81.95-55,107.25-25.3,17.239-51.7,25.851-79.2,25.851-10.27,0-25.119-3.301-44.55-9.9-10.27-3.661-18.149-5.5-23.649-5.5-9.9,0-19.989,3.67-30.25,11-2.2,1.461-3.851,2.2-4.95,2.2-2.569,0-4.039-1.101-4.4-3.3-.369-2.2-.55-8.801-.55-19.801v-322.85c0-9.53-1.719-15.761-5.156-18.7-3.438-2.931-10.948-4.4-22.533-4.4-9.771,0-14.66-1.28-14.66-3.85s2.234-3.85,6.694-3.85c41.653,0,77.919-4.581,108.797-13.75l.559,8.8v162.25c14.618-20.161,34.899-30.25,60.853-30.25,31.427,0,57.285,11.095,77.567,33.274,20.281,22.189,30.43,50.695,30.43,85.525ZM566.127,532.851c0-71.131-14.85-106.7-44.55-106.7-16.5,0-28.6,7.7-36.3,23.1-2.939,5.87-4.675,12.745-5.225,20.625-.551,7.89-.825,30.345-.825,67.375v33.551c0,34.469,2.286,57.294,6.875,68.475,4.58,11.189,13.836,16.775,27.774,16.775,19.062,0,32.536-9.351,40.426-28.051,7.88-18.699,11.824-50.41,11.824-95.149Z"/>' +
+      '<path fill="#fff" d="M692.003,642.041c0,7.235-2.336,13.186-7,17.851-4.671,4.665-10.621,7-17.851,7s-13.3-2.396-18.2-7.175c-4.899-4.78-7.35-10.676-7.35-17.676,0-7.229,2.45-13.3,7.35-18.199s10.965-7.351,18.2-7.351c6.765,0,12.601,2.45,17.5,7.351,4.9,4.899,7.351,10.97,7.351,18.199Z"/>' +
+      '</svg></div>';
+  }
+
+  // ---------------------------------------------------------------------------
+  // V1: Centered Card — staged: backdrop fades+blurs → card rises from below
+  // ---------------------------------------------------------------------------
+
+  function buildCenteredModal(iframe, onClose) {
+    var root = document.createElement("div");
+    root.setAttribute("data-billing-overlay", "");
+    root.style.cssText =
+      "position:fixed;inset:0;z-index:" + Z_INDEX +
+      ";display:flex;align-items:center;justify-content:center;padding:16px;";
+
+    // Backdrop — starts transparent + no blur
+    var backdrop = document.createElement("div");
+    backdrop.style.cssText =
+      "position:absolute;inset:0;" +
+      "background:rgba(0,0,0,0);" +
+      "backdrop-filter:blur(0px);-webkit-backdrop-filter:blur(0px);" +
+      "transition:background 0.35s ease, backdrop-filter 0.4s ease, -webkit-backdrop-filter 0.4s ease;";
+    backdrop.addEventListener("click", onClose);
+    root.appendChild(backdrop);
+
+    // Card — starts invisible, below, scaled down
+    var card = document.createElement("div");
+    card.style.cssText =
+      "position:relative;width:100%;max-width:460px;max-height:680px;" +
+      "border-radius:20px;overflow:hidden;background:#fff;" +
+      "box-shadow:0 0 0 1px rgba(0,0,0,0.04);" +
+      "opacity:0;transform:translateY(24px) scale(0.97);" +
+      "transition:opacity 0.4s ease, transform 0.5s " + EASE_OUT_EXPO + ", box-shadow 0.5s ease;";
+
+    // No close button on the card itself — the checkout page header already
+    // occupies that corner (Secure badge). Close via backdrop click or Escape.
+
+    styleIframe(iframe, "width:100%;height:100%;min-height:600px;border:none;display:block;");
+    card.appendChild(iframe);
+    root.appendChild(card);
+
+    // Stage 1 (0ms): backdrop fades in + blur
+    raf(function () {
+      backdrop.style.background = "rgba(0,0,0,0.4)";
+      backdrop.style.backdropFilter = "blur(12px)";
+      backdrop.style.webkitBackdropFilter = "blur(12px)";
+
+      // Stage 2 (120ms delay): card rises in
+      setTimeout(function () {
+        card.style.opacity = "1";
+        card.style.transform = "translateY(0) scale(1)";
+        card.style.boxShadow = "0 25px 60px -12px rgba(0,0,0,0.25), 0 0 0 1px rgba(0,0,0,0.05)";
+      }, 120);
+    });
+
+    root._animateOut = function (cb) {
+      card.style.opacity = "0";
+      card.style.transform = "translateY(12px) scale(0.98)";
+      card.style.boxShadow = "0 0 0 1px rgba(0,0,0,0.04)";
+
+      setTimeout(function () {
+        backdrop.style.background = "rgba(0,0,0,0)";
+        backdrop.style.backdropFilter = "blur(0px)";
+        backdrop.style.webkitBackdropFilter = "blur(0px)";
+      }, 80);
+
+      setTimeout(cb, 380);
+    };
+
+    return root;
+  }
+
+  // ---------------------------------------------------------------------------
+  // V2: Side Panel — staged: backdrop dims → panel slides in from right
+  // ---------------------------------------------------------------------------
+
+  function buildSidePanel(iframe, onClose) {
+    var root = document.createElement("div");
+    root.setAttribute("data-billing-overlay", "");
+    root.style.cssText = "position:fixed;inset:0;z-index:" + Z_INDEX + ";";
+
+    // Backdrop
+    var backdrop = document.createElement("div");
+    backdrop.style.cssText =
+      "position:absolute;inset:0;background:rgba(0,0,0,0);" +
+      "backdrop-filter:blur(0px);-webkit-backdrop-filter:blur(0px);" +
+      "transition:background 0.4s ease, backdrop-filter 0.45s ease, -webkit-backdrop-filter 0.45s ease;";
+    backdrop.addEventListener("click", onClose);
+    root.appendChild(backdrop);
+
+    // Panel
+    var panel = document.createElement("div");
+    panel.style.cssText =
+      "position:absolute;top:0;right:0;bottom:0;width:460px;max-width:100%;" +
+      "background:#fff;box-shadow:0 0 0 transparent;" +
+      "transform:translateX(100%);" +
+      "transition:transform 0.45s " + EASE_OUT_EXPO + ", box-shadow 0.45s ease;" +
+      "display:flex;flex-direction:column;";
+
+    // Header
+    var header = document.createElement("div");
+    header.style.cssText =
+      "display:flex;align-items:center;justify-content:space-between;" +
+      "padding:16px 20px;border-bottom:1px solid #e5e7eb;flex-shrink:0;background:#fff;" +
+      "opacity:0;transform:translateX(12px);" +
+      "transition:opacity 0.3s ease 0.25s, transform 0.4s " + EASE_OUT_EXPO + " 0.25s;";
+
+    var title = document.createElement("div");
+    title.style.cssText = "display:flex;align-items:center;gap:8px;";
+    title.innerHTML = buildBrandBadge("md") +
+      '<span style="font-size:14px;font-weight:600;color:#111827;font-family:-apple-system,BlinkMacSystemFont,sans-serif;">Secure Checkout</span>';
+    header.appendChild(title);
+    header.appendChild(buildCloseButton(onClose));
+    panel.appendChild(header);
+
+    styleIframe(iframe, "flex:1;width:100%;border:none;display:block;opacity:0;transition:opacity 0.35s ease 0.35s;");
+    panel.appendChild(iframe);
+    root.appendChild(panel);
+
+    // Stage 1: backdrop
+    raf(function () {
+      backdrop.style.background = "rgba(0,0,0,0.3)";
+      backdrop.style.backdropFilter = "blur(6px)";
+      backdrop.style.webkitBackdropFilter = "blur(6px)";
+
+      // Stage 2 (80ms): panel slides in
+      setTimeout(function () {
+        panel.style.transform = "translateX(0)";
+        panel.style.boxShadow = "-8px 0 40px rgba(0,0,0,0.12)";
+        header.style.opacity = "1";
+        header.style.transform = "translateX(0)";
+        iframe.style.opacity = "1";
+      }, 80);
+    });
+
+    root._animateOut = function (cb) {
+      iframe.style.opacity = "0";
+      iframe.style.transition = "opacity 0.15s ease";
+      header.style.opacity = "0";
+      header.style.transform = "translateX(8px)";
+      header.style.transition = "opacity 0.15s ease, transform 0.2s ease";
+
+      setTimeout(function () {
+        panel.style.transform = "translateX(100%)";
+        panel.style.boxShadow = "0 0 0 transparent";
+        backdrop.style.background = "rgba(0,0,0,0)";
+        backdrop.style.backdropFilter = "blur(0px)";
+        backdrop.style.webkitBackdropFilter = "blur(0px)";
+      }, 60);
+
+      setTimeout(cb, 420);
+    };
+
+    return root;
+  }
+
+  // ---------------------------------------------------------------------------
+  // V3: Bottom Sheet — staged: backdrop → sheet rises with spring
+  // ---------------------------------------------------------------------------
+
+  function buildBottomSheet(iframe, onClose) {
+    var root = document.createElement("div");
+    root.setAttribute("data-billing-overlay", "");
+    root.style.cssText =
+      "position:fixed;inset:0;z-index:" + Z_INDEX +
+      ";display:flex;align-items:flex-end;justify-content:center;";
+
+    // Backdrop
+    var backdrop = document.createElement("div");
+    backdrop.style.cssText =
+      "position:absolute;inset:0;background:rgba(0,0,0,0);" +
+      "backdrop-filter:blur(0px);-webkit-backdrop-filter:blur(0px);" +
+      "transition:background 0.35s ease, backdrop-filter 0.4s ease, -webkit-backdrop-filter 0.4s ease;";
+    backdrop.addEventListener("click", onClose);
+    root.appendChild(backdrop);
+
+    // Sheet
+    var sheet = document.createElement("div");
+    sheet.style.cssText =
+      "position:relative;width:100%;max-width:500px;max-height:92vh;" +
+      "border-radius:20px 20px 0 0;background:#fff;" +
+      "box-shadow:0 0 0 transparent;" +
+      "transform:translateY(105%);" +
+      "transition:transform 0.5s " + EASE_OUT_EXPO + ", box-shadow 0.5s ease;" +
+      "display:flex;flex-direction:column;overflow:hidden;";
+
+    // Drag handle
+    var handle = document.createElement("div");
+    handle.style.cssText =
+      "flex-shrink:0;display:flex;justify-content:center;padding:12px 0 4px;" +
+      "opacity:0;transition:opacity 0.3s ease 0.3s;";
+    handle.innerHTML = '<div style="width:36px;height:4px;border-radius:2px;background:#d1d5db;"></div>';
+    sheet.appendChild(handle);
+
+    // No close button overlaying the iframe — close via drag handle area,
+    // backdrop click, or Escape key. Keeps the checkout header clean.
+
+    styleIframe(iframe, "flex:1;width:100%;border:none;display:block;min-height:580px;");
+    sheet.appendChild(iframe);
+    root.appendChild(sheet);
+
+    // Stage 1: backdrop
+    raf(function () {
+      backdrop.style.background = "rgba(0,0,0,0.4)";
+      backdrop.style.backdropFilter = "blur(12px)";
+      backdrop.style.webkitBackdropFilter = "blur(12px)";
+
+      // Stage 2 (100ms): sheet springs up
+      setTimeout(function () {
+        sheet.style.transform = "translateY(0)";
+        sheet.style.boxShadow = "0 -10px 50px rgba(0,0,0,0.15)";
+        handle.style.opacity = "1";
+      }, 100);
+    });
+
+    root._animateOut = function (cb) {
+      handle.style.opacity = "0";
+      handle.style.transition = "opacity 0.1s ease";
+
+      setTimeout(function () {
+        sheet.style.transform = "translateY(105%)";
+        sheet.style.boxShadow = "0 0 0 transparent";
+      }, 50);
+
+      setTimeout(function () {
+        backdrop.style.background = "rgba(0,0,0,0)";
+        backdrop.style.backdropFilter = "blur(0px)";
+        backdrop.style.webkitBackdropFilter = "blur(0px)";
+      }, 150);
+
+      setTimeout(cb, 450);
+    };
+
+    return root;
+  }
+
+  // ---------------------------------------------------------------------------
+  // V4: Fullscreen — staged: bg wipes in → top bar drops → card fades up
+  // ---------------------------------------------------------------------------
+
+  function buildFullscreen(iframe, onClose) {
+    var root = document.createElement("div");
+    root.setAttribute("data-billing-overlay", "");
+    root.style.cssText =
+      "position:fixed;inset:0;z-index:" + Z_INDEX +
+      ";background:rgba(247,248,250,0);display:flex;flex-direction:column;" +
+      "transition:background 0.4s ease;";
+
+    // Top bar
+    var topBar = document.createElement("div");
+    topBar.style.cssText =
+      "flex-shrink:0;display:flex;align-items:center;justify-content:space-between;" +
+      "padding:16px 24px;background:#fff;border-bottom:1px solid #e5e7eb;" +
+      "opacity:0;transform:translateY(-100%);" +
+      "transition:opacity 0.35s ease 0.15s, transform 0.45s " + EASE_OUT_EXPO + " 0.15s;";
+
+    var brand = document.createElement("div");
+    brand.style.cssText = "display:flex;align-items:center;gap:10px;";
+    brand.innerHTML = buildBrandBadge("lg") +
+      '<span style="font-size:15px;font-weight:600;color:#111827;font-family:-apple-system,BlinkMacSystemFont,sans-serif;">billing.io checkout</span>';
+    topBar.appendChild(brand);
+
+    var rightGroup = document.createElement("div");
+    rightGroup.style.cssText = "display:flex;align-items:center;gap:12px;";
+
+    var secureBadge = document.createElement("div");
+    secureBadge.style.cssText =
+      "display:flex;align-items:center;gap:6px;padding:6px 12px;" +
+      "background:#f3f4f6;border-radius:20px;font-size:12px;color:#4b5563;" +
+      "font-family:-apple-system,BlinkMacSystemFont,sans-serif;font-weight:500;";
+    secureBadge.innerHTML =
+      '<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">' +
+      '<rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>' +
+      '<span>Secure</span>';
+    rightGroup.appendChild(secureBadge);
+    rightGroup.appendChild(buildCloseButton(onClose));
+    topBar.appendChild(rightGroup);
+    root.appendChild(topBar);
+
+    // Iframe wrapper
+    var wrapper = document.createElement("div");
+    wrapper.style.cssText =
+      "flex:1;display:flex;align-items:center;justify-content:center;padding:24px;overflow:auto;";
+
+    var container = document.createElement("div");
+    container.style.cssText =
+      "width:100%;max-width:460px;height:100%;max-height:680px;" +
+      "border-radius:20px;overflow:hidden;background:#fff;" +
+      "box-shadow:0 0 0 1px rgba(0,0,0,0.03);" +
+      "opacity:0;transform:translateY(16px) scale(0.98);" +
+      "transition:opacity 0.45s ease 0.25s, transform 0.55s " + EASE_OUT_EXPO + " 0.25s, box-shadow 0.5s ease 0.25s;";
+
+    styleIframe(iframe, "width:100%;height:100%;border:none;display:block;");
+    container.appendChild(iframe);
+    wrapper.appendChild(container);
+    root.appendChild(wrapper);
+
+    // Stage 1: background wipe
+    raf(function () {
+      root.style.background = "rgba(247,248,250,1)";
+
+      // Stage 2 (100ms): top bar drops in
+      setTimeout(function () {
+        topBar.style.opacity = "1";
+        topBar.style.transform = "translateY(0)";
+      }, 100);
+
+      // Stage 3 (200ms): card rises
+      setTimeout(function () {
+        container.style.opacity = "1";
+        container.style.transform = "translateY(0) scale(1)";
+        container.style.boxShadow = "0 10px 40px -10px rgba(0,0,0,0.1), 0 0 0 1px rgba(0,0,0,0.04)";
+      }, 200);
+    });
+
+    root._animateOut = function (cb) {
+      container.style.opacity = "0";
+      container.style.transform = "translateY(8px) scale(0.99)";
+      container.style.transition = "opacity 0.2s ease, transform 0.25s ease";
+
+      setTimeout(function () {
+        topBar.style.opacity = "0";
+        topBar.style.transform = "translateY(-20px)";
+        topBar.style.transition = "opacity 0.2s ease, transform 0.25s ease";
+      }, 80);
+
+      setTimeout(function () {
+        root.style.background = "rgba(247,248,250,0)";
+      }, 150);
+
+      setTimeout(cb, 400);
+    };
+
+    return root;
+  }
+
+  // ---------------------------------------------------------------------------
+  // V5: Floating Popup — staged: pops up from bottom-right with bounce
+  // ---------------------------------------------------------------------------
+
+  function buildFloatingPopup(iframe, onClose) {
+    var root = document.createElement("div");
+    root.setAttribute("data-billing-overlay", "");
+    root.style.cssText = "position:fixed;inset:0;z-index:" + Z_INDEX + ";pointer-events:none;";
+
+    // Light scrim
+    var scrim = document.createElement("div");
+    scrim.style.cssText =
+      "position:absolute;inset:0;background:rgba(0,0,0,0);pointer-events:auto;" +
+      "transition:background 0.35s ease;";
+    scrim.addEventListener("click", onClose);
+    root.appendChild(scrim);
+
+    // Popup
+    var popup = document.createElement("div");
+    popup.style.cssText =
+      "position:absolute;bottom:24px;right:24px;" +
+      "width:420px;height:640px;max-width:calc(100vw - 32px);max-height:calc(100vh - 32px);" +
+      "border-radius:16px;background:#fff;overflow:hidden;pointer-events:auto;" +
+      "box-shadow:0 0 0 1px rgba(0,0,0,0.04);" +
+      "opacity:0;transform:translateY(30px) scale(0.92);" +
+      "transition:opacity 0.35s ease, transform 0.5s " + EASE_OUT_EXPO + ", box-shadow 0.5s ease;" +
+      "display:flex;flex-direction:column;";
+
+    // Mini header
+    var header = document.createElement("div");
+    header.style.cssText =
+      "flex-shrink:0;display:flex;align-items:center;justify-content:space-between;" +
+      "padding:12px 16px;border-bottom:1px solid #f3f4f6;background:#fff;" +
+      "opacity:0;transition:opacity 0.25s ease 0.3s;";
+
+    var titleArea = document.createElement("div");
+    titleArea.style.cssText = "display:flex;align-items:center;gap:8px;";
+    titleArea.innerHTML = buildBrandBadge("sm") +
+      '<span style="font-size:13px;font-weight:600;color:#111827;font-family:-apple-system,BlinkMacSystemFont,sans-serif;">Checkout</span>';
+    header.appendChild(titleArea);
+
+    var closeBtn = buildCloseButton(onClose);
+    closeBtn.style.cssText =
+      "width:28px;height:28px;border-radius:8px;border:none;background:#f3f4f6;" +
+      "cursor:pointer;display:flex;align-items:center;justify-content:center;" +
+      "transition:background 0.15s ease, transform 0.15s ease;color:#6b7280;" +
+      "outline:none;";
+    closeBtn.innerHTML =
+      '<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">' +
+      '<line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>';
+    header.appendChild(closeBtn);
+    popup.appendChild(header);
+
+    styleIframe(iframe, "flex:1;width:100%;border:none;display:block;");
+    popup.appendChild(iframe);
+    root.appendChild(popup);
+
+    // Stage 1: light scrim
+    raf(function () {
+      scrim.style.background = "rgba(0,0,0,0.08)";
+
+      // Stage 2 (60ms): popup springs up
+      setTimeout(function () {
+        popup.style.opacity = "1";
+        popup.style.transform = "translateY(0) scale(1)";
+        popup.style.boxShadow = "0 20px 50px -10px rgba(0,0,0,0.25), 0 0 0 1px rgba(0,0,0,0.06)";
+        header.style.opacity = "1";
+      }, 60);
+    });
+
+    root._animateOut = function (cb) {
+      header.style.opacity = "0";
+      header.style.transition = "opacity 0.12s ease";
+
+      setTimeout(function () {
+        popup.style.opacity = "0";
+        popup.style.transform = "translateY(20px) scale(0.95)";
+        popup.style.transition = "opacity 0.2s ease, transform 0.25s " + EASE_IN_EXPO;
+        scrim.style.background = "rgba(0,0,0,0)";
+      }, 50);
+
+      setTimeout(cb, 300);
+    };
+
+    return root;
+  }
+
+  // ---------------------------------------------------------------------------
+  // Dev-only variation switcher
+  // ---------------------------------------------------------------------------
+
+  function buildVariationSwitcher() {
+    if (typeof localStorage === "undefined") return;
+    var isDev =
+      window.location.hostname === "localhost" ||
+      window.location.hostname === "127.0.0.1" ||
+      (document.currentScript && document.currentScript.hasAttribute("data-dev"));
+    if (!isDev) return;
+
+    var existing = document.getElementById("billing-variation-switcher");
+    if (existing) existing.remove();
+
+    var switcher = document.createElement("div");
+    switcher.id = "billing-variation-switcher";
+    switcher.style.cssText =
+      "position:fixed;top:16px;left:16px;z-index:" + (Z_INDEX - 1) +
+      ";background:#fff;border-radius:14px;padding:14px 16px;" +
+      "box-shadow:0 4px 24px rgba(0,0,0,0.1), 0 0 0 1px rgba(0,0,0,0.06);" +
+      "font-family:-apple-system,BlinkMacSystemFont,Inter,sans-serif;font-size:13px;" +
+      "max-width:260px;";
+
+    var title = document.createElement("div");
+    title.style.cssText = "font-weight:600;color:#111827;margin-bottom:10px;font-size:11px;text-transform:uppercase;letter-spacing:0.6px;";
+    title.textContent = "Overlay Variation";
+    switcher.appendChild(title);
+
+    var list = document.createElement("div");
+    list.style.cssText = "display:flex;flex-direction:column;gap:4px;";
+
+    Object.keys(VARIATIONS).forEach(function (key) {
+      var v = VARIATIONS[key];
+      var btn = document.createElement("button");
+      btn.type = "button";
+      var isActive = parseInt(key, 10) === _variation;
+      btn.style.cssText =
+        "display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:8px;" +
+        "border:1.5px solid " + (isActive ? "#111827" : "#e5e7eb") + ";" +
+        "background:" + (isActive ? "#111827" : "#fff") + ";" +
+        "color:" + (isActive ? "#fff" : "#374151") + ";" +
+        "cursor:pointer;font-size:12px;font-family:inherit;text-align:left;" +
+        "transition:all 0.2s ease;width:100%;outline:none;";
+      btn.innerHTML =
+        '<span style="font-weight:700;min-width:14px;">' + key + ".</span> " +
+        '<span>' + v.name + '</span>' +
+        '<span style="margin-left:auto;font-size:10px;opacity:0.5;">' + v.desc + '</span>';
+      btn.addEventListener("mouseenter", function () {
+        if (!isActive) { btn.style.borderColor = "#9ca3af"; btn.style.background = "#f9fafb"; }
+      });
+      btn.addEventListener("mouseleave", function () {
+        if (!isActive) { btn.style.borderColor = "#e5e7eb"; btn.style.background = "#fff"; }
+      });
+      btn.addEventListener("click", function () {
+        _variation = parseInt(key, 10);
+        localStorage.setItem("billing_overlay_variation", key);
+        buildVariationSwitcher();
+        if (_isOpen && _currentCheckoutId) {
+          var cbs = Object.assign({}, _callbacks);
+          closeOverlay(true);
+          setTimeout(function () {
+            openCheckout(Object.assign({ checkoutId: _currentCheckoutId }, cbs));
+          }, 150);
+        }
+      });
+      list.appendChild(btn);
+    });
+
+    switcher.appendChild(list);
+
+    var hint = document.createElement("div");
+    hint.style.cssText = "margin-top:10px;font-size:10px;color:#9ca3af;line-height:1.4;";
+    hint.textContent = "Dev only \u2014 not shown in production";
+    switcher.appendChild(hint);
+
+    document.body.appendChild(switcher);
+  }
+
+  // ---------------------------------------------------------------------------
+  // PostMessage listener
+  // ---------------------------------------------------------------------------
+
+  function handleMessage(event) {
+    var data;
+    try {
+      if (typeof event.data === "string") {
+        if (event.data.indexOf(MSG_PREFIX) !== 0) return;
+        data = JSON.parse(event.data.slice(MSG_PREFIX.length));
+      } else if (event.data && event.data.type && typeof event.data.type === "string" && event.data.type.indexOf(MSG_PREFIX) === 0) {
+        data = event.data;
+        data.type = data.type.slice(MSG_PREFIX.length);
+      } else {
+        return;
+      }
+    } catch (e) {
+      return;
+    }
+
+    if (!data || !data.type) return;
+
+    switch (data.type) {
+      case "status":
+        _lastStatus = data.status;
+        if (data.status === "confirmed" || data.status === "success") {
+          if (_callbacks.onSuccess) {
+            _callbacks.onSuccess({
+              checkoutId: _currentCheckoutId,
+              txHash: data.txHash || null,
+            });
+          }
+          setTimeout(function () { closeOverlay(); }, 2500);
+        }
+        break;
+
+      case "error":
+        if (_callbacks.onError) {
+          _callbacks.onError({
+            message: data.message || "Checkout error",
+            code: data.code || "unknown",
+          });
+        }
+        break;
+
+      case "loaded":
+        if (_iframe) _iframe.style.opacity = "1";
+        break;
+
+      case "close":
+        closeOverlay();
+        break;
+    }
+  }
+
+  // ---------------------------------------------------------------------------
+  // Core API
+  // ---------------------------------------------------------------------------
+
+  function openCheckout(options) {
+    if (!options || !options.checkoutId) {
+      throw new Error("billing.openCheckout: checkoutId is required");
+    }
+
+    // If already open with same checkout, bring to front
+    if (_isOpen && _currentCheckoutId === options.checkoutId && _overlay) {
+      _overlay.style.display = "";
+      return;
+    }
+
+    if (_isOpen) {
+      closeOverlay(true);
+    }
+
+    _currentCheckoutId = options.checkoutId;
+    _callbacks = {
+      onSuccess: options.onSuccess || null,
+      onClose: options.onClose || null,
+      onError: options.onError || null,
+    };
+    _lastStatus = null;
+
+    // Resolve which variation to use
+    // Priority: options.variation > dev switcher > default
+    var variationNum = options.variation
+      ? resolveVariation(options.variation)
+      : _variation;
+
+    // Build iframe
+    var url = BILLING_HOST + "/checkout/" + encodeURIComponent(options.checkoutId);
+    url += (url.indexOf("?") === -1 ? "?" : "&") + "embed=1";
+
+    _iframe = document.createElement("iframe");
+    _iframe.src = url;
+    _iframe.setAttribute("title", "billing.io Secure Checkout");
+    _iframe.style.opacity = "0";
+    _iframe.style.transition = "opacity 0.4s ease";
+    _iframe.addEventListener("load", function () {
+      _iframe.style.opacity = "1";
+    });
+
+    // Build overlay
+    var variation = VARIATIONS[variationNum] || VARIATIONS[1];
+    _overlay = variation.build(_iframe, function () { closeOverlay(); });
+
+    document.body.appendChild(_overlay);
+    lockScroll();
+    _isOpen = true;
+
+    window.addEventListener("message", handleMessage);
+    document.addEventListener("keydown", handleKeydown);
+  }
+
+  function closeOverlay(silent) {
+    if (!_overlay) return;
+
+    var overlay = _overlay;
+    _isOpen = false;
+
+    if (overlay._animateOut) {
+      overlay._animateOut(function () {
+        if (overlay.parentNode) overlay.parentNode.removeChild(overlay);
+      });
+    } else {
+      if (overlay.parentNode) overlay.parentNode.removeChild(overlay);
+    }
+
+    unlockScroll();
+
+    if (!silent && _callbacks.onClose) {
+      _callbacks.onClose();
+    }
+
+    _overlay = null;
+    _iframe = null;
+    document.removeEventListener("keydown", handleKeydown);
+    window.removeEventListener("message", handleMessage);
+  }
+
+  function redirectToCheckout(options) {
+    if (!options || !options.checkoutId) {
+      throw new Error("billing.redirectToCheckout: checkoutId is required");
+    }
+    window.location.href = BILLING_HOST + "/checkout/" + encodeURIComponent(options.checkoutId);
+  }
+
+  function handleKeydown(e) {
+    if (e.key === "Escape") closeOverlay();
+  }
+
+  // ---------------------------------------------------------------------------
+  // Public API
+  // ---------------------------------------------------------------------------
+
+  var billingApi = {
+    version: VERSION,
+
+    /**
+     * Open the checkout overlay.
+     * @param {Object} options
+     * @param {string} options.checkoutId - The checkout ID (e.g. "co_123")
+     * @param {string|number} [options.variation] - Overlay style: "centered"|"panel"|"bottom"|"fullscreen"|"popup" or 1-5
+     * @param {Function} [options.onSuccess] - Called with { checkoutId, txHash }
+     * @param {Function} [options.onClose] - Called when the overlay is closed
+     * @param {Function} [options.onError] - Called with { message, code }
+     */
+    openCheckout: openCheckout,
+
+    /**
+     * Redirect the page to the hosted checkout.
+     * @param {Object} options
+     * @param {string} options.checkoutId - The checkout ID
+     */
+    redirectToCheckout: redirectToCheckout,
+
+    /**
+     * Close the overlay programmatically.
+     */
+    close: function () { closeOverlay(); },
+
+    /**
+     * Set the default overlay variation (1-5). Dev use only.
+     * @param {number|string} v - Variation number or name
+     */
+    setVariation: function (v) {
+      var n = resolveVariation(v);
+      if (VARIATIONS[n]) {
+        _variation = n;
+        localStorage.setItem("billing_overlay_variation", String(n));
+      }
+    },
+
+    /** Get current default variation number. */
+    getVariation: function () { return _variation; },
+  };
+
+  if (typeof window !== "undefined") {
+    window[NAMESPACE] = billingApi;
+  }
+
+  if (document.readyState === "loading") {
+    document.addEventListener("DOMContentLoaded", buildVariationSwitcher);
+  } else {
+    buildVariationSwitcher();
+  }
+})();