@coincircuit/checkout 0.4.0 → 0.4.2

package/dist/chunk-RJ3FMO5K.js

@@ -1,377 +0,0 @@
-// 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/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 OVERLAY_ID = "coincircuit-checkout-overlay";
-var STYLES_ID = "coincircuit-checkout-styles";
-function injectStyles() {
-  if (document.getElementById(STYLES_ID)) return;
-  const style = document.createElement("style");
-  style.id = STYLES_ID;
-  style.textContent = `
-    #${OVERLAY_ID} {
-      position: fixed;
-      inset: 0;
-      z-index: 999999;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      background: rgba(0, 0, 0, 0.6);
-      backdrop-filter: blur(4px);
-      opacity: 0;
-      transition: opacity 0.2s ease;
-    }
-    #${OVERLAY_ID}.cc-visible {
-      opacity: 1;
-    }
-    #${OVERLAY_ID} .cc-modal {
-      position: relative;
-      width: min(600px, 96vw);
-      max-width: 600px;
-      height: min(88vh, 800px);
-      border-radius: 16px;
-      background: #fff;
-      box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.4);
-      opacity: 0;
-      transform: scale(0.96);
-      transition: opacity 0.25s ease, transform 0.25s ease;
-    }
-    #${OVERLAY_ID} .cc-modal.cc-ready {
-      opacity: 1;
-      transform: scale(1);
-    }
-    #${OVERLAY_ID} .cc-close {
-      position: fixed;
-      top: 16px;
-      right: 16px;
-      z-index: 1000000;
-      width: 36px;
-      height: 36px;
-      border: none;
-      border-radius: 50%;
-      background: rgba(255, 255, 255, 0.15);
-      backdrop-filter: blur(8px);
-      color: #fff;
-      font-size: 20px;
-      line-height: 1;
-      cursor: pointer;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      transition: background 0.15s, transform 0.15s;
-    }
-    #${OVERLAY_ID} .cc-close:hover {
-      background: rgba(255, 255, 255, 0.25);
-      transform: scale(1.1);
-    }
-    #${OVERLAY_ID} iframe {
-      width: 100%;
-      height: 100%;
-      border: none;
-      display: block;
-    }
-    #${OVERLAY_ID} .cc-spinner {
-      position: absolute;
-      inset: 0;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      z-index: 1;
-      transition: opacity 0.2s;
-    }
-    #${OVERLAY_ID} .cc-spinner div {
-      width: 36px;
-      height: 36px;
-      border: 3px solid rgba(255, 255, 255, 0.3);
-      border-top-color: #fff;
-      border-radius: 50%;
-      animation: cc-spin 0.8s linear infinite;
-    }
-    @keyframes cc-spin { to { transform: rotate(360deg); } }
-    @media (max-width: 720px) {
-      #${OVERLAY_ID} .cc-modal {
-        width: 100%;
-        max-width: 100%;
-        height: 100dvh;
-        border-radius: 0;
-      }
-    }
-  `;
-  document.head.appendChild(style);
-}
-function createOverlay(checkoutUrl, onCloseClick) {
-  injectStyles();
-  const overlay = document.createElement("div");
-  overlay.id = OVERLAY_ID;
-  overlay.addEventListener("click", (e) => {
-    if (e.target === overlay) onCloseClick();
-  });
-  const onKeydown = (e) => {
-    if (e.key === "Escape") onCloseClick();
-  };
-  document.addEventListener("keydown", onKeydown);
-  overlay.dataset.keydownAttached = "true";
-  overlay._removeKeydown = () => document.removeEventListener("keydown", onKeydown);
-  const modal = document.createElement("div");
-  modal.className = "cc-modal";
-  const spinner = document.createElement("div");
-  spinner.className = "cc-spinner";
-  const spinnerRing = document.createElement("div");
-  spinner.appendChild(spinnerRing);
-  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");
-  const closeBtn = document.createElement("button");
-  closeBtn.className = "cc-close";
-  closeBtn.setAttribute("aria-label", "Close checkout");
-  closeBtn.textContent = "\u2715";
-  closeBtn.addEventListener("click", onCloseClick);
-  modal.appendChild(iframe);
-  overlay.appendChild(spinner);
-  overlay.appendChild(modal);
-  overlay.appendChild(closeBtn);
-  return { overlay, iframe };
-}
-function showOverlay(overlay) {
-  document.body.appendChild(overlay);
-  document.body.style.overflow = "hidden";
-  overlay.offsetHeight;
-  overlay.classList.add("cc-visible");
-}
-function removeOverlay(overlay) {
-  overlay._removeKeydown?.();
-  overlay.classList.remove("cc-visible");
-  document.body.style.overflow = "";
-  setTimeout(() => {
-    overlay.parentNode?.removeChild(overlay);
-  }, 200);
-}
-function hideSpinner(overlay) {
-  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();
-    });
-    this.overlay = overlay;
-    this.loadTimeout = setTimeout(() => {
-      showErrorToast(
-        "Checkout failed to load."
-      );
-      this.close();
-    }, 15e3);
-    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
-};