@coincircuit/checkout 0.1.0

package/dist/index.d.cts

@@ -0,0 +1,91 @@
+import { C as CheckoutConfig, a as CheckoutOptions, P as PaymentCompleteData, b as PaymentFailedData, c as CheckoutTheme } from './types-B0nOHvDT.cjs';
+export { d as CheckoutButtonProps } from './types-B0nOHvDT.cjs';
+
+/**
+ * CoinCircuitCheckout opens a full-screen modal overlay with the checkout
+ * page embedded in an iframe. The merchant's page stays in the background.
+ *
+ * Usage:
+ * ```ts
+ * const checkout = new CoinCircuitCheckout({ publicKey: 'pk_live_...' });
+ *
+ * checkout.open({
+ *   reference: 'cs_ref_abc123',
+ *   theme: 'dark',
+ *   onPaymentComplete: (data) => console.log('Paid!', data),
+ *   onClose: () => console.log('Checkout closed'),
+ * });
+ * ```
+ */
+declare class CoinCircuitCheckout {
+    private readonly baseUrl;
+    private readonly origin;
+    private readonly publicKey;
+    private overlay;
+    private removeMessageListener;
+    private loadTimeout;
+    constructor(config?: CheckoutConfig);
+    /**
+     * Opens the checkout modal overlay.
+     *
+     * @param options - Configuration for this checkout session.
+     * @throws If reference is missing.
+     */
+    open(options: CheckoutOptions): void;
+    /**
+     * Closes the checkout modal and cleans up listeners.
+     */
+    close(): void;
+    /**
+     * Returns true if the checkout modal is currently open.
+     */
+    isOpen(): boolean;
+}
+
+/**
+ * All message type identifiers sent from the checkout popup to the opener.
+ */
+declare const CHECKOUT_MESSAGE_TYPES: {
+    readonly READY: "coincircuit:ready";
+    readonly PAYMENT_COMPLETE: "coincircuit:payment_complete";
+    readonly PAYMENT_FAILED: "coincircuit:payment_failed";
+    readonly EXPIRED: "coincircuit:expired";
+    readonly CLOSE: "coincircuit:close";
+};
+type CheckoutMessageType = (typeof CHECKOUT_MESSAGE_TYPES)[keyof typeof CHECKOUT_MESSAGE_TYPES];
+/**
+ * Shape of a postMessage sent from the checkout popup.
+ */
+interface CheckoutMessage {
+    type: CheckoutMessageType;
+    data?: PaymentCompleteData | PaymentFailedData | undefined;
+}
+/**
+ * Callbacks dispatched when validated messages arrive from the popup.
+ */
+interface CheckoutEventHandlers {
+    onReady?: () => void;
+    onPaymentComplete?: (data: PaymentCompleteData) => void;
+    onPaymentFailed?: (data: PaymentFailedData) => void;
+    onExpired?: () => void;
+    onClose?: () => void;
+}
+/**
+ * Creates a message event listener that validates origin, parses the message,
+ * and dispatches to the appropriate handler.
+ *
+ * @returns A cleanup function that removes the event listener.
+ */
+declare function createMessageListener(allowedOrigin: string, handlers: CheckoutEventHandlers): () => void;
+
+declare const DEFAULT_BASE_URL = "https://checkout.coincircuit.io";
+/**
+ * Builds the checkout URL with embed flag.
+ */
+declare function buildCheckoutUrl(baseUrl: string, reference: string, theme?: CheckoutTheme): string;
+/**
+ * Extracts the origin from a URL for postMessage validation.
+ */
+declare function extractOrigin(baseUrl: string): string;
+
+export { CHECKOUT_MESSAGE_TYPES, CheckoutConfig, type CheckoutEventHandlers, type CheckoutMessage, type CheckoutMessageType, CheckoutOptions, CheckoutTheme, CoinCircuitCheckout, DEFAULT_BASE_URL, PaymentCompleteData, PaymentFailedData, buildCheckoutUrl, createMessageListener, extractOrigin };

package/dist/index.d.ts

@@ -0,0 +1,91 @@
+import { C as CheckoutConfig, a as CheckoutOptions, P as PaymentCompleteData, b as PaymentFailedData, c as CheckoutTheme } from './types-B0nOHvDT.js';
+export { d as CheckoutButtonProps } from './types-B0nOHvDT.js';
+
+/**
+ * CoinCircuitCheckout opens a full-screen modal overlay with the checkout
+ * page embedded in an iframe. The merchant's page stays in the background.
+ *
+ * Usage:
+ * ```ts
+ * const checkout = new CoinCircuitCheckout({ publicKey: 'pk_live_...' });
+ *
+ * checkout.open({
+ *   reference: 'cs_ref_abc123',
+ *   theme: 'dark',
+ *   onPaymentComplete: (data) => console.log('Paid!', data),
+ *   onClose: () => console.log('Checkout closed'),
+ * });
+ * ```
+ */
+declare class CoinCircuitCheckout {
+    private readonly baseUrl;
+    private readonly origin;
+    private readonly publicKey;
+    private overlay;
+    private removeMessageListener;
+    private loadTimeout;
+    constructor(config?: CheckoutConfig);
+    /**
+     * Opens the checkout modal overlay.
+     *
+     * @param options - Configuration for this checkout session.
+     * @throws If reference is missing.
+     */
+    open(options: CheckoutOptions): void;
+    /**
+     * Closes the checkout modal and cleans up listeners.
+     */
+    close(): void;
+    /**
+     * Returns true if the checkout modal is currently open.
+     */
+    isOpen(): boolean;
+}
+
+/**
+ * All message type identifiers sent from the checkout popup to the opener.
+ */
+declare const CHECKOUT_MESSAGE_TYPES: {
+    readonly READY: "coincircuit:ready";
+    readonly PAYMENT_COMPLETE: "coincircuit:payment_complete";
+    readonly PAYMENT_FAILED: "coincircuit:payment_failed";
+    readonly EXPIRED: "coincircuit:expired";
+    readonly CLOSE: "coincircuit:close";
+};
+type CheckoutMessageType = (typeof CHECKOUT_MESSAGE_TYPES)[keyof typeof CHECKOUT_MESSAGE_TYPES];
+/**
+ * Shape of a postMessage sent from the checkout popup.
+ */
+interface CheckoutMessage {
+    type: CheckoutMessageType;
+    data?: PaymentCompleteData | PaymentFailedData | undefined;
+}
+/**
+ * Callbacks dispatched when validated messages arrive from the popup.
+ */
+interface CheckoutEventHandlers {
+    onReady?: () => void;
+    onPaymentComplete?: (data: PaymentCompleteData) => void;
+    onPaymentFailed?: (data: PaymentFailedData) => void;
+    onExpired?: () => void;
+    onClose?: () => void;
+}
+/**
+ * Creates a message event listener that validates origin, parses the message,
+ * and dispatches to the appropriate handler.
+ *
+ * @returns A cleanup function that removes the event listener.
+ */
+declare function createMessageListener(allowedOrigin: string, handlers: CheckoutEventHandlers): () => void;
+
+declare const DEFAULT_BASE_URL = "https://checkout.coincircuit.io";
+/**
+ * Builds the checkout URL with embed flag.
+ */
+declare function buildCheckoutUrl(baseUrl: string, reference: string, theme?: CheckoutTheme): string;
+/**
+ * Extracts the origin from a URL for postMessage validation.
+ */
+declare function extractOrigin(baseUrl: string): string;
+
+export { CHECKOUT_MESSAGE_TYPES, CheckoutConfig, type CheckoutEventHandlers, type CheckoutMessage, type CheckoutMessageType, CheckoutOptions, CheckoutTheme, CoinCircuitCheckout, DEFAULT_BASE_URL, PaymentCompleteData, PaymentFailedData, buildCheckoutUrl, createMessageListener, extractOrigin };

package/dist/index.js

@@ -0,0 +1,16 @@
+import {
+  CHECKOUT_MESSAGE_TYPES,
+  CoinCircuitCheckout,
+  DEFAULT_BASE_URL,
+  buildCheckoutUrl,
+  createMessageListener,
+  extractOrigin
+} from "./chunk-VYS76EOY.js";
+export {
+  CHECKOUT_MESSAGE_TYPES,
+  CoinCircuitCheckout,
+  DEFAULT_BASE_URL,
+  buildCheckoutUrl,
+  createMessageListener,
+  extractOrigin
+};

package/dist/react.cjs

@@ -0,0 +1,418 @@
+"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/react.ts
+var react_exports = {};
+__export(react_exports, {
+  CoinCircuitCheckoutButton: () => CoinCircuitCheckoutButton
+});
+module.exports = __toCommonJS(react_exports);
+var import_react = require("react");
+
+// 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;
+  }
+};
+
+// src/react.ts
+function CoinCircuitCheckoutButton(props) {
+  const {
+    reference,
+    theme,
+    baseUrl,
+    publicKey,
+    label = "Pay with CoinCircuit",
+    className,
+    style,
+    disabled,
+    onReady,
+    onPaymentComplete,
+    onPaymentFailed,
+    onExpired,
+    onClose
+  } = props;
+  const checkoutRef = (0, import_react.useRef)(null);
+  const onReadyRef = (0, import_react.useRef)(onReady);
+  const onPaymentCompleteRef = (0, import_react.useRef)(onPaymentComplete);
+  const onPaymentFailedRef = (0, import_react.useRef)(onPaymentFailed);
+  const onExpiredRef = (0, import_react.useRef)(onExpired);
+  const onCloseRef = (0, import_react.useRef)(onClose);
+  onReadyRef.current = onReady;
+  onPaymentCompleteRef.current = onPaymentComplete;
+  onPaymentFailedRef.current = onPaymentFailed;
+  onExpiredRef.current = onExpired;
+  onCloseRef.current = onClose;
+  (0, import_react.useEffect)(() => {
+    checkoutRef.current = new CoinCircuitCheckout({ baseUrl, publicKey });
+    return () => {
+      checkoutRef.current?.close();
+    };
+  }, [baseUrl, publicKey]);
+  const handleClick = (0, import_react.useCallback)(() => {
+    if (!checkoutRef.current || !reference) return;
+    checkoutRef.current.open({
+      reference,
+      theme,
+      onReady: () => onReadyRef.current?.(),
+      onPaymentComplete: (data) => onPaymentCompleteRef.current?.(data),
+      onPaymentFailed: (data) => onPaymentFailedRef.current?.(data),
+      onExpired: () => onExpiredRef.current?.(),
+      onClose: () => onCloseRef.current?.()
+    });
+  }, [reference, theme]);
+  return (0, import_react.createElement)(
+    "button",
+    {
+      type: "button",
+      onClick: handleClick,
+      disabled: disabled || !reference,
+      className,
+      style,
+      "data-coincircuit-checkout": "true"
+    },
+    label
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  CoinCircuitCheckoutButton
+});

package/dist/react.d.cts

@@ -0,0 +1,28 @@
+import * as react from 'react';
+import { d as CheckoutButtonProps } from './types-B0nOHvDT.cjs';
+
+/**
+ * React component that renders a button to open the CoinCircuit checkout modal.
+ *
+ * Usage:
+ * ```tsx
+ * import { CoinCircuitCheckoutButton } from '@coincircuit/checkout/react';
+ *
+ * <CoinCircuitCheckoutButton
+ *   reference="cs_ref_abc123"
+ *   theme="dark"
+ *   onPaymentComplete={(data) => console.log('Paid!', data)}
+ *   onClose={() => console.log('Closed')}
+ * />
+ * ```
+ */
+declare function CoinCircuitCheckoutButton(props: CheckoutButtonProps): react.DetailedReactHTMLElement<{
+    type: string;
+    onClick: () => void;
+    disabled: boolean;
+    className: string | undefined;
+    style: Record<string, string | number> | undefined;
+    'data-coincircuit-checkout': string;
+}, HTMLElement>;
+
+export { CheckoutButtonProps, CoinCircuitCheckoutButton };

package/dist/react.d.ts

@@ -0,0 +1,28 @@
+import * as react from 'react';
+import { d as CheckoutButtonProps } from './types-B0nOHvDT.js';
+
+/**
+ * React component that renders a button to open the CoinCircuit checkout modal.
+ *
+ * Usage:
+ * ```tsx
+ * import { CoinCircuitCheckoutButton } from '@coincircuit/checkout/react';
+ *
+ * <CoinCircuitCheckoutButton
+ *   reference="cs_ref_abc123"
+ *   theme="dark"
+ *   onPaymentComplete={(data) => console.log('Paid!', data)}
+ *   onClose={() => console.log('Closed')}
+ * />
+ * ```
+ */
+declare function CoinCircuitCheckoutButton(props: CheckoutButtonProps): react.DetailedReactHTMLElement<{
+    type: string;
+    onClick: () => void;
+    disabled: boolean;
+    className: string | undefined;
+    style: Record<string, string | number> | undefined;
+    'data-coincircuit-checkout': string;
+}, HTMLElement>;
+
+export { CheckoutButtonProps, CoinCircuitCheckoutButton };