@coincircuit/checkout 0.2.1 → 0.3.0

package/dist/{chunk-NLDQKWTU.js → chunk-IC5IZ3JH.js}

@@ -43,7 +43,21 @@ function createMessageListener(allowedOrigin, handlers) {
 }
 
 // src/utils.ts
-var DEFAULT_BASE_URL = "https://checkout.coincircuit.io";
+var DEFAULT_BASE_URL = "http://localhost:3002";
+var ALLOWED_BASE_URLS = [
+  "https://checkout.coincircuit.io",
+  "https://sandbox-checkout.coincircuit.io",
+  "http://localhost:3002"
+];
+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");
@@ -89,6 +103,13 @@ function injectStyles() {
       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;
@@ -126,14 +147,14 @@ function injectStyles() {
       display: flex;
       align-items: center;
       justify-content: center;
-      background: #fff;
+      z-index: 1;
       transition: opacity 0.2s;
     }
     #${OVERLAY_ID} .cc-spinner div {
       width: 36px;
       height: 36px;
-      border: 3px solid #e5e7eb;
-      border-top-color: #6366f1;
+      border: 3px solid rgba(255, 255, 255, 0.3);
+      border-top-color: #fff;
       border-radius: 50%;
       animation: cc-spin 0.8s linear infinite;
     }
@@ -166,7 +187,8 @@ function createOverlay(checkoutUrl, onCloseClick) {
   modal.className = "cc-modal";
   const spinner = document.createElement("div");
   spinner.className = "cc-spinner";
-  spinner.innerHTML = "<div></div>";
+  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");
@@ -178,8 +200,8 @@ function createOverlay(checkoutUrl, onCloseClick) {
   closeBtn.setAttribute("aria-label", "Close checkout");
   closeBtn.textContent = "\u2715";
   closeBtn.addEventListener("click", onCloseClick);
-  modal.appendChild(spinner);
   modal.appendChild(iframe);
+  overlay.appendChild(spinner);
   overlay.appendChild(modal);
   overlay.appendChild(closeBtn);
   return { overlay, iframe };
@@ -204,6 +226,10 @@ function hideSpinner(overlay) {
     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");
@@ -245,8 +271,9 @@ var CoinCircuitCheckout = class {
   overlay = null;
   removeMessageListener = null;
   loadTimeout = null;
+  openedAt = 0;
   constructor(config = {}) {
-    this.baseUrl = (config.baseUrl ?? DEFAULT_BASE_URL).replace(/\/+$/, "");
+    this.baseUrl = config.baseUrl ? validateBaseUrl(config.baseUrl) : DEFAULT_BASE_URL;
     this.origin = extractOrigin(this.baseUrl);
     this.publicKey = config.publicKey;
   }
@@ -261,6 +288,8 @@ var CoinCircuitCheckout = class {
     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,
@@ -279,11 +308,17 @@ var CoinCircuitCheckout = class {
     }, 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;
@@ -292,6 +327,7 @@ var CoinCircuitCheckout = class {
         options.onReady?.();
       },
       onPaymentComplete: (data) => {
+        console.log(`[CoinCircuit] coincircuit:payment_complete at ${Math.round(performance.now() - this.openedAt)}ms`);
         options.onPaymentComplete?.(data);
       },
       onPaymentFailed: (data) => {

package/dist/index.cjs

@@ -74,7 +74,21 @@ function createMessageListener(allowedOrigin, handlers) {
 }
 
 // src/utils.ts
-var DEFAULT_BASE_URL = "https://checkout.coincircuit.io";
+var DEFAULT_BASE_URL = "http://localhost:3002";
+var ALLOWED_BASE_URLS = [
+  "https://checkout.coincircuit.io",
+  "https://sandbox-checkout.coincircuit.io",
+  "http://localhost:3002"
+];
+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");
@@ -120,6 +134,13 @@ function injectStyles() {
       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;
@@ -157,14 +178,14 @@ function injectStyles() {
       display: flex;
       align-items: center;
       justify-content: center;
-      background: #fff;
+      z-index: 1;
       transition: opacity 0.2s;
     }
     #${OVERLAY_ID} .cc-spinner div {
       width: 36px;
       height: 36px;
-      border: 3px solid #e5e7eb;
-      border-top-color: #6366f1;
+      border: 3px solid rgba(255, 255, 255, 0.3);
+      border-top-color: #fff;
       border-radius: 50%;
       animation: cc-spin 0.8s linear infinite;
     }
@@ -197,7 +218,8 @@ function createOverlay(checkoutUrl, onCloseClick) {
   modal.className = "cc-modal";
   const spinner = document.createElement("div");
   spinner.className = "cc-spinner";
-  spinner.innerHTML = "<div></div>";
+  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");
@@ -209,8 +231,8 @@ function createOverlay(checkoutUrl, onCloseClick) {
   closeBtn.setAttribute("aria-label", "Close checkout");
   closeBtn.textContent = "\u2715";
   closeBtn.addEventListener("click", onCloseClick);
-  modal.appendChild(spinner);
   modal.appendChild(iframe);
+  overlay.appendChild(spinner);
   overlay.appendChild(modal);
   overlay.appendChild(closeBtn);
   return { overlay, iframe };
@@ -235,6 +257,10 @@ function hideSpinner(overlay) {
     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");
@@ -276,8 +302,9 @@ var CoinCircuitCheckout = class {
   overlay = null;
   removeMessageListener = null;
   loadTimeout = null;
+  openedAt = 0;
   constructor(config = {}) {
-    this.baseUrl = (config.baseUrl ?? DEFAULT_BASE_URL).replace(/\/+$/, "");
+    this.baseUrl = config.baseUrl ? validateBaseUrl(config.baseUrl) : DEFAULT_BASE_URL;
     this.origin = extractOrigin(this.baseUrl);
     this.publicKey = config.publicKey;
   }
@@ -292,6 +319,8 @@ var CoinCircuitCheckout = class {
     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,
@@ -310,11 +339,17 @@ var CoinCircuitCheckout = class {
     }, 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;
@@ -323,6 +358,7 @@ var CoinCircuitCheckout = class {
         options.onReady?.();
       },
       onPaymentComplete: (data) => {
+        console.log(`[CoinCircuit] coincircuit:payment_complete at ${Math.round(performance.now() - this.openedAt)}ms`);
         options.onPaymentComplete?.(data);
       },
       onPaymentFailed: (data) => {

package/dist/index.d.cts

@@ -24,6 +24,7 @@ declare class CoinCircuitCheckout {
     private overlay;
     private removeMessageListener;
     private loadTimeout;
+    private openedAt;
     constructor(config?: CheckoutConfig);
     /**
      * Opens the checkout modal overlay.
@@ -78,7 +79,7 @@ interface CheckoutEventHandlers {
  */
 declare function createMessageListener(allowedOrigin: string, handlers: CheckoutEventHandlers): () => void;
 
-declare const DEFAULT_BASE_URL = "https://checkout.coincircuit.io";
+declare const DEFAULT_BASE_URL = "http://localhost:3002";
 /**
  * Builds the checkout URL with embed flag.
  */

package/dist/index.d.ts

@@ -24,6 +24,7 @@ declare class CoinCircuitCheckout {
     private overlay;
     private removeMessageListener;
     private loadTimeout;
+    private openedAt;
     constructor(config?: CheckoutConfig);
     /**
      * Opens the checkout modal overlay.
@@ -78,7 +79,7 @@ interface CheckoutEventHandlers {
  */
 declare function createMessageListener(allowedOrigin: string, handlers: CheckoutEventHandlers): () => void;
 
-declare const DEFAULT_BASE_URL = "https://checkout.coincircuit.io";
+declare const DEFAULT_BASE_URL = "http://localhost:3002";
 /**
  * Builds the checkout URL with embed flag.
  */

package/dist/index.js

@@ -5,7 +5,7 @@ import {
   buildCheckoutUrl,
   createMessageListener,
   extractOrigin
-} from "./chunk-NLDQKWTU.js";
+} from "./chunk-IC5IZ3JH.js";
 export {
   CHECKOUT_MESSAGE_TYPES,
   CoinCircuitCheckout,

package/dist/react.cjs

@@ -70,7 +70,21 @@ function createMessageListener(allowedOrigin, handlers) {
 }
 
 // src/utils.ts
-var DEFAULT_BASE_URL = "https://checkout.coincircuit.io";
+var DEFAULT_BASE_URL = "http://localhost:3002";
+var ALLOWED_BASE_URLS = [
+  "https://checkout.coincircuit.io",
+  "https://sandbox-checkout.coincircuit.io",
+  "http://localhost:3002"
+];
+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");
@@ -116,6 +130,13 @@ function injectStyles() {
       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;
@@ -153,14 +174,14 @@ function injectStyles() {
       display: flex;
       align-items: center;
       justify-content: center;
-      background: #fff;
+      z-index: 1;
       transition: opacity 0.2s;
     }
     #${OVERLAY_ID} .cc-spinner div {
       width: 36px;
       height: 36px;
-      border: 3px solid #e5e7eb;
-      border-top-color: #6366f1;
+      border: 3px solid rgba(255, 255, 255, 0.3);
+      border-top-color: #fff;
       border-radius: 50%;
       animation: cc-spin 0.8s linear infinite;
     }
@@ -193,7 +214,8 @@ function createOverlay(checkoutUrl, onCloseClick) {
   modal.className = "cc-modal";
   const spinner = document.createElement("div");
   spinner.className = "cc-spinner";
-  spinner.innerHTML = "<div></div>";
+  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");
@@ -205,8 +227,8 @@ function createOverlay(checkoutUrl, onCloseClick) {
   closeBtn.setAttribute("aria-label", "Close checkout");
   closeBtn.textContent = "\u2715";
   closeBtn.addEventListener("click", onCloseClick);
-  modal.appendChild(spinner);
   modal.appendChild(iframe);
+  overlay.appendChild(spinner);
   overlay.appendChild(modal);
   overlay.appendChild(closeBtn);
   return { overlay, iframe };
@@ -231,6 +253,10 @@ function hideSpinner(overlay) {
     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");
@@ -272,8 +298,9 @@ var CoinCircuitCheckout = class {
   overlay = null;
   removeMessageListener = null;
   loadTimeout = null;
+  openedAt = 0;
   constructor(config = {}) {
-    this.baseUrl = (config.baseUrl ?? DEFAULT_BASE_URL).replace(/\/+$/, "");
+    this.baseUrl = config.baseUrl ? validateBaseUrl(config.baseUrl) : DEFAULT_BASE_URL;
     this.origin = extractOrigin(this.baseUrl);
     this.publicKey = config.publicKey;
   }
@@ -288,6 +315,8 @@ var CoinCircuitCheckout = class {
     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,
@@ -306,11 +335,17 @@ var CoinCircuitCheckout = class {
     }, 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;
@@ -319,6 +354,7 @@ var CoinCircuitCheckout = class {
         options.onReady?.();
       },
       onPaymentComplete: (data) => {
+        console.log(`[CoinCircuit] coincircuit:payment_complete at ${Math.round(performance.now() - this.openedAt)}ms`);
         options.onPaymentComplete?.(data);
       },
       onPaymentFailed: (data) => {

package/dist/react.js

@@ -1,6 +1,6 @@
 import {
   CoinCircuitCheckout
-} from "./chunk-NLDQKWTU.js";
+} from "./chunk-IC5IZ3JH.js";
 
 // src/react.ts
 import { useRef, useCallback, useEffect, createElement } from "react";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coincircuit/checkout",
-  "version": "0.2.1",
+  "version": "0.3.0",
   "description": "Embed CoinCircuit checkout in your site via iframe, with vanilla JS and React support",
   "type": "module",
   "main": "./dist/index.js",