@shoppexio/storefront 1.0.63 → 1.0.65

package/dist/index.d.cts

@@ -1549,19 +1549,13 @@ interface CheckoutChallengeCallbacks {
     onSuccess(token: string): void;
     onExpired?(): void;
     onUnavailable?(): void;
+    /** Fired when the widget switches between the invisible run and an interactive challenge. */
+    onVisibilityChange?(visible: boolean): void;
 }
 interface CheckoutChallengeFrame {
     element: HTMLIFrameElement;
     dispose(): void;
 }
-/**
- * Mount the Shoppex-hosted Turnstile broker requested by a checkout refusal.
- *
- * The challenge always executes on the configured hosted-checkout origin, so
- * this works on arbitrary custom storefront domains without adding each one
- * to Cloudflare's widget hostname allowlist. Retry `checkout()` or
- * `buildCheckoutUrl()` with the token delivered to `onSuccess`.
- */
 declare function mountCheckoutChallenge(container: HTMLElement, challenge: ApiChallenge, callbacks: CheckoutChallengeCallbacks): CheckoutChallengeFrame;
 
 interface SearchOptions {

package/dist/index.d.ts

@@ -1549,19 +1549,13 @@ interface CheckoutChallengeCallbacks {
     onSuccess(token: string): void;
     onExpired?(): void;
     onUnavailable?(): void;
+    /** Fired when the widget switches between the invisible run and an interactive challenge. */
+    onVisibilityChange?(visible: boolean): void;
 }
 interface CheckoutChallengeFrame {
     element: HTMLIFrameElement;
     dispose(): void;
 }
-/**
- * Mount the Shoppex-hosted Turnstile broker requested by a checkout refusal.
- *
- * The challenge always executes on the configured hosted-checkout origin, so
- * this works on arbitrary custom storefront domains without adding each one
- * to Cloudflare's widget hostname allowlist. Retry `checkout()` or
- * `buildCheckoutUrl()` with the token delivered to `onSuccess`.
- */
 declare function mountCheckoutChallenge(container: HTMLElement, challenge: ApiChallenge, callbacks: CheckoutChallengeCallbacks): CheckoutChallengeFrame;
 
 interface SearchOptions {

package/dist/index.js

@@ -4539,6 +4539,152 @@ async function quoteCart(coupon, currency) {
   return response;
 }
 
+// ../sdk/src/modules/checkout-challenge.ts
+var TURNSTILE_FRAME_MESSAGE_SOURCE = "shoppex-turnstile";
+var TURNSTILE_FRAME_MESSAGE_VERSION = 1;
+var TURNSTILE_FRAME_READY_TIMEOUT_MS = 1e4;
+function readFrameMessage(value, nonce) {
+  if (!value || typeof value !== "object" || Array.isArray(value)) return null;
+  const record2 = value;
+  if (record2.source !== TURNSTILE_FRAME_MESSAGE_SOURCE || record2.version !== TURNSTILE_FRAME_MESSAGE_VERSION || record2.nonce !== nonce || !["ready", "visible", "hidden", "success", "expired", "timeout", "error"].includes(String(record2.type))) return null;
+  if (record2.type === "success" && (typeof record2.token !== "string" || !record2.token.trim())) {
+    return null;
+  }
+  return {
+    type: record2.type,
+    ...typeof record2.token === "string" ? { token: record2.token.trim() } : {}
+  };
+}
+var AUTO_CHALLENGE_INVISIBLE_TIMEOUT_MS = 3e4;
+async function resolveCheckoutChallengeProof(challenge) {
+  if (typeof document === "undefined" || challenge.provider !== "turnstile" || !challenge.siteKey.trim()) {
+    return null;
+  }
+  const host = document.createElement("div");
+  host.setAttribute("data-shoppex-checkout-challenge", "");
+  host.style.position = "fixed";
+  host.style.inset = "0";
+  host.style.display = "none";
+  host.style.alignItems = "center";
+  host.style.justifyContent = "center";
+  host.style.background = "rgba(0, 0, 0, 0.55)";
+  host.style.zIndex = "2147483646";
+  const card = document.createElement("div");
+  card.style.width = "min(340px, 90vw)";
+  card.style.background = "#ffffff";
+  card.style.borderRadius = "12px";
+  card.style.padding = "16px";
+  card.style.boxShadow = "0 12px 40px rgba(0, 0, 0, 0.35)";
+  host.appendChild(card);
+  document.body.appendChild(host);
+  return new Promise((resolve) => {
+    let settled = false;
+    let timeoutId = null;
+    let frame = null;
+    const finish = (token) => {
+      if (settled) return;
+      settled = true;
+      if (timeoutId !== null) window.clearTimeout(timeoutId);
+      frame?.dispose();
+      host.remove();
+      resolve(token);
+    };
+    const armTimeout = () => {
+      timeoutId = window.setTimeout(() => finish(null), AUTO_CHALLENGE_INVISIBLE_TIMEOUT_MS);
+    };
+    try {
+      frame = mountCheckoutChallenge(card, challenge, {
+        onSuccess: (token) => finish(token),
+        // `refresh-expired: auto` renews expired runs on its own; the
+        // invisible-run timeout stays the bound.
+        onExpired: () => {
+        },
+        onUnavailable: () => finish(null),
+        onVisibilityChange: (visible) => {
+          host.style.display = visible ? "flex" : "none";
+          if (visible) {
+            if (timeoutId !== null) {
+              window.clearTimeout(timeoutId);
+              timeoutId = null;
+            }
+          } else if (timeoutId === null && !settled) {
+            armTimeout();
+          }
+        }
+      });
+    } catch {
+      host.remove();
+      resolve(null);
+      return;
+    }
+    armTimeout();
+  });
+}
+function mountCheckoutChallenge(container, challenge, callbacks) {
+  if (challenge.provider !== "turnstile" || !challenge.siteKey.trim()) {
+    throw new Error("Checkout challenge is invalid.");
+  }
+  const win = container.ownerDocument.defaultView;
+  if (!win) throw new Error("Checkout challenge requires a browser document.");
+  const checkoutBaseUrl = getConfig().checkoutBaseUrl;
+  const frameUrl = new URL("/turnstile", checkoutBaseUrl);
+  if (frameUrl.protocol !== "https:" && frameUrl.protocol !== "http:") {
+    throw new Error("Checkout base URL must use http or https.");
+  }
+  const nonce = win.crypto.randomUUID();
+  frameUrl.searchParams.set("site_key", challenge.siteKey.trim());
+  frameUrl.searchParams.set("nonce", nonce);
+  const frame = container.ownerDocument.createElement("iframe");
+  frame.src = frameUrl.toString();
+  frame.title = "Checkout verification";
+  frame.referrerPolicy = "no-referrer";
+  frame.style.border = "0";
+  frame.style.width = "100%";
+  frame.style.height = "0";
+  let disposed = false;
+  let ready = false;
+  const readyTimeout = win.setTimeout(() => {
+    if (!disposed && !ready) callbacks.onUnavailable?.();
+  }, TURNSTILE_FRAME_READY_TIMEOUT_MS);
+  const onMessage = (event) => {
+    if (disposed || event.origin !== frameUrl.origin || event.source !== frame.contentWindow) return;
+    const message = readFrameMessage(event.data, nonce);
+    if (!message) return;
+    ready = true;
+    win.clearTimeout(readyTimeout);
+    if (message.type === "visible") {
+      frame.style.height = "72px";
+      callbacks.onVisibilityChange?.(true);
+    }
+    if (message.type === "hidden") {
+      frame.style.height = "0";
+      callbacks.onVisibilityChange?.(false);
+    }
+    if (message.type === "success") {
+      frame.style.height = "0";
+      callbacks.onVisibilityChange?.(false);
+      callbacks.onSuccess(message.token);
+    }
+    if (message.type === "expired" || message.type === "timeout") callbacks.onExpired?.();
+    if (message.type === "error") callbacks.onUnavailable?.();
+  };
+  const onFrameError = () => callbacks.onUnavailable?.();
+  win.addEventListener("message", onMessage);
+  frame.addEventListener("error", onFrameError, { once: true });
+  container.appendChild(frame);
+  return {
+    element: frame,
+    dispose() {
+      if (disposed) return;
+      disposed = true;
+      win.clearTimeout(readyTimeout);
+      win.removeEventListener("message", onMessage);
+      frame.removeEventListener("error", onFrameError);
+      frame.remove();
+    }
+  };
+}
+
 // ../sdk/src/modules/checkout.ts
 var CheckoutCreateError = class _CheckoutCreateError extends Error {
   constructor(message, options = {}) {
@@ -4781,6 +4927,16 @@ function mapCartItemsForApi(items) {
 }
 async function checkout(couponOrOptions, options) {
   const resolvedOptions = resolveCheckoutOptions(couponOrOptions, options);
+  const firstAttempt = await performCheckout(resolvedOptions);
+  if (!firstAttempt.success && firstAttempt.challenge?.provider === "turnstile" && !resolvedOptions.turnstileToken && typeof document !== "undefined") {
+    const proof = await resolveCheckoutChallengeProof(firstAttempt.challenge);
+    if (proof) {
+      return performCheckout({ ...resolvedOptions, turnstileToken: proof });
+    }
+  }
+  return firstAttempt;
+}
+async function performCheckout(resolvedOptions) {
   const { autoRedirect = true, email: email2 } = resolvedOptions;
   const checkoutCodes = resolveCheckoutCodes(resolvedOptions);
   const normalizedCoupon = checkoutCodes.coupon;
@@ -4898,6 +5054,19 @@ async function checkout(couponOrOptions, options) {
 }
 async function buildCheckoutUrl(couponOrOptions, options) {
   const resolvedOptions = resolveCheckoutOptions(couponOrOptions, options);
+  try {
+    return await performBuildCheckoutUrl(resolvedOptions);
+  } catch (error) {
+    if (error instanceof CheckoutCreateError && error.challenge?.provider === "turnstile" && !resolvedOptions.turnstileToken && typeof document !== "undefined") {
+      const proof = await resolveCheckoutChallengeProof(error.challenge);
+      if (proof) {
+        return performBuildCheckoutUrl({ ...resolvedOptions, turnstileToken: proof });
+      }
+    }
+    throw error;
+  }
+}
+async function performBuildCheckoutUrl(resolvedOptions) {
   const { email: email2 } = resolvedOptions;
   const checkoutCodes = resolveCheckoutCodes(resolvedOptions);
   const normalizedCoupon = checkoutCodes.coupon;
@@ -4986,80 +5155,6 @@ function buildCheckoutUrlSync() {
   throw new Error("buildCheckoutUrlSync is deprecated. Use buildCheckoutUrl (async) instead.");
 }
 
-// ../sdk/src/modules/checkout-challenge.ts
-var TURNSTILE_FRAME_MESSAGE_SOURCE = "shoppex-turnstile";
-var TURNSTILE_FRAME_MESSAGE_VERSION = 1;
-var TURNSTILE_FRAME_READY_TIMEOUT_MS = 1e4;
-function readFrameMessage(value, nonce) {
-  if (!value || typeof value !== "object" || Array.isArray(value)) return null;
-  const record2 = value;
-  if (record2.source !== TURNSTILE_FRAME_MESSAGE_SOURCE || record2.version !== TURNSTILE_FRAME_MESSAGE_VERSION || record2.nonce !== nonce || !["ready", "visible", "hidden", "success", "expired", "timeout", "error"].includes(String(record2.type))) return null;
-  if (record2.type === "success" && (typeof record2.token !== "string" || !record2.token.trim())) {
-    return null;
-  }
-  return {
-    type: record2.type,
-    ...typeof record2.token === "string" ? { token: record2.token.trim() } : {}
-  };
-}
-function mountCheckoutChallenge(container, challenge, callbacks) {
-  if (challenge.provider !== "turnstile" || !challenge.siteKey.trim()) {
-    throw new Error("Checkout challenge is invalid.");
-  }
-  const win = container.ownerDocument.defaultView;
-  if (!win) throw new Error("Checkout challenge requires a browser document.");
-  const checkoutBaseUrl = getConfig().checkoutBaseUrl;
-  const frameUrl = new URL("/turnstile", checkoutBaseUrl);
-  if (frameUrl.protocol !== "https:" && frameUrl.protocol !== "http:") {
-    throw new Error("Checkout base URL must use http or https.");
-  }
-  const nonce = win.crypto.randomUUID();
-  frameUrl.searchParams.set("site_key", challenge.siteKey.trim());
-  frameUrl.searchParams.set("nonce", nonce);
-  const frame = container.ownerDocument.createElement("iframe");
-  frame.src = frameUrl.toString();
-  frame.title = "Checkout verification";
-  frame.referrerPolicy = "no-referrer";
-  frame.style.border = "0";
-  frame.style.width = "100%";
-  frame.style.height = "0";
-  let disposed = false;
-  let ready = false;
-  const readyTimeout = win.setTimeout(() => {
-    if (!disposed && !ready) callbacks.onUnavailable?.();
-  }, TURNSTILE_FRAME_READY_TIMEOUT_MS);
-  const onMessage = (event) => {
-    if (disposed || event.origin !== frameUrl.origin || event.source !== frame.contentWindow) return;
-    const message = readFrameMessage(event.data, nonce);
-    if (!message) return;
-    ready = true;
-    win.clearTimeout(readyTimeout);
-    if (message.type === "visible") frame.style.height = "72px";
-    if (message.type === "hidden") frame.style.height = "0";
-    if (message.type === "success") {
-      frame.style.height = "0";
-      callbacks.onSuccess(message.token);
-    }
-    if (message.type === "expired" || message.type === "timeout") callbacks.onExpired?.();
-    if (message.type === "error") callbacks.onUnavailable?.();
-  };
-  const onFrameError = () => callbacks.onUnavailable?.();
-  win.addEventListener("message", onMessage);
-  frame.addEventListener("error", onFrameError, { once: true });
-  container.appendChild(frame);
-  return {
-    element: frame,
-    dispose() {
-      if (disposed) return;
-      disposed = true;
-      win.clearTimeout(readyTimeout);
-      win.removeEventListener("message", onMessage);
-      frame.removeEventListener("error", onFrameError);
-      frame.remove();
-    }
-  };
-}
-
 // ../sdk/src/modules/coupons.ts
 async function resolveShopId() {
   const cachedShopId2 = getShopId();