@coincircuit/checkout 0.2.2 → 0.4.0

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

@@ -102,6 +102,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 +146,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 +186,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 +199,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 +225,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 +270,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 +287,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 +307,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 +326,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

@@ -133,6 +133,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 +177,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 +217,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 +230,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 +256,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 +301,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 +318,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 +338,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 +357,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.

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.

package/dist/index.js

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

package/dist/react.cjs

@@ -129,6 +129,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 +173,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 +213,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 +226,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 +252,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 +297,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 +314,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 +334,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 +353,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-RJ3FMO5K.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.4.0",
   "description": "Embed CoinCircuit checkout in your site via iframe, with vanilla JS and React support",
   "type": "module",
   "main": "./dist/index.js",