@shoppexio/storefront 1.0.60 → 1.0.61

package/CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## 1.0.61
+
+- Add `mountCheckoutChallenge()` so custom storefront domains can complete the hosted checkout verification broker and retry invoice creation.
+
 ## 1.0.60
 
 - Reject post-purchase `redirectUrl` values that still contain unresolved template placeholders.

package/dist/index.cjs

@@ -71,6 +71,7 @@ __export(src_exports, {
   loyalty: () => loyalty,
   me: () => me,
   mergeSettings: () => mergeSettings,
+  mountCheckoutChallenge: () => mountCheckoutChallenge,
   normalizeSearchQuery: () => normalizeSearchQuery,
   normalizeStorefrontCustomFields: () => normalizeStorefrontCustomFields,
   order: () => order,
@@ -15638,7 +15639,7 @@ var PaymentGatewayStateSchema = object({
 });
 
 // ../contracts/src/style-center.ts
-var CHECKOUT_PLATFORM_BRAND_COLOR = "#2563eb";
+var CHECKOUT_PLATFORM_BRAND_COLOR = "#7c3aed";
 var CHECKOUT_PLATFORM_FONT_FAMILY = "Geist";
 var checkoutStyleSurfaceValues = ["checkout", "payment_link", "embed"];
 var checkoutStyleDensityValues = ["comfortable", "compact"];
@@ -15665,17 +15666,28 @@ var checkoutStyleTokenDefinitions = [
   // background. Setting an explicit hex would clobber the ambient gradient and
   // the right-panel `--surface-2` accent for every default-theme checkout.
   { key: "color.background", cssVar: "--spx-checkout-bg", group: "color", type: "color", default: "" },
-  { key: "color.surface", cssVar: "--spx-checkout-surface", group: "color", type: "color", default: "#18181b" },
-  { key: "color.surfaceRaised", cssVar: "--spx-checkout-surface-raised", group: "color", type: "color", default: "#27272a" },
-  { key: "color.text", cssVar: "--spx-checkout-text", group: "color", type: "color", default: "#fafafa", protected: true },
-  { key: "color.textMuted", cssVar: "--spx-checkout-text-muted", group: "color", type: "color", default: "#a1a1aa" },
-  // Default '#3f3f46' (zinc-700) feeds many runtime-style fallbacks for
-  // payment-method cards, product cards, pills, and inputs. Setting it to ''
-  // would turn those slots' `var(--spx-checkout-border, currentColor)` into
-  // bright text-color borders. The grey-divider regression on the aside is
-  // fixed in the layout file by using the Tailwind `border-border` class
-  // instead of binding to this token, which keeps both concerns separated.
-  { key: "color.border", cssVar: "--spx-checkout-border", group: "color", type: "color", default: "#222222" },
+  // The four neutrals below are the DARK appearance of the hosted checkout's
+  // tonal ladder (`apps/checkout/app/globals.css`); the light values sit in
+  // CHECKOUT_PLATFORM_BASELINE_LIGHT_DEFAULTS. They are materialised into the
+  // live checkout root, so they are what a shop with no Style Center theme
+  // actually renders — which is why each one has to name the SAME rung the
+  // component paints, not a palette of its own.
+  //   surface       → `--surface-0`, the working panel the buyer pays in
+  //   surfaceRaised → `--card`, a panel raised above that panel
+  //                   (the provider widget frame and its loading skeleton)
+  //   text          → `--foreground`
+  //   textMuted     → `--muted-foreground`
+  //   border        → `--border`
+  { key: "color.surface", cssVar: "--spx-checkout-surface", group: "color", type: "color", default: "#1b1b1b" },
+  { key: "color.surfaceRaised", cssVar: "--spx-checkout-surface-raised", group: "color", type: "color", default: "#222222" },
+  { key: "color.text", cssVar: "--spx-checkout-text", group: "color", type: "color", default: "#f5f5f5", protected: true },
+  { key: "color.textMuted", cssVar: "--spx-checkout-text-muted", group: "color", type: "color", default: "#a1a1a1" },
+  // Never '': the border token feeds runtime-style fallbacks for inputs,
+  // provider widgets and buttons, and an unset value turns those slots'
+  // `var(--spx-checkout-border, …)` chains loose. The hosted checkout draws
+  // almost no hairlines any more — the slots that still do read this, the rest
+  // resolve their border to `transparent` in the system CSS.
+  { key: "color.border", cssVar: "--spx-checkout-border", group: "color", type: "color", default: "#2c2c2c" },
   { key: "color.focus", cssVar: "--spx-checkout-focus", group: "color", type: "color", default: CHECKOUT_PLATFORM_BRAND_COLOR, protected: true },
   { key: "color.success", cssVar: "--spx-checkout-success", group: "color", type: "color", default: "#22c55e", protected: true },
   { key: "color.warning", cssVar: "--spx-checkout-warning", group: "color", type: "color", default: "#f59e0b", protected: true },
@@ -15687,9 +15699,16 @@ var checkoutStyleTokenDefinitions = [
   // actually loaded.
   { key: "typography.googleFontFamily", cssVar: "--spx-checkout-google-font", group: "typography", type: "font", default: "" },
   { key: "typography.baseSize", cssVar: "--spx-checkout-font-size", group: "typography", type: "number", default: 14, min: 12, max: 18, step: 1, unit: "px" },
-  { key: "shape.buttonRadius", cssVar: "--spx-checkout-button-radius", group: "shape", type: "number", default: 8, min: 0, max: 24, step: 1, unit: "px" },
-  { key: "shape.inputRadius", cssVar: "--spx-checkout-input-radius", group: "shape", type: "number", default: 8, min: 0, max: 24, step: 1, unit: "px" },
-  { key: "shape.cardRadius", cssVar: "--spx-checkout-card-radius", group: "shape", type: "number", default: 12, min: 0, max: 28, step: 1, unit: "px" },
+  // 12px, not 8, for the same reason as the input below: the hosted pay CTA is
+  // `rounded-xl` and this token is materialised over every slotted button. At 8
+  // the store-credit and manual actions rendered one step tighter than the
+  // field directly above them and than the CTA they stand in for.
+  { key: "shape.buttonRadius", cssVar: "--spx-checkout-button-radius", group: "shape", type: "number", default: 10, min: 0, max: 24, step: 1, unit: "px" },
+  // 12px, not 8: the hosted `Input` primitive is `rounded-lg`, and this token is
+  // materialised over it. At 8 the system CSS rounded every field one step
+  // tighter than the component that drew it.
+  { key: "shape.inputRadius", cssVar: "--spx-checkout-input-radius", group: "shape", type: "number", default: 10, min: 0, max: 24, step: 1, unit: "px" },
+  { key: "shape.cardRadius", cssVar: "--spx-checkout-card-radius", group: "shape", type: "number", default: 10, min: 0, max: 28, step: 1, unit: "px" },
   {
     key: "spacing.density",
     cssVar: "--spx-checkout-density",
@@ -15701,8 +15720,8 @@ var checkoutStyleTokenDefinitions = [
   { key: "spacing.controlHeight", cssVar: "--spx-checkout-control-height", group: "spacing", type: "number", default: 48, min: 36, max: 56, step: 2, unit: "px" },
   { key: "component.primaryButton.background", cssVar: "--spx-checkout-button-bg", group: "component", type: "color", default: "", protected: true },
   { key: "component.primaryButton.text", cssVar: "--spx-checkout-button-text", group: "component", type: "color", default: "#ffffff", protected: true },
-  { key: "component.input.background", cssVar: "--spx-checkout-input-bg", group: "component", type: "color", default: "#111111" },
-  { key: "component.input.border", cssVar: "--spx-checkout-input-border", group: "component", type: "color", default: "#222222" },
+  { key: "component.input.background", cssVar: "--spx-checkout-input-bg", group: "component", type: "color", default: "#292929" },
+  { key: "component.input.border", cssVar: "--spx-checkout-input-border", group: "component", type: "color", default: "#2c2c2c" },
   { key: "component.input.focusRing", cssVar: "--spx-checkout-input-focus-ring", group: "component", type: "color", default: "" },
   // Default '' is filtered out by the preview-iframe normaliser, so the
   // CSS fallback chain on [data-spx-slot="summary.panel"] resolves to
@@ -15727,14 +15746,14 @@ var checkoutStyleTokenDefinitions = [
   { key: "component.brandAvatar.border", cssVar: "--spx-checkout-brand-avatar-border", group: "component", type: "color", default: "rgba(255,255,255,0.1)" },
   { key: "component.pill.background", cssVar: "--spx-checkout-pill-bg", group: "component", type: "color", default: "rgba(255,255,255,0.04)" },
   { key: "component.pill.border", cssVar: "--spx-checkout-pill-border", group: "component", type: "color", default: "rgba(255,255,255,0.08)" },
-  { key: "component.pill.text", cssVar: "--spx-checkout-pill-text", group: "component", type: "color", default: "#a1a1aa" },
+  { key: "component.pill.text", cssVar: "--spx-checkout-pill-text", group: "component", type: "color", default: "#a1a1a1" },
   { key: "component.errorBanner.background", cssVar: "--spx-checkout-error-bg", group: "component", type: "color", default: "rgba(239,68,68,0.1)" },
   { key: "component.errorBanner.border", cssVar: "--spx-checkout-error-border", group: "component", type: "color", default: "rgba(239,68,68,0.2)" },
   { key: "component.errorBanner.text", cssVar: "--spx-checkout-error-text", group: "component", type: "color", default: "#ef4444" },
   { key: "component.warningBanner.background", cssVar: "--spx-checkout-warning-bg", group: "component", type: "color", default: "" },
   { key: "component.warningBanner.border", cssVar: "--spx-checkout-warning-border", group: "component", type: "color", default: "" },
   { key: "component.warningBanner.text", cssVar: "--spx-checkout-warning-text", group: "component", type: "color", default: "" },
-  { key: "component.radio.idleRing", cssVar: "--spx-checkout-radio-idle-ring", group: "component", type: "color", default: "rgba(161,161,170,0.5)" },
+  { key: "component.radio.idleRing", cssVar: "--spx-checkout-radio-idle-ring", group: "component", type: "color", default: "rgba(161,161,161,0.5)" },
   { key: "component.radio.checkedFill", cssVar: "--spx-checkout-radio-checked-fill", group: "component", type: "color", default: "" },
   { key: "component.radio.checkedIcon", cssVar: "--spx-checkout-radio-checked-icon", group: "component", type: "color", default: "#ffffff" },
   { key: "component.divider.color", cssVar: "--spx-checkout-divider", group: "component", type: "color", default: "rgba(255,255,255,0.06)" }
@@ -16536,6 +16555,32 @@ var externalPaymentAdapterConformanceResponseSchema = externalPaymentAdapterBase
 });
 
 // ../contracts/src/redirect-link-template.ts
+var REMAINING_PLACEHOLDER_PATTERNS = [
+  /\{\{[\s\S]*?\}\}/g,
+  /(?<!\{)\{[^{}]+\}(?!\})/g
+];
+function findDanglingBraceFragments(template) {
+  let stripped = template;
+  for (const pattern of REMAINING_PLACEHOLDER_PATTERNS) {
+    stripped = stripped.replace(pattern, "");
+  }
+  return /[{}]/.test(stripped) ? [...new Set(stripped.match(/[{}]+/g) ?? [])] : [];
+}
+function findRemainingProductRedirectPlaceholders(template) {
+  if (!template.trim()) {
+    return [];
+  }
+  const remaining = /* @__PURE__ */ new Set();
+  for (const pattern of REMAINING_PLACEHOLDER_PATTERNS) {
+    for (const match of template.matchAll(pattern)) {
+      remaining.add(match[0]);
+    }
+  }
+  for (const fragment of findDanglingBraceFragments(template)) {
+    remaining.add(fragment);
+  }
+  return [...remaining];
+}
 function isSafeHttpsRedirectTemplateUrl(url2) {
   const trimmed = url2.trim();
   if (!trimmed) {
@@ -16597,6 +16642,11 @@ function requirePriceDisplayUnlessPayWhatYouWant(product, ctx) {
 }
 var publicInvoiceWireProductSchema = external_exports.object({
   addons: external_exports.array(publicInvoiceWireProductAddonSchema).optional(),
+  /** Per-line cart-edit capability from the enricher; the checkout renders no
+   *  control without an explicit true. */
+  quantity_editable: external_exports.boolean().optional(),
+  addons_editable: external_exports.boolean().optional(),
+  removable: external_exports.boolean().optional(),
   available_addons: external_exports.array(external_exports.unknown()).optional(),
   cloudflare_image_id: external_exports.string().nullable(),
   created_at: external_exports.string().optional(),
@@ -19916,6 +19966,9 @@ function resolvePostPurchaseRedirectUrl(redirectUrl) {
   if (!isSafeHttpsRedirectTemplateUrl(normalized)) {
     return { value: null, error: "redirectUrl must be an absolute HTTPS URL." };
   }
+  if (findRemainingProductRedirectPlaceholders(normalized).length > 0) {
+    return { value: null, error: "redirectUrl must not contain template placeholders." };
+  }
   return { value: normalized, error: null };
 }
 var pendingCheckoutCreates = /* @__PURE__ */ new Map();
@@ -20328,6 +20381,67 @@ 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;
+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 || !["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 = "72px";
+  let disposed = false;
+  const onMessage = (event) => {
+    if (disposed || event.origin !== frameUrl.origin || event.source !== frame.contentWindow) return;
+    const message = readFrameMessage(event.data, nonce);
+    if (!message) return;
+    if (message.type === "success") 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.removeEventListener("message", onMessage);
+      frame.removeEventListener("error", onFrameError);
+      frame.remove();
+    }
+  };
+}
+
 // ../sdk/src/modules/coupons.ts
 async function resolveShopId() {
   const cachedShopId2 = getShopId();
@@ -21337,6 +21451,7 @@ var shoppex = {
   checkout,
   buildCheckoutUrl,
   buildCheckoutUrlSync,
+  mountCheckoutChallenge,
   // Affiliates
   captureAffiliateFromUrl,
   validateAffiliateCode,
@@ -21485,6 +21600,7 @@ if (typeof window !== "undefined") {
   loyalty,
   me,
   mergeSettings,
+  mountCheckoutChallenge,
   normalizeSearchQuery,
   normalizeStorefrontCustomFields,
   order,