@coincircuit/checkout 0.1.0

package/dist/chunk-VYS76EOY.js

@@ -0,0 +1,336 @@
+// 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";
+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: 100%;
+      max-width: 450px;
+      height: 90vh;
+      max-height: 700px;
+      border-radius: 16px;
+      overflow: hidden;
+      background: #fff;
+      box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.4);
+    }
+    #${OVERLAY_ID} .cc-close {
+      position: absolute;
+      top: 12px;
+      right: 12px;
+      z-index: 10;
+      width: 32px;
+      height: 32px;
+      border: none;
+      border-radius: 50%;
+      background: rgba(0, 0, 0, 0.5);
+      color: #fff;
+      font-size: 18px;
+      line-height: 1;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      transition: background 0.15s;
+    }
+    #${OVERLAY_ID} .cc-close:hover {
+      background: rgba(0, 0, 0, 0.7);
+    }
+    #${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;
+      background: #fff;
+      transition: opacity 0.2s;
+    }
+    #${OVERLAY_ID} .cc-spinner div {
+      width: 36px;
+      height: 36px;
+      border: 3px solid #e5e7eb;
+      border-top-color: #6366f1;
+      border-radius: 50%;
+      animation: cc-spin 0.8s linear infinite;
+    }
+    @keyframes cc-spin { to { transform: rotate(360deg); } }
+    @media (max-width: 480px) {
+      #${OVERLAY_ID} .cc-modal {
+        max-width: 100%;
+        height: 100vh;
+        max-height: 100vh;
+        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";
+  spinner.innerHTML = "<div></div>";
+  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");
+  modal.appendChild(spinner);
+  modal.appendChild(iframe);
+  overlay.appendChild(modal);
+  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);
+  }
+}
+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;
+  constructor(config = {}) {
+    this.baseUrl = (config.baseUrl ?? DEFAULT_BASE_URL).replace(/\/+$/, "");
+    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.');
+    }
+    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. The checkout service may be unavailable or blocked by security policy."
+      );
+      this.close();
+    }, 15e3);
+    iframe.addEventListener("error", () => {
+      if (this.loadTimeout) clearTimeout(this.loadTimeout);
+      showErrorToast("Checkout failed to load. Please try again.");
+      this.close();
+    });
+    this.removeMessageListener = createMessageListener(this.origin, {
+      onReady: () => {
+        if (this.loadTimeout) {
+          clearTimeout(this.loadTimeout);
+          this.loadTimeout = null;
+        }
+        if (this.overlay) hideSpinner(this.overlay);
+        options.onReady?.();
+      },
+      onPaymentComplete: (data) => {
+        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
+};

package/dist/index.cjs

@@ -0,0 +1,367 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  CHECKOUT_MESSAGE_TYPES: () => CHECKOUT_MESSAGE_TYPES,
+  CoinCircuitCheckout: () => CoinCircuitCheckout,
+  DEFAULT_BASE_URL: () => DEFAULT_BASE_URL,
+  buildCheckoutUrl: () => buildCheckoutUrl,
+  createMessageListener: () => createMessageListener,
+  extractOrigin: () => extractOrigin
+});
+module.exports = __toCommonJS(index_exports);
+
+// 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";
+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: 100%;
+      max-width: 450px;
+      height: 90vh;
+      max-height: 700px;
+      border-radius: 16px;
+      overflow: hidden;
+      background: #fff;
+      box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.4);
+    }
+    #${OVERLAY_ID} .cc-close {
+      position: absolute;
+      top: 12px;
+      right: 12px;
+      z-index: 10;
+      width: 32px;
+      height: 32px;
+      border: none;
+      border-radius: 50%;
+      background: rgba(0, 0, 0, 0.5);
+      color: #fff;
+      font-size: 18px;
+      line-height: 1;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      transition: background 0.15s;
+    }
+    #${OVERLAY_ID} .cc-close:hover {
+      background: rgba(0, 0, 0, 0.7);
+    }
+    #${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;
+      background: #fff;
+      transition: opacity 0.2s;
+    }
+    #${OVERLAY_ID} .cc-spinner div {
+      width: 36px;
+      height: 36px;
+      border: 3px solid #e5e7eb;
+      border-top-color: #6366f1;
+      border-radius: 50%;
+      animation: cc-spin 0.8s linear infinite;
+    }
+    @keyframes cc-spin { to { transform: rotate(360deg); } }
+    @media (max-width: 480px) {
+      #${OVERLAY_ID} .cc-modal {
+        max-width: 100%;
+        height: 100vh;
+        max-height: 100vh;
+        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";
+  spinner.innerHTML = "<div></div>";
+  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");
+  modal.appendChild(spinner);
+  modal.appendChild(iframe);
+  overlay.appendChild(modal);
+  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);
+  }
+}
+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;
+  constructor(config = {}) {
+    this.baseUrl = (config.baseUrl ?? DEFAULT_BASE_URL).replace(/\/+$/, "");
+    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.');
+    }
+    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. The checkout service may be unavailable or blocked by security policy."
+      );
+      this.close();
+    }, 15e3);
+    iframe.addEventListener("error", () => {
+      if (this.loadTimeout) clearTimeout(this.loadTimeout);
+      showErrorToast("Checkout failed to load. Please try again.");
+      this.close();
+    });
+    this.removeMessageListener = createMessageListener(this.origin, {
+      onReady: () => {
+        if (this.loadTimeout) {
+          clearTimeout(this.loadTimeout);
+          this.loadTimeout = null;
+        }
+        if (this.overlay) hideSpinner(this.overlay);
+        options.onReady?.();
+      },
+      onPaymentComplete: (data) => {
+        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;
+  }
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  CHECKOUT_MESSAGE_TYPES,
+  CoinCircuitCheckout,
+  DEFAULT_BASE_URL,
+  buildCheckoutUrl,
+  createMessageListener,
+  extractOrigin
+});