@coincircuit/checkout 0.2.2 → 0.3.0

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

@@ -43,10 +43,11 @@ 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"
+  "https://sandbox-checkout.coincircuit.io",
+  "http://localhost:3002"
 ];
 function validateBaseUrl(url) {
   const normalized = url.replace(/\/+$/, "");
@@ -102,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;
@@ -139,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;
     }
@@ -179,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");
@@ -191,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 };
@@ -217,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");
@@ -258,6 +271,7 @@ var CoinCircuitCheckout = class {
   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);
@@ -274,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,
@@ -292,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;
@@ -305,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,10 +74,11 @@ 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"
+  "https://sandbox-checkout.coincircuit.io",
+  "http://localhost:3002"
 ];
 function validateBaseUrl(url) {
   const normalized = url.replace(/\/+$/, "");
@@ -133,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;
@@ -170,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;
     }
@@ -210,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");
@@ -222,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 };
@@ -248,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");
@@ -289,6 +302,7 @@ var CoinCircuitCheckout = class {
   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);
@@ -305,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,
@@ -323,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;
@@ -336,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-DG6Y255K.js";
+} from "./chunk-IC5IZ3JH.js";
 export {
   CHECKOUT_MESSAGE_TYPES,
   CoinCircuitCheckout,

package/dist/react.cjs

@@ -70,10 +70,11 @@ 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"
+  "https://sandbox-checkout.coincircuit.io",
+  "http://localhost:3002"
 ];
 function validateBaseUrl(url) {
   const normalized = url.replace(/\/+$/, "");
@@ -129,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;
@@ -166,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;
     }
@@ -206,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");
@@ -218,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 };
@@ -244,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");
@@ -285,6 +298,7 @@ var CoinCircuitCheckout = class {
   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);
@@ -301,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,
@@ -319,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;
@@ -332,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-DG6Y255K.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.2",
+  "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",