@coincircuit/checkout 0.4.0 → 0.4.2

package/README.md

@@ -57,6 +57,41 @@ function PayPage() {
 5. Your callbacks fire with payment data
 6. Modal closes automatically on success
 
+## Overlay appearance
+
+The overlay follows the `theme` passed to `open()`. On desktop it uses a softly
+blurred backdrop, a rounded checkout frame, and a close button beside the frame.
+The loading state appears inside the frame while the checkout connects. On mobile
+it fills the screen with a separate close row, keeping the checkout unobstructed.
+Reduced motion and reduced transparency preferences are respected.
+
+## Local development in the ecommerce demo
+
+From `../../coincircuit-ecommerce-demo`, run `npm run dev:local-sdk` to use this
+SDK's source directly. The demo's regular development command and production use
+the published package. No SDK build or package linking is needed for this mode.
+
+## Publishing
+
+Pushing to `main` runs the npm publishing workflow. It automatically advances the
+patch version beyond the highest stable version on npm (for example, `0.4.1` to
+`0.4.2`), updates both `package.json` and `package-lock.json`, checks the release,
+and builds the SDK. It then saves the version in a bot commit on `main` before
+publishing. A manually chosen version higher than npm's latest stable version is
+preserved, so minor and major releases can still be chosen explicitly.
+
+Releases run one at a time. Rerunning a failed publish retries its saved version;
+an already published release at the tip of `main` is skipped. Registry lookup
+errors stop the release. If `main` changes during the build, the version push
+stops and the queued run handles the newer code.
+
+The workflow uses `NPM_TOKEN` to publish and `GITHUB_TOKEN` to save the version.
+Repository rules must allow the workflow to push version commits to `main`.
+Commits pushed with `GITHUB_TOKEN` do not trigger another publishing run.
+Pull the bot's version commit before pushing subsequent local changes.
+
+Publishing a package does not update or redeploy applications that consume it.
+
 ## Callbacks
 
 | Callback | When |

package/dist/chunk-FKC27TV4.js

@@ -0,0 +1,561 @@
+// src/events.ts
+var CHECKOUT_MESSAGE_TYPES = {
+  READY: "coincircuit:ready",
+  PAYMENT_COMPLETE: "coincircuit:payment_complete",
+  PAYMENT_FAILED: "coincircuit:payment_failed",
+  EXPIRED: "coincircuit:expired",
+  CLOSE: "coincircuit:close"
+};
+function isCheckoutMessage(value) {
+  if (typeof value !== "object" || value === null) return false;
+  const msg = value;
+  return typeof msg.type === "string" && msg.type.startsWith("coincircuit:");
+}
+function createMessageListener(allowedOrigin, handlers) {
+  function onMessage(event) {
+    if (event.origin !== allowedOrigin) return;
+    const message = event.data;
+    if (!isCheckoutMessage(message)) return;
+    switch (message.type) {
+      case CHECKOUT_MESSAGE_TYPES.READY:
+        handlers.onReady?.();
+        break;
+      case CHECKOUT_MESSAGE_TYPES.PAYMENT_COMPLETE:
+        if (message.data) {
+          handlers.onPaymentComplete?.(message.data);
+        }
+        break;
+      case CHECKOUT_MESSAGE_TYPES.PAYMENT_FAILED:
+        if (message.data) {
+          handlers.onPaymentFailed?.(message.data);
+        }
+        break;
+      case CHECKOUT_MESSAGE_TYPES.EXPIRED:
+        handlers.onExpired?.();
+        break;
+      case CHECKOUT_MESSAGE_TYPES.CLOSE:
+        handlers.onClose?.();
+        break;
+    }
+  }
+  window.addEventListener("message", onMessage);
+  return () => window.removeEventListener("message", onMessage);
+}
+
+// src/overlay-styles.ts
+var OVERLAY_ID = "coincircuit-checkout-overlay";
+var OVERLAY_STYLES = `
+  #${OVERLAY_ID} {
+    --cc-surface: #fafafa;
+    --cc-foreground: #171717;
+    --cc-muted: #666;
+    --cc-edge: rgba(255, 255, 255, 0.85);
+    --cc-control: rgba(250, 250, 250, 0.88);
+    --cc-track: rgba(0, 0, 0, 0.1);
+    --cc-accent: oklch(0.52 0.22 255);
+    position: fixed;
+    inset: 0;
+    z-index: 999999;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    padding: 24px 64px;
+    background: rgba(12, 14, 18, 0.42);
+    -webkit-backdrop-filter: blur(10px);
+    backdrop-filter: blur(10px);
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    color: var(--cc-foreground);
+    opacity: 0;
+    transition: opacity 200ms ease;
+  }
+  #${OVERLAY_ID}[data-theme="dark"] {
+    --cc-surface: #111216;
+    --cc-foreground: #f5f5f5;
+    --cc-muted: #aaa;
+    --cc-edge: rgba(255, 255, 255, 0.18);
+    --cc-control: rgba(28, 29, 33, 0.9);
+    --cc-track: rgba(255, 255, 255, 0.14);
+    --cc-accent: oklch(0.72 0.29 263.25);
+    color-scheme: dark;
+  }
+  #${OVERLAY_ID}, #${OVERLAY_ID} * {
+    box-sizing: border-box;
+  }
+  #${OVERLAY_ID}.cc-visible {
+    opacity: 1;
+  }
+  #${OVERLAY_ID} .cc-modal {
+    position: relative;
+    width: 100%;
+    max-width: 740px;
+    height: min(900px, calc(100vh - 48px));
+    height: min(900px, calc(100dvh - 48px));
+    border: 1px solid var(--cc-edge);
+    border-radius: 30px;
+    background: var(--cc-surface);
+    box-shadow: 0 32px 100px -24px rgba(0, 0, 0, 0.38);
+    transform: translateY(8px) scale(0.99);
+    transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1);
+  }
+  #${OVERLAY_ID}.cc-visible .cc-modal {
+    transform: translateY(0) scale(1);
+  }
+  #${OVERLAY_ID} .cc-frame {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    border-radius: inherit;
+    background: var(--cc-surface);
+  }
+  #${OVERLAY_ID} .cc-close {
+    position: absolute;
+    top: 0;
+    right: -56px;
+    z-index: 2;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 44px;
+    height: 44px;
+    margin: 0;
+    padding: 0;
+    border: 1px solid var(--cc-edge);
+    border-radius: 50%;
+    background: var(--cc-control);
+    -webkit-backdrop-filter: blur(16px);
+    backdrop-filter: blur(16px);
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
+    color: var(--cc-foreground);
+    cursor: pointer;
+    touch-action: manipulation;
+    transition: background-color 160ms ease, transform 160ms ease;
+  }
+  #${OVERLAY_ID} .cc-close:hover {
+    background: var(--cc-surface);
+  }
+  #${OVERLAY_ID} .cc-close:active {
+    transform: scale(0.96);
+  }
+  #${OVERLAY_ID} .cc-close:focus-visible {
+    outline: 2px solid var(--cc-accent);
+    outline-offset: 4px;
+  }
+  #${OVERLAY_ID} .cc-close svg {
+    display: block;
+    width: 18px;
+    height: 18px;
+    pointer-events: none;
+  }
+  #${OVERLAY_ID} iframe {
+    display: block;
+    width: 100%;
+    height: 100%;
+    border: 0;
+    opacity: 0;
+    visibility: hidden;
+    transition: opacity 200ms ease;
+  }
+  #${OVERLAY_ID} .cc-ready iframe {
+    opacity: 1;
+    visibility: visible;
+  }
+  #${OVERLAY_ID} .cc-spinner {
+    position: absolute;
+    inset: 0;
+    z-index: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 16px;
+    background: var(--cc-surface);
+    color: var(--cc-muted);
+    font-size: 14px;
+    line-height: 1.5;
+    transition: opacity 200ms ease;
+  }
+  #${OVERLAY_ID} .cc-spinner-ring {
+    width: 32px;
+    height: 32px;
+    border: 2px solid var(--cc-track);
+    border-top-color: var(--cc-accent);
+    border-radius: 50%;
+    animation: cc-spin 800ms linear infinite;
+  }
+  #${OVERLAY_ID} .cc-ready .cc-spinner {
+    opacity: 0;
+    pointer-events: none;
+  }
+  @keyframes cc-spin { to { transform: rotate(360deg); } }
+  @media (max-width: 720px) {
+    #${OVERLAY_ID} {
+      padding: 0;
+      background: var(--cc-surface);
+      -webkit-backdrop-filter: none;
+      backdrop-filter: none;
+    }
+    #${OVERLAY_ID} .cc-modal {
+      max-width: none;
+      height: 100vh;
+      height: 100dvh;
+      padding-top: calc(56px + env(safe-area-inset-top, 0px));
+      border: 0;
+      border-radius: 0;
+      box-shadow: none;
+      transform: none;
+    }
+    #${OVERLAY_ID} .cc-close {
+      top: calc(6px + env(safe-area-inset-top, 0px));
+      right: max(12px, env(safe-area-inset-right, 0px));
+      border-color: var(--cc-track);
+      background: transparent;
+      box-shadow: none;
+    }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    #${OVERLAY_ID}, #${OVERLAY_ID} * {
+      animation: none !important;
+      transition: none !important;
+    }
+    #${OVERLAY_ID} .cc-modal, #${OVERLAY_ID} .cc-close:active {
+      transform: none;
+    }
+  }
+  @media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
+    #${OVERLAY_ID} {
+      background: rgba(12, 14, 18, 0.85);
+      -webkit-backdrop-filter: none;
+      backdrop-filter: none;
+    }
+    #${OVERLAY_ID} .cc-close {
+      background: var(--cc-surface);
+      -webkit-backdrop-filter: none;
+      backdrop-filter: none;
+    }
+  }
+  @media (prefers-contrast: more) {
+    #${OVERLAY_ID} .cc-modal, #${OVERLAY_ID} .cc-close {
+      border-color: var(--cc-foreground);
+    }
+  }
+`;
+
+// src/utils.ts
+var DEFAULT_BASE_URL = "https://checkout.coincircuit.io";
+var ALLOWED_BASE_URLS = [
+  "https://checkout.coincircuit.io",
+  "https://sandbox-checkout.coincircuit.io"
+];
+function validateBaseUrl(url) {
+  const normalized = url.replace(/\/+$/, "");
+  if (!ALLOWED_BASE_URLS.includes(normalized)) {
+    throw new Error(
+      `CoinCircuitCheckout: invalid baseUrl "${url}". Must be one of: ${ALLOWED_BASE_URLS.join(", ")}`
+    );
+  }
+  return normalized;
+}
+function buildCheckoutUrl(baseUrl, reference, theme) {
+  const url = new URL(`/pay/${encodeURIComponent(reference)}`, baseUrl);
+  url.searchParams.set("embed", "true");
+  if (theme) {
+    url.searchParams.set("theme", theme);
+  }
+  return url.toString();
+}
+function extractOrigin(baseUrl) {
+  try {
+    return new URL(baseUrl).origin;
+  } catch {
+    return baseUrl;
+  }
+}
+var STYLES_ID = "coincircuit-checkout-styles";
+var overlayStates = /* @__PURE__ */ new WeakMap();
+function injectStyles() {
+  if (document.getElementById(STYLES_ID)) return;
+  const style = document.createElement("style");
+  style.id = STYLES_ID;
+  style.textContent = OVERLAY_STYLES;
+  document.head.appendChild(style);
+}
+function createOverlay(checkoutUrl, onCloseClick, theme = "light") {
+  injectStyles();
+  const overlay = document.createElement("div");
+  overlay.id = OVERLAY_ID;
+  overlay.dataset.theme = theme;
+  let dismissed = false;
+  const dismiss = () => {
+    if (dismissed) return;
+    dismissed = true;
+    onCloseClick();
+  };
+  overlay.addEventListener("click", (e) => {
+    if (e.target === overlay) dismiss();
+  });
+  const isTopmostOverlay = () => {
+    const overlays = document.querySelectorAll(`#${OVERLAY_ID}.cc-visible`);
+    return overlays[overlays.length - 1] === overlay;
+  };
+  const onKeydown = (e) => {
+    if (!isTopmostOverlay()) return;
+    if (e.key === "Escape") {
+      e.preventDefault();
+      dismiss();
+    }
+    if (e.key === "Tab" && e.shiftKey && document.activeElement === closeBtn) {
+      e.preventDefault();
+      if (modal.classList.contains("cc-ready")) iframe.focus();
+    }
+  };
+  const onFocus = (e) => {
+    if (isTopmostOverlay() && !overlay.contains(e.target)) closeBtn.focus();
+  };
+  document.addEventListener("keydown", onKeydown);
+  document.addEventListener("focusin", onFocus);
+  overlayStates.set(overlay, {
+    removeListeners: () => {
+      document.removeEventListener("keydown", onKeydown);
+      document.removeEventListener("focusin", onFocus);
+    },
+    previousFocus: document.activeElement instanceof HTMLElement ? document.activeElement : null,
+    previousOverflow: document.body.style.overflow,
+    previousPaddingRight: document.body.style.paddingRight
+  });
+  const modal = document.createElement("div");
+  modal.className = "cc-modal";
+  modal.setAttribute("role", "dialog");
+  modal.setAttribute("aria-modal", "true");
+  modal.setAttribute("aria-label", "CoinCircuit checkout");
+  const frame = document.createElement("div");
+  frame.className = "cc-frame";
+  frame.setAttribute("aria-busy", "true");
+  const spinner = document.createElement("div");
+  spinner.className = "cc-spinner";
+  spinner.setAttribute("role", "status");
+  const spinnerRing = document.createElement("div");
+  spinnerRing.className = "cc-spinner-ring";
+  spinnerRing.setAttribute("aria-hidden", "true");
+  const spinnerLabel = document.createElement("span");
+  spinnerLabel.textContent = "Loading checkout";
+  spinner.appendChild(spinnerRing);
+  spinner.appendChild(spinnerLabel);
+  const iframe = document.createElement("iframe");
+  iframe.src = checkoutUrl;
+  iframe.setAttribute("sandbox", "allow-scripts allow-same-origin allow-forms allow-popups allow-popups-to-escape-sandbox");
+  iframe.setAttribute("referrerpolicy", "strict-origin-when-cross-origin");
+  iframe.setAttribute("title", "CoinCircuit Checkout");
+  iframe.setAttribute("allow", "payment");
+  iframe.tabIndex = -1;
+  const closeBtn = document.createElement("button");
+  closeBtn.className = "cc-close";
+  closeBtn.type = "button";
+  closeBtn.setAttribute("aria-label", "Close checkout");
+  const closeIcon = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+  closeIcon.setAttribute("viewBox", "0 0 24 24");
+  closeIcon.setAttribute("aria-hidden", "true");
+  closeIcon.setAttribute("fill", "none");
+  closeIcon.setAttribute("stroke", "currentColor");
+  closeIcon.setAttribute("stroke-width", "1.75");
+  closeIcon.setAttribute("stroke-linecap", "round");
+  const closePath = document.createElementNS("http://www.w3.org/2000/svg", "path");
+  closePath.setAttribute("d", "M6 6l12 12M18 6L6 18");
+  closeIcon.appendChild(closePath);
+  closeBtn.appendChild(closeIcon);
+  closeBtn.addEventListener("click", dismiss);
+  frame.appendChild(iframe);
+  frame.appendChild(spinner);
+  modal.appendChild(closeBtn);
+  modal.appendChild(frame);
+  overlay.appendChild(modal);
+  return { overlay, iframe };
+}
+function showOverlay(overlay) {
+  document.body.appendChild(overlay);
+  const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
+  if (scrollbarWidth > 0) {
+    const padding = parseFloat(window.getComputedStyle(document.body).paddingRight) || 0;
+    document.body.style.paddingRight = `${padding + scrollbarWidth}px`;
+  }
+  document.body.style.overflow = "hidden";
+  overlay.offsetHeight;
+  overlay.classList.add("cc-visible");
+  overlay.querySelector(".cc-close")?.focus({ preventScroll: true });
+}
+function removeOverlay(overlay) {
+  const state = overlayStates.get(overlay);
+  state?.removeListeners();
+  overlay.classList.remove("cc-visible");
+  overlay.style.pointerEvents = "none";
+  overlay.inert = true;
+  if (state) {
+    document.body.style.overflow = state.previousOverflow;
+    document.body.style.paddingRight = state.previousPaddingRight;
+    state.previousFocus?.focus({ preventScroll: true });
+    overlayStates.delete(overlay);
+  }
+  setTimeout(() => {
+    overlay.parentNode?.removeChild(overlay);
+  }, 200);
+}
+function hideSpinner(overlay) {
+  overlay.querySelector(".cc-frame")?.setAttribute("aria-busy", "false");
+  const iframe = overlay.querySelector("iframe");
+  if (iframe) iframe.tabIndex = 0;
+  const spinner = overlay.querySelector(".cc-spinner");
+  if (spinner) {
+    spinner.style.opacity = "0";
+    setTimeout(() => spinner.parentNode?.removeChild(spinner), 200);
+  }
+  const modal = overlay.querySelector(".cc-modal");
+  if (modal) {
+    modal.classList.add("cc-ready");
+  }
+}
+function showErrorToast(message) {
+  const toast = document.createElement("div");
+  toast.textContent = message;
+  Object.assign(toast.style, {
+    position: "fixed",
+    top: "20px",
+    left: "50%",
+    transform: "translateX(-50%) translateY(-10px)",
+    zIndex: "9999999",
+    background: "#ef4444",
+    color: "#fff",
+    padding: "12px 24px",
+    borderRadius: "8px",
+    fontSize: "14px",
+    fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+    boxShadow: "0 4px 12px rgba(0,0,0,0.3)",
+    opacity: "0",
+    transition: "opacity 0.2s, transform 0.2s",
+    maxWidth: "90vw",
+    textAlign: "center"
+  });
+  document.body.appendChild(toast);
+  toast.offsetHeight;
+  toast.style.opacity = "1";
+  toast.style.transform = "translateX(-50%) translateY(0)";
+  setTimeout(() => {
+    toast.style.opacity = "0";
+    toast.style.transform = "translateX(-50%) translateY(-10px)";
+    setTimeout(() => toast.parentNode?.removeChild(toast), 200);
+  }, 6e3);
+}
+
+// src/checkout.ts
+var CoinCircuitCheckout = class {
+  baseUrl;
+  origin;
+  publicKey;
+  overlay = null;
+  removeMessageListener = null;
+  loadTimeout = null;
+  openedAt = 0;
+  constructor(config = {}) {
+    this.baseUrl = config.baseUrl ? validateBaseUrl(config.baseUrl) : DEFAULT_BASE_URL;
+    this.origin = extractOrigin(this.baseUrl);
+    this.publicKey = config.publicKey;
+  }
+  /**
+   * Opens the checkout modal overlay.
+   *
+   * @param options - Configuration for this checkout session.
+   * @throws If reference is missing.
+   */
+  open(options) {
+    this.close();
+    if (!options.reference) {
+      throw new Error('CoinCircuitCheckout: "reference" is required.');
+    }
+    this.openedAt = performance.now();
+    console.log("[CoinCircuit] open() called \u2014 waiting for coincircuit:ready");
+    const checkoutUrl = buildCheckoutUrl(
+      this.baseUrl,
+      options.reference,
+      options.theme
+    );
+    const { overlay, iframe } = createOverlay(checkoutUrl, () => {
+      options.onClose?.();
+      this.close();
+    }, options.theme);
+    this.overlay = overlay;
+    this.loadTimeout = setTimeout(() => {
+      showErrorToast(
+        "Checkout failed to load."
+      );
+      this.close();
+    }, 3e4);
+    iframe.addEventListener("error", () => {
+      if (this.loadTimeout) clearTimeout(this.loadTimeout);
+      console.error(`[CoinCircuit] iframe error after ${Math.round(performance.now() - this.openedAt)}ms`);
+      showErrorToast("Checkout failed to load. Please try again.");
+      this.close();
+    });
+    iframe.addEventListener("load", () => {
+      console.log(`[CoinCircuit] iframe DOM loaded at ${Math.round(performance.now() - this.openedAt)}ms (still waiting for coincircuit:ready)`);
+    });
+    this.removeMessageListener = createMessageListener(this.origin, {
+      onReady: () => {
+        const elapsed = Math.round(performance.now() - this.openedAt);
+        console.log(`[CoinCircuit] coincircuit:ready received at ${elapsed}ms`);
+        if (this.loadTimeout) {
+          clearTimeout(this.loadTimeout);
+          this.loadTimeout = null;
+        }
+        if (this.overlay) hideSpinner(this.overlay);
+        options.onReady?.();
+      },
+      onPaymentComplete: (data) => {
+        console.log(`[CoinCircuit] coincircuit:payment_complete at ${Math.round(performance.now() - this.openedAt)}ms`);
+        options.onPaymentComplete?.(data);
+      },
+      onPaymentFailed: (data) => {
+        options.onPaymentFailed?.(data);
+      },
+      onExpired: () => {
+        options.onExpired?.();
+      },
+      onClose: () => {
+        options.onClose?.();
+        this.close();
+      }
+    });
+    showOverlay(overlay);
+  }
+  /**
+   * Closes the checkout modal and cleans up listeners.
+   */
+  close() {
+    if (this.loadTimeout) {
+      clearTimeout(this.loadTimeout);
+      this.loadTimeout = null;
+    }
+    if (this.removeMessageListener) {
+      this.removeMessageListener();
+      this.removeMessageListener = null;
+    }
+    if (this.overlay) {
+      removeOverlay(this.overlay);
+      this.overlay = null;
+    }
+  }
+  /**
+   * Returns true if the checkout modal is currently open.
+   */
+  isOpen() {
+    return this.overlay !== null;
+  }
+};
+
+export {
+  CHECKOUT_MESSAGE_TYPES,
+  createMessageListener,
+  DEFAULT_BASE_URL,
+  buildCheckoutUrl,
+  extractOrigin,
+  CoinCircuitCheckout
+};