@flopay/react 1.4.0 → 1.4.1

package/dist/index.cjs

@@ -246,7 +246,7 @@ function FloPayProvider({
 }
 
 // src/flopay-checkout.tsx
-var import_react10 = __toESM(require("react"), 1);
+var import_react11 = __toESM(require("react"), 1);
 var import_js4 = require("@flopay/js");
 var import_shared8 = require("@flopay/shared");
 
@@ -456,42 +456,100 @@ function VaultCardFields({
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { ref: containerRef, "data-testid": "flopay-vault-card-fields", style: containerStyle });
 }
 
+// src/error-banner.tsx
+var import_react6 = require("react");
+var import_jsx_runtime5 = require("react/jsx-runtime");
+function ErrorBanner({
+  children,
+  margin,
+  icon = true,
+  styleOverride
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+    "div",
+    {
+      role: "alert",
+      "data-testid": "flopay-error",
+      style: {
+        margin,
+        padding: "0.625rem 0.875rem",
+        background: "#FEF2F2",
+        border: "1px solid #FECACA",
+        borderRadius: "8px",
+        color: "#991B1B",
+        fontSize: "0.85rem",
+        fontWeight: 600,
+        ...icon ? { display: "flex", alignItems: "center", gap: "0.5rem" } : {},
+        ...styleOverride ?? {}
+      },
+      children: [
+        icon && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", style: { flexShrink: 0 }, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          "path",
+          {
+            d: "M12 9v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z",
+            stroke: "#DC2626",
+            strokeWidth: "2",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        ) }),
+        children
+      ]
+    }
+  );
+}
+
+// src/payment-logos.generated.ts
+var import_meta = {};
+var PAYMENT_METHOD_LOGO_URLS = {
+  "alipay": new URL("./payment-logos/alipay.svg", import_meta.url).href,
+  "bancontact": new URL("./payment-logos/bancontact.svg", import_meta.url).href,
+  "blik": new URL("./payment-logos/blik.svg", import_meta.url).href,
+  "eps": new URL("./payment-logos/eps.svg", import_meta.url).href,
+  "giropay": new URL("./payment-logos/giropay.svg", import_meta.url).href,
+  "ideal": new URL("./payment-logos/ideal.svg", import_meta.url).href,
+  "klarna": new URL("./payment-logos/klarna.svg", import_meta.url).href,
+  "p24": new URL("./payment-logos/p24.svg", import_meta.url).href,
+  "sepa_debit": new URL("./payment-logos/sepa_debit.svg", import_meta.url).href,
+  "wechat_pay": new URL("./payment-logos/wechat_pay.svg", import_meta.url).href
+};
+
 // src/split-card-form.tsx
-var import_react9 = __toESM(require("react"), 1);
+var import_react10 = __toESM(require("react"), 1);
 
 // src/hooks.ts
-var import_react6 = require("react");
+var import_react7 = require("react");
 var import_shared2 = require("@flopay/shared");
 function useFloPay() {
-  const ctx = (0, import_react6.useContext)(FloPayContext);
+  const ctx = (0, import_react7.useContext)(FloPayContext);
   return ctx.flopay;
 }
 function usePayPalFloPay() {
-  const ctx = (0, import_react6.useContext)(FloPayContext);
+  const ctx = (0, import_react7.useContext)(FloPayContext);
   return ctx.paypalFlopay ?? null;
 }
 function useElements() {
-  const ctx = (0, import_react6.useContext)(FloPayContext);
+  const ctx = (0, import_react7.useContext)(FloPayContext);
   return ctx.elements;
 }
 function useCheckout() {
-  return (0, import_react6.useContext)(CheckoutContext);
+  return (0, import_react7.useContext)(CheckoutContext);
 }
 function useBillingApiUrl() {
-  const ctx = (0, import_react6.useContext)(FloPayContext);
+  const ctx = (0, import_react7.useContext)(FloPayContext);
   return ctx.billingApiUrl || (0, import_shared2.resolveBillingApiUrl)();
 }
 
 // src/processing-overlay.tsx
-var import_react7 = require("react");
-var import_jsx_runtime5 = require("react/jsx-runtime");
+var import_react8 = require("react");
+var import_jsx_runtime6 = require("react/jsx-runtime");
 var PROCESSING_OVERLAY_SUCCESS_DELAY_MS = 1200;
 var PROCESSING_OVERLAY_ERROR_DELAY_MS = 1500;
 function ProcessingOverlay({
   status,
   errorMessage
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
     "div",
     {
       "data-testid": "flopay-processing-overlay",
@@ -508,7 +566,7 @@ function ProcessingOverlay({
         zIndex: 1e3,
         backdropFilter: "blur(2px)"
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
         "div",
         {
           style: {
@@ -524,8 +582,8 @@ function ProcessingOverlay({
             gap: 16
           },
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: { width: 48, height: 48, position: "relative" }, children: [
-              status === "processing" && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { width: 48, height: 48, position: "relative" }, children: [
+              status === "processing" && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
                 "svg",
                 {
                   width: "48",
@@ -535,14 +593,14 @@ function ProcessingOverlay({
                   xmlns: "http://www.w3.org/2000/svg",
                   style: { animation: "flopay-spin 0.8s linear infinite" },
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("circle", { cx: "12", cy: "12", r: "10", stroke: "#e5e7eb", strokeWidth: "3" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M4 12a8 8 0 018-8v3a5 5 0 00-5 5H4z", fill: "#4A49FF" })
+                    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("circle", { cx: "12", cy: "12", r: "10", stroke: "#e5e7eb", strokeWidth: "3" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { d: "M4 12a8 8 0 018-8v3a5 5 0 00-5 5H4z", fill: "#4A49FF" })
                   ]
                 }
               ),
-              status === "success" && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: { animation: "flopay-pop 0.4s cubic-bezier(0.34,1.56,0.64,1)" }, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("svg", { width: "48", height: "48", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("circle", { cx: "12", cy: "12", r: "11", fill: "#22c55e" }),
-                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              status === "success" && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { animation: "flopay-pop 0.4s cubic-bezier(0.34,1.56,0.64,1)" }, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("svg", { width: "48", height: "48", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("circle", { cx: "12", cy: "12", r: "11", fill: "#22c55e" }),
+                /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
                   "path",
                   {
                     d: "M7 12.5l3 3 7-7",
@@ -558,9 +616,9 @@ function ProcessingOverlay({
                   }
                 )
               ] }) }),
-              status === "error" && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: { animation: "flopay-shake 0.4s ease" }, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("svg", { width: "48", height: "48", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("circle", { cx: "12", cy: "12", r: "11", fill: "#ef4444" }),
-                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              status === "error" && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { animation: "flopay-shake 0.4s ease" }, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("svg", { width: "48", height: "48", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("circle", { cx: "12", cy: "12", r: "11", fill: "#ef4444" }),
+                /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
                   "path",
                   {
                     d: "M8 8l8 8M16 8l-8 8",
@@ -576,7 +634,7 @@ function ProcessingOverlay({
                 )
               ] }) })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
               "span",
               {
                 style: {
@@ -592,7 +650,7 @@ function ProcessingOverlay({
                 ]
               }
             ),
-            status === "success" && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            status === "success" && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
               "p",
               {
                 style: {
@@ -606,7 +664,7 @@ function ProcessingOverlay({
                 children: "You will be automatically redirected, do not close or navigate away from this window."
               }
             ),
-            status === "error" && errorMessage && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            status === "error" && errorMessage && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
               "p",
               {
                 style: {
@@ -620,7 +678,7 @@ function ProcessingOverlay({
                 children: errorMessage
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("style", { children: `
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("style", { children: `
           @keyframes flopay-spin { to { transform: rotate(360deg); } }
           @keyframes flopay-pop { 0% { transform: scale(0); } 100% { transform: scale(1); } }
           @keyframes flopay-draw { to { stroke-dashoffset: 0; } }
@@ -782,6 +840,14 @@ async function buildFloPayApiErrorFromResponse(response, fallbackMessage) {
   const payload = await response.json().catch(() => null);
   return buildFloPayApiError(payload, fallbackMessage);
 }
+function intentRequestHeaders(nonce) {
+  const headers = { "Content-Type": "application/json" };
+  if (nonce) headers["x-checkout-session-token"] = nonce;
+  return headers;
+}
+function isSuccessfulPaymentIntentStatus(status) {
+  return status === "succeeded" || status === "requires_capture" || status === "processing";
+}
 function mapPayPalIntentStatusToPaymentResult(status) {
   if (status === "succeeded") {
     return "succeeded";
@@ -894,7 +960,7 @@ function isInAppBrowser(userAgent) {
 }
 
 // src/direct-paypal-button.tsx
-var import_react8 = require("react");
+var import_react9 = require("react");
 var import_paypal_js = require("@paypal/paypal-js");
 var import_js = require("@flopay/js");
 var import_shared4 = require("@flopay/shared");
@@ -949,7 +1015,7 @@ function isPopupBlockedError(err) {
 }
 
 // src/direct-paypal-button.tsx
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_jsx_runtime7 = require("react/jsx-runtime");
 var DEFAULT_BUTTON_HEIGHT = 45;
 var DIRECT_PAYPAL_RECOVERY_MESSAGE = "We couldn't open PayPal. Try again or choose another payment method.";
 var DIRECT_PAYPAL_RECOVERY_ACTION_STYLE = {
@@ -993,7 +1059,7 @@ function DirectPayPalButtonImplementation({
   debug = false
 }) {
   const flopay = useFloPay();
-  const standaloneTelemetry = (0, import_react8.useMemo)(() => {
+  const standaloneTelemetry = (0, import_react9.useMemo)(() => {
     if (flopay) return null;
     const reporter = createTelemetryBridge({
       billingApiUrl,
@@ -1011,13 +1077,13 @@ function DirectPayPalButtonImplementation({
     telemetryContext?.checkoutMode,
     telemetryContext?.layout
   ]);
-  const floPayTelemetry = (0, import_react8.useMemo)(() => getFloPayTelemetryBridge(flopay), [flopay]);
-  (0, import_react8.useEffect)(() => () => {
+  const floPayTelemetry = (0, import_react9.useMemo)(() => getFloPayTelemetryBridge(flopay), [flopay]);
+  (0, import_react9.useEffect)(() => () => {
     if (!standaloneTelemetry) return;
     void standaloneTelemetry.flush().catch(() => {
     }).finally(() => standaloneTelemetry.destroy());
   }, [standaloneTelemetry]);
-  const telemetrySource = (0, import_react8.useMemo)(() => ({
+  const telemetrySource = (0, import_react9.useMemo)(() => ({
     error: (input) => {
       if (floPayTelemetry) floPayTelemetry.error(input);
       else standaloneTelemetry?.error(input);
@@ -1037,100 +1103,100 @@ function DirectPayPalButtonImplementation({
     startTiming: () => floPayTelemetry?.now() ?? standaloneTelemetry?.now() ?? 0,
     elapsed: (startedAt) => floPayTelemetry?.elapsed(startedAt) ?? Math.max(0, (standaloneTelemetry?.now() ?? startedAt) - startedAt)
   }), [floPayTelemetry, standaloneTelemetry]);
-  const containerRef = (0, import_react8.useRef)(null);
-  const providerStartedAt = (0, import_react8.useRef)(0);
-  const focusTargetRef = (0, import_react8.useRef)(null);
-  const pendingProviderFocusRef = (0, import_react8.useRef)(false);
-  const [ready, setReady] = (0, import_react8.useState)(false);
-  const [renderGeneration, setRenderGeneration] = (0, import_react8.useState)(0);
-  const activeRenderGenerationRef = (0, import_react8.useRef)(0);
-  const [showRetryFocusTarget, setShowRetryFocusTarget] = (0, import_react8.useState)(false);
-  const [failed, setFailed] = (0, import_react8.useState)(false);
-  const [submitting, setSubmitting] = (0, import_react8.useState)(false);
-  const baseUrl = (0, import_react8.useMemo)(() => billingApiUrl.replace(/\/+$/, ""), [billingApiUrl]);
-  const [debugLines, setDebugLines] = (0, import_react8.useState)([]);
+  const containerRef = (0, import_react9.useRef)(null);
+  const providerStartedAt = (0, import_react9.useRef)(0);
+  const focusTargetRef = (0, import_react9.useRef)(null);
+  const pendingProviderFocusRef = (0, import_react9.useRef)(false);
+  const [ready, setReady] = (0, import_react9.useState)(false);
+  const [renderGeneration, setRenderGeneration] = (0, import_react9.useState)(0);
+  const activeRenderGenerationRef = (0, import_react9.useRef)(0);
+  const [showRetryFocusTarget, setShowRetryFocusTarget] = (0, import_react9.useState)(false);
+  const [failed, setFailed] = (0, import_react9.useState)(false);
+  const [submitting, setSubmitting] = (0, import_react9.useState)(false);
+  const baseUrl = (0, import_react9.useMemo)(() => billingApiUrl.replace(/\/+$/, ""), [billingApiUrl]);
+  const [debugLines, setDebugLines] = (0, import_react9.useState)([]);
   const appendDebug = (line) => {
     if (!debug) return;
     setDebugLines((prev) => [...prev, `${(/* @__PURE__ */ new Date()).toISOString().slice(11, 23)} ${line}`]);
   };
-  const onTokenizedBodyRef = (0, import_react8.useRef)(onTokenizedBody);
-  const onCompleteRef = (0, import_react8.useRef)(onComplete);
-  const onErrorChangeRef = (0, import_react8.useRef)(onErrorChange);
-  const onDeclineRef = (0, import_react8.useRef)(onDecline);
-  const onTechnicalFailureRef = (0, import_react8.useRef)(onTechnicalFailure);
-  const onButtonClickRef = (0, import_react8.useRef)(onButtonClick);
-  const onLoadStateChangeRef = (0, import_react8.useRef)(onLoadStateChange);
-  const runBeforeButtonClickRef = (0, import_react8.useRef)(runBeforeButtonClick);
-  const sessionRef = (0, import_react8.useRef)(session);
-  const emailRef = (0, import_react8.useRef)(email);
-  const nonceRef = (0, import_react8.useRef)(nonce);
-  const beforeClickRef = (0, import_react8.useRef)(null);
-  const attemptGenerationRef = (0, import_react8.useRef)(0);
-  const attemptRef = (0, import_react8.useRef)(null);
-  const invalidatedAttemptGenerationRef = (0, import_react8.useRef)(null);
-  const attemptContextBySurfaceRef = (0, import_react8.useRef)(/* @__PURE__ */ new Map());
-  const approvalContextByTokenRef = (0, import_react8.useRef)(/* @__PURE__ */ new Map());
-  (0, import_react8.useEffect)(() => {
+  const onTokenizedBodyRef = (0, import_react9.useRef)(onTokenizedBody);
+  const onCompleteRef = (0, import_react9.useRef)(onComplete);
+  const onErrorChangeRef = (0, import_react9.useRef)(onErrorChange);
+  const onDeclineRef = (0, import_react9.useRef)(onDecline);
+  const onTechnicalFailureRef = (0, import_react9.useRef)(onTechnicalFailure);
+  const onButtonClickRef = (0, import_react9.useRef)(onButtonClick);
+  const onLoadStateChangeRef = (0, import_react9.useRef)(onLoadStateChange);
+  const runBeforeButtonClickRef = (0, import_react9.useRef)(runBeforeButtonClick);
+  const sessionRef = (0, import_react9.useRef)(session);
+  const emailRef = (0, import_react9.useRef)(email);
+  const nonceRef = (0, import_react9.useRef)(nonce);
+  const beforeClickRef = (0, import_react9.useRef)(null);
+  const attemptGenerationRef = (0, import_react9.useRef)(0);
+  const attemptRef = (0, import_react9.useRef)(null);
+  const invalidatedAttemptGenerationRef = (0, import_react9.useRef)(null);
+  const attemptContextBySurfaceRef = (0, import_react9.useRef)(/* @__PURE__ */ new Map());
+  const approvalContextByTokenRef = (0, import_react9.useRef)(/* @__PURE__ */ new Map());
+  (0, import_react9.useEffect)(() => {
     onTokenizedBodyRef.current = onTokenizedBody;
   }, [onTokenizedBody]);
-  (0, import_react8.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     onCompleteRef.current = onComplete;
   }, [onComplete]);
-  (0, import_react8.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     onErrorChangeRef.current = onErrorChange;
   }, [onErrorChange]);
-  (0, import_react8.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     onDeclineRef.current = onDecline;
   }, [onDecline]);
-  (0, import_react8.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     onTechnicalFailureRef.current = onTechnicalFailure;
   }, [onTechnicalFailure]);
-  (0, import_react8.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     onButtonClickRef.current = onButtonClick;
   }, [onButtonClick]);
-  (0, import_react8.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     onLoadStateChangeRef.current = onLoadStateChange;
   }, [onLoadStateChange]);
-  (0, import_react8.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     runBeforeButtonClickRef.current = runBeforeButtonClick;
   }, [runBeforeButtonClick]);
-  (0, import_react8.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     sessionRef.current = session;
   }, [session]);
-  (0, import_react8.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     emailRef.current = email;
   }, [email]);
-  (0, import_react8.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     nonceRef.current = nonce;
   }, [nonce]);
-  (0, import_react8.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     activeRenderGenerationRef.current = renderGeneration;
   }, [renderGeneration]);
-  (0, import_react8.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     if (showRetryFocusTarget) focusTargetRef.current?.focus();
   }, [showRetryFocusTarget, renderGeneration]);
-  const focusRetryTarget = (0, import_react8.useCallback)(() => {
+  const focusRetryTarget = (0, import_react9.useCallback)(() => {
     window.setTimeout(() => {
       focusTargetRef.current?.focus();
     }, 0);
   }, []);
-  const remountPayPalButtons = (0, import_react8.useCallback)(() => {
+  const remountPayPalButtons = (0, import_react9.useCallback)(() => {
     setReady(false);
     setRenderGeneration((current) => current + 1);
   }, []);
-  const focusPayPalSurface = (0, import_react8.useCallback)(() => {
+  const focusPayPalSurface = (0, import_react9.useCallback)(() => {
     setShowRetryFocusTarget(false);
     const target = containerRef.current?.querySelector(
       'iframe, button, [tabindex]:not([tabindex="-1"])'
     );
     (target ?? containerRef.current)?.focus?.();
   }, []);
-  (0, import_react8.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     if (!ready || !pendingProviderFocusRef.current) return;
     pendingProviderFocusRef.current = false;
     focusPayPalSurface();
   }, [focusPayPalSurface, ready, renderGeneration]);
-  const notifyTechnicalFailure = (0, import_react8.useCallback)((err, options) => {
+  const notifyTechnicalFailure = (0, import_react9.useCallback)((err, options) => {
     const handler = onTechnicalFailureRef.current;
     if (handler) {
       handler("paypal", err, options);
@@ -1208,7 +1274,7 @@ function DirectPayPalButtonImplementation({
     }
     return token;
   };
-  (0, import_react8.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     const handleVisibilityChange = () => {
       if (document.visibilityState === "visible") {
         scheduleMissingCallbackRecovery();
@@ -1226,11 +1292,11 @@ function DirectPayPalButtonImplementation({
       clearAttemptTimer();
     };
   }, []);
-  (0, import_react8.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     invokeMerchantCallback(() => onLoadStateChangeRef.current?.(ready && !failed));
   }, [ready, failed]);
   const normalizedEnv = (0, import_shared4.normalizeGatewayEnvironment)(environment);
-  (0, import_react8.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     const maskedClient = clientId ? `${clientId.slice(0, 6)}\u2026(len ${clientId.length})` : "(empty)";
     const ua = typeof navigator !== "undefined" ? navigator.userAgent : "(no navigator)";
     appendDebug(`mount clientId=${maskedClient} env=${environment ?? "(unset)"}\u2192${normalizedEnv ?? "live"} ccy=${currency} sub=${isSubscription}`);
@@ -1513,9 +1579,8 @@ function DirectPayPalButtonImplementation({
       const prepared = beforeClickRef.current;
       const effectiveSessionId = prepared?.sessionId ?? sessionId;
       const effectiveEmail = prepared?.accountPatch?.email ?? emailRef.current;
-      const intentHeaders = { "Content-Type": "application/json" };
       const currentNonce = prepared?.nonce ?? nonceRef.current;
-      if (currentNonce) intentHeaders["x-checkout-session-token"] = currentNonce;
+      const intentHeaders = intentRequestHeaders(currentNonce);
       telemetrySource.log({
         name: "payment.intent.started",
         stage: "processing",
@@ -1844,7 +1909,7 @@ function DirectPayPalButtonImplementation({
       }
     };
   }, [baseUrl, clientId, currency, environment, isSubscription, sessionId, existingOrderId, renderGeneration, telemetrySource]);
-  const debugPanel = debug ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+  const debugPanel = debug ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
     "pre",
     {
       "data-testid": "flopay-direct-paypal-debug",
@@ -1869,17 +1934,17 @@ ${debugLines.join("\n")}`
     }
   ) : null;
   if (failed) {
-    return debug ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { children: debugPanel }) : null;
+    return debug ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { children: debugPanel }) : null;
   }
   return (
     // Single wrapper so the parent flex container sees exactly one flex item
     // (otherwise the fragment's placeholder + container become two siblings
     // and any spacing-sensitive layout has to reason about both). The wrapper
     // intentionally has no margin/padding so the parent owns all spacing.
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { children: [
       debugPanel,
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { position: "relative", minHeight: DEFAULT_BUTTON_HEIGHT }, children: [
-        !ready && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: { position: "relative", minHeight: DEFAULT_BUTTON_HEIGHT }, children: [
+        !ready && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
           "div",
           {
             "data-testid": "flopay-direct-paypal-placeholder",
@@ -1893,7 +1958,7 @@ ${debugLines.join("\n")}`
             }
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
           "div",
           {
             ref: containerRef,
@@ -1910,7 +1975,7 @@ ${debugLines.join("\n")}`
           renderGeneration
         )
       ] }),
-      showRetryFocusTarget && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      showRetryFocusTarget && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
         "button",
         {
           ref: focusTargetRef,
@@ -1925,15 +1990,15 @@ ${debugLines.join("\n")}`
   );
 }
 function DirectPayPalButton(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(DirectPayPalButtonImplementation, { ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(DirectPayPalButtonImplementation, { ...props });
 }
 function InstrumentedDirectPayPalButton(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(DirectPayPalButtonImplementation, { ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(DirectPayPalButtonImplementation, { ...props });
 }
 
 // src/split-card-form.tsx
 var import_shared6 = require("@flopay/shared");
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_jsx_runtime8 = require("react/jsx-runtime");
 var STRIPE_RESUME_KEY = "flopay_stripe_resume";
 var LEGACY_WALLET_RESUME_KEY = "flopay_wallet_resume";
 var PAYPAL_RESUME_KEY = "flopay_paypal_resume";
@@ -2048,17 +2113,17 @@ function buildExternalMethodRecoveryMessage(method, popupBlocked) {
   return popupBlocked ? `${base} Allow pop-ups for this site, then try again.` : base;
 }
 function useExternalAttemptReconciliation(onMissingTerminal) {
-  const generationRef = (0, import_react9.useRef)(0);
-  const invalidatedGenerationRef = (0, import_react9.useRef)(null);
-  const attemptRef = (0, import_react9.useRef)(null);
-  const clearAttemptTimer = (0, import_react9.useCallback)((targetAttempt = attemptRef.current) => {
+  const generationRef = (0, import_react10.useRef)(0);
+  const invalidatedGenerationRef = (0, import_react10.useRef)(null);
+  const attemptRef = (0, import_react10.useRef)(null);
+  const clearAttemptTimer = (0, import_react10.useCallback)((targetAttempt = attemptRef.current) => {
     const attempt = targetAttempt;
     if (attempt?.timer) {
       clearTimeout(attempt.timer);
       attempt.timer = null;
     }
   }, []);
-  const armAttemptTimer = (0, import_react9.useCallback)((attempt, delayMs) => {
+  const armAttemptTimer = (0, import_react10.useCallback)((attempt, delayMs) => {
     if (typeof document !== "undefined" && document.visibilityState !== "visible") return;
     clearAttemptTimer(attempt);
     attempt.timer = setTimeout(() => {
@@ -2073,11 +2138,11 @@ function useExternalAttemptReconciliation(onMissingTerminal) {
       );
     }, delayMs);
   }, [clearAttemptTimer, onMissingTerminal]);
-  const armRecoveryTimer = (0, import_react9.useCallback)((attempt) => {
+  const armRecoveryTimer = (0, import_react10.useCallback)((attempt) => {
     if (!attempt.yieldedControl) return;
     armAttemptTimer(attempt, EXTERNAL_METHOD_CALLBACK_GRACE_MS);
   }, [armAttemptTimer]);
-  const startAttempt = (0, import_react9.useCallback)((method) => {
+  const startAttempt = (0, import_react10.useCallback)((method) => {
     clearAttemptTimer();
     const generation = generationRef.current + 1;
     generationRef.current = generation;
@@ -2086,7 +2151,7 @@ function useExternalAttemptReconciliation(onMissingTerminal) {
     attemptRef.current = attempt;
     return generation;
   }, [clearAttemptTimer]);
-  const finishAttempt = (0, import_react9.useCallback)((generation) => {
+  const finishAttempt = (0, import_react10.useCallback)((generation) => {
     const attempt = attemptRef.current;
     if (typeof generation === "number" && attempt?.generation !== generation) return false;
     clearAttemptTimer(attempt);
@@ -2096,7 +2161,7 @@ function useExternalAttemptReconciliation(onMissingTerminal) {
     }
     return true;
   }, [clearAttemptTimer]);
-  const invalidateAttempt = (0, import_react9.useCallback)((generation) => {
+  const invalidateAttempt = (0, import_react10.useCallback)((generation) => {
     const attempt = attemptRef.current;
     const targetGeneration = generation ?? attempt?.generation ?? generationRef.current;
     if (!generation || attempt?.generation === generation) {
@@ -2105,26 +2170,26 @@ function useExternalAttemptReconciliation(onMissingTerminal) {
     }
     invalidatedGenerationRef.current = targetGeneration;
   }, [clearAttemptTimer]);
-  const isAttemptInvalidated = (0, import_react9.useCallback)(
+  const isAttemptInvalidated = (0, import_react10.useCallback)(
     (generation) => invalidatedGenerationRef.current === (generation ?? generationRef.current),
     []
   );
-  const isAttemptCurrent = (0, import_react9.useCallback)(
+  const isAttemptCurrent = (0, import_react10.useCallback)(
     (generation) => attemptRef.current?.generation === generation && invalidatedGenerationRef.current !== generation,
     []
   );
-  const scheduleRecoveryIfReturned = (0, import_react9.useCallback)(() => {
+  const scheduleRecoveryIfReturned = (0, import_react10.useCallback)(() => {
     const attempt = attemptRef.current;
     if (!attempt) return;
     armRecoveryTimer(attempt);
   }, [armRecoveryTimer]);
-  const markAttemptYieldedControl = (0, import_react9.useCallback)(() => {
+  const markAttemptYieldedControl = (0, import_react10.useCallback)(() => {
     const attempt = attemptRef.current;
     if (!attempt) return;
     attempt.yieldedControl = true;
     clearAttemptTimer(attempt);
   }, [clearAttemptTimer]);
-  (0, import_react9.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     const handleVisibilityChange = () => {
       if (document.visibilityState === "visible") {
         scheduleRecoveryIfReturned();
@@ -2166,7 +2231,7 @@ function normalizeBeforeButtonClickError(method, err) {
   );
 }
 function FloPayKeyframes() {
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("style", { children: FLOPAY_KEYFRAMES });
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("style", { children: FLOPAY_KEYFRAMES });
 }
 function toCssSize(value) {
   if (typeof value === "number") return `${value}px`;
@@ -2188,8 +2253,8 @@ function ExpressCheckoutReadySwap({
   children
 }) {
   if (state === "unavailable" || state === "load_error") return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: { position: "relative", minHeight: 44 }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: { position: "relative", minHeight: 44 }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
       "div",
       {
         "data-testid": placeholderTestId,
@@ -2208,7 +2273,7 @@ function ExpressCheckoutReadySwap({
         }
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
       "div",
       {
         style: {
@@ -2226,9 +2291,9 @@ function ExpressCheckoutReadySwap({
 function isExpressCheckoutRowVisible(state) {
   return state !== "unavailable" && state !== "load_error";
 }
-var SplitCardForm = (0, import_react9.forwardRef)(
+var SplitCardForm = (0, import_react10.forwardRef)(
   function SplitCardForm2(props, ref) {
-    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SplitCardFormInner, { ...props, innerRef: ref });
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SplitCardFormInner, { ...props, innerRef: ref });
   }
 );
 function PayPalButtonInner({
@@ -2249,18 +2314,18 @@ function PayPalButtonInner({
   const flopay = useFloPay();
   const stripe = (0, import_react_stripe_js.useStripe)();
   const elements = (0, import_react_stripe_js.useElements)();
-  const [loadState, setLoadState] = (0, import_react9.useState)("loading");
-  (0, import_react9.useEffect)(() => {
+  const [loadState, setLoadState] = (0, import_react10.useState)("loading");
+  (0, import_react10.useEffect)(() => {
     onLoadStateChange?.(loadState);
   }, [loadState, onLoadStateChange]);
-  const [submitting, setSubmitting] = (0, import_react9.useState)(false);
-  const paypalResumeAttempted = (0, import_react9.useRef)(false);
-  const focusTargetRef = (0, import_react9.useRef)(null);
-  const recoveryActionRef = (0, import_react9.useRef)(null);
-  const [surfaceKey, setSurfaceKey] = (0, import_react9.useState)(0);
-  const [showRecoveryAction, setShowRecoveryAction] = (0, import_react9.useState)(false);
-  const pendingProviderFocusRef = (0, import_react9.useRef)(false);
-  const attemptContextBySurfaceRef = (0, import_react9.useRef)(/* @__PURE__ */ new Map());
+  const [submitting, setSubmitting] = (0, import_react10.useState)(false);
+  const paypalResumeAttempted = (0, import_react10.useRef)(false);
+  const focusTargetRef = (0, import_react10.useRef)(null);
+  const recoveryActionRef = (0, import_react10.useRef)(null);
+  const [surfaceKey, setSurfaceKey] = (0, import_react10.useState)(0);
+  const [showRecoveryAction, setShowRecoveryAction] = (0, import_react10.useState)(false);
+  const pendingProviderFocusRef = (0, import_react10.useRef)(false);
+  const attemptContextBySurfaceRef = (0, import_react10.useRef)(/* @__PURE__ */ new Map());
   const baseUrl = billingApiUrl.replace(/\/+$/, "");
   const {
     startAttempt,
@@ -2276,35 +2341,35 @@ function PayPalButtonInner({
     setShowRecoveryAction(true);
     setSurfaceKey((key) => key + 1);
   });
-  (0, import_react9.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     if (showRecoveryAction) recoveryActionRef.current?.focus();
   }, [showRecoveryAction, surfaceKey]);
-  const resetSurface = (0, import_react9.useCallback)(() => {
+  const resetSurface = (0, import_react10.useCallback)(() => {
     setSurfaceKey((key) => key + 1);
   }, []);
-  const recoverTechnicalFailure = (0, import_react9.useCallback)((err, code, generation) => {
+  const recoverTechnicalFailure = (0, import_react10.useCallback)((err, code, generation) => {
     invalidateAttempt(generation);
     onTechnicalFailure?.("paypal", err, { code, popupBlocked: isPopupBlockedError(err) });
     setShowRecoveryAction(true);
     resetSurface();
   }, [invalidateAttempt, onTechnicalFailure, resetSurface]);
-  const focusProviderSurface = (0, import_react9.useCallback)(() => {
+  const focusProviderSurface = (0, import_react10.useCallback)(() => {
     window.setTimeout(() => {
       const target = focusTargetRef.current?.querySelector("iframe");
       (target ?? focusTargetRef.current)?.focus();
     }, 0);
   }, []);
-  (0, import_react9.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     if (!pendingProviderFocusRef.current) return;
     pendingProviderFocusRef.current = false;
     focusProviderSurface();
   }, [focusProviderSurface, surfaceKey]);
-  const handleRecoveryActionClick = (0, import_react9.useCallback)(() => {
+  const handleRecoveryActionClick = (0, import_react10.useCallback)(() => {
     setShowRecoveryAction(false);
     onErrorChange?.(null);
     focusProviderSurface();
   }, [focusProviderSurface, onErrorChange]);
-  (0, import_react9.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     if (!stripe || paypalResumeAttempted.current) return;
     const params = new URLSearchParams(window.location.search);
     const paymentIntentId = params.get("payment_intent");
@@ -2370,7 +2435,7 @@ function PayPalButtonInner({
       }
     })();
   }, [stripe, onTokenizedBody, onErrorChange, onDecline]);
-  const handlePayPalClick = (0, import_react9.useCallback)(async (event) => {
+  const handlePayPalClick = (0, import_react10.useCallback)(async (event) => {
     if (isProcessing || submitting) {
       event.reject();
       return;
@@ -2392,7 +2457,7 @@ function PayPalButtonInner({
     onButtonClick?.("paypal");
     event.resolve();
   }, [attemptContextBySurfaceRef, isProcessing, onButtonClick, runBeforeButtonClick, startAttempt, submitting, surfaceKey]);
-  const handlePayPalConfirm = (0, import_react9.useCallback)(async (event) => {
+  const handlePayPalConfirm = (0, import_react10.useCallback)(async (event) => {
     if (!stripe || !elements) return;
     const attemptContext = attemptContextBySurfaceRef.current.get(surfaceKey);
     if (attemptContext && !isAttemptCurrent(attemptContext.generation)) {
@@ -2432,8 +2497,7 @@ function PayPalButtonInner({
         event.paymentFailed({ reason: "fail" });
         return;
       }
-      const intentHeaders = { "Content-Type": "application/json" };
-      if (effectiveNonce) intentHeaders["x-checkout-session-token"] = effectiveNonce;
+      const intentHeaders = intentRequestHeaders(effectiveNonce);
       const intentResponse = await fetch(`${baseUrl}/v1/checkouts/payments/intents`, {
         method: "POST",
         headers: intentHeaders,
@@ -2524,14 +2588,14 @@ function PayPalButtonInner({
       setSubmitting(false);
     }
   }, [stripe, elements, sessionId, nonce, email, baseUrl, onTokenizedBody, onErrorChange, onDecline, runBeforeButtonClick, recoverTechnicalFailure, finishAttempt, isAttemptCurrent, isAttemptInvalidated, surfaceKey]);
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
       ExpressCheckoutReadySwap,
       {
         state: loadState,
         placeholderTestId: "flopay-paypal-placeholder",
         borderRadius: placeholderBorderRadius,
-        children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
           "div",
           {
             ref: focusTargetRef,
@@ -2540,7 +2604,7 @@ function PayPalButtonInner({
             "aria-label": "PayPal payment method",
             style: { borderRadius: 8, outlineOffset: 4 },
             children: [
-              showRecoveryAction && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+              showRecoveryAction && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                 "button",
                 {
                   ref: recoveryActionRef,
@@ -2551,7 +2615,7 @@ function PayPalButtonInner({
                   children: "Try PayPal again"
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                 import_react_stripe_js.ExpressCheckoutElement,
                 {
                   onReady: (event) => setLoadState(resolveExpressCheckoutLoadState(event, ["paypal"])),
@@ -2591,7 +2655,7 @@ function PayPalButtonInner({
         )
       }
     ),
-    submitting && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ProcessingOverlay, { status: "processing" })
+    submitting && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ProcessingOverlay, { status: "processing" })
   ] });
 }
 function WalletButtonInner({
@@ -2612,21 +2676,21 @@ function WalletButtonInner({
   const flopay = useFloPay();
   const stripe = (0, import_react_stripe_js.useStripe)();
   const elements = (0, import_react_stripe_js.useElements)();
-  const [loadState, setLoadState] = (0, import_react9.useState)("loading");
-  (0, import_react9.useEffect)(() => {
+  const [loadState, setLoadState] = (0, import_react10.useState)("loading");
+  (0, import_react10.useEffect)(() => {
     onLoadStateChange?.(loadState);
   }, [loadState, onLoadStateChange]);
-  const [submitting, setSubmitting] = (0, import_react9.useState)(false);
+  const [submitting, setSubmitting] = (0, import_react10.useState)(false);
   const baseUrl = billingApiUrl.replace(/\/+$/, "");
-  const focusTargetRef = (0, import_react9.useRef)(null);
-  const recoveryActionRef = (0, import_react9.useRef)(null);
-  const [surfaceKey, setSurfaceKey] = (0, import_react9.useState)(0);
-  const [showRecoveryAction, setShowRecoveryAction] = (0, import_react9.useState)(false);
-  const [recoveryActionMethod, setRecoveryActionMethod] = (0, import_react9.useState)("google_pay");
-  const pendingProviderFocusRef = (0, import_react9.useRef)(false);
-  const lastWalletProviderMethodRef = (0, import_react9.useRef)("google_pay");
-  const lastWalletMethodRef = (0, import_react9.useRef)("google_pay");
-  const attemptContextBySurfaceRef = (0, import_react9.useRef)(/* @__PURE__ */ new Map());
+  const focusTargetRef = (0, import_react10.useRef)(null);
+  const recoveryActionRef = (0, import_react10.useRef)(null);
+  const [surfaceKey, setSurfaceKey] = (0, import_react10.useState)(0);
+  const [showRecoveryAction, setShowRecoveryAction] = (0, import_react10.useState)(false);
+  const [recoveryActionMethod, setRecoveryActionMethod] = (0, import_react10.useState)("google_pay");
+  const pendingProviderFocusRef = (0, import_react10.useRef)(false);
+  const lastWalletProviderMethodRef = (0, import_react10.useRef)("google_pay");
+  const lastWalletMethodRef = (0, import_react10.useRef)("google_pay");
+  const attemptContextBySurfaceRef = (0, import_react10.useRef)(/* @__PURE__ */ new Map());
   const {
     startAttempt,
     finishAttempt,
@@ -2642,36 +2706,36 @@ function WalletButtonInner({
     setShowRecoveryAction(true);
     setSurfaceKey((key) => key + 1);
   });
-  (0, import_react9.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     if (showRecoveryAction) recoveryActionRef.current?.focus();
   }, [showRecoveryAction, surfaceKey]);
-  const resetSurface = (0, import_react9.useCallback)(() => {
+  const resetSurface = (0, import_react10.useCallback)(() => {
     setSurfaceKey((key) => key + 1);
   }, []);
-  const recoverTechnicalFailure = (0, import_react9.useCallback)((method, err, code, generation) => {
+  const recoverTechnicalFailure = (0, import_react10.useCallback)((method, err, code, generation) => {
     invalidateAttempt(generation);
     onTechnicalFailure?.(method, err, { code, popupBlocked: isPopupBlockedError(err) });
     setRecoveryActionMethod(method);
     setShowRecoveryAction(true);
     resetSurface();
   }, [invalidateAttempt, onTechnicalFailure, resetSurface]);
-  const focusProviderSurface = (0, import_react9.useCallback)(() => {
+  const focusProviderSurface = (0, import_react10.useCallback)(() => {
     window.setTimeout(() => {
       const target = focusTargetRef.current?.querySelector("iframe");
       (target ?? focusTargetRef.current)?.focus();
     }, 0);
   }, []);
-  (0, import_react9.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     if (!pendingProviderFocusRef.current) return;
     pendingProviderFocusRef.current = false;
     focusProviderSurface();
   }, [focusProviderSurface, surfaceKey]);
-  const handleRecoveryActionClick = (0, import_react9.useCallback)(() => {
+  const handleRecoveryActionClick = (0, import_react10.useCallback)(() => {
     setShowRecoveryAction(false);
     onErrorChange?.(null);
     focusProviderSurface();
   }, [focusProviderSurface, onErrorChange]);
-  const handleWalletConfirm = (0, import_react9.useCallback)(
+  const handleWalletConfirm = (0, import_react10.useCallback)(
     async (event) => {
       if (!stripe || !elements) return;
       const attemptContext = attemptContextBySurfaceRef.current.get(surfaceKey);
@@ -2718,8 +2782,7 @@ function WalletButtonInner({
         if (!effectiveSessionId || !effectiveEmail) {
           throw new Error("Missing sessionId or email for wallet payment");
         }
-        const intentHeaders = { "Content-Type": "application/json" };
-        if (effectiveNonce) intentHeaders["x-checkout-session-token"] = effectiveNonce;
+        const intentHeaders = intentRequestHeaders(effectiveNonce);
         const intentResponse = await fetch(`${baseUrl}/v1/checkouts/payments/intents`, {
           method: "POST",
           headers: intentHeaders,
@@ -2774,7 +2837,7 @@ function WalletButtonInner({
     },
     [stripe, elements, sessionId, nonce, email, baseUrl, onTokenizedBody, onErrorChange, onDecline, runBeforeButtonClick, recoverTechnicalFailure, finishAttempt, isAttemptCurrent, isAttemptInvalidated, surfaceKey]
   );
-  const expressMethodMap = (0, import_react9.useMemo)(() => {
+  const expressMethodMap = (0, import_react10.useMemo)(() => {
     const allKeys = ["applePay", "googlePay", "paypal", "link", "amazonPay", "klarna"];
     const alwaysCapable = /* @__PURE__ */ new Set(["applePay", "googlePay"]);
     const enabledKeys = new Set(expressMethods.map(import_shared5.stripeExpressMethodToOptionKey));
@@ -2788,18 +2851,18 @@ function WalletButtonInner({
     }
     return out;
   }, [expressMethods]);
-  const availableMethodKeys = (0, import_react9.useMemo)(
+  const availableMethodKeys = (0, import_react10.useMemo)(
     () => expressMethods.map(import_shared5.stripeExpressMethodToOptionKey),
     [expressMethods]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
       ExpressCheckoutReadySwap,
       {
         state: loadState,
         placeholderTestId: "flopay-wallet-placeholder",
         borderRadius: placeholderBorderRadius,
-        children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
           "div",
           {
             ref: focusTargetRef,
@@ -2808,7 +2871,7 @@ function WalletButtonInner({
             "aria-label": "Wallet payment methods",
             style: { borderRadius: 8, outlineOffset: 4 },
             children: [
-              showRecoveryAction && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+              showRecoveryAction && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
                 "button",
                 {
                   ref: recoveryActionRef,
@@ -2823,7 +2886,7 @@ function WalletButtonInner({
                   ]
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                 import_react_stripe_js.ExpressCheckoutElement,
                 {
                   onReady: (event) => {
@@ -2887,7 +2950,7 @@ function WalletButtonInner({
         )
       }
     ),
-    submitting && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ProcessingOverlay, { status: "processing" })
+    submitting && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ProcessingOverlay, { status: "processing" })
   ] });
 }
 function StripeMethodButton({
@@ -2905,10 +2968,11 @@ function StripeMethodButton({
   fontFamily
 }) {
   const brand = (0, import_shared5.resolveStripeMethodBrandVariant)(method, themeId);
+  const vendoredLogoUrl = PAYMENT_METHOD_LOGO_URLS[method];
   const resolvedBackground = brand?.backgroundColor ?? backgroundColor ?? "#ffffff";
   const resolvedBorder = brand?.borderColor ?? borderColor ?? "#d1d5db";
   const resolvedTextColor = brand?.textColor ?? textColor ?? "#262833";
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
     "button",
     {
       type: "button",
@@ -2955,9 +3019,9 @@ function StripeMethodButton({
         // Pulse-skeleton parity with the wallet ECE: no spinner, just the
         // status text on top of the pulsing background. Keeps the loading
         // affordance shape-equivalent across both kinds of tile.
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { style: { margin: "0 auto" }, children: `Connecting to ${(0, import_shared5.getStripeMethodDisplayName)(method)}\u2026` })
-      ) : /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { style: { margin: "0 auto" }, children: `Connecting to ${(0, import_shared5.getStripeMethodDisplayName)(method)}\u2026` })
+      ) : /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
           "span",
           {
             style: {
@@ -2970,15 +3034,36 @@ function StripeMethodButton({
               gap: (0, import_shared5.hasVendoredStripeMethodLogo)(method) ? 8 : 0
             },
             children: [
-              brand?.logoSvg && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+              vendoredLogoUrl ? (
+                // Vendored brand logo — an <img> asset (not inline SVG) so its
+                // bytes ship as a sibling file, out of the JS bundle. 3:2 box
+                // matching the datatrans logos' 120×80 viewBox; each ships its own
+                // white rounded-rect background so it stays legible on any tile.
+                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                  "img",
+                  {
+                    src: vendoredLogoUrl,
+                    alt: "",
+                    "aria-hidden": "true",
+                    loading: "lazy",
+                    decoding: "async",
+                    width: 30,
+                    height: 20,
+                    style: {
+                      width: 30,
+                      height: 20,
+                      flexShrink: 0,
+                      borderRadius: 3,
+                      objectFit: "contain",
+                      display: "inline-flex"
+                    }
+                  }
+                )
+              ) : brand?.logoSvg ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                 "span",
                 {
                   "aria-hidden": "true",
                   style: {
-                    // 3:2 box matching the vendored datatrans logos' 120×80
-                    // viewBox. Each logo ships with its own white rounded-rect
-                    // background baked in, so the mark stays legible on any
-                    // brand-coloured tile without an extra chip wrapper here.
                     width: 30,
                     height: 20,
                     flexShrink: 0,
@@ -2988,12 +3073,12 @@ function StripeMethodButton({
                   },
                   dangerouslySetInnerHTML: { __html: brand.logoSvg }
                 }
-              ),
-              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { children: (0, import_shared5.getStripeMethodDisplayName)(method) })
+              ) : null,
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { children: (0, import_shared5.getStripeMethodDisplayName)(method) })
             ]
           }
         ),
-        hasNextStep && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        hasNextStep && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
           "svg",
           {
             width: "14",
@@ -3013,7 +3098,7 @@ function StripeMethodButton({
               opacity: 0.7
             },
             "aria-hidden": "true",
-            children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: "M9 18l6-6-6-6" })
+            children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("path", { d: "M9 18l6-6-6-6" })
           }
         )
       ] })
@@ -3042,12 +3127,12 @@ function StripeMethodInlineForm({
   const flopay = useFloPay();
   const stripe = (0, import_react_stripe_js.useStripe)();
   const elements = (0, import_react_stripe_js.useElements)();
-  const [submitting, setSubmitting] = (0, import_react9.useState)(false);
-  const submittingRef = (0, import_react9.useRef)(false);
-  const [isMethodComplete, setIsMethodComplete] = (0, import_react9.useState)(false);
-  const [loadState, setLoadState] = (0, import_react9.useState)("loading");
+  const [submitting, setSubmitting] = (0, import_react10.useState)(false);
+  const submittingRef = (0, import_react10.useRef)(false);
+  const [isMethodComplete, setIsMethodComplete] = (0, import_react10.useState)(false);
+  const [loadState, setLoadState] = (0, import_react10.useState)("loading");
   const baseUrl = billingApiUrl.replace(/\/+$/, "");
-  const handlePay = (0, import_react9.useCallback)(async () => {
+  const handlePay = (0, import_react10.useCallback)(async () => {
     if (!stripe || !elements || isProcessing || submittingRef.current || !isMethodComplete) return;
     submittingRef.current = true;
     setSubmitting(true);
@@ -3077,8 +3162,7 @@ function StripeMethodInlineForm({
       if (!effectiveSessionId || !effectiveEmail) {
         throw new Error("Missing sessionId or email for payment.");
       }
-      const intentHeaders = { "Content-Type": "application/json" };
-      if (effectiveNonce) intentHeaders["x-checkout-session-token"] = effectiveNonce;
+      const intentHeaders = intentRequestHeaders(effectiveNonce);
       const intentResponse = await fetch(`${baseUrl}/v1/checkouts/payments/intents`, {
         method: "POST",
         headers: intentHeaders,
@@ -3132,9 +3216,8 @@ function StripeMethodInlineForm({
         onDecline?.(buildDeclineEvent("card", message, { code: confirmError.code }));
         return;
       }
-      const SUCCESSFUL_PI_STATUSES = /* @__PURE__ */ new Set(["succeeded", "requires_capture", "processing"]);
       const piStatus = paymentIntent?.status;
-      if (!piStatus || !SUCCESSFUL_PI_STATUSES.has(piStatus)) {
+      if (!isSuccessfulPaymentIntentStatus(piStatus)) {
         if (typeof window !== "undefined") {
           try {
             localStorage.removeItem(STRIPE_RESUME_KEY);
@@ -3187,8 +3270,8 @@ function StripeMethodInlineForm({
     onDecline
   ]);
   void onCancel;
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { "data-testid": `flopay-stripe-method-form-${method}`, style: { display: "flex", flexDirection: "column" }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { "data-testid": `flopay-stripe-method-form-${method}`, style: { display: "flex", flexDirection: "column" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
       import_react_stripe_js.PaymentElement,
       {
         onReady: () => setLoadState("ready"),
@@ -3217,7 +3300,7 @@ function StripeMethodInlineForm({
         }
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
       "button",
       {
         type: "button",
@@ -3244,22 +3327,7 @@ function StripeMethodInlineForm({
         children: submitting ? "Processing\u2026" : `Pay with ${(0, import_shared5.getStripeMethodDisplayName)(method)}`
       }
     ),
-    errorText && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { role: "alert", "data-testid": "flopay-error", style: {
-      margin: "0.75rem 0 0",
-      padding: "0.625rem 0.875rem",
-      background: "#FEF2F2",
-      border: "1px solid #FECACA",
-      borderRadius: "8px",
-      color: "#991B1B",
-      fontSize: "0.85rem",
-      fontWeight: 600,
-      display: "flex",
-      alignItems: "center",
-      gap: "0.5rem"
-    }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", style: { flexShrink: 0 }, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: "M12 9v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z", stroke: "#DC2626", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }),
-      errorText
-    ] })
+    errorText && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ErrorBanner, { margin: "0.75rem 0 0", children: errorText })
   ] });
 }
 function StripePaymentElementInner({
@@ -3287,17 +3355,17 @@ function StripePaymentElementInner({
   expandedApmMethod
 }) {
   const baseUrl = billingApiUrl.replace(/\/+$/, "");
-  const [expandedMethod, setExpandedMethod] = (0, import_react9.useState)(null);
-  const [submittingMethod, setSubmittingMethod] = (0, import_react9.useState)(null);
-  const submittingRef = (0, import_react9.useRef)(false);
-  (0, import_react9.useEffect)(() => {
+  const [expandedMethod, setExpandedMethod] = (0, import_react10.useState)(null);
+  const [submittingMethod, setSubmittingMethod] = (0, import_react10.useState)(null);
+  const submittingRef = (0, import_react10.useRef)(false);
+  (0, import_react10.useEffect)(() => {
     if (paymentElementMethods.length > 0 && stripeInstance) {
       onLoadStateChange?.("ready");
     } else if (!stripeInstance) {
       onLoadStateChange?.("loading");
     }
   }, [paymentElementMethods.length, stripeInstance, onLoadStateChange]);
-  const handleAutoConfirm = (0, import_react9.useCallback)(async (method) => {
+  const handleAutoConfirm = (0, import_react10.useCallback)(async (method) => {
     if (!stripeInstance) return;
     if (submittingRef.current || isProcessing) return;
     submittingRef.current = true;
@@ -3317,8 +3385,7 @@ function StripePaymentElementInner({
       if (!effectiveSessionId || !effectiveEmail) {
         throw new Error("Missing sessionId or email for payment.");
       }
-      const intentHeaders = { "Content-Type": "application/json" };
-      if (effectiveNonce) intentHeaders["x-checkout-session-token"] = effectiveNonce;
+      const intentHeaders = intentRequestHeaders(effectiveNonce);
       const intentResponse = await fetch(`${baseUrl}/v1/checkouts/payments/intents`, {
         method: "POST",
         headers: intentHeaders,
@@ -3384,9 +3451,8 @@ function StripePaymentElementInner({
         onDecline?.(buildDeclineEvent("card", message, { code: confirmError.code }));
         return;
       }
-      const SUCCESSFUL_PI_STATUSES = /* @__PURE__ */ new Set(["succeeded", "requires_capture", "processing"]);
       const piStatus = paymentIntent?.status;
-      if (!piStatus || !SUCCESSFUL_PI_STATUSES.has(piStatus)) {
+      if (!isSuccessfulPaymentIntentStatus(piStatus)) {
         if (typeof window !== "undefined") {
           try {
             localStorage.removeItem(STRIPE_RESUME_KEY);
@@ -3436,9 +3502,9 @@ function StripePaymentElementInner({
     onErrorChange,
     onDecline
   ]);
-  const [localExpandedMethod, setLocalExpandedMethod] = (0, import_react9.useState)(null);
+  const [localExpandedMethod, setLocalExpandedMethod] = (0, import_react10.useState)(null);
   const activeExpandedMethod = onExpandApm ? expandedApmMethod ?? null : localExpandedMethod;
-  const handleMethodClick = (0, import_react9.useCallback)((method) => {
+  const handleMethodClick = (0, import_react10.useCallback)((method) => {
     if (submittingRef.current || isProcessing) return;
     if (activeExpandedMethod && activeExpandedMethod !== method) return;
     if ((0, import_shared5.needsStripeMethodExplicitConfirm)(method)) {
@@ -3451,14 +3517,14 @@ function StripePaymentElementInner({
       void handleAutoConfirm(method);
     }
   }, [activeExpandedMethod, isProcessing, handleAutoConfirm, onExpandApm]);
-  const localInlineElementsOptions = (0, import_react9.useMemo)(() => {
+  const localInlineElementsOptions = (0, import_react10.useMemo)(() => {
     if (!localExpandedMethod) return null;
     return {
       ...paymentElementBaseOptions,
       paymentMethodTypes: [localExpandedMethod]
     };
   }, [localExpandedMethod, paymentElementBaseOptions]);
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
     "div",
     {
       "data-testid": "flopay-stripe-payment-element-region",
@@ -3467,8 +3533,8 @@ function StripePaymentElementInner({
         const isExpanded = expandedApmMethod === method;
         const isSubmittingThis = submittingMethod === method;
         const otherInProgress = submittingMethod !== null && submittingMethod !== method || expandedApmMethod !== null && expandedApmMethod !== void 0 && expandedApmMethod !== method;
-        return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_react9.default.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_react10.default.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
             StripeMethodButton,
             {
               method,
@@ -3485,12 +3551,12 @@ function StripePaymentElementInner({
               fontFamily: buttonAppearance?.fontFamily
             }
           ),
-          !onExpandApm && localExpandedMethod === method && localInlineElementsOptions && stripeInstance && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          !onExpandApm && localExpandedMethod === method && localInlineElementsOptions && stripeInstance && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
             import_react_stripe_js.Elements,
             {
               stripe: stripeInstance,
               options: localInlineElementsOptions,
-              children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+              children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                 StripeMethodInlineForm,
                 {
                   method,
@@ -3584,41 +3650,41 @@ function SplitCardFormInner({
   const flopay = useFloPay();
   const paypalFlopay = usePayPalFloPay();
   const elements = useElements();
-  const checkout = (0, import_react9.useContext)(CheckoutContext);
+  const checkout = (0, import_react10.useContext)(CheckoutContext);
   const contextBillingUrl = useBillingApiUrl();
-  const [processing, setProcessing] = (0, import_react9.useState)(false);
-  const [error, setError] = (0, import_react9.useState)(null);
-  const [is3DSActive, setIs3DSActive] = (0, import_react9.useState)(false);
-  const [selectedCountry, setSelectedCountry] = (0, import_react9.useState)(countryProp ?? "US");
-  const [zipCode, setZipCode] = (0, import_react9.useState)(zipProp ?? "");
-  const [addressLine1, setAddressLine1] = (0, import_react9.useState)(addressLine1Prop ?? "");
-  const [addressLine2, setAddressLine2] = (0, import_react9.useState)(addressLine2Prop ?? "");
-  const [city, setCity] = (0, import_react9.useState)(cityProp ?? "");
-  const [stateValue, setStateValue] = (0, import_react9.useState)(stateProp ?? "");
-  const [accountPatch, setAccountPatch] = (0, import_react9.useState)({});
-  const zipCodeRef = (0, import_react9.useRef)(zipProp ?? "");
-  const selectedCountryRef = (0, import_react9.useRef)(countryProp ?? "US");
-  const addressLine1Ref = (0, import_react9.useRef)(addressLine1Prop ?? "");
-  const addressLine2Ref = (0, import_react9.useRef)(addressLine2Prop ?? "");
-  const cityRef = (0, import_react9.useRef)(cityProp ?? "");
-  const stateRef = (0, import_react9.useRef)(stateProp ?? "");
-  const avsConfig = (0, import_react9.useMemo)(() => (0, import_shared5.resolveAVSConfig)(enableAVSProp), [enableAVSProp]);
+  const [processing, setProcessing] = (0, import_react10.useState)(false);
+  const [error, setError] = (0, import_react10.useState)(null);
+  const [is3DSActive, setIs3DSActive] = (0, import_react10.useState)(false);
+  const [selectedCountry, setSelectedCountry] = (0, import_react10.useState)(countryProp ?? "US");
+  const [zipCode, setZipCode] = (0, import_react10.useState)(zipProp ?? "");
+  const [addressLine1, setAddressLine1] = (0, import_react10.useState)(addressLine1Prop ?? "");
+  const [addressLine2, setAddressLine2] = (0, import_react10.useState)(addressLine2Prop ?? "");
+  const [city, setCity] = (0, import_react10.useState)(cityProp ?? "");
+  const [stateValue, setStateValue] = (0, import_react10.useState)(stateProp ?? "");
+  const [accountPatch, setAccountPatch] = (0, import_react10.useState)({});
+  const zipCodeRef = (0, import_react10.useRef)(zipProp ?? "");
+  const selectedCountryRef = (0, import_react10.useRef)(countryProp ?? "US");
+  const addressLine1Ref = (0, import_react10.useRef)(addressLine1Prop ?? "");
+  const addressLine2Ref = (0, import_react10.useRef)(addressLine2Prop ?? "");
+  const cityRef = (0, import_react10.useRef)(cityProp ?? "");
+  const stateRef = (0, import_react10.useRef)(stateProp ?? "");
+  const avsConfig = (0, import_react10.useMemo)(() => (0, import_shared5.resolveAVSConfig)(enableAVSProp), [enableAVSProp]);
   const enableAVS = avsConfig !== null;
   const vaultBlockReady = Boolean(session?.vault?.html);
   const vaultGatewayAdvertised = Boolean(session?.gateways?.pcivault);
   const vaultActive = Boolean(
     showStripe && (vaultBlockReady || vaultGatewayAdvertised) && flopay && sessionId
   );
-  const cardCapture = (0, import_react9.useMemo)(() => {
+  const cardCapture = (0, import_react10.useMemo)(() => {
     if (!flopay || !vaultActive || !sessionId) return null;
     return flopay.cardCapture({ sessionId });
   }, [flopay, vaultActive, sessionId]);
-  const postalCodeState = (0, import_react9.useMemo)(() => {
+  const postalCodeState = (0, import_react10.useMemo)(() => {
     const cc = selectedCountry;
     const visible = avsConfig ? (0, import_shared5.isAVSFieldVisible)(avsConfig.postal_code, cc) : false;
     return computePostalCodeState(cc, zipCode, visible);
   }, [avsConfig, selectedCountry, zipCode]);
-  const { avsInvalid, invalidAvsFields } = (0, import_react9.useMemo)(() => {
+  const { avsInvalid, invalidAvsFields } = (0, import_react10.useMemo)(() => {
     const none = { line1: false, city: false, state: false, zip: false };
     if (!vaultActive || !avsConfig) return { avsInvalid: false, invalidAvsFields: none };
     const cc = selectedCountry;
@@ -3634,53 +3700,53 @@ function SplitCardFormInner({
     const avsInvalid2 = invalidAvsFields2.line1 || invalidAvsFields2.city || invalidAvsFields2.state || invalidAvsFields2.zip;
     return { avsInvalid: avsInvalid2, invalidAvsFields: invalidAvsFields2 };
   }, [vaultActive, avsConfig, selectedCountry, addressLine1, city, stateValue, postalCodeState]);
-  const [hasAttemptedSubmit, setHasAttemptedSubmit] = (0, import_react9.useState)(false);
-  const [zipTouched, setZipTouched] = (0, import_react9.useState)(false);
-  const [vaultMount, setVaultMount] = (0, import_react9.useState)(
+  const [hasAttemptedSubmit, setHasAttemptedSubmit] = (0, import_react10.useState)(false);
+  const [zipTouched, setZipTouched] = (0, import_react10.useState)(false);
+  const [vaultMount, setVaultMount] = (0, import_react10.useState)(
     () => toVaultMount(session?.vault)
   );
-  const [viewState, setViewState] = (0, import_react9.useState)(initialCardOpen ? "card" : "buttons");
-  const [expandedApmMethod, setExpandedApmMethod] = (0, import_react9.useState)(null);
+  const [viewState, setViewState] = (0, import_react10.useState)(initialCardOpen ? "card" : "buttons");
+  const [expandedApmMethod, setExpandedApmMethod] = (0, import_react10.useState)(null);
   const showCardForm = viewState === "expanding" || viewState === "card";
   const TRANSITION_MS = 280;
-  const expandToCard = (0, import_react9.useCallback)(() => {
+  const expandToCard = (0, import_react10.useCallback)(() => {
     setViewState("expanding");
     setTimeout(() => setViewState("card"), TRANSITION_MS);
   }, []);
-  const collapseToButtons = (0, import_react9.useCallback)(() => {
+  const collapseToButtons = (0, import_react10.useCallback)(() => {
     setViewState("collapsing");
     setTimeout(() => setViewState("buttons"), TRANSITION_MS);
   }, []);
-  const expandToApm = (0, import_react9.useCallback)((method) => {
+  const expandToApm = (0, import_react10.useCallback)((method) => {
     setExpandedApmMethod(method);
     setViewState("apm-expanding");
     setTimeout(() => setViewState("apm-form"), TRANSITION_MS);
   }, []);
-  const collapseFromApm = (0, import_react9.useCallback)(() => {
+  const collapseFromApm = (0, import_react10.useCallback)(() => {
     setViewState("apm-collapsing");
     setTimeout(() => {
       setViewState("buttons");
       setExpandedApmMethod(null);
     }, TRANSITION_MS);
   }, []);
-  (0, import_react9.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     if (layout === "buttons" && initialCardOpen) {
       setViewState("card");
     }
   }, [layout, initialCardOpen]);
-  const [fullName, setFullName] = (0, import_react9.useState)("");
-  const [formReady, setFormReady] = (0, import_react9.useState)(false);
-  const [overlayStatus, setOverlayStatus] = (0, import_react9.useState)(null);
-  const processingRef = (0, import_react9.useRef)(false);
-  const [paypalDirectRetry, setPaypalDirectRetry] = (0, import_react9.useState)(null);
-  const paypalDirectRetryRef = (0, import_react9.useRef)(paypalDirectRetry);
-  (0, import_react9.useEffect)(() => {
+  const [fullName, setFullName] = (0, import_react10.useState)("");
+  const [formReady, setFormReady] = (0, import_react10.useState)(false);
+  const [overlayStatus, setOverlayStatus] = (0, import_react10.useState)(null);
+  const processingRef = (0, import_react10.useRef)(false);
+  const [paypalDirectRetry, setPaypalDirectRetry] = (0, import_react10.useState)(null);
+  const paypalDirectRetryRef = (0, import_react10.useRef)(paypalDirectRetry);
+  (0, import_react10.useEffect)(() => {
     paypalDirectRetryRef.current = paypalDirectRetry;
   }, [paypalDirectRetry]);
   const resolvedBillingApiUrl = billingApiUrl || contextBillingUrl;
   const displayError = externalError ?? error;
-  const themeBundle = (0, import_react9.useMemo)(() => (0, import_shared6.resolveTheme)(theme), [theme]);
-  const bStyles = (0, import_react9.useMemo)(() => {
+  const themeBundle = (0, import_react10.useMemo)(() => (0, import_shared6.resolveTheme)(theme), [theme]);
+  const bStyles = (0, import_react10.useMemo)(() => {
     const base = themeBundle?.buttonsLayout ?? (0, import_shared5.resolveButtonsLayoutTheme)(buttonsTheme);
     if (!buttonsStylesOverride) return base;
     return {
@@ -3695,7 +3761,7 @@ function SplitCardFormInner({
     };
   }, [themeBundle, buttonsTheme, buttonsStylesOverride]);
   const appearance = appearanceOverride ?? themeBundle?.appearance;
-  const vaultThemeColors = (0, import_react9.useMemo)(() => {
+  const vaultThemeColors = (0, import_react10.useMemo)(() => {
     const vars = appearance?.variables;
     const asString = (value) => typeof value === "string" && value ? value : void 0;
     const submitButtonStyle = bStyles.submitButton;
@@ -3724,7 +3790,7 @@ function SplitCardFormInner({
   const isSubmitting = (externalProcessing ?? processing) || isInlineSessionPatchProcessing;
   const isSelfContained = !onTokenizedBody;
   const baseUrl = resolvedBillingApiUrl.replace(/\/+$/, "");
-  const resolvedAccount = (0, import_react9.useMemo)(() => mergeAccountPatch({
+  const resolvedAccount = (0, import_react10.useMemo)(() => mergeAccountPatch({
     userId,
     email,
     firstName,
@@ -3732,17 +3798,17 @@ function SplitCardFormInner({
     country: countryProp,
     zip: zipProp
   }, accountPatch), [userId, email, firstName, lastName, countryProp, zipProp, accountPatch]);
-  const stripeInstance = (0, import_react9.useMemo)(() => {
+  const stripeInstance = (0, import_react10.useMemo)(() => {
     if (!flopay) return null;
     return flopay.getRawProvider();
   }, [flopay]);
-  const paypalStripeInstance = (0, import_react9.useMemo)(() => {
+  const paypalStripeInstance = (0, import_react10.useMemo)(() => {
     if (!paypalFlopay) return null;
     return paypalFlopay.getRawProvider();
   }, [paypalFlopay]);
   const amountInCents = totalAmount || 100;
   const stripeAppearanceProp = appearance ? { appearance } : null;
-  const paymentElementAppearance = (0, import_react9.useMemo)(() => {
+  const paymentElementAppearance = (0, import_react10.useMemo)(() => {
     const base = appearance ?? {};
     const baseRules = base.rules ?? {};
     return {
@@ -3762,7 +3828,7 @@ function SplitCardFormInner({
       }
     };
   }, [appearance]);
-  const walletOptions = (0, import_react9.useMemo)(() => {
+  const walletOptions = (0, import_react10.useMemo)(() => {
     const modeOptions = resolveWalletElementsMode(totalAmount);
     return {
       ...modeOptions,
@@ -3773,7 +3839,7 @@ function SplitCardFormInner({
       ...stripeAppearanceProp
     };
   }, [totalAmount, currency, stripeAppearanceProp]);
-  const paypalOptions = (0, import_react9.useMemo)(() => ({
+  const paypalOptions = (0, import_react10.useMemo)(() => ({
     mode: "payment",
     amount: amountInCents,
     currency: currency.toLowerCase(),
@@ -3781,29 +3847,29 @@ function SplitCardFormInner({
     setupFutureUsage: "off_session",
     ...stripeAppearanceProp
   }), [amountInCents, currency, stripeAppearanceProp]);
-  const updateError = (0, import_react9.useCallback)(
+  const updateError = (0, import_react10.useCallback)(
     (err) => {
       setError(err);
       onErrorChange?.(err);
     },
     [onErrorChange]
   );
-  (0, import_react9.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     if (!vaultActive || !cardCapture) return;
     cardCapture.setCardFieldOrder?.(cardFieldOrder ?? null, avsConfig == null);
   }, [vaultActive, cardCapture, cardFieldOrder, avsConfig]);
-  (0, import_react9.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     if (viewState === "expanding" || viewState === "collapsing" || viewState === "apm-expanding" || viewState === "apm-collapsing") {
       updateError(null);
     }
   }, [viewState, updateError]);
-  const emitDecline = (0, import_react9.useCallback)(
+  const emitDecline = (0, import_react10.useCallback)(
     (method, input, overrides) => {
       onDecline?.(buildDeclineEvent(method, input, overrides));
     },
     [onDecline]
   );
-  const recoverExternalMethodTechnicalFailure = (0, import_react9.useCallback)(
+  const recoverExternalMethodTechnicalFailure = (0, import_react10.useCallback)(
     (method, err, options) => {
       const popupBlocked = options?.popupBlocked ?? isPopupBlockedError(err);
       const message = buildExternalMethodRecoveryMessage(method, popupBlocked);
@@ -3827,7 +3893,7 @@ function SplitCardFormInner({
     },
     [layout, onError, updateError]
   );
-  (0, import_react9.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     if (!vaultActive || !sessionId) {
       setVaultMount(null);
       return;
@@ -3865,7 +3931,7 @@ function SplitCardFormInner({
     nonce,
     updateError
   ]);
-  const vaultOutcomeRef = (0, import_react9.useRef)({
+  const vaultOutcomeRef = (0, import_react10.useRef)({
     onComplete,
     onError,
     updateError,
@@ -3891,8 +3957,8 @@ function SplitCardFormInner({
     nonce,
     baseUrl
   };
-  const vaultCompletedRef = (0, import_react9.useRef)(false);
-  const buildVaultAccountSnapshot = (0, import_react9.useCallback)(() => {
+  const vaultCompletedRef = (0, import_react10.useRef)(false);
+  const buildVaultAccountSnapshot = (0, import_react10.useCallback)(() => {
     const { resolvedAccount: resolvedAccount2, avsConfig: avsConfig2, fullName: fullName2, avsCheckProp: avsCheckProp2 } = vaultOutcomeRef.current;
     const cc = selectedCountryRef.current || resolvedAccount2.country || "US";
     const stateVisible = avsConfig2 ? (0, import_shared5.isAVSFieldVisible)(avsConfig2.state, cc) : false;
@@ -3928,11 +3994,11 @@ function SplitCardFormInner({
       } : {}
     };
   }, []);
-  (0, import_react9.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     if (!vaultActive || !cardCapture) return;
     cardCapture.setSubmitGate?.(avsInvalid);
   }, [vaultActive, cardCapture, avsInvalid]);
-  (0, import_react9.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     if (!vaultActive || !cardCapture) return;
     vaultCompletedRef.current = false;
     let cancelled = false;
@@ -3993,18 +4059,18 @@ function SplitCardFormInner({
   const hasEnabledMethodsPayload = Array.isArray(enabledPaymentMethods);
   const hasEnabledMethods = hasEnabledMethodsPayload && enabledPaymentMethods.length > 0;
   const paypalEnabled = hasEnabledMethodsPayload && enabledPaymentMethods.includes("paypal");
-  const { expressMethods, paymentElementMethods } = (0, import_react9.useMemo)(
+  const { expressMethods, paymentElementMethods } = (0, import_react10.useMemo)(
     () => (0, import_shared5.partitionStripeMethods)(enabledPaymentMethods, {
       excludePaypal: directPaypalConfigured
     }),
     [enabledPaymentMethods, directPaypalConfigured]
   );
   const paypalRenderedSeparately = directPaypalConfigured || !!paypalFlopay;
-  const expressMethodsForWalletRow = (0, import_react9.useMemo)(
+  const expressMethodsForWalletRow = (0, import_react10.useMemo)(
     () => paypalRenderedSeparately ? expressMethods.filter((m) => m !== "paypal") : expressMethods,
     [expressMethods, paypalRenderedSeparately]
   );
-  const legacyExpressMethods = (0, import_react9.useMemo)(() => {
+  const legacyExpressMethods = (0, import_react10.useMemo)(() => {
     const out = [];
     if (showApplePay) out.push("apple_pay");
     if (showGooglePay) out.push("google_pay");
@@ -4013,7 +4079,7 @@ function SplitCardFormInner({
   const walletExpressMethods = hasEnabledMethodsPayload ? expressMethodsForWalletRow : legacyExpressMethods;
   const showWallets = showStripe && walletExpressMethods.length > 0;
   const apmCountry = enableAVS ? selectedCountry : countryProp;
-  const paymentElementMethodsForCurrency = (0, import_react9.useMemo)(() => {
+  const paymentElementMethodsForCurrency = (0, import_react10.useMemo)(() => {
     const target = apmCountry?.trim().toUpperCase();
     if (!target) return paymentElementMethods;
     if (!enabledPaymentMethodCountries) {
@@ -4024,19 +4090,19 @@ function SplitCardFormInner({
       return !allowed || allowed.length === 0 || allowed.includes(target);
     });
   }, [paymentElementMethods, apmCountry, enabledPaymentMethodCountries]);
-  const paymentElementBaseOptions = (0, import_react9.useMemo)(() => ({
+  const paymentElementBaseOptions = (0, import_react10.useMemo)(() => ({
     mode: "payment",
     amount: amountInCents,
     currency: currency.toLowerCase(),
     paymentMethodCreation: "manual",
     appearance: paymentElementAppearance
   }), [amountInCents, currency, paymentElementAppearance]);
-  const [paypalLoadState, setPaypalLoadState] = (0, import_react9.useState)("loading");
-  const [walletLoadState, setWalletLoadState] = (0, import_react9.useState)("loading");
-  const [paymentElementLoadState, setPaymentElementLoadState] = (0, import_react9.useState)("loading");
-  const [directPaypalReady, setDirectPaypalReady] = (0, import_react9.useState)(false);
-  const [inAppBrowserDetected, setInAppBrowserDetected] = (0, import_react9.useState)();
-  (0, import_react9.useEffect)(() => {
+  const [paypalLoadState, setPaypalLoadState] = (0, import_react10.useState)("loading");
+  const [walletLoadState, setWalletLoadState] = (0, import_react10.useState)("loading");
+  const [paymentElementLoadState, setPaymentElementLoadState] = (0, import_react10.useState)("loading");
+  const [directPaypalReady, setDirectPaypalReady] = (0, import_react10.useState)(false);
+  const [inAppBrowserDetected, setInAppBrowserDetected] = (0, import_react10.useState)();
+  (0, import_react10.useEffect)(() => {
     setInAppBrowserDetected(isInAppBrowser());
   }, []);
   const shouldShowPayPal = showPayPal && (directPaypalConfigured || (hasEnabledMethodsPayload ? paypalEnabled : inAppBrowserDetected === false));
@@ -4048,8 +4114,8 @@ function SplitCardFormInner({
   const shouldDisplayPayPalRow = shouldRenderDirectPayPal ? directPaypalReady : shouldRenderStripePayPal && isExpressCheckoutRowVisible(paypalLoadState);
   const shouldDisplayWalletRow = shouldRenderWallets && isExpressCheckoutRowVisible(walletLoadState);
   const shouldDisplayPaymentElementRow = shouldRenderPaymentElement && paymentElementLoadState !== "load_error";
-  const validationFiredRef = (0, import_react9.useRef)(false);
-  (0, import_react9.useEffect)(() => {
+  const validationFiredRef = (0, import_react10.useRef)(false);
+  (0, import_react10.useEffect)(() => {
     if (validationFiredRef.current) return;
     if (!showStripe && !showPayPal) {
       validationFiredRef.current = true;
@@ -4069,8 +4135,8 @@ function SplitCardFormInner({
       updateError(err.message);
     }
   }, [showStripe, showPayPal, directPaypalConfigured, paypalStripeInstance, onError, updateError]);
-  const deprecationLoggedRef = (0, import_react9.useRef)(false);
-  (0, import_react9.useEffect)(() => {
+  const deprecationLoggedRef = (0, import_react10.useRef)(false);
+  (0, import_react10.useEffect)(() => {
     if (deprecationLoggedRef.current) return;
     if (!hasEnabledMethods) return;
     const stale = [];
@@ -4082,14 +4148,14 @@ function SplitCardFormInner({
       `[FloPay] ${stale.join(" / ")} ${stale.length === 1 ? "is" : "are"} deprecated: the Apple Pay / Google Pay surface is now driven by \`gateways.stripe.enabledPaymentMethods\` on the session response. Remove the legacy prop(s) to silence this warning.`
     );
   }, [hasEnabledMethods, showApplePay, showGooglePay]);
-  const handleNameChange = (0, import_react9.useCallback)((value) => {
+  const handleNameChange = (0, import_react10.useCallback)((value) => {
     setFullName(value);
     onFullNameChange?.(value);
     const parts = value.trim().split(/\s+/);
     onFirstNameChange?.(parts[0] ?? "");
     onLastNameChange?.(parts.length > 1 ? parts.slice(1).join(" ") : "");
   }, [onFullNameChange, onFirstNameChange, onLastNameChange]);
-  const applyInlineSessionPatch = (0, import_react9.useCallback)(
+  const applyInlineSessionPatch = (0, import_react10.useCallback)(
     (patch, method) => {
       if (!checkout.applyInlineSessionPatch) {
         return Promise.resolve({ error: null, sessionId, nonce });
@@ -4111,7 +4177,7 @@ function SplitCardFormInner({
     },
     [checkout.applyInlineSessionPatch, nonce, onError, sessionId, updateError]
   );
-  const runBeforeButtonClick = (0, import_react9.useCallback)(async (method) => {
+  const runBeforeButtonClick = (0, import_react10.useCallback)(async (method) => {
     if (!onBeforeButtonClick) return { proceed: true };
     try {
       const result = await onBeforeButtonClick({
@@ -4148,7 +4214,7 @@ function SplitCardFormInner({
       return { proceed: false };
     }
   }, [applyInlineSessionPatch, checkout.inlineSessionDraft, onBeforeButtonClick, onError, sessionId, updateError]);
-  const processPaymentInternal = (0, import_react9.useCallback)(
+  const processPaymentInternal = (0, import_react10.useCallback)(
     async (tokenizedBody, overrides) => {
       if (processingRef.current) return;
       processingRef.current = true;
@@ -4359,7 +4425,7 @@ function SplitCardFormInner({
     },
     [baseUrl, sessionId, nonce, resolvedAccount, fullName, chv, flopay, paypalFlopay, onComplete, onError, updateError, emitDecline]
   );
-  const dispatchTokenizedBody = (0, import_react9.useCallback)(
+  const dispatchTokenizedBody = (0, import_react10.useCallback)(
     (tokenizedBody, overrides) => {
       if (onTokenizedBody) {
         onTokenizedBody(tokenizedBody);
@@ -4369,7 +4435,7 @@ function SplitCardFormInner({
     },
     [onTokenizedBody, processPaymentInternal]
   );
-  (0, import_react9.useImperativeHandle)(innerRef, () => ({
+  (0, import_react10.useImperativeHandle)(innerRef, () => ({
     async handleNextAction(secret) {
       if (!flopay) return;
       setIs3DSActive(true);
@@ -4396,8 +4462,8 @@ function SplitCardFormInner({
       }
     }
   }), [flopay, dispatchTokenizedBody, onError, updateError, emitDecline]);
-  const stripeResumeAttemptedRef = (0, import_react9.useRef)(false);
-  (0, import_react9.useEffect)(() => {
+  const stripeResumeAttemptedRef = (0, import_react10.useRef)(false);
+  (0, import_react10.useEffect)(() => {
     if (typeof window === "undefined" || stripeResumeAttemptedRef.current) return;
     const params = new URLSearchParams(window.location.search);
     const paymentIntentId = params.get("payment_intent");
@@ -4458,7 +4524,7 @@ function SplitCardFormInner({
         return;
       }
       const piStatus = paymentIntent?.status;
-      const successful = piStatus === "succeeded" || piStatus === "requires_capture" || piStatus === "processing";
+      const successful = isSuccessfulPaymentIntentStatus(piStatus);
       if (!paymentIntent || !successful) {
         const message = piStatus === "canceled" ? "Payment was canceled." : "Payment was not completed. Please try again.";
         updateError(message);
@@ -4475,7 +4541,7 @@ function SplitCardFormInner({
       }, persistedOverrides);
     })();
   }, [sessionId, dispatchTokenizedBody, flopay, updateError, emitDecline]);
-  const handleSubmit = (0, import_react9.useCallback)(
+  const handleSubmit = (0, import_react10.useCallback)(
     async (e) => {
       e.preventDefault();
       if (!flopay || !elements || isSubmitting || processingRef.current) return;
@@ -4558,8 +4624,7 @@ function SplitCardFormInner({
             updateError(pmResult.error?.message ?? "Failed to create payment method.");
             return;
           }
-          const intentHeaders = { "Content-Type": "application/json" };
-          if (nonce) intentHeaders["x-checkout-session-token"] = nonce;
+          const intentHeaders = intentRequestHeaders(nonce);
           const intentResponse = await fetch(`${baseUrl}/v1/checkouts/payments/intents`, {
             method: "POST",
             headers: intentHeaders,
@@ -4635,7 +4700,7 @@ function SplitCardFormInner({
   );
   const isReady = flopay !== null && (vaultActive || elements !== null);
   if (!isReady) {
-    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { "data-testid": "flopay-loading", "aria-busy": "true", children: "Loading payment form..." });
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { "data-testid": "flopay-loading", "aria-busy": "true", children: "Loading payment form..." });
   }
   const isButtons = layout === "buttons";
   const appearanceVars = appearance?.variables;
@@ -4694,7 +4759,7 @@ function SplitCardFormInner({
   const containerOverrides = bStyles.cardFormContainer ?? {};
   const containerPadding = containerOverrides.padding ?? (isButtons ? "0" : "1rem");
   const containerRadius = containerOverrides.borderRadius ?? resolvedBorderRadius;
-  const vaultCardFieldsNode = cardCapture && vaultMount ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+  const vaultCardFieldsNode = cardCapture && vaultMount ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
     VaultCardFields,
     {
       capture: cardCapture,
@@ -4732,7 +4797,7 @@ function SplitCardFormInner({
         if (message) setOverlayStatus(null);
       }
     }
-  ) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+  ) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
     "div",
     {
       "data-testid": "flopay-vault-loading",
@@ -4747,7 +4812,7 @@ function SplitCardFormInner({
       children: "Loading secure card form\u2026"
     }
   );
-  const cardFormBlock = /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: {
+  const cardFormBlock = /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: {
     backgroundColor: cardBg,
     borderRadius: containerRadius,
     ...containerOverrides,
@@ -4760,7 +4825,7 @@ function SplitCardFormInner({
     display: "flex",
     flexDirection: "column"
   }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("style", { children: `
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("style", { children: `
         .flopay-shared-input::placeholder {
           color: var(--flopay-input-placeholder-color);
           opacity: 1;
@@ -4769,14 +4834,14 @@ function SplitCardFormInner({
           font-weight: var(--flopay-input-font-weight);
         }
       ` }),
-    isButtons && showCardForm && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: {
+    isButtons && showCardForm && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: {
       display: "flex",
       alignItems: "center",
       padding: "0.75rem 0 0.625rem",
       // Keep the header on top when AVS is ordered above the card on vault.
       order: vaultActive ? -2 : 0
     }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
         "button",
         {
           type: "button",
@@ -4798,7 +4863,7 @@ function SplitCardFormInner({
           },
           "aria-label": "Back to payment methods",
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { style: {
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { style: {
               display: "inline-flex",
               alignItems: "center",
               justifyContent: "center",
@@ -4808,12 +4873,12 @@ function SplitCardFormInner({
               backgroundColor: "#f3f4f6",
               transition: "background-color 0.15s",
               ...bStyles.backButtonIcon
-            }, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: "M15 18l-6-6 6-6" }) }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(BackButtonContentSlot, { content: cardBackButtonContent })
+            }, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("path", { d: "M15 18l-6-6 6-6" }) }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(BackButtonContentSlot, { content: cardBackButtonContent })
           ]
         }
       ),
-      hideTitle ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: { flex: 1 } }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: {
+      hideTitle ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: { flex: 1 } }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: {
         flex: 1,
         textAlign: "center",
         fontWeight: 600,
@@ -4821,9 +4886,9 @@ function SplitCardFormInner({
         color: "#262833",
         paddingRight: 80,
         ...bStyles.title
-      }, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(TitleContentSlot, { content: cardTitleContent }) })
+      }, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(TitleContentSlot, { content: cardTitleContent }) })
     ] }),
-    !isButtons && !hideTitle && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: {
+    !isButtons && !hideTitle && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: {
       textAlign: "center",
       fontWeight: 600,
       fontSize: "1.1rem",
@@ -4833,17 +4898,17 @@ function SplitCardFormInner({
       // (-2) and AVS block (-1) are ordered below it but above the card form.
       order: vaultActive ? -3 : 0,
       ...bStyles.title
-    }, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(TitleContentSlot, { content: cardTitleContent }) }),
-    !vaultActive && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: {
+    }, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(TitleContentSlot, { content: cardTitleContent }) }),
+    !vaultActive && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: {
         backgroundColor: cardInputBg,
         border: `1px solid ${resolvedBorder}`,
         borderTopLeftRadius: resolvedBorderRadius,
         borderTopRightRadius: resolvedBorderRadius,
         padding: "10px"
-      }, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CardNumberElement, { onReady: () => setFormReady(true), options: stripeElementStyle }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: { display: "flex" }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: {
+      }, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(CardNumberElement, { onReady: () => setFormReady(true), options: stripeElementStyle }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: { display: "flex" }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: {
           flex: 1,
           backgroundColor: cardInputBg,
           // Longhand only — mixing `border` shorthand with per-side
@@ -4855,8 +4920,8 @@ function SplitCardFormInner({
           borderLeft: `1px solid ${resolvedBorder}`,
           borderBottomLeftRadius: resolvedBorderRadius,
           padding: "10px"
-        }, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CardExpiryElement, { options: stripeElementStyle }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: {
+        }, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(CardExpiryElement, { options: stripeElementStyle }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: {
           flex: 1,
           backgroundColor: cardInputBg,
           borderTop: "none",
@@ -4865,16 +4930,16 @@ function SplitCardFormInner({
           borderLeft: `1px solid ${resolvedBorder}`,
           borderBottomRightRadius: resolvedBorderRadius,
           padding: "10px"
-        }, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CardCvcElement, { options: stripeElementStyle }) })
+        }, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(CardCvcElement, { options: stripeElementStyle }) })
       ] })
     ] }),
-    !vaultActive && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: {
+    !vaultActive && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: {
       backgroundColor: cardInputBg,
       border: `1px solid ${resolvedBorder}`,
       borderRadius: resolvedBorderRadius,
       marginTop: "0.5rem",
       padding: "10px"
-    }, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    }, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
       "input",
       {
         className: "flopay-shared-input",
@@ -4896,7 +4961,7 @@ function SplitCardFormInner({
         }
       }
     ) }),
-    avsConfig && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: { order: vaultActive ? -1 : 0 }, "data-testid": "flopay-avs-fields", children: (() => {
+    avsConfig && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: { order: vaultActive ? -1 : 0 }, "data-testid": "flopay-avs-fields", children: (() => {
       const cc = selectedCountry;
       const inputWrapStyle = (invalid = false) => ({
         backgroundColor: cardInputBg,
@@ -4913,8 +4978,8 @@ function SplitCardFormInner({
         ...sharedInputTypography
       });
       const stateOpts = (0, import_shared5.getStateOptions)(cc);
-      return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
-        (0, import_shared5.isAVSFieldVisible)(avsConfig.address_line_1, cc) && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: inputWrapStyle(invalidAvsFields.line1), children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
+        (0, import_shared5.isAVSFieldVisible)(avsConfig.address_line_1, cc) && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: inputWrapStyle(invalidAvsFields.line1), children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
           "input",
           {
             className: "flopay-shared-input",
@@ -4933,7 +4998,7 @@ function SplitCardFormInner({
             style: inputFieldStyle()
           }
         ) }),
-        (0, import_shared5.isAVSFieldVisible)(avsConfig.address_line_2, cc) && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: inputWrapStyle(), children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        (0, import_shared5.isAVSFieldVisible)(avsConfig.address_line_2, cc) && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: inputWrapStyle(), children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
           "input",
           {
             className: "flopay-shared-input",
@@ -4951,12 +5016,12 @@ function SplitCardFormInner({
             style: inputFieldStyle()
           }
         ) }),
-        ((0, import_shared5.isAVSFieldVisible)(avsConfig.city, cc) || (0, import_shared5.isAVSFieldVisible)(avsConfig.state, cc)) && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: {
+        ((0, import_shared5.isAVSFieldVisible)(avsConfig.city, cc) || (0, import_shared5.isAVSFieldVisible)(avsConfig.state, cc)) && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: {
           display: "flex",
           gap: "0",
           marginTop: "0.5rem"
         }, children: [
-          (0, import_shared5.isAVSFieldVisible)(avsConfig.city, cc) && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: {
+          (0, import_shared5.isAVSFieldVisible)(avsConfig.city, cc) && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: {
             flex: 1,
             backgroundColor: cardInputBg,
             borderTop: `1px solid ${avsBorderColor(invalidAvsFields.city)}`,
@@ -4967,7 +5032,7 @@ function SplitCardFormInner({
             borderTopLeftRadius: resolvedBorderRadius,
             borderBottomLeftRadius: resolvedBorderRadius,
             ...(0, import_shared5.isAVSFieldVisible)(avsConfig.state, cc) ? { borderRight: "none", borderTopRightRadius: 0, borderBottomRightRadius: 0 } : { borderRadius: resolvedBorderRadius }
-          }, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          }, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
             "input",
             {
               className: "flopay-shared-input",
@@ -4986,7 +5051,7 @@ function SplitCardFormInner({
               style: inputFieldStyle()
             }
           ) }),
-          (0, import_shared5.isAVSFieldVisible)(avsConfig.state, cc) && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: {
+          (0, import_shared5.isAVSFieldVisible)(avsConfig.state, cc) && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: {
             flex: 1,
             backgroundColor: cardInputBg,
             border: `1px solid ${avsBorderColor(invalidAvsFields.state)}`,
@@ -4994,7 +5059,7 @@ function SplitCardFormInner({
             borderTopRightRadius: resolvedBorderRadius,
             borderBottomRightRadius: resolvedBorderRadius,
             ...(0, import_shared5.isAVSFieldVisible)(avsConfig.city, cc) ? { borderTopLeftRadius: 0, borderBottomLeftRadius: 0 } : { borderRadius: resolvedBorderRadius }
-          }, children: stateOpts ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+          }, children: stateOpts ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
             "select",
             {
               id: "flopay-billing-state",
@@ -5010,11 +5075,11 @@ function SplitCardFormInner({
               "data-testid": "flopay-state",
               style: { ...inputFieldStyle(), cursor: "pointer" },
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("option", { value: "", children: (0, import_shared5.getStateLabel)(cc) }),
-                stateOpts.map((s) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("option", { value: s.code, children: s.name }, s.code))
+                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("option", { value: "", children: (0, import_shared5.getStateLabel)(cc) }),
+                stateOpts.map((s) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("option", { value: s.code, children: s.name }, s.code))
               ]
             }
-          ) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          ) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
             "input",
             {
               className: "flopay-shared-input",
@@ -5034,13 +5099,13 @@ function SplitCardFormInner({
             }
           ) })
         ] }),
-        ((0, import_shared5.isAVSFieldVisible)(avsConfig.country, cc) || (0, import_shared5.isAVSFieldVisible)(avsConfig.postal_code, cc)) && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: {
+        ((0, import_shared5.isAVSFieldVisible)(avsConfig.country, cc) || (0, import_shared5.isAVSFieldVisible)(avsConfig.postal_code, cc)) && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: {
           display: "flex",
           flexDirection: avsLayoutProp === "column" ? "column" : "row",
           gap: avsLayoutProp === "column" ? "0.5rem" : "0",
           marginTop: "0.5rem"
         }, children: [
-          (0, import_shared5.isAVSFieldVisible)(avsConfig.country, cc) && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: {
+          (0, import_shared5.isAVSFieldVisible)(avsConfig.country, cc) && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: {
             flex: avsLayoutProp === "row" ? 1 : void 0,
             backgroundColor: cardInputBg,
             borderTop: `1px solid ${resolvedBorder}`,
@@ -5049,7 +5114,7 @@ function SplitCardFormInner({
             borderLeft: `1px solid ${resolvedBorder}`,
             padding: "10px",
             ...avsLayoutProp === "row" && (0, import_shared5.isAVSFieldVisible)(avsConfig.postal_code, cc) ? { borderRadius: "0", borderTopLeftRadius: resolvedBorderRadius, borderBottomLeftRadius: resolvedBorderRadius, borderRight: "none" } : { borderRadius: resolvedBorderRadius }
-          }, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          }, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
             "select",
             {
               id: "flopay-billing-country",
@@ -5066,20 +5131,20 @@ function SplitCardFormInner({
               autoComplete: "billing country",
               "data-testid": "flopay-country",
               style: { ...inputFieldStyle(), cursor: "pointer" },
-              children: import_shared5.COUNTRY_OPTIONS.map((c) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("option", { value: c.code, children: [
+              children: import_shared5.COUNTRY_OPTIONS.map((c) => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("option", { value: c.code, children: [
                 c.flag,
                 " ",
                 c.name
               ] }, c.code))
             }
           ) }),
-          (0, import_shared5.isAVSFieldVisible)(avsConfig.postal_code, cc) && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: {
+          (0, import_shared5.isAVSFieldVisible)(avsConfig.postal_code, cc) && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: {
             flex: avsLayoutProp === "row" ? 1 : void 0,
             backgroundColor: cardInputBg,
             border: `1px solid ${zipBorderColor}`,
             padding: "10px",
             ...avsLayoutProp === "row" && (0, import_shared5.isAVSFieldVisible)(avsConfig.country, cc) ? { borderRadius: "0", borderTopRightRadius: resolvedBorderRadius, borderBottomRightRadius: resolvedBorderRadius } : { borderRadius: resolvedBorderRadius }
-          }, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          }, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
             "input",
             {
               className: "flopay-shared-input",
@@ -5103,7 +5168,7 @@ function SplitCardFormInner({
             }
           ) })
         ] }),
-        showPostcodeError && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        showPostcodeError && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
           "div",
           {
             id: "flopay-billing-postal-code-error",
@@ -5120,26 +5185,10 @@ function SplitCardFormInner({
         )
       ] });
     })() }),
-    vaultActive && cardPreFormSlot && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: { order: -2, width: "100%" }, children: cardPreFormSlot }),
+    vaultActive && cardPreFormSlot && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: { order: -2, width: "100%" }, children: cardPreFormSlot }),
     vaultActive && vaultCardFieldsNode,
-    displayError && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { role: "alert", "data-testid": "flopay-error", style: {
-      margin: "0.75rem 0",
-      padding: "0.625rem 0.875rem",
-      background: "#FEF2F2",
-      border: "1px solid #FECACA",
-      borderRadius: "8px",
-      color: "#991B1B",
-      fontSize: "0.85rem",
-      fontWeight: 600,
-      display: "flex",
-      alignItems: "center",
-      gap: "0.5rem",
-      ...bStyles.errorBanner ? bStyles.errorBanner : {}
-    }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", style: { flexShrink: 0 }, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: "M12 9v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z", stroke: "#DC2626", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }),
-      displayError
-    ] }),
-    !vaultActive && (children ?? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    displayError && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ErrorBanner, { margin: "0.75rem 0", styleOverride: bStyles.errorBanner, children: displayError }),
+    !vaultActive && (children ?? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
       "button",
       {
         type: "submit",
@@ -5184,9 +5233,9 @@ function SplitCardFormInner({
   const renderDirectPaypalGateDebug = (testId) => {
     if (!debug) return null;
     if (!showPayPal || !directPaypalConfigured) {
-      return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("pre", { "data-testid": testId, style: gateDebugStyle, children: "FloPay/DirectPayPal-debug - not enabled" });
+      return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("pre", { "data-testid": testId, style: gateDebugStyle, children: "FloPay/DirectPayPal-debug - not enabled" });
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("pre", { "data-testid": testId, style: gateDebugStyle, children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("pre", { "data-testid": testId, style: gateDebugStyle, children: [
       "FloPay/DirectPayPal-debug (parent gate)",
       `  showPayPal=${showPayPal}`,
       `  directPaypalConfigured=${directPaypalConfigured}`,
@@ -5199,9 +5248,9 @@ function SplitCardFormInner({
   const renderStripeGateDebug = (testId) => {
     if (!debug) return null;
     if (!showStripe || !stripeInstance) {
-      return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("pre", { "data-testid": testId, style: gateDebugStyle, children: "FloPay/Stripe-debug - not enabled" });
+      return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("pre", { "data-testid": testId, style: gateDebugStyle, children: "FloPay/Stripe-debug - not enabled" });
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("pre", { "data-testid": testId, style: gateDebugStyle, children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("pre", { "data-testid": testId, style: gateDebugStyle, children: [
       "FloPay/Stripe-debug (parent gate)",
       `  showStripe=${showStripe}`,
       `  currency=${currency}`,
@@ -5230,11 +5279,11 @@ function SplitCardFormInner({
     const cardButtonSizing = cardButtonContent === void 0 ? { boxSizing: "border-box", height: DEFAULT_BUTTONS_LAYOUT_BUTTON_HEIGHT, padding: "0 1rem" } : { padding: "0.9rem 1rem" };
     const buttonsAnim = viewState === "expanding" || viewState === "apm-expanding" ? `flopay-buttons-exit ${TRANSITION_MS}ms cubic-bezier(0.4, 0, 0.2, 1) both` : viewState === "collapsing" || viewState === "apm-collapsing" ? `flopay-buttons-enter ${TRANSITION_MS}ms cubic-bezier(0, 0, 0.2, 1) both` : void 0;
     const cardAnim = viewState === "expanding" ? `flopay-card-enter ${TRANSITION_MS}ms cubic-bezier(0, 0, 0.2, 1) both` : viewState === "collapsing" ? `flopay-card-exit ${TRANSITION_MS}ms cubic-bezier(0.4, 0, 0.2, 1) both` : void 0;
-    return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("form", { onSubmit: handleSubmit, className, style: { position: "relative" }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(FloPayKeyframes, {}),
-      overlayStatus && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ProcessingOverlay, { status: overlayStatus, errorMessage: displayError }),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: { display: "grid" }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("form", { onSubmit: handleSubmit, className, style: { position: "relative" }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(FloPayKeyframes, {}),
+      overlayStatus && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ProcessingOverlay, { status: overlayStatus, errorMessage: displayError }),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: { display: "grid" }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
           "div",
           {
             "data-testid": "flopay-buttons-panel",
@@ -5251,8 +5300,8 @@ function SplitCardFormInner({
             children: [
               renderDirectPaypalGateDebug("flopay-direct-paypal-gate-debug"),
               renderStripeGateDebug("flopay-stripe-gate-debug"),
-              shouldRenderDirectPayPal && directPaypal && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
-                paypalDirectRetry && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+              shouldRenderDirectPayPal && directPaypal && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
+                paypalDirectRetry && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                   "div",
                   {
                     "data-testid": "flopay-paypal-direct-retry-notice",
@@ -5268,7 +5317,7 @@ function SplitCardFormInner({
                     children: "Please confirm your PayPal payment to complete checkout."
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                   DirectPayPalButton,
                   {
                     sessionId,
@@ -5295,7 +5344,7 @@ function SplitCardFormInner({
                   paypalDirectRetry?.orderId ?? "fresh"
                 )
               ] }),
-              shouldRenderStripePayPal && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_stripe_js.Elements, { stripe: paypalStripeInstance, options: paypalOptions, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+              shouldRenderStripePayPal && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_stripe_js.Elements, { stripe: paypalStripeInstance, options: paypalOptions, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                 PayPalButtonInner,
                 {
                   sessionId,
@@ -5313,7 +5362,7 @@ function SplitCardFormInner({
                   placeholderBorderRadius: buttonBorderRadius
                 }
               ) }),
-              shouldRenderWallets ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_stripe_js.Elements, { stripe: stripeInstance, options: walletOptions, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+              shouldRenderWallets ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_stripe_js.Elements, { stripe: stripeInstance, options: walletOptions, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                 WalletButtonInner,
                 {
                   sessionId,
@@ -5330,8 +5379,8 @@ function SplitCardFormInner({
                   onLoadStateChange: setWalletLoadState,
                   placeholderBorderRadius: buttonBorderRadius
                 }
-              ) }) : shouldShowWallets ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: { height: DEFAULT_BUTTONS_LAYOUT_BUTTON_HEIGHT, borderRadius: buttonBorderRadius, background: "#e5e7eb", animation: "flopay-pulse 1.5s ease-in-out infinite" } }) : null,
-              shouldRenderPaymentElement && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+              ) }) : shouldShowWallets ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: { height: DEFAULT_BUTTONS_LAYOUT_BUTTON_HEIGHT, borderRadius: buttonBorderRadius, background: "#e5e7eb", animation: "flopay-pulse 1.5s ease-in-out infinite" } }) : null,
+              shouldRenderPaymentElement && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                 StripePaymentElementInner,
                 {
                   sessionId,
@@ -5363,7 +5412,7 @@ function SplitCardFormInner({
                   }
                 }
               ),
-              showStripe && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+              showStripe && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                 "button",
                 {
                   type: "button",
@@ -5419,50 +5468,34 @@ function SplitCardFormInner({
                   onMouseUp: (e) => {
                     e.currentTarget.style.transform = "scale(1)";
                   },
-                  children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CardButtonContentSlot, { content: cardButtonContent })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(CardButtonContentSlot, { content: cardButtonContent })
                 }
               ),
-              displayError && viewState === "buttons" && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { role: "alert", "data-testid": "flopay-error", style: {
-                margin: "0.25rem 0",
-                padding: "0.625rem 0.875rem",
-                background: "#FEF2F2",
-                border: "1px solid #FECACA",
-                borderRadius: "8px",
-                color: "#991B1B",
-                fontSize: "0.85rem",
-                fontWeight: 600,
-                display: "flex",
-                alignItems: "center",
-                gap: "0.5rem",
-                ...bStyles.errorBanner ? bStyles.errorBanner : {}
-              }, children: [
-                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", style: { flexShrink: 0 }, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: "M12 9v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z", stroke: "#DC2626", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }),
-                displayError
-              ] })
+              displayError && viewState === "buttons" && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ErrorBanner, { margin: "0.25rem 0", styleOverride: bStyles.errorBanner, children: displayError })
             ]
           }
         ),
-        showStripe && isCardView && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: {
+        showStripe && isCardView && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: {
           gridArea: "1 / 1",
           ...cardAnim ? { animation: cardAnim } : {},
           ...viewState === "collapsing" ? { pointerEvents: "none" } : {}
         }, children: cardFormBlock }),
-        showStripe && isApmView && expandedApmMethod && apmInlineOptions && stripeInstance && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: {
+        showStripe && isApmView && expandedApmMethod && apmInlineOptions && stripeInstance && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: {
           gridArea: "1 / 1",
           ...apmAnim ? { animation: apmAnim } : {},
           ...viewState === "apm-collapsing" ? { pointerEvents: "none" } : {}
-        }, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: {
+        }, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: {
           backgroundColor: cardBg,
           borderRadius: containerRadius,
           ...containerOverrides,
           padding: containerPadding
         }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: {
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: {
             display: "flex",
             alignItems: "center",
             padding: "0.75rem 0 0.625rem"
           }, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
               "button",
               {
                 type: "button",
@@ -5485,7 +5518,7 @@ function SplitCardFormInner({
                 },
                 "aria-label": "Back to payment methods",
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { style: {
+                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { style: {
                     display: "inline-flex",
                     alignItems: "center",
                     justifyContent: "center",
@@ -5495,12 +5528,12 @@ function SplitCardFormInner({
                     backgroundColor: "#f3f4f6",
                     transition: "background-color 0.15s",
                     ...bStyles.backButtonIcon
-                  }, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: "M15 18l-6-6 6-6" }) }) }),
-                  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(BackButtonContentSlot, { content: cardBackButtonContent })
+                  }, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("path", { d: "M15 18l-6-6 6-6" }) }) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(BackButtonContentSlot, { content: cardBackButtonContent })
                 ]
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: {
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: {
               flex: 1,
               textAlign: "center",
               fontWeight: 600,
@@ -5510,12 +5543,12 @@ function SplitCardFormInner({
               ...bStyles.title
             }, children: `Pay with ${(0, import_shared5.getStripeMethodDisplayName)(expandedApmMethod)}` })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
             import_react_stripe_js.Elements,
             {
               stripe: stripeInstance,
               options: apmInlineOptions,
-              children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+              children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                 StripeMethodInlineForm,
                 {
                   method: expandedApmMethod,
@@ -5545,24 +5578,24 @@ function SplitCardFormInner({
     ] });
   }
   if (isApmView && expandedApmMethod && apmInlineOptions && stripeInstance && showStripe) {
-    return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("form", { onSubmit: handleSubmit, className, style: { position: "relative" }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(FloPayKeyframes, {}),
-      overlayStatus && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ProcessingOverlay, { status: overlayStatus, errorMessage: displayError }),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: {
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("form", { onSubmit: handleSubmit, className, style: { position: "relative" }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(FloPayKeyframes, {}),
+      overlayStatus && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ProcessingOverlay, { status: overlayStatus, errorMessage: displayError }),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: {
         ...apmAnim ? { animation: apmAnim } : {},
         ...viewState === "apm-collapsing" ? { pointerEvents: "none" } : {}
-      }, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: {
+      }, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: {
         backgroundColor: cardBg,
         borderRadius: containerRadius,
         ...containerOverrides,
         padding: containerPadding
       }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: {
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: {
           display: "flex",
           alignItems: "center",
           padding: "0.75rem 0 0.625rem"
         }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
             "button",
             {
               type: "button",
@@ -5585,7 +5618,7 @@ function SplitCardFormInner({
               },
               "aria-label": "Back to payment methods",
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { style: {
+                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { style: {
                   display: "inline-flex",
                   alignItems: "center",
                   justifyContent: "center",
@@ -5595,12 +5628,12 @@ function SplitCardFormInner({
                   backgroundColor: "#f3f4f6",
                   transition: "background-color 0.15s",
                   ...bStyles.backButtonIcon
-                }, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: "M15 18l-6-6 6-6" }) }) }),
-                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(BackButtonContentSlot, { content: cardBackButtonContent })
+                }, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("path", { d: "M15 18l-6-6 6-6" }) }) }),
+                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(BackButtonContentSlot, { content: cardBackButtonContent })
               ]
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: {
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: {
             flex: 1,
             textAlign: "center",
             fontWeight: 600,
@@ -5610,12 +5643,12 @@ function SplitCardFormInner({
             ...bStyles.title
           }, children: `Pay with ${(0, import_shared5.getStripeMethodDisplayName)(expandedApmMethod)}` })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
           import_react_stripe_js.Elements,
           {
             stripe: stripeInstance,
             options: apmInlineOptions,
-            children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
               StripeMethodInlineForm,
               {
                 method: expandedApmMethod,
@@ -5643,14 +5676,14 @@ function SplitCardFormInner({
       ] }) })
     ] });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("form", { onSubmit: handleSubmit, className, style: { position: "relative" }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(FloPayKeyframes, {}),
-    overlayStatus && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ProcessingOverlay, { status: overlayStatus, errorMessage: displayError }),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: "0.5rem" }, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("form", { onSubmit: handleSubmit, className, style: { position: "relative" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(FloPayKeyframes, {}),
+    overlayStatus && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ProcessingOverlay, { status: overlayStatus, errorMessage: displayError }),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: "0.5rem" }, children: [
       renderDirectPaypalGateDebug("flopay-direct-paypal-gate-debug-default"),
       renderStripeGateDebug("flopay-stripe-gate-debug-default"),
-      shouldRenderDirectPayPal && directPaypal && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
-        paypalDirectRetry && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      shouldRenderDirectPayPal && directPaypal && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
+        paypalDirectRetry && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
           "div",
           {
             "data-testid": "flopay-paypal-direct-retry-notice-default",
@@ -5666,7 +5699,7 @@ function SplitCardFormInner({
             children: "Please confirm your PayPal payment to complete checkout."
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
           DirectPayPalButton,
           {
             sessionId,
@@ -5693,7 +5726,7 @@ function SplitCardFormInner({
           paypalDirectRetry?.orderId ?? "fresh"
         )
       ] }),
-      shouldRenderStripePayPal && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_stripe_js.Elements, { stripe: paypalStripeInstance, options: paypalOptions, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      shouldRenderStripePayPal && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_stripe_js.Elements, { stripe: paypalStripeInstance, options: paypalOptions, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
         PayPalButtonInner,
         {
           sessionId,
@@ -5711,7 +5744,7 @@ function SplitCardFormInner({
           placeholderBorderRadius: buttonBorderRadius
         }
       ) }),
-      shouldRenderWallets && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_stripe_js.Elements, { stripe: stripeInstance, options: walletOptions, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      shouldRenderWallets && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_stripe_js.Elements, { stripe: stripeInstance, options: walletOptions, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
         WalletButtonInner,
         {
           sessionId,
@@ -5729,7 +5762,7 @@ function SplitCardFormInner({
           placeholderBorderRadius: buttonBorderRadius
         }
       ) }),
-      shouldRenderPaymentElement && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      shouldRenderPaymentElement && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
         StripePaymentElementInner,
         {
           sessionId,
@@ -5762,7 +5795,7 @@ function SplitCardFormInner({
         }
       )
     ] }),
-    showStripe && (shouldDisplayWalletRow || shouldDisplayPayPalRow || shouldDisplayPaymentElementRow) && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: {
+    showStripe && (shouldDisplayWalletRow || shouldDisplayPayPalRow || shouldDisplayPaymentElementRow) && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: {
       display: "flex",
       alignItems: "center",
       gap: "0.75rem",
@@ -5770,9 +5803,9 @@ function SplitCardFormInner({
       color: "#999",
       fontSize: "0.85rem"
     }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: { flex: 1, height: 1, backgroundColor: "#ddd" } }),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { children: "or pay with card" }),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: { flex: 1, height: 1, backgroundColor: "#ddd" } })
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: { flex: 1, height: 1, backgroundColor: "#ddd" } }),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { children: "or pay with card" }),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: { flex: 1, height: 1, backgroundColor: "#ddd" } })
     ] }),
     showStripe && cardFormBlock
   ] });
@@ -5802,6 +5835,9 @@ async function confirmResumeIntent(stripe, clientSecret, data, isSetupIntent) {
   const { paymentIntent, error } = await stripe.confirmCardPayment(clientSecret, data);
   return { error, intent: paymentIntent ?? null };
 }
+function withCheckoutMethod(error, checkoutMethod) {
+  return Object.assign(error, { checkoutMethod });
+}
 function getRedirectResultFromCheckoutProcessError(error) {
   if (!error?.type || !error.threeDSecureToken) {
     return null;
@@ -6023,7 +6059,7 @@ function checkoutProcessErrorToFloPayError(error, fallbackMessage = "Payment fai
   const checkoutMethod = options?.checkoutMethod ?? error?.checkoutMethod ?? (error?.type === "paypal_redirect_required" ? "paypal" : "card");
   const rawMessage = error?.message ?? fallbackMessage;
   const message = applyFriendlyMessageOverride(rawMessage) ?? rawMessage;
-  return Object.assign(
+  return withCheckoutMethod(
     new import_shared7.FloPayError(
       message,
       "api_error",
@@ -6031,7 +6067,7 @@ function checkoutProcessErrorToFloPayError(error, fallbackMessage = "Payment fai
         code: error?.gatewayErrorCode
       }
     ),
-    { checkoutMethod }
+    checkoutMethod
   );
 }
 function resolveSavedPaymentReturnUrl(session) {
@@ -6203,13 +6239,13 @@ async function processSavedPaymentForMode({
     if (recoveredRedirect) {
       return recoveredRedirect;
     }
-    throw Object.assign(
+    throw withCheckoutMethod(
       new import_shared7.FloPayError(
         "Your card requires authentication. Please enter your payment details below.",
         "api_error",
         { code: "authentication_required" }
       ),
-      { checkoutMethod: "card" }
+      "card"
     );
   }
   throw new import_shared7.FloPayError(
@@ -6237,13 +6273,13 @@ async function handleSavedPaymentRedirectResult(redirectResult, {
   }
   if (redirectResult.type === "3ds_required") {
     if (!attempt3DS || !redirectResult.threeDSecureToken) {
-      throw Object.assign(
+      throw withCheckoutMethod(
         new import_shared7.FloPayError(
           "Your card requires authentication. Please enter your payment details below.",
           "api_error",
           { code: "authentication_required" }
         ),
-        { checkoutMethod: "card" }
+        "card"
       );
     }
     const isSetupIntent = (0, import_shared7.isSetupIntentClientSecret)(redirectResult.threeDSecureToken);
@@ -6252,13 +6288,13 @@ async function handleSavedPaymentRedirectResult(redirectResult, {
     const retrieved = await retrieveResumeIntent(stripe, redirectResult.threeDSecureToken, isSetupIntent);
     if (retrieved) {
       if (retrieved.error) {
-        throw Object.assign(
+        throw withCheckoutMethod(
           new import_shared7.FloPayError(
             retrieved.error.message ?? `Failed to retrieve 3DS ${isSetupIntent ? "setup" : "payment"} status.`,
             "api_error",
             { code: retrieved.error.code }
           ),
-          { checkoutMethod: "card" }
+          "card"
         );
       }
       const existingIntent = retrieved.intent;
@@ -6281,13 +6317,13 @@ async function handleSavedPaymentRedirectResult(redirectResult, {
     ) : null;
     if (confirmed) {
       if (confirmed.error) {
-        throw Object.assign(
+        throw withCheckoutMethod(
           new import_shared7.FloPayError(
             confirmed.error.message ?? "3DS authentication failed.",
             "api_error",
             { code: confirmed.error.code }
           ),
-          { checkoutMethod: "card" }
+          "card"
         );
       }
       paymentIntent = confirmed.intent;
@@ -6296,13 +6332,13 @@ async function handleSavedPaymentRedirectResult(redirectResult, {
         clientSecret: redirectResult.threeDSecureToken
       });
       if (nextAction.error) {
-        throw Object.assign(
+        throw withCheckoutMethod(
           new import_shared7.FloPayError(
             nextAction.error.message ?? "3DS authentication failed.",
             "api_error",
             { code: nextAction.error.code }
           ),
-          { checkoutMethod: "card" }
+          "card"
         );
       }
       paymentIntent = (isSetupIntent ? nextAction.setupIntent : nextAction.paymentIntent) ?? null;
@@ -6338,17 +6374,17 @@ async function handleSavedPaymentRedirectResult(redirectResult, {
         telemetry
       });
     }
-    throw Object.assign(
+    throw withCheckoutMethod(
       new import_shared7.FloPayError("3DS authentication did not complete successfully.", "api_error"),
-      { checkoutMethod: "card" }
+      "card"
     );
   }
   if (redirectResult.type === "paypal_redirect_required") {
     const paypalStripe = (paypalFlopay ?? flopay)?.getRawProvider();
     if (!paypalStripe) {
-      throw Object.assign(
+      throw withCheckoutMethod(
         new import_shared7.FloPayError("PayPal is not available.", "api_error"),
-        { checkoutMethod: "paypal" }
+        "paypal"
       );
     }
     if (redirectResult.paymentMethodId) {
@@ -6356,13 +6392,13 @@ async function handleSavedPaymentRedirectResult(redirectResult, {
         clientSecret: redirectResult.threeDSecureToken
       });
       if (error2) {
-        throw Object.assign(
+        throw withCheckoutMethod(
           new import_shared7.FloPayError(
             error2.message ?? "PayPal authorization failed.",
             "api_error",
             { code: error2.code }
           ),
-          { checkoutMethod: "paypal" }
+          "paypal"
         );
       }
       return {
@@ -6379,13 +6415,13 @@ async function handleSavedPaymentRedirectResult(redirectResult, {
       redirect: "if_required"
     });
     if (error) {
-      throw Object.assign(
+      throw withCheckoutMethod(
         new import_shared7.FloPayError(
           error.message ?? "PayPal authorization failed.",
           "api_error",
           { code: error.code }
         ),
-        { checkoutMethod: "paypal" }
+        "paypal"
       );
     }
     return {
@@ -6470,7 +6506,7 @@ async function loadSavedPaymentProviders({
 }
 
 // src/flopay-checkout.tsx
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_jsx_runtime9 = require("react/jsx-runtime");
 var DEFAULT_BUTTONS_LAYOUT_BUTTON_HEIGHT2 = 44;
 var PAYPAL_RESUME_STORAGE_KEY = "flopay_checkout_saved_payment_resume";
 var sessionInflightMap = /* @__PURE__ */ new Map();
@@ -6648,51 +6684,51 @@ function FloPayCheckout({
   onSessionCompleted
 }) {
   const resolvedBillingUrl = (0, import_shared8.resolveBillingApiUrl)(billingApiUrl);
-  const themeBundle = (0, import_react10.useMemo)(() => (0, import_shared8.resolveTheme)(theme), [theme]);
+  const themeBundle = (0, import_react11.useMemo)(() => (0, import_shared8.resolveTheme)(theme), [theme]);
   const appearance = appearanceOverride ?? themeBundle?.appearance;
   const checkoutType = createSessionParams ? "embedded_checkout" : "standard_checkout";
   const checkoutLayout = children ? "custom_layout" : layout === "buttons" ? "buttons_layout" : "default_layout";
-  const [unified, setUnified] = (0, import_react10.useState)(null);
-  const [flopay, setFloPay] = (0, import_react10.useState)(null);
-  const flopayRef = (0, import_react10.useRef)(null);
-  const [paypalFlopay, setPaypalFloPay] = (0, import_react10.useState)(null);
-  const paypalFlopayRef = (0, import_react10.useRef)(null);
-  const [session, setSession] = (0, import_react10.useState)(null);
-  const [resolvedSessionId, setResolvedSessionId] = (0, import_react10.useState)(sessionIdProp ?? "");
+  const [unified, setUnified] = (0, import_react11.useState)(null);
+  const [flopay, setFloPay] = (0, import_react11.useState)(null);
+  const flopayRef = (0, import_react11.useRef)(null);
+  const [paypalFlopay, setPaypalFloPay] = (0, import_react11.useState)(null);
+  const paypalFlopayRef = (0, import_react11.useRef)(null);
+  const [session, setSession] = (0, import_react11.useState)(null);
+  const [resolvedSessionId, setResolvedSessionId] = (0, import_react11.useState)(sessionIdProp ?? "");
   const activeSessionId = sessionIdProp ?? resolvedSessionId;
   const initSessionDependency = createSessionParams ? "" : activeSessionId;
-  const [isLoading, setIsLoading] = (0, import_react10.useState)(true);
-  const [loadError, setLoadError] = (0, import_react10.useState)(null);
-  const [currentMode, setCurrentMode] = (0, import_react10.useState)("full");
-  const [confirmProcessing, setConfirmProcessing] = (0, import_react10.useState)(false);
-  const [modeError, setModeError] = (0, import_react10.useState)(initialErrorMessage);
-  const [modeOverlayStatus, setModeOverlayStatus] = (0, import_react10.useState)(null);
-  const [modeOverlayError, setModeOverlayError] = (0, import_react10.useState)(null);
-  const [createSessionPatch, setCreateSessionPatch] = (0, import_react10.useState)(void 0);
-  const [createSessionPatchBaseHash, setCreateSessionPatchBaseHash] = (0, import_react10.useState)("");
-  const [cardBootstrapPending, setCardBootstrapPending] = (0, import_react10.useState)(false);
-  const autoCheckoutAttempted = (0, import_react10.useRef)(false);
-  const paypalResumeAttempted = (0, import_react10.useRef)(false);
-  const savedPaymentKeysRef = (0, import_react10.useRef)(null);
-  const telemetryCheckoutContext = (0, import_react10.useMemo)(() => ({
+  const [isLoading, setIsLoading] = (0, import_react11.useState)(true);
+  const [loadError, setLoadError] = (0, import_react11.useState)(null);
+  const [currentMode, setCurrentMode] = (0, import_react11.useState)("full");
+  const [confirmProcessing, setConfirmProcessing] = (0, import_react11.useState)(false);
+  const [modeError, setModeError] = (0, import_react11.useState)(initialErrorMessage);
+  const [modeOverlayStatus, setModeOverlayStatus] = (0, import_react11.useState)(null);
+  const [modeOverlayError, setModeOverlayError] = (0, import_react11.useState)(null);
+  const [createSessionPatch, setCreateSessionPatch] = (0, import_react11.useState)(void 0);
+  const [createSessionPatchBaseHash, setCreateSessionPatchBaseHash] = (0, import_react11.useState)("");
+  const [cardBootstrapPending, setCardBootstrapPending] = (0, import_react11.useState)(false);
+  const autoCheckoutAttempted = (0, import_react11.useRef)(false);
+  const paypalResumeAttempted = (0, import_react11.useRef)(false);
+  const savedPaymentKeysRef = (0, import_react11.useRef)(null);
+  const telemetryCheckoutContext = (0, import_react11.useMemo)(() => ({
     checkoutMode: checkoutModeProp ?? currentMode,
     layout: children ? "unknown" : layout === "buttons" ? "buttons" : "embedded"
   }), [checkoutModeProp, children, currentMode, layout]);
-  const onCompleteRef = (0, import_react10.useRef)(onComplete);
+  const onCompleteRef = (0, import_react11.useRef)(onComplete);
   onCompleteRef.current = onComplete;
-  const onErrorRef = (0, import_react10.useRef)(onError);
+  const onErrorRef = (0, import_react11.useRef)(onError);
   onErrorRef.current = onError;
-  const onDeclineRef = (0, import_react10.useRef)(onDecline);
+  const onDeclineRef = (0, import_react11.useRef)(onDecline);
   onDeclineRef.current = onDecline;
-  (0, import_react10.useEffect)(() => {
+  (0, import_react11.useEffect)(() => {
     getFloPayTelemetryBridge(flopay)?.setCheckoutContext(telemetryCheckoutContext);
     if (paypalFlopay && paypalFlopay !== flopay) {
       getFloPayTelemetryBridge(paypalFlopay)?.setCheckoutContext(telemetryCheckoutContext);
     }
   }, [flopay, paypalFlopay, telemetryCheckoutContext]);
-  const onSessionCompletedRef = (0, import_react10.useRef)(onSessionCompleted);
+  const onSessionCompletedRef = (0, import_react11.useRef)(onSessionCompleted);
   onSessionCompletedRef.current = onSessionCompleted;
-  (0, import_react10.useEffect)(() => {
+  (0, import_react11.useEffect)(() => {
     console.info("[FloPay] Checkout initialized", {
       sdk_version: import_shared8.SDK_VERSION,
       checkout_type: checkoutType,
@@ -6700,34 +6736,34 @@ function FloPayCheckout({
       billing_api_url: resolvedBillingUrl
     });
   }, [checkoutLayout, checkoutType, resolvedBillingUrl]);
-  const baseCreateSessionHash = (0, import_react10.useMemo)(
+  const baseCreateSessionHash = (0, import_react11.useMemo)(
     () => createSessionParams ? hashCreateParams(createSessionParams) : "",
     [createSessionParams]
   );
-  const activeCreateSessionPatch = (0, import_react10.useMemo)(
+  const activeCreateSessionPatch = (0, import_react11.useMemo)(
     () => createSessionPatchBaseHash === baseCreateSessionHash ? createSessionPatch : void 0,
     [createSessionPatch, createSessionPatchBaseHash, baseCreateSessionHash]
   );
-  const effectiveCreateSessionBase = (0, import_react10.useMemo)(
+  const effectiveCreateSessionBase = (0, import_react11.useMemo)(
     () => createSessionParams ? mergeInlineSessionPatch(createSessionParams, activeCreateSessionPatch) : void 0,
     [createSessionParams, activeCreateSessionPatch]
   );
   const effectiveCreateSessionMode = checkoutModeProp ?? effectiveCreateSessionBase?.checkoutMode ?? "full";
-  const effectiveCreateSession = (0, import_react10.useMemo)(
+  const effectiveCreateSession = (0, import_react11.useMemo)(
     () => effectiveCreateSessionBase ? {
       ...effectiveCreateSessionBase,
       checkoutMode: effectiveCreateSessionMode
     } : void 0,
     [effectiveCreateSessionBase, effectiveCreateSessionMode]
   );
-  (0, import_react10.useEffect)(() => {
+  (0, import_react11.useEffect)(() => {
     setCreateSessionPatch(void 0);
     setCreateSessionPatchBaseHash(baseCreateSessionHash);
   }, [baseCreateSessionHash]);
-  (0, import_react10.useEffect)(() => {
+  (0, import_react11.useEffect)(() => {
     setModeError(initialErrorMessage);
   }, [initialErrorMessage]);
-  const emitDecline = (0, import_react10.useCallback)(
+  const emitDecline = (0, import_react11.useCallback)(
     (method, input, overrides) => {
       invokeMerchantCallback(() => {
         onDeclineRef.current?.(buildDeclineEvent(method, input, overrides));
@@ -6735,7 +6771,7 @@ function FloPayCheckout({
     },
     [invokeMerchantCallback]
   );
-  const runSavedPaymentFlow = (0, import_react10.useCallback)(
+  const runSavedPaymentFlow = (0, import_react11.useCallback)(
     async (sess, options) => {
       setModeError(null);
       setModeOverlayError(null);
@@ -7001,7 +7037,7 @@ function FloPayCheckout({
       telemetryCheckoutContext
     ]
   );
-  (0, import_react10.useEffect)(() => {
+  (0, import_react11.useEffect)(() => {
     if (typeof window === "undefined" || paypalResumeAttempted.current) {
       return;
     }
@@ -7204,7 +7240,7 @@ function FloPayCheckout({
       }
     })();
   }, [emitDecline, invokeMerchantCallback, locale, normalizeSavedPaymentError, resolvedBillingUrl, telemetry]);
-  const initializedHashRef = (0, import_react10.useRef)(null);
+  const initializedHashRef = (0, import_react11.useRef)(null);
   function hashCreateParams(params) {
     const key = JSON.stringify({
       c: params?.clientId,
@@ -7237,16 +7273,16 @@ function FloPayCheckout({
     }
     return `flopay_session_${Math.abs(h).toString(36)}`;
   }
-  const createSessionHash = (0, import_react10.useMemo)(
+  const createSessionHash = (0, import_react11.useMemo)(
     () => effectiveCreateSession ? hashCreateParams(effectiveCreateSession) : "",
     [effectiveCreateSession]
   );
-  const createSessionParamsRef = (0, import_react10.useRef)(effectiveCreateSession);
+  const createSessionParamsRef = (0, import_react11.useRef)(effectiveCreateSession);
   createSessionParamsRef.current = effectiveCreateSession;
-  (0, import_react10.useEffect)(() => {
+  (0, import_react11.useEffect)(() => {
     setResolvedSessionId(sessionIdProp ?? "");
   }, [sessionIdProp]);
-  (0, import_react10.useEffect)(() => {
+  (0, import_react11.useEffect)(() => {
     autoCheckoutAttempted.current = false;
     setModeError(initialErrorMessage);
     setModeOverlayError(null);
@@ -7353,7 +7389,7 @@ function FloPayCheckout({
       finishStandaloneTelemetry(reporter);
     }
   }
-  const bootstrapInlineSession = (0, import_react10.useCallback)(
+  const bootstrapInlineSession = (0, import_react11.useCallback)(
     async (patch) => {
       const baseParams = createSessionParamsRef.current;
       if (!baseParams) {
@@ -7415,7 +7451,7 @@ function FloPayCheckout({
     },
     [locale, resolvedBillingUrl, telemetry, telemetryCheckoutContext]
   );
-  const handleInlineSessionPatch = (0, import_react10.useCallback)(async (patch) => {
+  const handleInlineSessionPatch = (0, import_react11.useCallback)(async (patch) => {
     if (!hasInlineSessionPatchData(patch) || cardBootstrapPending) {
       return {
         sessionId: resolvedSessionId,
@@ -7438,7 +7474,7 @@ function FloPayCheckout({
     resolvedSessionId,
     session
   ]);
-  (0, import_react10.useEffect)(() => {
+  (0, import_react11.useEffect)(() => {
     let cancelled = false;
     setLoadError(null);
     if (createSessionHash) {
@@ -7629,7 +7665,7 @@ function FloPayCheckout({
     nonceProp,
     runSavedPaymentFlow
   ]);
-  const handleConfirmCheckout = (0, import_react10.useCallback)(async () => {
+  const handleConfirmCheckout = (0, import_react11.useCallback)(async () => {
     if (confirmProcessing || !session) return;
     setConfirmProcessing(true);
     setModeError(null);
@@ -7644,7 +7680,7 @@ function FloPayCheckout({
   }, [activeSessionId, confirmProcessing, runSavedPaymentFlow, session]);
   const directPaypalConfig = resolveDirectPaypalConfig(unified);
   const isPaypalOnlySession = isPayPalOnlyUnified(unified);
-  const providerOptions = (0, import_react10.useMemo)(() => {
+  const providerOptions = (0, import_react11.useMemo)(() => {
     if (!unified || !session || !unified.data.stripe?.publishableKey) return void 0;
     const opts = {
       appearance,
@@ -7663,7 +7699,7 @@ function FloPayCheckout({
   const shouldHandleInlineSessionPatch = Boolean(
     createSessionParams && !children && layout === "buttons" && onBeforeButtonClick && effectiveCreateSessionMode === "full"
   );
-  const checkoutValue = (0, import_react10.useMemo)(
+  const checkoutValue = (0, import_react11.useMemo)(
     () => ({
       session,
       loading: isLoading,
@@ -7685,7 +7721,7 @@ function FloPayCheckout({
     ]
   );
   const shouldShowInterimButtons = Boolean(createSessionParams) && layout === "buttons" && !isPaypalOnlySession && (!flopay || !providerOptions);
-  const modeOverlay = modeOverlayStatus ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+  const modeOverlay = modeOverlayStatus ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
     ProcessingOverlay,
     {
       status: modeOverlayStatus,
@@ -7694,32 +7730,32 @@ function FloPayCheckout({
   ) : null;
   if (isLoading) {
     if (loadingNode) {
-      return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
+      return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
         loadingNode,
         modeOverlay
       ] });
     }
     if (layout === "buttons") {
       const bundleRadius = themeBundle?.buttonsLayout?.cardButton?.borderRadius ?? themeBundle?.appearance.variables?.borderRadius ?? 8;
-      const skeletonBar = (h) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: {
+      const skeletonBar = (h) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: {
         height: h,
         borderRadius: bundleRadius,
         background: "#e5e7eb",
         animation: "flopay-loading-pulse 1.5s ease-in-out infinite"
       } });
-      return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: "0.5rem" }, children: [
+      return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: "0.5rem" }, children: [
           showPayPal && skeletonBar(DEFAULT_BUTTONS_LAYOUT_BUTTON_HEIGHT2),
           showStripe && (showApplePay || showGooglePay) && skeletonBar(DEFAULT_BUTTONS_LAYOUT_BUTTON_HEIGHT2),
           showStripe && skeletonBar(DEFAULT_BUTTONS_LAYOUT_BUTTON_HEIGHT2),
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("style", { children: `@keyframes flopay-loading-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }` })
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("style", { children: `@keyframes flopay-loading-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }` })
         ] }),
         modeOverlay
       ] });
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: { display: "flex", justifyContent: "center", padding: 32 }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: {
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: { display: "flex", justifyContent: "center", padding: 32 }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: {
           width: 24,
           height: 24,
           border: "2px solid #e5e7eb",
@@ -7727,16 +7763,16 @@ function FloPayCheckout({
           borderRadius: "50%",
           animation: "spin 0.6s linear infinite"
         } }),
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("style", { children: `@keyframes spin { to { transform: rotate(360deg); } }` })
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("style", { children: `@keyframes spin { to { transform: rotate(360deg); } }` })
       ] }),
       modeOverlay
     ] });
   }
   if (loadError) {
     if (errorNode) {
-      return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(CheckoutContext.Provider, { value: checkoutValue, children: errorNode(loadError) });
+      return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(CheckoutContext.Provider, { value: checkoutValue, children: errorNode(loadError) });
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(CheckoutContext.Provider, { value: checkoutValue, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(CheckoutContext.Provider, { value: checkoutValue, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
       "div",
       {
         role: "alert",
@@ -7752,8 +7788,8 @@ function FloPayCheckout({
     ) });
   }
   if (shouldShowInterimButtons) {
-    return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(CheckoutContext.Provider, { value: checkoutValue, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(CheckoutContext.Provider, { value: checkoutValue, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
         InterimButtonsView,
         {
           onButtonClick,
@@ -7773,26 +7809,10 @@ function FloPayCheckout({
     ] });
   }
   if (isPaypalOnlySession && session && directPaypalConfig) {
-    return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(CheckoutContext.Provider, { value: checkoutValue, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className, style: { display: "flex", flexDirection: "column", gap: "0.5rem" }, children: [
-        modeError && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-          "div",
-          {
-            role: "alert",
-            "data-testid": "flopay-error",
-            style: {
-              padding: "0.625rem 0.875rem",
-              background: "#FEF2F2",
-              border: "1px solid #FECACA",
-              borderRadius: "8px",
-              color: "#991B1B",
-              fontSize: "0.85rem",
-              fontWeight: 600
-            },
-            children: modeError
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(CheckoutContext.Provider, { value: checkoutValue, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className, style: { display: "flex", flexDirection: "column", gap: "0.5rem" }, children: [
+        modeError && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ErrorBanner, { icon: false, children: modeError }),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
           InstrumentedDirectPayPalButton,
           {
             sessionId: activeSessionId,
@@ -7818,12 +7838,12 @@ function FloPayCheckout({
     ] });
   }
   if (!flopay || !providerOptions) {
-    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_jsx_runtime8.Fragment, { children: modeOverlay });
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_jsx_runtime9.Fragment, { children: modeOverlay });
   }
   if (currentMode === "confirm") {
-    return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(CheckoutContext.Provider, { value: checkoutValue, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(FloPayProvider, { flopay, paypalFlopay, options: providerOptions, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className, children: [
-        modeError && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(CheckoutContext.Provider, { value: checkoutValue, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(FloPayProvider, { flopay, paypalFlopay, options: providerOptions, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className, children: [
+        modeError && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
           "div",
           {
             style: {
@@ -7838,7 +7858,7 @@ function FloPayCheckout({
         renderConfirmButton ? renderConfirmButton({
           onConfirm: handleConfirmCheckout,
           isProcessing: confirmProcessing
-        }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
           "button",
           {
             type: "button",
@@ -7863,9 +7883,9 @@ function FloPayCheckout({
       modeOverlay
     ] });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(CheckoutContext.Provider, { value: checkoutValue, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(FloPayProvider, { flopay, paypalFlopay, options: providerOptions, children: children ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
-      modeError && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(CheckoutContext.Provider, { value: checkoutValue, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(FloPayProvider, { flopay, paypalFlopay, options: providerOptions, children: children ? /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
+      modeError && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
         "div",
         {
           style: {
@@ -7880,7 +7900,7 @@ function FloPayCheckout({
           children: modeError
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
         SessionInjector,
         {
           sessionId: activeSessionId,
@@ -7890,7 +7910,7 @@ function FloPayCheckout({
           children
         }
       )
-    ] }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    ] }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
       SplitCardForm,
       {
         sessionId: activeSessionId,
@@ -7953,8 +7973,8 @@ function SessionInjector({
   session,
   children
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_jsx_runtime8.Fragment, { children: import_react10.default.Children.map(children, (child) => {
-    if (!import_react10.default.isValidElement(child)) return child;
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_jsx_runtime9.Fragment, { children: import_react11.default.Children.map(children, (child) => {
+    if (!import_react11.default.isValidElement(child)) return child;
     const existing = child.props;
     const injected = {};
     if (!existing.sessionId) injected.sessionId = sessionId;
@@ -7969,15 +7989,11 @@ function SessionInjector({
         injected.lastName = session.customer.lastName;
     }
     if (Object.keys(injected).length === 0) return child;
-    return import_react10.default.cloneElement(child, injected);
+    return import_react11.default.cloneElement(child, injected);
   }) });
 }
 function InterimButtonsView({
   onButtonClick,
-  onCardButtonClick,
-  cardLoading = false,
-  cardOpen,
-  errorMessage,
   showPayPal,
   showStripe = true,
   showApplePay,
@@ -7989,15 +8005,9 @@ function InterimButtonsView({
   cardBackButtonContent,
   cardTitleContent
 }) {
-  const [showCardForm, setShowCardForm] = (0, import_react10.useState)(false);
-  const isCardOpenControlled = typeof cardOpen === "boolean";
-  (0, import_react10.useEffect)(() => {
-    if (isCardOpenControlled) {
-      setShowCardForm(cardOpen);
-    }
-  }, [cardOpen, isCardOpenControlled]);
-  const themeBundle = (0, import_react10.useMemo)(() => (0, import_shared8.resolveTheme)(theme), [theme]);
-  const bStyles = (0, import_react10.useMemo)(() => {
+  const [showCardForm, setShowCardForm] = (0, import_react11.useState)(false);
+  const themeBundle = (0, import_react11.useMemo)(() => (0, import_shared8.resolveTheme)(theme), [theme]);
+  const bStyles = (0, import_react11.useMemo)(() => {
     const base = themeBundle?.buttonsLayout ?? (0, import_shared8.resolveButtonsLayoutTheme)(buttonsTheme);
     if (!stylesOverride) return base;
     return {
@@ -8012,7 +8022,7 @@ function InterimButtonsView({
     };
   }, [themeBundle, buttonsTheme, stylesOverride]);
   const skeletonRadius = themeBundle?.buttonsLayout?.cardButton?.borderRadius ?? themeBundle?.appearance.variables?.borderRadius ?? 8;
-  const skeleton = (h) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: {
+  const skeleton = (h) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: {
     height: h,
     borderRadius: skeletonRadius,
     background: "#e5e7eb",
@@ -8024,25 +8034,20 @@ function InterimButtonsView({
     const inputBg = bStyles.cardInputBackground ?? "white";
     const hideBackButtonLabel = isEmptySlotContent(cardBackButtonContent);
     const hideTitle = isEmptySlotContent(cardTitleContent);
-    return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: {
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: {
       backgroundColor: bStyles.cardFormContainer?.backgroundColor ?? "white",
       borderRadius: "8px",
       animation: "flopay-interim-expand 0.35s cubic-bezier(0.4, 0, 0.2, 1) both",
       overflow: "hidden",
       ...bStyles.cardFormContainer
     }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: { display: "flex", alignItems: "center", padding: "0.75rem 0 0.625rem" }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: { display: "flex", alignItems: "center", padding: "0.75rem 0 0.625rem" }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
           "button",
           {
             type: "button",
-            onClick: () => {
-              if (!isCardOpenControlled) {
-                setShowCardForm(false);
-              }
-            },
+            onClick: () => setShowCardForm(false),
             "aria-label": "Back to payment methods",
-            disabled: isCardOpenControlled || cardLoading,
             style: {
               display: "inline-flex",
               alignItems: "center",
@@ -8054,12 +8059,12 @@ function InterimButtonsView({
               fontWeight: 500,
               padding: 0,
               flexShrink: 0,
-              opacity: isCardOpenControlled || cardLoading ? 0.6 : 1,
-              cursor: isCardOpenControlled || cardLoading ? "not-allowed" : "pointer",
+              opacity: 1,
+              cursor: "pointer",
               ...bStyles.backButton
             },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { style: {
+              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { style: {
                 display: "inline-flex",
                 alignItems: "center",
                 justifyContent: "center",
@@ -8068,12 +8073,12 @@ function InterimButtonsView({
                 borderRadius: "50%",
                 backgroundColor: "#f3f4f6",
                 ...bStyles.backButtonIcon
-              }, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("path", { d: "M15 18l-6-6 6-6" }) }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(BackButtonContentSlot, { content: cardBackButtonContent })
+              }, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: "M15 18l-6-6 6-6" }) }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(BackButtonContentSlot, { content: cardBackButtonContent })
             ]
           }
         ),
-        hideTitle ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: { flex: 1 } }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: {
+        hideTitle ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: { flex: 1 } }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: {
           flex: 1,
           textAlign: "center",
           fontWeight: 600,
@@ -8081,11 +8086,11 @@ function InterimButtonsView({
           color: "#262833",
           paddingRight: 80,
           ...bStyles.title
-        }, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(TitleContentSlot, { content: cardTitleContent }) })
+        }, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(TitleContentSlot, { content: cardTitleContent }) })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: { backgroundColor: inputBg, border: `1px solid ${inputBorder}`, borderTopLeftRadius: 8, borderTopRightRadius: 8, padding: 12, height: 45 }, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: { width: "60%", height: 14, borderRadius: 4, background: "#e5e7eb", animation: "flopay-interim-pulse 1.5s ease-in-out infinite" } }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: { display: "flex" }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: {
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: { backgroundColor: inputBg, border: `1px solid ${inputBorder}`, borderTopLeftRadius: 8, borderTopRightRadius: 8, padding: 12, height: 45 }, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: { width: "60%", height: 14, borderRadius: 4, background: "#e5e7eb", animation: "flopay-interim-pulse 1.5s ease-in-out infinite" } }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: { display: "flex" }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: {
           flex: 1,
           backgroundColor: inputBg,
           borderTop: "none",
@@ -8095,8 +8100,8 @@ function InterimButtonsView({
           borderBottomLeftRadius: 8,
           padding: 12,
           height: 45
-        }, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: { width: "50%", height: 14, borderRadius: 4, background: "#e5e7eb", animation: "flopay-interim-pulse 1.5s ease-in-out infinite" } }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: {
+        }, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: { width: "50%", height: 14, borderRadius: 4, background: "#e5e7eb", animation: "flopay-interim-pulse 1.5s ease-in-out infinite" } }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: {
           flex: 1,
           backgroundColor: inputBg,
           borderTop: "none",
@@ -8106,10 +8111,10 @@ function InterimButtonsView({
           borderBottomRightRadius: 8,
           padding: 12,
           height: 45
-        }, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: { width: "40%", height: 14, borderRadius: 4, background: "#e5e7eb", animation: "flopay-interim-pulse 1.5s ease-in-out infinite" } }) })
+        }, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: { width: "40%", height: 14, borderRadius: 4, background: "#e5e7eb", animation: "flopay-interim-pulse 1.5s ease-in-out infinite" } }) })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: { backgroundColor: inputBg, border: `1px solid ${inputBorder}`, borderRadius: 8, marginTop: 8, padding: 12, height: 45 }, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: { width: "45%", height: 14, borderRadius: 4, background: "#e5e7eb", animation: "flopay-interim-pulse 1.5s ease-in-out infinite" } }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: {
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: { backgroundColor: inputBg, border: `1px solid ${inputBorder}`, borderRadius: 8, marginTop: 8, padding: 12, height: 45 }, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: { width: "45%", height: 14, borderRadius: 4, background: "#e5e7eb", animation: "flopay-interim-pulse 1.5s ease-in-out infinite" } }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: {
         height: 50,
         borderRadius: 8,
         marginTop: 16,
@@ -8118,7 +8123,7 @@ function InterimButtonsView({
         ...bStyles.submitButton,
         opacity: 0.5
       } }),
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("style", { children: `
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("style", { children: `
           @keyframes flopay-interim-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }
           @keyframes flopay-interim-expand {
             0% { opacity: 0; max-height: 0; transform: translateY(-12px); }
@@ -8128,23 +8133,17 @@ function InterimButtonsView({
         ` })
     ] });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: "0.5rem" }, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: "0.5rem" }, children: [
     showPayPal && skeleton(DEFAULT_BUTTONS_LAYOUT_BUTTON_HEIGHT2),
     showStripe && (showApplePay || showGooglePay) && skeleton(DEFAULT_BUTTONS_LAYOUT_BUTTON_HEIGHT2),
-    showStripe && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    showStripe && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
       "button",
       {
         type: "button",
-        onClick: async () => {
-          if (cardLoading) return;
-          if (onCardButtonClick) {
-            await onCardButtonClick();
-            return;
-          }
+        onClick: () => {
           onButtonClick?.("card");
           setShowCardForm(true);
         },
-        disabled: cardLoading,
         style: {
           width: "100%",
           ...cardButtonSizing,
@@ -8154,7 +8153,7 @@ function InterimButtonsView({
           borderRadius: "8px",
           fontSize: bStyles.cardButtonFontSize ?? "0.95rem",
           fontWeight: 600,
-          cursor: cardLoading ? "not-allowed" : "pointer",
+          cursor: "pointer",
           display: "flex",
           alignItems: "center",
           justifyContent: "center",
@@ -8162,7 +8161,7 @@ function InterimButtonsView({
           boxShadow: "0 1px 2px rgba(0,0,0,0.04)",
           transition: "transform 0.1s",
           position: "relative",
-          opacity: cardLoading ? 0.6 : 1,
+          opacity: 1,
           ...bStyles.cardButton
         },
         onMouseDown: (e) => {
@@ -8171,39 +8170,22 @@ function InterimButtonsView({
         onMouseUp: (e) => {
           e.currentTarget.style.transform = "scale(1)";
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(CardButtonContentSlot, { content: cardButtonContent })
+        children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(CardButtonContentSlot, { content: cardButtonContent })
       }
     ),
-    errorMessage && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: {
-      margin: "0.25rem 0",
-      padding: "0.625rem 0.875rem",
-      background: "#FEF2F2",
-      border: "1px solid #FECACA",
-      borderRadius: "8px",
-      color: "#991B1B",
-      fontSize: "0.85rem",
-      fontWeight: 600,
-      display: "flex",
-      alignItems: "center",
-      gap: "0.5rem",
-      ...bStyles.errorBanner
-    }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", style: { flexShrink: 0 }, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("path", { d: "M12 9v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z", stroke: "#DC2626", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }),
-      errorMessage
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("style", { children: `@keyframes flopay-interim-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }` })
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("style", { children: `@keyframes flopay-interim-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }` })
   ] });
 }
 
 // src/checkout-form.tsx
 var import_js5 = require("@flopay/js");
 var import_shared9 = require("@flopay/shared");
-var import_react11 = require("react");
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_react12 = require("react");
+var import_jsx_runtime10 = require("react/jsx-runtime");
 var WALLET_RESUME_KEY = "flopay_wallet_resume";
-var CheckoutForm = (0, import_react11.forwardRef)(
+var CheckoutForm = (0, import_react12.forwardRef)(
   function CheckoutForm2(props, ref) {
-    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(CheckoutFormInner, { ...props, innerRef: ref });
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(CheckoutFormInner, { ...props, innerRef: ref });
   }
 );
 function CheckoutFormInner({
@@ -8233,27 +8215,27 @@ function CheckoutFormInner({
   const paypalFlopay = usePayPalFloPay();
   const elements = useElements();
   const contextBillingUrl = useBillingApiUrl();
-  const [processing, setProcessing] = (0, import_react11.useState)(false);
-  const [error, setError] = (0, import_react11.useState)(null);
-  const [is3DSActive, setIs3DSActive] = (0, import_react11.useState)(false);
+  const [processing, setProcessing] = (0, import_react12.useState)(false);
+  const [error, setError] = (0, import_react12.useState)(null);
+  const [is3DSActive, setIs3DSActive] = (0, import_react12.useState)(false);
   const displayError = externalError ?? error;
   const isSubmitting = externalProcessing ?? processing;
   const isSelfContained = !onTokenizedBody;
   const baseUrl = (billingApiUrl || contextBillingUrl).replace(/\/+$/, "");
-  const updateError = (0, import_react11.useCallback)(
+  const updateError = (0, import_react12.useCallback)(
     (err) => {
       setError(err);
       onErrorChange?.(err);
     },
     [onErrorChange]
   );
-  const emitDecline = (0, import_react11.useCallback)(
+  const emitDecline = (0, import_react12.useCallback)(
     (input, overrides) => {
       onDecline?.(buildDeclineEvent("card", input, overrides));
     },
     [onDecline]
   );
-  const processPaymentInternal = (0, import_react11.useCallback)(
+  const processPaymentInternal = (0, import_react12.useCallback)(
     async (tokenizedBody, completionPaymentMethodId) => {
       setProcessing(true);
       updateError(null);
@@ -8365,7 +8347,7 @@ function CheckoutFormInner({
     },
     [baseUrl, sessionId, nonce, userId, email, firstName, lastName, chv, flopay, paypalFlopay, onComplete, onError, onDecline, updateError, emitDecline]
   );
-  const dispatchTokenizedBody = (0, import_react11.useCallback)(
+  const dispatchTokenizedBody = (0, import_react12.useCallback)(
     (tokenizedBody) => {
       if (onTokenizedBody) {
         onTokenizedBody(tokenizedBody);
@@ -8375,7 +8357,7 @@ function CheckoutFormInner({
     },
     [onTokenizedBody, processPaymentInternal]
   );
-  (0, import_react11.useImperativeHandle)(innerRef, () => ({
+  (0, import_react12.useImperativeHandle)(innerRef, () => ({
     async handleNextAction(secret) {
       if (!flopay) return;
       setIs3DSActive(true);
@@ -8402,7 +8384,7 @@ function CheckoutFormInner({
       }
     }
   }), [flopay, dispatchTokenizedBody, onError, updateError, emitDecline]);
-  (0, import_react11.useEffect)(() => {
+  (0, import_react12.useEffect)(() => {
     if (typeof window === "undefined") return;
     const stored = localStorage.getItem(WALLET_RESUME_KEY);
     if (!stored) return;
@@ -8420,7 +8402,7 @@ function CheckoutFormInner({
       localStorage.removeItem(WALLET_RESUME_KEY);
     }
   }, [sessionId, dispatchTokenizedBody]);
-  const handleSubmit = (0, import_react11.useCallback)(
+  const handleSubmit = (0, import_react12.useCallback)(
     async (e) => {
       e.preventDefault();
       if (!flopay || !elements || isSubmitting) return;
@@ -8446,8 +8428,7 @@ function CheckoutFormInner({
         if (!sessionId || !email) {
           throw new import_shared9.FloPayError("Missing sessionId or email", "validation_error");
         }
-        const intentHeaders = { "Content-Type": "application/json" };
-        if (nonce) intentHeaders["x-checkout-session-token"] = nonce;
+        const intentHeaders = intentRequestHeaders(nonce);
         const intentResponse = await fetch(`${baseUrl}/v1/checkouts/payments/intents`, {
           method: "POST",
           headers: intentHeaders,
@@ -8512,8 +8493,8 @@ function CheckoutFormInner({
     [flopay, elements, isSubmitting, sessionId, nonce, email, firstName, lastName, baseUrl, isSelfContained, dispatchTokenizedBody, onError, updateError, emitDecline]
   );
   const isReady = flopay !== null && elements !== null;
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("form", { onSubmit: handleSubmit, className, style: { position: "relative" }, children: [
-    (is3DSActive || isSubmitting) && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { "data-testid": "flopay-overlay", style: {
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("form", { onSubmit: handleSubmit, className, style: { position: "relative" }, children: [
+    (is3DSActive || isSubmitting) && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { "data-testid": "flopay-overlay", style: {
       position: "absolute",
       inset: 0,
       background: "rgba(255,255,255,0.7)",
@@ -8522,12 +8503,12 @@ function CheckoutFormInner({
       justifyContent: "center",
       zIndex: 10
     }, children: is3DSActive ? "Verifying payment..." : "Processing..." }),
-    !isReady && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { "data-testid": "flopay-loading", "aria-busy": "true", children: "Loading payment form..." }),
-    isReady && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(PaymentElement, { options: { layout } }),
-      showAddress && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(AddressElement, { options: { mode: showAddress === true ? "billing" : showAddress } }),
-      displayError && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { role: "alert", "data-testid": "flopay-error", style: { color: "red", margin: "0.75rem 0" }, children: displayError }),
-      children ?? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    !isReady && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { "data-testid": "flopay-loading", "aria-busy": "true", children: "Loading payment form..." }),
+    isReady && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(PaymentElement, { options: { layout } }),
+      showAddress && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(AddressElement, { options: { mode: showAddress === true ? "billing" : showAddress } }),
+      displayError && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { role: "alert", "data-testid": "flopay-error", style: { color: "red", margin: "0.75rem 0" }, children: displayError }),
+      children ?? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
         "button",
         {
           type: "submit",
@@ -8543,8 +8524,8 @@ function CheckoutFormInner({
 // src/paypal-button.tsx
 var import_js6 = require("@flopay/js");
 var import_shared10 = require("@flopay/shared");
-var import_react12 = require("react");
-var import_jsx_runtime10 = require("react/jsx-runtime");
+var import_react13 = require("react");
+var import_jsx_runtime11 = require("react/jsx-runtime");
 function PayPalButton({
   sessionId,
   nonce,
@@ -8562,11 +8543,11 @@ function PayPalButton({
   const flopay = useFloPay();
   const elements = useElements();
   const contextBillingUrl = useBillingApiUrl();
-  const [ready, setReady] = (0, import_react12.useState)(false);
-  const [submitting, setSubmitting] = (0, import_react12.useState)(false);
-  const paypalResumeAttempted = (0, import_react12.useRef)(false);
+  const [ready, setReady] = (0, import_react13.useState)(false);
+  const [submitting, setSubmitting] = (0, import_react13.useState)(false);
+  const paypalResumeAttempted = (0, import_react13.useRef)(false);
   const baseUrl = (billingApiUrl || contextBillingUrl).replace(/\/+$/, "");
-  const processPaymentInternal = (0, import_react12.useCallback)(
+  const processPaymentInternal = (0, import_react13.useCallback)(
     async (tokenizedBody) => {
       try {
         const api = new import_js6.PaymentAPI(baseUrl);
@@ -8594,7 +8575,7 @@ function PayPalButton({
     },
     [baseUrl, sessionId, nonce, userId, email, firstName, lastName, chv, onComplete, onErrorChange]
   );
-  const dispatchTokenizedBody = (0, import_react12.useCallback)(
+  const dispatchTokenizedBody = (0, import_react13.useCallback)(
     (body) => {
       if (onTokenizedBody) {
         onTokenizedBody(body);
@@ -8604,7 +8585,7 @@ function PayPalButton({
     },
     [onTokenizedBody, processPaymentInternal]
   );
-  (0, import_react12.useEffect)(() => {
+  (0, import_react13.useEffect)(() => {
     if (!flopay || paypalResumeAttempted.current) return;
     const params = new URLSearchParams(window.location.search);
     const paymentIntentId = params.get("payment_intent");
@@ -8652,7 +8633,7 @@ function PayPalButton({
       }
     })();
   }, [flopay, dispatchTokenizedBody, onErrorChange]);
-  const handlePayPalConfirm = (0, import_react12.useCallback)(async () => {
+  const handlePayPalConfirm = (0, import_react13.useCallback)(async () => {
     if (!flopay || !elements) return;
     try {
       setSubmitting(true);
@@ -8686,11 +8667,11 @@ function PayPalButton({
     }
   }, [flopay, elements, sessionId, nonce, email, baseUrl, dispatchTokenizedBody, onErrorChange]);
   if (!flopay || !elements) {
-    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { style: { height: 45, background: "#f0f0f0", borderRadius: 6, animation: "pulse 1.5s infinite" } });
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { style: { height: 45, background: "#f0f0f0", borderRadius: 6, animation: "pulse 1.5s infinite" } });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
-    !ready && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { style: { height: 45, background: "#f0f0f0", borderRadius: 6 } }),
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { style: ready ? {} : { display: "none" }, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
+    !ready && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { style: { height: 45, background: "#f0f0f0", borderRadius: 6 } }),
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { style: ready ? {} : { display: "none" }, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
       "button",
       {
         type: "button",
@@ -8712,7 +8693,7 @@ function PayPalButton({
         children: submitting ? "Processing..." : "PayPal"
       }
     ) }),
-    (submitting || isProcessing) && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { style: {
+    (submitting || isProcessing) && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { style: {
       position: "fixed",
       inset: 0,
       background: "rgba(0,0,0,0.4)",
@@ -8720,7 +8701,7 @@ function PayPalButton({
       alignItems: "center",
       justifyContent: "center",
       zIndex: 1e3
-    }, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { style: {
+    }, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { style: {
       background: "white",
       borderRadius: 8,
       padding: "1.5rem",
@@ -8732,10 +8713,10 @@ function PayPalButton({
 }
 
 // src/automatic-payment-button.tsx
-var import_react13 = require("react");
+var import_react14 = require("react");
 var import_js7 = require("@flopay/js");
 var import_shared11 = require("@flopay/shared");
-var import_jsx_runtime11 = require("react/jsx-runtime");
+var import_jsx_runtime12 = require("react/jsx-runtime");
 var DEFAULT_BUTTONS_LAYOUT_BUTTON_HEIGHT3 = 44;
 function sleep2(ms) {
   return new Promise((resolve) => setTimeout(resolve, ms));
@@ -8815,11 +8796,11 @@ function FloPayAutomaticPaymentButton({
   style,
   ...buttonProps
 }) {
-  const resolvedBillingUrl = (0, import_react13.useMemo)(
+  const resolvedBillingUrl = (0, import_react14.useMemo)(
     () => (0, import_shared11.resolveBillingApiUrl)(billingApiUrl),
     [billingApiUrl]
   );
-  const createSessionDraft = (0, import_react13.useMemo)(
+  const createSessionDraft = (0, import_react14.useMemo)(
     () => resolveCreateSessionDraft({
       createSession,
       clientId,
@@ -8847,36 +8828,36 @@ function FloPayAutomaticPaymentButton({
       utmMetadata
     ]
   );
-  const [isProcessing, setIsProcessing] = (0, import_react13.useState)(false);
-  const [overlayStatus, setOverlayStatus] = (0, import_react13.useState)(null);
-  const [overlayError, setOverlayError] = (0, import_react13.useState)(null);
-  const [fallbackSession, setFallbackSession] = (0, import_react13.useState)(null);
-  const isMountedRef = (0, import_react13.useRef)(true);
-  const threeDsAbortRef = (0, import_react13.useRef)(null);
-  const fallbackSessionRef = (0, import_react13.useRef)(fallbackSession);
-  const onSuccessRef = (0, import_react13.useRef)(onSuccess);
-  const onErrorRef = (0, import_react13.useRef)(onError);
-  const onDeclineRef = (0, import_react13.useRef)(onDecline);
-  (0, import_react13.useEffect)(() => {
+  const [isProcessing, setIsProcessing] = (0, import_react14.useState)(false);
+  const [overlayStatus, setOverlayStatus] = (0, import_react14.useState)(null);
+  const [overlayError, setOverlayError] = (0, import_react14.useState)(null);
+  const [fallbackSession, setFallbackSession] = (0, import_react14.useState)(null);
+  const isMountedRef = (0, import_react14.useRef)(true);
+  const threeDsAbortRef = (0, import_react14.useRef)(null);
+  const fallbackSessionRef = (0, import_react14.useRef)(fallbackSession);
+  const onSuccessRef = (0, import_react14.useRef)(onSuccess);
+  const onErrorRef = (0, import_react14.useRef)(onError);
+  const onDeclineRef = (0, import_react14.useRef)(onDecline);
+  (0, import_react14.useEffect)(() => {
     fallbackSessionRef.current = fallbackSession;
   }, [fallbackSession]);
-  (0, import_react13.useEffect)(() => {
+  (0, import_react14.useEffect)(() => {
     onSuccessRef.current = onSuccess;
   }, [onSuccess]);
-  (0, import_react13.useEffect)(() => {
+  (0, import_react14.useEffect)(() => {
     onErrorRef.current = onError;
   }, [onError]);
-  (0, import_react13.useEffect)(() => {
+  (0, import_react14.useEffect)(() => {
     onDeclineRef.current = onDecline;
   }, [onDecline]);
-  (0, import_react13.useEffect)(() => {
+  (0, import_react14.useEffect)(() => {
     isMountedRef.current = true;
     return () => {
       isMountedRef.current = false;
       threeDsAbortRef.current?.abort();
     };
   }, []);
-  (0, import_react13.useEffect)(() => {
+  (0, import_react14.useEffect)(() => {
     if (typeof window === "undefined") {
       return;
     }
@@ -8890,13 +8871,13 @@ function FloPayAutomaticPaymentButton({
       window.removeEventListener("keydown", handleKeyDown);
     };
   }, []);
-  const emitDecline = (0, import_react13.useCallback)((error, method = DEFAULT_SAVED_PAYMENT_DECLINE_METHOD) => {
+  const emitDecline = (0, import_react14.useCallback)((error, method = DEFAULT_SAVED_PAYMENT_DECLINE_METHOD) => {
     onDeclineRef.current?.(buildDeclineEvent(method, error, {
       code: error.code,
       declineCode: error.declineCode
     }));
   }, []);
-  const showSuccess = (0, import_react13.useCallback)(async (event) => {
+  const showSuccess = (0, import_react14.useCallback)(async (event) => {
     if (!isMountedRef.current) return;
     setOverlayError(null);
     setOverlayStatus("success");
@@ -8904,7 +8885,7 @@ function FloPayAutomaticPaymentButton({
     if (!isMountedRef.current) return;
     onSuccessRef.current?.(event);
   }, []);
-  const showError = (0, import_react13.useCallback)(async (error, options) => {
+  const showError = (0, import_react14.useCallback)(async (error, options) => {
     if (!isMountedRef.current) return;
     onErrorRef.current?.(error);
     if (options?.emitDecline) {
@@ -8914,7 +8895,7 @@ function FloPayAutomaticPaymentButton({
     setOverlayStatus("error");
     await sleep2(PROCESSING_OVERLAY_ERROR_DELAY_MS);
   }, [emitDecline]);
-  const processResolvedSession = (0, import_react13.useCallback)(async (apiResult, resolvedSessionId, options) => {
+  const processResolvedSession = (0, import_react14.useCallback)(async (apiResult, resolvedSessionId, options) => {
     const session = apiResult.data.session ?? null;
     if (!session) {
       throw new import_shared11.FloPayError("No session data returned", "api_error");
@@ -9070,7 +9051,7 @@ function FloPayAutomaticPaymentButton({
     showError,
     showSuccess
   ]);
-  const handleButtonClick = (0, import_react13.useCallback)(async (event) => {
+  const handleButtonClick = (0, import_react14.useCallback)(async (event) => {
     buttonProps.onClick?.(event);
     if (event.defaultPrevented || disabled || isProcessing) {
       return;
@@ -9152,7 +9133,7 @@ function FloPayAutomaticPaymentButton({
     showError,
     showSuccess
   ]);
-  const handleFallbackComplete = (0, import_react13.useCallback)((result) => {
+  const handleFallbackComplete = (0, import_react14.useCallback)((result) => {
     const activeFallback = fallbackSessionRef.current;
     setFallbackSession(null);
     onSuccessRef.current?.({
@@ -9162,14 +9143,14 @@ function FloPayAutomaticPaymentButton({
       autoCompleted: false
     });
   }, []);
-  const handleFallbackError = (0, import_react13.useCallback)((error) => {
+  const handleFallbackError = (0, import_react14.useCallback)((error) => {
     onErrorRef.current?.(error);
   }, []);
-  const handleFallbackDecline = (0, import_react13.useCallback)((decline) => {
+  const handleFallbackDecline = (0, import_react14.useCallback)((decline) => {
     onDeclineRef.current?.(decline);
   }, []);
-  const themeBundle = (0, import_react13.useMemo)(() => (0, import_shared11.resolveTheme)(theme), [theme]);
-  const bStyles = (0, import_react13.useMemo)(() => {
+  const themeBundle = (0, import_react14.useMemo)(() => (0, import_shared11.resolveTheme)(theme), [theme]);
+  const bStyles = (0, import_react14.useMemo)(() => {
     const base = themeBundle?.buttonsLayout ?? (0, import_shared11.resolveButtonsLayoutTheme)(buttonsTheme);
     if (!stylesOverride) return base;
     return {
@@ -9178,7 +9159,7 @@ function FloPayAutomaticPaymentButton({
       cardButton: { ...base.cardButton, ...stylesOverride.cardButton }
     };
   }, [themeBundle, buttonsTheme, stylesOverride]);
-  const resolvedAppearance = (0, import_react13.useMemo)(() => {
+  const resolvedAppearance = (0, import_react14.useMemo)(() => {
     const bundleAppearance = themeBundle?.appearance;
     if (!appearance) return bundleAppearance;
     if (!bundleAppearance) return appearance;
@@ -9196,8 +9177,8 @@ function FloPayAutomaticPaymentButton({
   const resolvedPrimaryHoverColor = resolvedAppearanceVars?.colorPrimaryHover ?? darkenHex(resolvedPrimaryColor, 0.12);
   const resolvedButtonBorderRadius = resolvedAppearanceVars?.borderRadius ?? "8px";
   const cardButtonSizing = children === void 0 ? { boxSizing: "border-box", height: DEFAULT_BUTTONS_LAYOUT_BUTTON_HEIGHT3, padding: "0 1rem" } : { padding: "0.9rem 1rem" };
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
       "button",
       {
         ...buttonProps,
@@ -9261,17 +9242,17 @@ function FloPayAutomaticPaymentButton({
             e.currentTarget.style.transform = "scale(1)";
           }
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(CardButtonContentSlot, { content: children })
+        children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(CardButtonContentSlot, { content: children })
       }
     ),
-    overlayStatus && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    overlayStatus && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
       ProcessingOverlay,
       {
         status: overlayStatus,
         errorMessage: overlayError
       }
     ),
-    fallbackSession && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    fallbackSession && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
       "div",
       {
         "data-testid": "flopay-automatic-payment-fallback",
@@ -9292,7 +9273,7 @@ function FloPayAutomaticPaymentButton({
           padding: "1.5rem",
           zIndex: 1100
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
           "div",
           {
             style: {
@@ -9308,7 +9289,7 @@ function FloPayAutomaticPaymentButton({
               flexDirection: "column",
               gap: "1rem"
             },
-            children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
               FloPayCheckout,
               {
                 sessionId: fallbackSession.sessionId,