@coincircuit/checkout 0.2.0 → 0.2.2

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

@@ -44,6 +44,19 @@ function createMessageListener(allowedOrigin, handlers) {
 
 // src/utils.ts
 var DEFAULT_BASE_URL = "https://checkout.coincircuit.io";
+var ALLOWED_BASE_URLS = [
+  "https://checkout.coincircuit.io",
+  "https://sandbox-checkout.coincircuit.io"
+];
+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");
@@ -83,36 +96,36 @@ function injectStyles() {
     }
     #${OVERLAY_ID} .cc-modal {
       position: relative;
-      width: 100%;
-      max-width: 450px;
-      height: 90vh;
-      max-height: 700px;
+      width: min(600px, 96vw);
+      max-width: 600px;
+      height: min(88vh, 800px);
       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;
+      position: fixed;
+      top: 16px;
+      right: 16px;
+      z-index: 1000000;
+      width: 36px;
+      height: 36px;
       border: none;
       border-radius: 50%;
-      background: rgba(0, 0, 0, 0.5);
+      background: rgba(255, 255, 255, 0.15);
+      backdrop-filter: blur(8px);
       color: #fff;
-      font-size: 18px;
+      font-size: 20px;
       line-height: 1;
       cursor: pointer;
       display: flex;
       align-items: center;
       justify-content: center;
-      transition: background 0.15s;
+      transition: background 0.15s, transform 0.15s;
     }
     #${OVERLAY_ID} .cc-close:hover {
-      background: rgba(0, 0, 0, 0.7);
+      background: rgba(255, 255, 255, 0.25);
+      transform: scale(1.1);
     }
     #${OVERLAY_ID} iframe {
       width: 100%;
@@ -138,11 +151,11 @@ function injectStyles() {
       animation: cc-spin 0.8s linear infinite;
     }
     @keyframes cc-spin { to { transform: rotate(360deg); } }
-    @media (max-width: 480px) {
+    @media (max-width: 720px) {
       #${OVERLAY_ID} .cc-modal {
+        width: 100%;
         max-width: 100%;
-        height: 100vh;
-        max-height: 100vh;
+        height: 100dvh;
         border-radius: 0;
       }
     }
@@ -173,9 +186,15 @@ function createOverlay(checkoutUrl, onCloseClick) {
   iframe.setAttribute("referrerpolicy", "strict-origin-when-cross-origin");
   iframe.setAttribute("title", "CoinCircuit Checkout");
   iframe.setAttribute("allow", "payment");
+  const closeBtn = document.createElement("button");
+  closeBtn.className = "cc-close";
+  closeBtn.setAttribute("aria-label", "Close checkout");
+  closeBtn.textContent = "\u2715";
+  closeBtn.addEventListener("click", onCloseClick);
   modal.appendChild(spinner);
   modal.appendChild(iframe);
   overlay.appendChild(modal);
+  overlay.appendChild(closeBtn);
   return { overlay, iframe };
 }
 function showOverlay(overlay) {
@@ -240,7 +259,7 @@ var CoinCircuitCheckout = class {
   removeMessageListener = null;
   loadTimeout = null;
   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;
   }
@@ -267,7 +286,7 @@ var CoinCircuitCheckout = class {
     this.overlay = overlay;
     this.loadTimeout = setTimeout(() => {
       showErrorToast(
-        "Checkout failed to load. The checkout service may be unavailable or blocked by security policy."
+        "Checkout failed to load."
       );
       this.close();
     }, 15e3);

package/dist/index.cjs

@@ -75,6 +75,19 @@ function createMessageListener(allowedOrigin, handlers) {
 
 // src/utils.ts
 var DEFAULT_BASE_URL = "https://checkout.coincircuit.io";
+var ALLOWED_BASE_URLS = [
+  "https://checkout.coincircuit.io",
+  "https://sandbox-checkout.coincircuit.io"
+];
+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");
@@ -114,36 +127,36 @@ function injectStyles() {
     }
     #${OVERLAY_ID} .cc-modal {
       position: relative;
-      width: 100%;
-      max-width: 450px;
-      height: 90vh;
-      max-height: 700px;
+      width: min(600px, 96vw);
+      max-width: 600px;
+      height: min(88vh, 800px);
       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;
+      position: fixed;
+      top: 16px;
+      right: 16px;
+      z-index: 1000000;
+      width: 36px;
+      height: 36px;
       border: none;
       border-radius: 50%;
-      background: rgba(0, 0, 0, 0.5);
+      background: rgba(255, 255, 255, 0.15);
+      backdrop-filter: blur(8px);
       color: #fff;
-      font-size: 18px;
+      font-size: 20px;
       line-height: 1;
       cursor: pointer;
       display: flex;
       align-items: center;
       justify-content: center;
-      transition: background 0.15s;
+      transition: background 0.15s, transform 0.15s;
     }
     #${OVERLAY_ID} .cc-close:hover {
-      background: rgba(0, 0, 0, 0.7);
+      background: rgba(255, 255, 255, 0.25);
+      transform: scale(1.1);
     }
     #${OVERLAY_ID} iframe {
       width: 100%;
@@ -169,11 +182,11 @@ function injectStyles() {
       animation: cc-spin 0.8s linear infinite;
     }
     @keyframes cc-spin { to { transform: rotate(360deg); } }
-    @media (max-width: 480px) {
+    @media (max-width: 720px) {
       #${OVERLAY_ID} .cc-modal {
+        width: 100%;
         max-width: 100%;
-        height: 100vh;
-        max-height: 100vh;
+        height: 100dvh;
         border-radius: 0;
       }
     }
@@ -204,9 +217,15 @@ function createOverlay(checkoutUrl, onCloseClick) {
   iframe.setAttribute("referrerpolicy", "strict-origin-when-cross-origin");
   iframe.setAttribute("title", "CoinCircuit Checkout");
   iframe.setAttribute("allow", "payment");
+  const closeBtn = document.createElement("button");
+  closeBtn.className = "cc-close";
+  closeBtn.setAttribute("aria-label", "Close checkout");
+  closeBtn.textContent = "\u2715";
+  closeBtn.addEventListener("click", onCloseClick);
   modal.appendChild(spinner);
   modal.appendChild(iframe);
   overlay.appendChild(modal);
+  overlay.appendChild(closeBtn);
   return { overlay, iframe };
 }
 function showOverlay(overlay) {
@@ -271,7 +290,7 @@ var CoinCircuitCheckout = class {
   removeMessageListener = null;
   loadTimeout = null;
   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;
   }
@@ -298,7 +317,7 @@ var CoinCircuitCheckout = class {
     this.overlay = overlay;
     this.loadTimeout = setTimeout(() => {
       showErrorToast(
-        "Checkout failed to load. The checkout service may be unavailable or blocked by security policy."
+        "Checkout failed to load."
       );
       this.close();
     }, 15e3);

package/dist/index.js

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

package/dist/react.cjs

@@ -71,6 +71,19 @@ function createMessageListener(allowedOrigin, handlers) {
 
 // src/utils.ts
 var DEFAULT_BASE_URL = "https://checkout.coincircuit.io";
+var ALLOWED_BASE_URLS = [
+  "https://checkout.coincircuit.io",
+  "https://sandbox-checkout.coincircuit.io"
+];
+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");
@@ -110,36 +123,36 @@ function injectStyles() {
     }
     #${OVERLAY_ID} .cc-modal {
       position: relative;
-      width: 100%;
-      max-width: 450px;
-      height: 90vh;
-      max-height: 700px;
+      width: min(600px, 96vw);
+      max-width: 600px;
+      height: min(88vh, 800px);
       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;
+      position: fixed;
+      top: 16px;
+      right: 16px;
+      z-index: 1000000;
+      width: 36px;
+      height: 36px;
       border: none;
       border-radius: 50%;
-      background: rgba(0, 0, 0, 0.5);
+      background: rgba(255, 255, 255, 0.15);
+      backdrop-filter: blur(8px);
       color: #fff;
-      font-size: 18px;
+      font-size: 20px;
       line-height: 1;
       cursor: pointer;
       display: flex;
       align-items: center;
       justify-content: center;
-      transition: background 0.15s;
+      transition: background 0.15s, transform 0.15s;
     }
     #${OVERLAY_ID} .cc-close:hover {
-      background: rgba(0, 0, 0, 0.7);
+      background: rgba(255, 255, 255, 0.25);
+      transform: scale(1.1);
     }
     #${OVERLAY_ID} iframe {
       width: 100%;
@@ -165,11 +178,11 @@ function injectStyles() {
       animation: cc-spin 0.8s linear infinite;
     }
     @keyframes cc-spin { to { transform: rotate(360deg); } }
-    @media (max-width: 480px) {
+    @media (max-width: 720px) {
       #${OVERLAY_ID} .cc-modal {
+        width: 100%;
         max-width: 100%;
-        height: 100vh;
-        max-height: 100vh;
+        height: 100dvh;
         border-radius: 0;
       }
     }
@@ -200,9 +213,15 @@ function createOverlay(checkoutUrl, onCloseClick) {
   iframe.setAttribute("referrerpolicy", "strict-origin-when-cross-origin");
   iframe.setAttribute("title", "CoinCircuit Checkout");
   iframe.setAttribute("allow", "payment");
+  const closeBtn = document.createElement("button");
+  closeBtn.className = "cc-close";
+  closeBtn.setAttribute("aria-label", "Close checkout");
+  closeBtn.textContent = "\u2715";
+  closeBtn.addEventListener("click", onCloseClick);
   modal.appendChild(spinner);
   modal.appendChild(iframe);
   overlay.appendChild(modal);
+  overlay.appendChild(closeBtn);
   return { overlay, iframe };
 }
 function showOverlay(overlay) {
@@ -267,7 +286,7 @@ var CoinCircuitCheckout = class {
   removeMessageListener = null;
   loadTimeout = null;
   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;
   }
@@ -294,7 +313,7 @@ var CoinCircuitCheckout = class {
     this.overlay = overlay;
     this.loadTimeout = setTimeout(() => {
       showErrorToast(
-        "Checkout failed to load. The checkout service may be unavailable or blocked by security policy."
+        "Checkout failed to load."
       );
       this.close();
     }, 15e3);

package/dist/react.js

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

package/package.json

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