@flopay/react 1.4.0 → 1.4.1

package/dist/index.mjs

@@ -193,7 +193,7 @@ function FloPayProvider({
 }
 
 // src/flopay-checkout.tsx
-import React8, { useCallback as useCallback4, useEffect as useEffect6, useMemo as useMemo4, useRef as useRef6, useState as useState4 } from "react";
+import React9, { useCallback as useCallback4, useEffect as useEffect6, useMemo as useMemo4, useRef as useRef6, useState as useState4 } from "react";
 import { PaymentAPI as PaymentAPI4 } from "@flopay/js";
 import { SDK_VERSION as SDK_VERSION2, FloPayError as FloPayError5, resolveBillingApiUrl as resolveBillingApiUrl3, buildCheckoutDisplayData, resolveButtonsLayoutTheme as resolveButtonsLayoutTheme2, resolveTheme as resolveTheme2 } from "@flopay/shared";
 
@@ -428,8 +428,65 @@ function VaultCardFields({
   return /* @__PURE__ */ jsx4("div", { ref: containerRef, "data-testid": "flopay-vault-card-fields", style: containerStyle });
 }
 
+// src/error-banner.tsx
+import "react";
+import { jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
+function ErrorBanner({
+  children,
+  margin,
+  icon = true,
+  styleOverride
+}) {
+  return /* @__PURE__ */ jsxs2(
+    "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__ */ jsx5("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", style: { flexShrink: 0 }, children: /* @__PURE__ */ jsx5(
+          "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 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
-import React7, { forwardRef, useCallback as useCallback3, useContext as useContext3, useEffect as useEffect5, useImperativeHandle, useMemo as useMemo3, useRef as useRef5, useState as useState3 } from "react";
+import React8, { forwardRef, useCallback as useCallback3, useContext as useContext3, useEffect as useEffect5, useImperativeHandle, useMemo as useMemo3, useRef as useRef5, useState as useState3 } from "react";
 
 // src/hooks.ts
 import { useContext as useContext2 } from "react";
@@ -456,14 +513,14 @@ function useBillingApiUrl() {
 
 // src/processing-overlay.tsx
 import "react";
-import { jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
 var PROCESSING_OVERLAY_SUCCESS_DELAY_MS = 1200;
 var PROCESSING_OVERLAY_ERROR_DELAY_MS = 1500;
 function ProcessingOverlay({
   status,
   errorMessage
 }) {
-  return /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsx6(
     "div",
     {
       "data-testid": "flopay-processing-overlay",
@@ -480,7 +537,7 @@ function ProcessingOverlay({
         zIndex: 1e3,
         backdropFilter: "blur(2px)"
       },
-      children: /* @__PURE__ */ jsxs2(
+      children: /* @__PURE__ */ jsxs3(
         "div",
         {
           style: {
@@ -496,8 +553,8 @@ function ProcessingOverlay({
             gap: 16
           },
           children: [
-            /* @__PURE__ */ jsxs2("div", { style: { width: 48, height: 48, position: "relative" }, children: [
-              status === "processing" && /* @__PURE__ */ jsxs2(
+            /* @__PURE__ */ jsxs3("div", { style: { width: 48, height: 48, position: "relative" }, children: [
+              status === "processing" && /* @__PURE__ */ jsxs3(
                 "svg",
                 {
                   width: "48",
@@ -507,14 +564,14 @@ function ProcessingOverlay({
                   xmlns: "http://www.w3.org/2000/svg",
                   style: { animation: "flopay-spin 0.8s linear infinite" },
                   children: [
-                    /* @__PURE__ */ jsx5("circle", { cx: "12", cy: "12", r: "10", stroke: "#e5e7eb", strokeWidth: "3" }),
-                    /* @__PURE__ */ jsx5("path", { d: "M4 12a8 8 0 018-8v3a5 5 0 00-5 5H4z", fill: "#4A49FF" })
+                    /* @__PURE__ */ jsx6("circle", { cx: "12", cy: "12", r: "10", stroke: "#e5e7eb", strokeWidth: "3" }),
+                    /* @__PURE__ */ jsx6("path", { d: "M4 12a8 8 0 018-8v3a5 5 0 00-5 5H4z", fill: "#4A49FF" })
                   ]
                 }
               ),
-              status === "success" && /* @__PURE__ */ jsx5("div", { style: { animation: "flopay-pop 0.4s cubic-bezier(0.34,1.56,0.64,1)" }, children: /* @__PURE__ */ jsxs2("svg", { width: "48", height: "48", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
-                /* @__PURE__ */ jsx5("circle", { cx: "12", cy: "12", r: "11", fill: "#22c55e" }),
-                /* @__PURE__ */ jsx5(
+              status === "success" && /* @__PURE__ */ jsx6("div", { style: { animation: "flopay-pop 0.4s cubic-bezier(0.34,1.56,0.64,1)" }, children: /* @__PURE__ */ jsxs3("svg", { width: "48", height: "48", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+                /* @__PURE__ */ jsx6("circle", { cx: "12", cy: "12", r: "11", fill: "#22c55e" }),
+                /* @__PURE__ */ jsx6(
                   "path",
                   {
                     d: "M7 12.5l3 3 7-7",
@@ -530,9 +587,9 @@ function ProcessingOverlay({
                   }
                 )
               ] }) }),
-              status === "error" && /* @__PURE__ */ jsx5("div", { style: { animation: "flopay-shake 0.4s ease" }, children: /* @__PURE__ */ jsxs2("svg", { width: "48", height: "48", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
-                /* @__PURE__ */ jsx5("circle", { cx: "12", cy: "12", r: "11", fill: "#ef4444" }),
-                /* @__PURE__ */ jsx5(
+              status === "error" && /* @__PURE__ */ jsx6("div", { style: { animation: "flopay-shake 0.4s ease" }, children: /* @__PURE__ */ jsxs3("svg", { width: "48", height: "48", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+                /* @__PURE__ */ jsx6("circle", { cx: "12", cy: "12", r: "11", fill: "#ef4444" }),
+                /* @__PURE__ */ jsx6(
                   "path",
                   {
                     d: "M8 8l8 8M16 8l-8 8",
@@ -548,7 +605,7 @@ function ProcessingOverlay({
                 )
               ] }) })
             ] }),
-            /* @__PURE__ */ jsxs2(
+            /* @__PURE__ */ jsxs3(
               "span",
               {
                 style: {
@@ -564,7 +621,7 @@ function ProcessingOverlay({
                 ]
               }
             ),
-            status === "success" && /* @__PURE__ */ jsx5(
+            status === "success" && /* @__PURE__ */ jsx6(
               "p",
               {
                 style: {
@@ -578,7 +635,7 @@ function ProcessingOverlay({
                 children: "You will be automatically redirected, do not close or navigate away from this window."
               }
             ),
-            status === "error" && errorMessage && /* @__PURE__ */ jsx5(
+            status === "error" && errorMessage && /* @__PURE__ */ jsx6(
               "p",
               {
                 style: {
@@ -592,7 +649,7 @@ function ProcessingOverlay({
                 children: errorMessage
               }
             ),
-            /* @__PURE__ */ jsx5("style", { children: `
+            /* @__PURE__ */ jsx6("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; } }
@@ -754,6 +811,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";
@@ -921,7 +986,7 @@ function isPopupBlockedError(err) {
 }
 
 // src/direct-paypal-button.tsx
-import { jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx7, jsxs as jsxs4 } from "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 = {
@@ -1485,9 +1550,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",
@@ -1816,7 +1880,7 @@ function DirectPayPalButtonImplementation({
       }
     };
   }, [baseUrl, clientId, currency, environment, isSubscription, sessionId, existingOrderId, renderGeneration, telemetrySource]);
-  const debugPanel = debug ? /* @__PURE__ */ jsxs3(
+  const debugPanel = debug ? /* @__PURE__ */ jsxs4(
     "pre",
     {
       "data-testid": "flopay-direct-paypal-debug",
@@ -1841,17 +1905,17 @@ ${debugLines.join("\n")}`
     }
   ) : null;
   if (failed) {
-    return debug ? /* @__PURE__ */ jsx6("div", { children: debugPanel }) : null;
+    return debug ? /* @__PURE__ */ jsx7("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__ */ jsxs3("div", { children: [
+    /* @__PURE__ */ jsxs4("div", { children: [
       debugPanel,
-      /* @__PURE__ */ jsxs3("div", { style: { position: "relative", minHeight: DEFAULT_BUTTON_HEIGHT }, children: [
-        !ready && /* @__PURE__ */ jsx6(
+      /* @__PURE__ */ jsxs4("div", { style: { position: "relative", minHeight: DEFAULT_BUTTON_HEIGHT }, children: [
+        !ready && /* @__PURE__ */ jsx7(
           "div",
           {
             "data-testid": "flopay-direct-paypal-placeholder",
@@ -1865,7 +1929,7 @@ ${debugLines.join("\n")}`
             }
           }
         ),
-        /* @__PURE__ */ jsx6(
+        /* @__PURE__ */ jsx7(
           "div",
           {
             ref: containerRef,
@@ -1882,7 +1946,7 @@ ${debugLines.join("\n")}`
           renderGeneration
         )
       ] }),
-      showRetryFocusTarget && /* @__PURE__ */ jsx6(
+      showRetryFocusTarget && /* @__PURE__ */ jsx7(
         "button",
         {
           ref: focusTargetRef,
@@ -1897,15 +1961,15 @@ ${debugLines.join("\n")}`
   );
 }
 function DirectPayPalButton(props) {
-  return /* @__PURE__ */ jsx6(DirectPayPalButtonImplementation, { ...props });
+  return /* @__PURE__ */ jsx7(DirectPayPalButtonImplementation, { ...props });
 }
 function InstrumentedDirectPayPalButton(props) {
-  return /* @__PURE__ */ jsx6(DirectPayPalButtonImplementation, { ...props });
+  return /* @__PURE__ */ jsx7(DirectPayPalButtonImplementation, { ...props });
 }
 
 // src/split-card-form.tsx
 import { FloPayError as FloPayError3, isSetupIntentClientSecret as isSetupIntentClientSecret2, resolveTheme } from "@flopay/shared";
-import { Fragment as Fragment2, jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx8, jsxs as jsxs5 } from "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";
@@ -2138,7 +2202,7 @@ function normalizeBeforeButtonClickError(method, err) {
   );
 }
 function FloPayKeyframes() {
-  return /* @__PURE__ */ jsx7("style", { children: FLOPAY_KEYFRAMES });
+  return /* @__PURE__ */ jsx8("style", { children: FLOPAY_KEYFRAMES });
 }
 function toCssSize(value) {
   if (typeof value === "number") return `${value}px`;
@@ -2160,8 +2224,8 @@ function ExpressCheckoutReadySwap({
   children
 }) {
   if (state === "unavailable" || state === "load_error") return null;
-  return /* @__PURE__ */ jsxs4("div", { style: { position: "relative", minHeight: 44 }, children: [
-    /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsxs5("div", { style: { position: "relative", minHeight: 44 }, children: [
+    /* @__PURE__ */ jsx8(
       "div",
       {
         "data-testid": placeholderTestId,
@@ -2180,7 +2244,7 @@ function ExpressCheckoutReadySwap({
         }
       }
     ),
-    /* @__PURE__ */ jsx7(
+    /* @__PURE__ */ jsx8(
       "div",
       {
         style: {
@@ -2200,7 +2264,7 @@ function isExpressCheckoutRowVisible(state) {
 }
 var SplitCardForm = forwardRef(
   function SplitCardForm2(props, ref) {
-    return /* @__PURE__ */ jsx7(SplitCardFormInner, { ...props, innerRef: ref });
+    return /* @__PURE__ */ jsx8(SplitCardFormInner, { ...props, innerRef: ref });
   }
 );
 function PayPalButtonInner({
@@ -2404,8 +2468,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,
@@ -2496,14 +2559,14 @@ function PayPalButtonInner({
       setSubmitting(false);
     }
   }, [stripe, elements, sessionId, nonce, email, baseUrl, onTokenizedBody, onErrorChange, onDecline, runBeforeButtonClick, recoverTechnicalFailure, finishAttempt, isAttemptCurrent, isAttemptInvalidated, surfaceKey]);
-  return /* @__PURE__ */ jsxs4(Fragment2, { children: [
-    /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsxs5(Fragment2, { children: [
+    /* @__PURE__ */ jsx8(
       ExpressCheckoutReadySwap,
       {
         state: loadState,
         placeholderTestId: "flopay-paypal-placeholder",
         borderRadius: placeholderBorderRadius,
-        children: /* @__PURE__ */ jsxs4(
+        children: /* @__PURE__ */ jsxs5(
           "div",
           {
             ref: focusTargetRef,
@@ -2512,7 +2575,7 @@ function PayPalButtonInner({
             "aria-label": "PayPal payment method",
             style: { borderRadius: 8, outlineOffset: 4 },
             children: [
-              showRecoveryAction && /* @__PURE__ */ jsx7(
+              showRecoveryAction && /* @__PURE__ */ jsx8(
                 "button",
                 {
                   ref: recoveryActionRef,
@@ -2523,7 +2586,7 @@ function PayPalButtonInner({
                   children: "Try PayPal again"
                 }
               ),
-              /* @__PURE__ */ jsx7(
+              /* @__PURE__ */ jsx8(
                 ExpressCheckoutElement,
                 {
                   onReady: (event) => setLoadState(resolveExpressCheckoutLoadState(event, ["paypal"])),
@@ -2563,7 +2626,7 @@ function PayPalButtonInner({
         )
       }
     ),
-    submitting && /* @__PURE__ */ jsx7(ProcessingOverlay, { status: "processing" })
+    submitting && /* @__PURE__ */ jsx8(ProcessingOverlay, { status: "processing" })
   ] });
 }
 function WalletButtonInner({
@@ -2690,8 +2753,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,
@@ -2764,14 +2826,14 @@ function WalletButtonInner({
     () => expressMethods.map(stripeExpressMethodToOptionKey),
     [expressMethods]
   );
-  return /* @__PURE__ */ jsxs4(Fragment2, { children: [
-    /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsxs5(Fragment2, { children: [
+    /* @__PURE__ */ jsx8(
       ExpressCheckoutReadySwap,
       {
         state: loadState,
         placeholderTestId: "flopay-wallet-placeholder",
         borderRadius: placeholderBorderRadius,
-        children: /* @__PURE__ */ jsxs4(
+        children: /* @__PURE__ */ jsxs5(
           "div",
           {
             ref: focusTargetRef,
@@ -2780,7 +2842,7 @@ function WalletButtonInner({
             "aria-label": "Wallet payment methods",
             style: { borderRadius: 8, outlineOffset: 4 },
             children: [
-              showRecoveryAction && /* @__PURE__ */ jsxs4(
+              showRecoveryAction && /* @__PURE__ */ jsxs5(
                 "button",
                 {
                   ref: recoveryActionRef,
@@ -2795,7 +2857,7 @@ function WalletButtonInner({
                   ]
                 }
               ),
-              /* @__PURE__ */ jsx7(
+              /* @__PURE__ */ jsx8(
                 ExpressCheckoutElement,
                 {
                   onReady: (event) => {
@@ -2859,7 +2921,7 @@ function WalletButtonInner({
         )
       }
     ),
-    submitting && /* @__PURE__ */ jsx7(ProcessingOverlay, { status: "processing" })
+    submitting && /* @__PURE__ */ jsx8(ProcessingOverlay, { status: "processing" })
   ] });
 }
 function StripeMethodButton({
@@ -2877,10 +2939,11 @@ function StripeMethodButton({
   fontFamily
 }) {
   const brand = 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__ */ jsx7(
+  return /* @__PURE__ */ jsx8(
     "button",
     {
       type: "button",
@@ -2927,9 +2990,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__ */ jsx7("span", { style: { margin: "0 auto" }, children: `Connecting to ${getStripeMethodDisplayName(method)}\u2026` })
-      ) : /* @__PURE__ */ jsxs4(Fragment2, { children: [
-        /* @__PURE__ */ jsxs4(
+        /* @__PURE__ */ jsx8("span", { style: { margin: "0 auto" }, children: `Connecting to ${getStripeMethodDisplayName(method)}\u2026` })
+      ) : /* @__PURE__ */ jsxs5(Fragment2, { children: [
+        /* @__PURE__ */ jsxs5(
           "span",
           {
             style: {
@@ -2942,15 +3005,36 @@ function StripeMethodButton({
               gap: hasVendoredStripeMethodLogo(method) ? 8 : 0
             },
             children: [
-              brand?.logoSvg && /* @__PURE__ */ jsx7(
+              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__ */ jsx8(
+                  "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__ */ jsx8(
                 "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,
@@ -2960,12 +3044,12 @@ function StripeMethodButton({
                   },
                   dangerouslySetInnerHTML: { __html: brand.logoSvg }
                 }
-              ),
-              /* @__PURE__ */ jsx7("span", { children: getStripeMethodDisplayName(method) })
+              ) : null,
+              /* @__PURE__ */ jsx8("span", { children: getStripeMethodDisplayName(method) })
             ]
           }
         ),
-        hasNextStep && /* @__PURE__ */ jsx7(
+        hasNextStep && /* @__PURE__ */ jsx8(
           "svg",
           {
             width: "14",
@@ -2985,7 +3069,7 @@ function StripeMethodButton({
               opacity: 0.7
             },
             "aria-hidden": "true",
-            children: /* @__PURE__ */ jsx7("path", { d: "M9 18l6-6-6-6" })
+            children: /* @__PURE__ */ jsx8("path", { d: "M9 18l6-6-6-6" })
           }
         )
       ] })
@@ -3049,8 +3133,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,
@@ -3104,9 +3187,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);
@@ -3159,8 +3241,8 @@ function StripeMethodInlineForm({
     onDecline
   ]);
   void onCancel;
-  return /* @__PURE__ */ jsxs4("div", { "data-testid": `flopay-stripe-method-form-${method}`, style: { display: "flex", flexDirection: "column" }, children: [
-    /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsxs5("div", { "data-testid": `flopay-stripe-method-form-${method}`, style: { display: "flex", flexDirection: "column" }, children: [
+    /* @__PURE__ */ jsx8(
       PaymentElement2,
       {
         onReady: () => setLoadState("ready"),
@@ -3189,7 +3271,7 @@ function StripeMethodInlineForm({
         }
       }
     ),
-    /* @__PURE__ */ jsx7(
+    /* @__PURE__ */ jsx8(
       "button",
       {
         type: "button",
@@ -3216,22 +3298,7 @@ function StripeMethodInlineForm({
         children: submitting ? "Processing\u2026" : `Pay with ${getStripeMethodDisplayName(method)}`
       }
     ),
-    errorText && /* @__PURE__ */ jsxs4("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__ */ jsx7("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", style: { flexShrink: 0 }, children: /* @__PURE__ */ jsx7("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__ */ jsx8(ErrorBanner, { margin: "0.75rem 0 0", children: errorText })
   ] });
 }
 function StripePaymentElementInner({
@@ -3289,8 +3356,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,
@@ -3356,9 +3422,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);
@@ -3430,7 +3495,7 @@ function StripePaymentElementInner({
       paymentMethodTypes: [localExpandedMethod]
     };
   }, [localExpandedMethod, paymentElementBaseOptions]);
-  return /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx8(
     "div",
     {
       "data-testid": "flopay-stripe-payment-element-region",
@@ -3439,8 +3504,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__ */ jsxs4(React7.Fragment, { children: [
-          /* @__PURE__ */ jsx7(
+        return /* @__PURE__ */ jsxs5(React8.Fragment, { children: [
+          /* @__PURE__ */ jsx8(
             StripeMethodButton,
             {
               method,
@@ -3457,12 +3522,12 @@ function StripePaymentElementInner({
               fontFamily: buttonAppearance?.fontFamily
             }
           ),
-          !onExpandApm && localExpandedMethod === method && localInlineElementsOptions && stripeInstance && /* @__PURE__ */ jsx7(
+          !onExpandApm && localExpandedMethod === method && localInlineElementsOptions && stripeInstance && /* @__PURE__ */ jsx8(
             StripeElements,
             {
               stripe: stripeInstance,
               options: localInlineElementsOptions,
-              children: /* @__PURE__ */ jsx7(
+              children: /* @__PURE__ */ jsx8(
                 StripeMethodInlineForm,
                 {
                   method,
@@ -4430,7 +4495,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);
@@ -4530,8 +4595,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,
@@ -4607,7 +4671,7 @@ function SplitCardFormInner({
   );
   const isReady = flopay !== null && (vaultActive || elements !== null);
   if (!isReady) {
-    return /* @__PURE__ */ jsx7("div", { "data-testid": "flopay-loading", "aria-busy": "true", children: "Loading payment form..." });
+    return /* @__PURE__ */ jsx8("div", { "data-testid": "flopay-loading", "aria-busy": "true", children: "Loading payment form..." });
   }
   const isButtons = layout === "buttons";
   const appearanceVars = appearance?.variables;
@@ -4666,7 +4730,7 @@ function SplitCardFormInner({
   const containerOverrides = bStyles.cardFormContainer ?? {};
   const containerPadding = containerOverrides.padding ?? (isButtons ? "0" : "1rem");
   const containerRadius = containerOverrides.borderRadius ?? resolvedBorderRadius;
-  const vaultCardFieldsNode = cardCapture && vaultMount ? /* @__PURE__ */ jsx7(
+  const vaultCardFieldsNode = cardCapture && vaultMount ? /* @__PURE__ */ jsx8(
     VaultCardFields,
     {
       capture: cardCapture,
@@ -4704,7 +4768,7 @@ function SplitCardFormInner({
         if (message) setOverlayStatus(null);
       }
     }
-  ) : /* @__PURE__ */ jsx7(
+  ) : /* @__PURE__ */ jsx8(
     "div",
     {
       "data-testid": "flopay-vault-loading",
@@ -4719,7 +4783,7 @@ function SplitCardFormInner({
       children: "Loading secure card form\u2026"
     }
   );
-  const cardFormBlock = /* @__PURE__ */ jsxs4("div", { style: {
+  const cardFormBlock = /* @__PURE__ */ jsxs5("div", { style: {
     backgroundColor: cardBg,
     borderRadius: containerRadius,
     ...containerOverrides,
@@ -4732,7 +4796,7 @@ function SplitCardFormInner({
     display: "flex",
     flexDirection: "column"
   }, children: [
-    /* @__PURE__ */ jsx7("style", { children: `
+    /* @__PURE__ */ jsx8("style", { children: `
         .flopay-shared-input::placeholder {
           color: var(--flopay-input-placeholder-color);
           opacity: 1;
@@ -4741,14 +4805,14 @@ function SplitCardFormInner({
           font-weight: var(--flopay-input-font-weight);
         }
       ` }),
-    isButtons && showCardForm && /* @__PURE__ */ jsxs4("div", { style: {
+    isButtons && showCardForm && /* @__PURE__ */ jsxs5("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__ */ jsxs4(
+      /* @__PURE__ */ jsxs5(
         "button",
         {
           type: "button",
@@ -4770,7 +4834,7 @@ function SplitCardFormInner({
           },
           "aria-label": "Back to payment methods",
           children: [
-            /* @__PURE__ */ jsx7("span", { style: {
+            /* @__PURE__ */ jsx8("span", { style: {
               display: "inline-flex",
               alignItems: "center",
               justifyContent: "center",
@@ -4780,12 +4844,12 @@ function SplitCardFormInner({
               backgroundColor: "#f3f4f6",
               transition: "background-color 0.15s",
               ...bStyles.backButtonIcon
-            }, children: /* @__PURE__ */ jsx7("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx7("path", { d: "M15 18l-6-6 6-6" }) }) }),
-            /* @__PURE__ */ jsx7(BackButtonContentSlot, { content: cardBackButtonContent })
+            }, children: /* @__PURE__ */ jsx8("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx8("path", { d: "M15 18l-6-6 6-6" }) }) }),
+            /* @__PURE__ */ jsx8(BackButtonContentSlot, { content: cardBackButtonContent })
           ]
         }
       ),
-      hideTitle ? /* @__PURE__ */ jsx7("div", { style: { flex: 1 } }) : /* @__PURE__ */ jsx7("div", { style: {
+      hideTitle ? /* @__PURE__ */ jsx8("div", { style: { flex: 1 } }) : /* @__PURE__ */ jsx8("div", { style: {
         flex: 1,
         textAlign: "center",
         fontWeight: 600,
@@ -4793,9 +4857,9 @@ function SplitCardFormInner({
         color: "#262833",
         paddingRight: 80,
         ...bStyles.title
-      }, children: /* @__PURE__ */ jsx7(TitleContentSlot, { content: cardTitleContent }) })
+      }, children: /* @__PURE__ */ jsx8(TitleContentSlot, { content: cardTitleContent }) })
     ] }),
-    !isButtons && !hideTitle && /* @__PURE__ */ jsx7("div", { style: {
+    !isButtons && !hideTitle && /* @__PURE__ */ jsx8("div", { style: {
       textAlign: "center",
       fontWeight: 600,
       fontSize: "1.1rem",
@@ -4805,17 +4869,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__ */ jsx7(TitleContentSlot, { content: cardTitleContent }) }),
-    !vaultActive && /* @__PURE__ */ jsxs4(Fragment2, { children: [
-      /* @__PURE__ */ jsx7("div", { style: {
+    }, children: /* @__PURE__ */ jsx8(TitleContentSlot, { content: cardTitleContent }) }),
+    !vaultActive && /* @__PURE__ */ jsxs5(Fragment2, { children: [
+      /* @__PURE__ */ jsx8("div", { style: {
         backgroundColor: cardInputBg,
         border: `1px solid ${resolvedBorder}`,
         borderTopLeftRadius: resolvedBorderRadius,
         borderTopRightRadius: resolvedBorderRadius,
         padding: "10px"
-      }, children: /* @__PURE__ */ jsx7(CardNumberElement, { onReady: () => setFormReady(true), options: stripeElementStyle }) }),
-      /* @__PURE__ */ jsxs4("div", { style: { display: "flex" }, children: [
-        /* @__PURE__ */ jsx7("div", { style: {
+      }, children: /* @__PURE__ */ jsx8(CardNumberElement, { onReady: () => setFormReady(true), options: stripeElementStyle }) }),
+      /* @__PURE__ */ jsxs5("div", { style: { display: "flex" }, children: [
+        /* @__PURE__ */ jsx8("div", { style: {
           flex: 1,
           backgroundColor: cardInputBg,
           // Longhand only — mixing `border` shorthand with per-side
@@ -4827,8 +4891,8 @@ function SplitCardFormInner({
           borderLeft: `1px solid ${resolvedBorder}`,
           borderBottomLeftRadius: resolvedBorderRadius,
           padding: "10px"
-        }, children: /* @__PURE__ */ jsx7(CardExpiryElement, { options: stripeElementStyle }) }),
-        /* @__PURE__ */ jsx7("div", { style: {
+        }, children: /* @__PURE__ */ jsx8(CardExpiryElement, { options: stripeElementStyle }) }),
+        /* @__PURE__ */ jsx8("div", { style: {
           flex: 1,
           backgroundColor: cardInputBg,
           borderTop: "none",
@@ -4837,16 +4901,16 @@ function SplitCardFormInner({
           borderLeft: `1px solid ${resolvedBorder}`,
           borderBottomRightRadius: resolvedBorderRadius,
           padding: "10px"
-        }, children: /* @__PURE__ */ jsx7(CardCvcElement, { options: stripeElementStyle }) })
+        }, children: /* @__PURE__ */ jsx8(CardCvcElement, { options: stripeElementStyle }) })
       ] })
     ] }),
-    !vaultActive && /* @__PURE__ */ jsx7("div", { style: {
+    !vaultActive && /* @__PURE__ */ jsx8("div", { style: {
       backgroundColor: cardInputBg,
       border: `1px solid ${resolvedBorder}`,
       borderRadius: resolvedBorderRadius,
       marginTop: "0.5rem",
       padding: "10px"
-    }, children: /* @__PURE__ */ jsx7(
+    }, children: /* @__PURE__ */ jsx8(
       "input",
       {
         className: "flopay-shared-input",
@@ -4868,7 +4932,7 @@ function SplitCardFormInner({
         }
       }
     ) }),
-    avsConfig && /* @__PURE__ */ jsx7("div", { style: { order: vaultActive ? -1 : 0 }, "data-testid": "flopay-avs-fields", children: (() => {
+    avsConfig && /* @__PURE__ */ jsx8("div", { style: { order: vaultActive ? -1 : 0 }, "data-testid": "flopay-avs-fields", children: (() => {
       const cc = selectedCountry;
       const inputWrapStyle = (invalid = false) => ({
         backgroundColor: cardInputBg,
@@ -4885,8 +4949,8 @@ function SplitCardFormInner({
         ...sharedInputTypography
       });
       const stateOpts = getStateOptions(cc);
-      return /* @__PURE__ */ jsxs4(Fragment2, { children: [
-        isAVSFieldVisible(avsConfig.address_line_1, cc) && /* @__PURE__ */ jsx7("div", { style: inputWrapStyle(invalidAvsFields.line1), children: /* @__PURE__ */ jsx7(
+      return /* @__PURE__ */ jsxs5(Fragment2, { children: [
+        isAVSFieldVisible(avsConfig.address_line_1, cc) && /* @__PURE__ */ jsx8("div", { style: inputWrapStyle(invalidAvsFields.line1), children: /* @__PURE__ */ jsx8(
           "input",
           {
             className: "flopay-shared-input",
@@ -4905,7 +4969,7 @@ function SplitCardFormInner({
             style: inputFieldStyle()
           }
         ) }),
-        isAVSFieldVisible(avsConfig.address_line_2, cc) && /* @__PURE__ */ jsx7("div", { style: inputWrapStyle(), children: /* @__PURE__ */ jsx7(
+        isAVSFieldVisible(avsConfig.address_line_2, cc) && /* @__PURE__ */ jsx8("div", { style: inputWrapStyle(), children: /* @__PURE__ */ jsx8(
           "input",
           {
             className: "flopay-shared-input",
@@ -4923,12 +4987,12 @@ function SplitCardFormInner({
             style: inputFieldStyle()
           }
         ) }),
-        (isAVSFieldVisible(avsConfig.city, cc) || isAVSFieldVisible(avsConfig.state, cc)) && /* @__PURE__ */ jsxs4("div", { style: {
+        (isAVSFieldVisible(avsConfig.city, cc) || isAVSFieldVisible(avsConfig.state, cc)) && /* @__PURE__ */ jsxs5("div", { style: {
           display: "flex",
           gap: "0",
           marginTop: "0.5rem"
         }, children: [
-          isAVSFieldVisible(avsConfig.city, cc) && /* @__PURE__ */ jsx7("div", { style: {
+          isAVSFieldVisible(avsConfig.city, cc) && /* @__PURE__ */ jsx8("div", { style: {
             flex: 1,
             backgroundColor: cardInputBg,
             borderTop: `1px solid ${avsBorderColor(invalidAvsFields.city)}`,
@@ -4939,7 +5003,7 @@ function SplitCardFormInner({
             borderTopLeftRadius: resolvedBorderRadius,
             borderBottomLeftRadius: resolvedBorderRadius,
             ...isAVSFieldVisible(avsConfig.state, cc) ? { borderRight: "none", borderTopRightRadius: 0, borderBottomRightRadius: 0 } : { borderRadius: resolvedBorderRadius }
-          }, children: /* @__PURE__ */ jsx7(
+          }, children: /* @__PURE__ */ jsx8(
             "input",
             {
               className: "flopay-shared-input",
@@ -4958,7 +5022,7 @@ function SplitCardFormInner({
               style: inputFieldStyle()
             }
           ) }),
-          isAVSFieldVisible(avsConfig.state, cc) && /* @__PURE__ */ jsx7("div", { style: {
+          isAVSFieldVisible(avsConfig.state, cc) && /* @__PURE__ */ jsx8("div", { style: {
             flex: 1,
             backgroundColor: cardInputBg,
             border: `1px solid ${avsBorderColor(invalidAvsFields.state)}`,
@@ -4966,7 +5030,7 @@ function SplitCardFormInner({
             borderTopRightRadius: resolvedBorderRadius,
             borderBottomRightRadius: resolvedBorderRadius,
             ...isAVSFieldVisible(avsConfig.city, cc) ? { borderTopLeftRadius: 0, borderBottomLeftRadius: 0 } : { borderRadius: resolvedBorderRadius }
-          }, children: stateOpts ? /* @__PURE__ */ jsxs4(
+          }, children: stateOpts ? /* @__PURE__ */ jsxs5(
             "select",
             {
               id: "flopay-billing-state",
@@ -4982,11 +5046,11 @@ function SplitCardFormInner({
               "data-testid": "flopay-state",
               style: { ...inputFieldStyle(), cursor: "pointer" },
               children: [
-                /* @__PURE__ */ jsx7("option", { value: "", children: getStateLabel(cc) }),
-                stateOpts.map((s) => /* @__PURE__ */ jsx7("option", { value: s.code, children: s.name }, s.code))
+                /* @__PURE__ */ jsx8("option", { value: "", children: getStateLabel(cc) }),
+                stateOpts.map((s) => /* @__PURE__ */ jsx8("option", { value: s.code, children: s.name }, s.code))
               ]
             }
-          ) : /* @__PURE__ */ jsx7(
+          ) : /* @__PURE__ */ jsx8(
             "input",
             {
               className: "flopay-shared-input",
@@ -5006,13 +5070,13 @@ function SplitCardFormInner({
             }
           ) })
         ] }),
-        (isAVSFieldVisible(avsConfig.country, cc) || isAVSFieldVisible(avsConfig.postal_code, cc)) && /* @__PURE__ */ jsxs4("div", { style: {
+        (isAVSFieldVisible(avsConfig.country, cc) || isAVSFieldVisible(avsConfig.postal_code, cc)) && /* @__PURE__ */ jsxs5("div", { style: {
           display: "flex",
           flexDirection: avsLayoutProp === "column" ? "column" : "row",
           gap: avsLayoutProp === "column" ? "0.5rem" : "0",
           marginTop: "0.5rem"
         }, children: [
-          isAVSFieldVisible(avsConfig.country, cc) && /* @__PURE__ */ jsx7("div", { style: {
+          isAVSFieldVisible(avsConfig.country, cc) && /* @__PURE__ */ jsx8("div", { style: {
             flex: avsLayoutProp === "row" ? 1 : void 0,
             backgroundColor: cardInputBg,
             borderTop: `1px solid ${resolvedBorder}`,
@@ -5021,7 +5085,7 @@ function SplitCardFormInner({
             borderLeft: `1px solid ${resolvedBorder}`,
             padding: "10px",
             ...avsLayoutProp === "row" && isAVSFieldVisible(avsConfig.postal_code, cc) ? { borderRadius: "0", borderTopLeftRadius: resolvedBorderRadius, borderBottomLeftRadius: resolvedBorderRadius, borderRight: "none" } : { borderRadius: resolvedBorderRadius }
-          }, children: /* @__PURE__ */ jsx7(
+          }, children: /* @__PURE__ */ jsx8(
             "select",
             {
               id: "flopay-billing-country",
@@ -5038,20 +5102,20 @@ function SplitCardFormInner({
               autoComplete: "billing country",
               "data-testid": "flopay-country",
               style: { ...inputFieldStyle(), cursor: "pointer" },
-              children: COUNTRY_OPTIONS.map((c) => /* @__PURE__ */ jsxs4("option", { value: c.code, children: [
+              children: COUNTRY_OPTIONS.map((c) => /* @__PURE__ */ jsxs5("option", { value: c.code, children: [
                 c.flag,
                 " ",
                 c.name
               ] }, c.code))
             }
           ) }),
-          isAVSFieldVisible(avsConfig.postal_code, cc) && /* @__PURE__ */ jsx7("div", { style: {
+          isAVSFieldVisible(avsConfig.postal_code, cc) && /* @__PURE__ */ jsx8("div", { style: {
             flex: avsLayoutProp === "row" ? 1 : void 0,
             backgroundColor: cardInputBg,
             border: `1px solid ${zipBorderColor}`,
             padding: "10px",
             ...avsLayoutProp === "row" && isAVSFieldVisible(avsConfig.country, cc) ? { borderRadius: "0", borderTopRightRadius: resolvedBorderRadius, borderBottomRightRadius: resolvedBorderRadius } : { borderRadius: resolvedBorderRadius }
-          }, children: /* @__PURE__ */ jsx7(
+          }, children: /* @__PURE__ */ jsx8(
             "input",
             {
               className: "flopay-shared-input",
@@ -5075,7 +5139,7 @@ function SplitCardFormInner({
             }
           ) })
         ] }),
-        showPostcodeError && /* @__PURE__ */ jsx7(
+        showPostcodeError && /* @__PURE__ */ jsx8(
           "div",
           {
             id: "flopay-billing-postal-code-error",
@@ -5092,26 +5156,10 @@ function SplitCardFormInner({
         )
       ] });
     })() }),
-    vaultActive && cardPreFormSlot && /* @__PURE__ */ jsx7("div", { style: { order: -2, width: "100%" }, children: cardPreFormSlot }),
+    vaultActive && cardPreFormSlot && /* @__PURE__ */ jsx8("div", { style: { order: -2, width: "100%" }, children: cardPreFormSlot }),
     vaultActive && vaultCardFieldsNode,
-    displayError && /* @__PURE__ */ jsxs4("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__ */ jsx7("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", style: { flexShrink: 0 }, children: /* @__PURE__ */ jsx7("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__ */ jsx7(
+    displayError && /* @__PURE__ */ jsx8(ErrorBanner, { margin: "0.75rem 0", styleOverride: bStyles.errorBanner, children: displayError }),
+    !vaultActive && (children ?? /* @__PURE__ */ jsx8(
       "button",
       {
         type: "submit",
@@ -5156,9 +5204,9 @@ function SplitCardFormInner({
   const renderDirectPaypalGateDebug = (testId) => {
     if (!debug) return null;
     if (!showPayPal || !directPaypalConfigured) {
-      return /* @__PURE__ */ jsx7("pre", { "data-testid": testId, style: gateDebugStyle, children: "FloPay/DirectPayPal-debug - not enabled" });
+      return /* @__PURE__ */ jsx8("pre", { "data-testid": testId, style: gateDebugStyle, children: "FloPay/DirectPayPal-debug - not enabled" });
     }
-    return /* @__PURE__ */ jsx7("pre", { "data-testid": testId, style: gateDebugStyle, children: [
+    return /* @__PURE__ */ jsx8("pre", { "data-testid": testId, style: gateDebugStyle, children: [
       "FloPay/DirectPayPal-debug (parent gate)",
       `  showPayPal=${showPayPal}`,
       `  directPaypalConfigured=${directPaypalConfigured}`,
@@ -5171,9 +5219,9 @@ function SplitCardFormInner({
   const renderStripeGateDebug = (testId) => {
     if (!debug) return null;
     if (!showStripe || !stripeInstance) {
-      return /* @__PURE__ */ jsx7("pre", { "data-testid": testId, style: gateDebugStyle, children: "FloPay/Stripe-debug - not enabled" });
+      return /* @__PURE__ */ jsx8("pre", { "data-testid": testId, style: gateDebugStyle, children: "FloPay/Stripe-debug - not enabled" });
     }
-    return /* @__PURE__ */ jsx7("pre", { "data-testid": testId, style: gateDebugStyle, children: [
+    return /* @__PURE__ */ jsx8("pre", { "data-testid": testId, style: gateDebugStyle, children: [
       "FloPay/Stripe-debug (parent gate)",
       `  showStripe=${showStripe}`,
       `  currency=${currency}`,
@@ -5202,11 +5250,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__ */ jsxs4("form", { onSubmit: handleSubmit, className, style: { position: "relative" }, children: [
-      /* @__PURE__ */ jsx7(FloPayKeyframes, {}),
-      overlayStatus && /* @__PURE__ */ jsx7(ProcessingOverlay, { status: overlayStatus, errorMessage: displayError }),
-      /* @__PURE__ */ jsxs4("div", { style: { display: "grid" }, children: [
-        /* @__PURE__ */ jsxs4(
+    return /* @__PURE__ */ jsxs5("form", { onSubmit: handleSubmit, className, style: { position: "relative" }, children: [
+      /* @__PURE__ */ jsx8(FloPayKeyframes, {}),
+      overlayStatus && /* @__PURE__ */ jsx8(ProcessingOverlay, { status: overlayStatus, errorMessage: displayError }),
+      /* @__PURE__ */ jsxs5("div", { style: { display: "grid" }, children: [
+        /* @__PURE__ */ jsxs5(
           "div",
           {
             "data-testid": "flopay-buttons-panel",
@@ -5223,8 +5271,8 @@ function SplitCardFormInner({
             children: [
               renderDirectPaypalGateDebug("flopay-direct-paypal-gate-debug"),
               renderStripeGateDebug("flopay-stripe-gate-debug"),
-              shouldRenderDirectPayPal && directPaypal && /* @__PURE__ */ jsxs4(Fragment2, { children: [
-                paypalDirectRetry && /* @__PURE__ */ jsx7(
+              shouldRenderDirectPayPal && directPaypal && /* @__PURE__ */ jsxs5(Fragment2, { children: [
+                paypalDirectRetry && /* @__PURE__ */ jsx8(
                   "div",
                   {
                     "data-testid": "flopay-paypal-direct-retry-notice",
@@ -5240,7 +5288,7 @@ function SplitCardFormInner({
                     children: "Please confirm your PayPal payment to complete checkout."
                   }
                 ),
-                /* @__PURE__ */ jsx7(
+                /* @__PURE__ */ jsx8(
                   DirectPayPalButton,
                   {
                     sessionId,
@@ -5267,7 +5315,7 @@ function SplitCardFormInner({
                   paypalDirectRetry?.orderId ?? "fresh"
                 )
               ] }),
-              shouldRenderStripePayPal && /* @__PURE__ */ jsx7(StripeElements, { stripe: paypalStripeInstance, options: paypalOptions, children: /* @__PURE__ */ jsx7(
+              shouldRenderStripePayPal && /* @__PURE__ */ jsx8(StripeElements, { stripe: paypalStripeInstance, options: paypalOptions, children: /* @__PURE__ */ jsx8(
                 PayPalButtonInner,
                 {
                   sessionId,
@@ -5285,7 +5333,7 @@ function SplitCardFormInner({
                   placeholderBorderRadius: buttonBorderRadius
                 }
               ) }),
-              shouldRenderWallets ? /* @__PURE__ */ jsx7(StripeElements, { stripe: stripeInstance, options: walletOptions, children: /* @__PURE__ */ jsx7(
+              shouldRenderWallets ? /* @__PURE__ */ jsx8(StripeElements, { stripe: stripeInstance, options: walletOptions, children: /* @__PURE__ */ jsx8(
                 WalletButtonInner,
                 {
                   sessionId,
@@ -5302,8 +5350,8 @@ function SplitCardFormInner({
                   onLoadStateChange: setWalletLoadState,
                   placeholderBorderRadius: buttonBorderRadius
                 }
-              ) }) : shouldShowWallets ? /* @__PURE__ */ jsx7("div", { style: { height: DEFAULT_BUTTONS_LAYOUT_BUTTON_HEIGHT, borderRadius: buttonBorderRadius, background: "#e5e7eb", animation: "flopay-pulse 1.5s ease-in-out infinite" } }) : null,
-              shouldRenderPaymentElement && /* @__PURE__ */ jsx7(
+              ) }) : shouldShowWallets ? /* @__PURE__ */ jsx8("div", { style: { height: DEFAULT_BUTTONS_LAYOUT_BUTTON_HEIGHT, borderRadius: buttonBorderRadius, background: "#e5e7eb", animation: "flopay-pulse 1.5s ease-in-out infinite" } }) : null,
+              shouldRenderPaymentElement && /* @__PURE__ */ jsx8(
                 StripePaymentElementInner,
                 {
                   sessionId,
@@ -5335,7 +5383,7 @@ function SplitCardFormInner({
                   }
                 }
               ),
-              showStripe && /* @__PURE__ */ jsx7(
+              showStripe && /* @__PURE__ */ jsx8(
                 "button",
                 {
                   type: "button",
@@ -5391,50 +5439,34 @@ function SplitCardFormInner({
                   onMouseUp: (e) => {
                     e.currentTarget.style.transform = "scale(1)";
                   },
-                  children: /* @__PURE__ */ jsx7(CardButtonContentSlot, { content: cardButtonContent })
+                  children: /* @__PURE__ */ jsx8(CardButtonContentSlot, { content: cardButtonContent })
                 }
               ),
-              displayError && viewState === "buttons" && /* @__PURE__ */ jsxs4("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__ */ jsx7("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", style: { flexShrink: 0 }, children: /* @__PURE__ */ jsx7("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__ */ jsx8(ErrorBanner, { margin: "0.25rem 0", styleOverride: bStyles.errorBanner, children: displayError })
             ]
           }
         ),
-        showStripe && isCardView && /* @__PURE__ */ jsx7("div", { style: {
+        showStripe && isCardView && /* @__PURE__ */ jsx8("div", { style: {
           gridArea: "1 / 1",
           ...cardAnim ? { animation: cardAnim } : {},
           ...viewState === "collapsing" ? { pointerEvents: "none" } : {}
         }, children: cardFormBlock }),
-        showStripe && isApmView && expandedApmMethod && apmInlineOptions && stripeInstance && /* @__PURE__ */ jsx7("div", { style: {
+        showStripe && isApmView && expandedApmMethod && apmInlineOptions && stripeInstance && /* @__PURE__ */ jsx8("div", { style: {
           gridArea: "1 / 1",
           ...apmAnim ? { animation: apmAnim } : {},
           ...viewState === "apm-collapsing" ? { pointerEvents: "none" } : {}
-        }, children: /* @__PURE__ */ jsxs4("div", { style: {
+        }, children: /* @__PURE__ */ jsxs5("div", { style: {
           backgroundColor: cardBg,
           borderRadius: containerRadius,
           ...containerOverrides,
           padding: containerPadding
         }, children: [
-          /* @__PURE__ */ jsxs4("div", { style: {
+          /* @__PURE__ */ jsxs5("div", { style: {
             display: "flex",
             alignItems: "center",
             padding: "0.75rem 0 0.625rem"
           }, children: [
-            /* @__PURE__ */ jsxs4(
+            /* @__PURE__ */ jsxs5(
               "button",
               {
                 type: "button",
@@ -5457,7 +5489,7 @@ function SplitCardFormInner({
                 },
                 "aria-label": "Back to payment methods",
                 children: [
-                  /* @__PURE__ */ jsx7("span", { style: {
+                  /* @__PURE__ */ jsx8("span", { style: {
                     display: "inline-flex",
                     alignItems: "center",
                     justifyContent: "center",
@@ -5467,12 +5499,12 @@ function SplitCardFormInner({
                     backgroundColor: "#f3f4f6",
                     transition: "background-color 0.15s",
                     ...bStyles.backButtonIcon
-                  }, children: /* @__PURE__ */ jsx7("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx7("path", { d: "M15 18l-6-6 6-6" }) }) }),
-                  /* @__PURE__ */ jsx7(BackButtonContentSlot, { content: cardBackButtonContent })
+                  }, children: /* @__PURE__ */ jsx8("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx8("path", { d: "M15 18l-6-6 6-6" }) }) }),
+                  /* @__PURE__ */ jsx8(BackButtonContentSlot, { content: cardBackButtonContent })
                 ]
               }
             ),
-            /* @__PURE__ */ jsx7("div", { style: {
+            /* @__PURE__ */ jsx8("div", { style: {
               flex: 1,
               textAlign: "center",
               fontWeight: 600,
@@ -5482,12 +5514,12 @@ function SplitCardFormInner({
               ...bStyles.title
             }, children: `Pay with ${getStripeMethodDisplayName(expandedApmMethod)}` })
           ] }),
-          /* @__PURE__ */ jsx7(
+          /* @__PURE__ */ jsx8(
             StripeElements,
             {
               stripe: stripeInstance,
               options: apmInlineOptions,
-              children: /* @__PURE__ */ jsx7(
+              children: /* @__PURE__ */ jsx8(
                 StripeMethodInlineForm,
                 {
                   method: expandedApmMethod,
@@ -5517,24 +5549,24 @@ function SplitCardFormInner({
     ] });
   }
   if (isApmView && expandedApmMethod && apmInlineOptions && stripeInstance && showStripe) {
-    return /* @__PURE__ */ jsxs4("form", { onSubmit: handleSubmit, className, style: { position: "relative" }, children: [
-      /* @__PURE__ */ jsx7(FloPayKeyframes, {}),
-      overlayStatus && /* @__PURE__ */ jsx7(ProcessingOverlay, { status: overlayStatus, errorMessage: displayError }),
-      /* @__PURE__ */ jsx7("div", { style: {
+    return /* @__PURE__ */ jsxs5("form", { onSubmit: handleSubmit, className, style: { position: "relative" }, children: [
+      /* @__PURE__ */ jsx8(FloPayKeyframes, {}),
+      overlayStatus && /* @__PURE__ */ jsx8(ProcessingOverlay, { status: overlayStatus, errorMessage: displayError }),
+      /* @__PURE__ */ jsx8("div", { style: {
         ...apmAnim ? { animation: apmAnim } : {},
         ...viewState === "apm-collapsing" ? { pointerEvents: "none" } : {}
-      }, children: /* @__PURE__ */ jsxs4("div", { style: {
+      }, children: /* @__PURE__ */ jsxs5("div", { style: {
         backgroundColor: cardBg,
         borderRadius: containerRadius,
         ...containerOverrides,
         padding: containerPadding
       }, children: [
-        /* @__PURE__ */ jsxs4("div", { style: {
+        /* @__PURE__ */ jsxs5("div", { style: {
           display: "flex",
           alignItems: "center",
           padding: "0.75rem 0 0.625rem"
         }, children: [
-          /* @__PURE__ */ jsxs4(
+          /* @__PURE__ */ jsxs5(
             "button",
             {
               type: "button",
@@ -5557,7 +5589,7 @@ function SplitCardFormInner({
               },
               "aria-label": "Back to payment methods",
               children: [
-                /* @__PURE__ */ jsx7("span", { style: {
+                /* @__PURE__ */ jsx8("span", { style: {
                   display: "inline-flex",
                   alignItems: "center",
                   justifyContent: "center",
@@ -5567,12 +5599,12 @@ function SplitCardFormInner({
                   backgroundColor: "#f3f4f6",
                   transition: "background-color 0.15s",
                   ...bStyles.backButtonIcon
-                }, children: /* @__PURE__ */ jsx7("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx7("path", { d: "M15 18l-6-6 6-6" }) }) }),
-                /* @__PURE__ */ jsx7(BackButtonContentSlot, { content: cardBackButtonContent })
+                }, children: /* @__PURE__ */ jsx8("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx8("path", { d: "M15 18l-6-6 6-6" }) }) }),
+                /* @__PURE__ */ jsx8(BackButtonContentSlot, { content: cardBackButtonContent })
               ]
             }
           ),
-          /* @__PURE__ */ jsx7("div", { style: {
+          /* @__PURE__ */ jsx8("div", { style: {
             flex: 1,
             textAlign: "center",
             fontWeight: 600,
@@ -5582,12 +5614,12 @@ function SplitCardFormInner({
             ...bStyles.title
           }, children: `Pay with ${getStripeMethodDisplayName(expandedApmMethod)}` })
         ] }),
-        /* @__PURE__ */ jsx7(
+        /* @__PURE__ */ jsx8(
           StripeElements,
           {
             stripe: stripeInstance,
             options: apmInlineOptions,
-            children: /* @__PURE__ */ jsx7(
+            children: /* @__PURE__ */ jsx8(
               StripeMethodInlineForm,
               {
                 method: expandedApmMethod,
@@ -5615,14 +5647,14 @@ function SplitCardFormInner({
       ] }) })
     ] });
   }
-  return /* @__PURE__ */ jsxs4("form", { onSubmit: handleSubmit, className, style: { position: "relative" }, children: [
-    /* @__PURE__ */ jsx7(FloPayKeyframes, {}),
-    overlayStatus && /* @__PURE__ */ jsx7(ProcessingOverlay, { status: overlayStatus, errorMessage: displayError }),
-    /* @__PURE__ */ jsxs4("div", { style: { display: "flex", flexDirection: "column", gap: "0.5rem" }, children: [
+  return /* @__PURE__ */ jsxs5("form", { onSubmit: handleSubmit, className, style: { position: "relative" }, children: [
+    /* @__PURE__ */ jsx8(FloPayKeyframes, {}),
+    overlayStatus && /* @__PURE__ */ jsx8(ProcessingOverlay, { status: overlayStatus, errorMessage: displayError }),
+    /* @__PURE__ */ jsxs5("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__ */ jsxs4(Fragment2, { children: [
-        paypalDirectRetry && /* @__PURE__ */ jsx7(
+      shouldRenderDirectPayPal && directPaypal && /* @__PURE__ */ jsxs5(Fragment2, { children: [
+        paypalDirectRetry && /* @__PURE__ */ jsx8(
           "div",
           {
             "data-testid": "flopay-paypal-direct-retry-notice-default",
@@ -5638,7 +5670,7 @@ function SplitCardFormInner({
             children: "Please confirm your PayPal payment to complete checkout."
           }
         ),
-        /* @__PURE__ */ jsx7(
+        /* @__PURE__ */ jsx8(
           DirectPayPalButton,
           {
             sessionId,
@@ -5665,7 +5697,7 @@ function SplitCardFormInner({
           paypalDirectRetry?.orderId ?? "fresh"
         )
       ] }),
-      shouldRenderStripePayPal && /* @__PURE__ */ jsx7(StripeElements, { stripe: paypalStripeInstance, options: paypalOptions, children: /* @__PURE__ */ jsx7(
+      shouldRenderStripePayPal && /* @__PURE__ */ jsx8(StripeElements, { stripe: paypalStripeInstance, options: paypalOptions, children: /* @__PURE__ */ jsx8(
         PayPalButtonInner,
         {
           sessionId,
@@ -5683,7 +5715,7 @@ function SplitCardFormInner({
           placeholderBorderRadius: buttonBorderRadius
         }
       ) }),
-      shouldRenderWallets && /* @__PURE__ */ jsx7(StripeElements, { stripe: stripeInstance, options: walletOptions, children: /* @__PURE__ */ jsx7(
+      shouldRenderWallets && /* @__PURE__ */ jsx8(StripeElements, { stripe: stripeInstance, options: walletOptions, children: /* @__PURE__ */ jsx8(
         WalletButtonInner,
         {
           sessionId,
@@ -5701,7 +5733,7 @@ function SplitCardFormInner({
           placeholderBorderRadius: buttonBorderRadius
         }
       ) }),
-      shouldRenderPaymentElement && /* @__PURE__ */ jsx7(
+      shouldRenderPaymentElement && /* @__PURE__ */ jsx8(
         StripePaymentElementInner,
         {
           sessionId,
@@ -5734,7 +5766,7 @@ function SplitCardFormInner({
         }
       )
     ] }),
-    showStripe && (shouldDisplayWalletRow || shouldDisplayPayPalRow || shouldDisplayPaymentElementRow) && /* @__PURE__ */ jsxs4("div", { style: {
+    showStripe && (shouldDisplayWalletRow || shouldDisplayPayPalRow || shouldDisplayPaymentElementRow) && /* @__PURE__ */ jsxs5("div", { style: {
       display: "flex",
       alignItems: "center",
       gap: "0.75rem",
@@ -5742,9 +5774,9 @@ function SplitCardFormInner({
       color: "#999",
       fontSize: "0.85rem"
     }, children: [
-      /* @__PURE__ */ jsx7("div", { style: { flex: 1, height: 1, backgroundColor: "#ddd" } }),
-      /* @__PURE__ */ jsx7("span", { children: "or pay with card" }),
-      /* @__PURE__ */ jsx7("div", { style: { flex: 1, height: 1, backgroundColor: "#ddd" } })
+      /* @__PURE__ */ jsx8("div", { style: { flex: 1, height: 1, backgroundColor: "#ddd" } }),
+      /* @__PURE__ */ jsx8("span", { children: "or pay with card" }),
+      /* @__PURE__ */ jsx8("div", { style: { flex: 1, height: 1, backgroundColor: "#ddd" } })
     ] }),
     showStripe && cardFormBlock
   ] });
@@ -5774,6 +5806,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;
@@ -5995,7 +6030,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 FloPayError4(
       message,
       "api_error",
@@ -6003,7 +6038,7 @@ function checkoutProcessErrorToFloPayError(error, fallbackMessage = "Payment fai
         code: error?.gatewayErrorCode
       }
     ),
-    { checkoutMethod }
+    checkoutMethod
   );
 }
 function resolveSavedPaymentReturnUrl(session) {
@@ -6175,13 +6210,13 @@ async function processSavedPaymentForMode({
     if (recoveredRedirect) {
       return recoveredRedirect;
     }
-    throw Object.assign(
+    throw withCheckoutMethod(
       new FloPayError4(
         "Your card requires authentication. Please enter your payment details below.",
         "api_error",
         { code: "authentication_required" }
       ),
-      { checkoutMethod: "card" }
+      "card"
     );
   }
   throw new FloPayError4(
@@ -6209,13 +6244,13 @@ async function handleSavedPaymentRedirectResult(redirectResult, {
   }
   if (redirectResult.type === "3ds_required") {
     if (!attempt3DS || !redirectResult.threeDSecureToken) {
-      throw Object.assign(
+      throw withCheckoutMethod(
         new FloPayError4(
           "Your card requires authentication. Please enter your payment details below.",
           "api_error",
           { code: "authentication_required" }
         ),
-        { checkoutMethod: "card" }
+        "card"
       );
     }
     const isSetupIntent = isSetupIntentClientSecret3(redirectResult.threeDSecureToken);
@@ -6224,13 +6259,13 @@ async function handleSavedPaymentRedirectResult(redirectResult, {
     const retrieved = await retrieveResumeIntent(stripe, redirectResult.threeDSecureToken, isSetupIntent);
     if (retrieved) {
       if (retrieved.error) {
-        throw Object.assign(
+        throw withCheckoutMethod(
           new FloPayError4(
             retrieved.error.message ?? `Failed to retrieve 3DS ${isSetupIntent ? "setup" : "payment"} status.`,
             "api_error",
             { code: retrieved.error.code }
           ),
-          { checkoutMethod: "card" }
+          "card"
         );
       }
       const existingIntent = retrieved.intent;
@@ -6253,13 +6288,13 @@ async function handleSavedPaymentRedirectResult(redirectResult, {
     ) : null;
     if (confirmed) {
       if (confirmed.error) {
-        throw Object.assign(
+        throw withCheckoutMethod(
           new FloPayError4(
             confirmed.error.message ?? "3DS authentication failed.",
             "api_error",
             { code: confirmed.error.code }
           ),
-          { checkoutMethod: "card" }
+          "card"
         );
       }
       paymentIntent = confirmed.intent;
@@ -6268,13 +6303,13 @@ async function handleSavedPaymentRedirectResult(redirectResult, {
         clientSecret: redirectResult.threeDSecureToken
       });
       if (nextAction.error) {
-        throw Object.assign(
+        throw withCheckoutMethod(
           new FloPayError4(
             nextAction.error.message ?? "3DS authentication failed.",
             "api_error",
             { code: nextAction.error.code }
           ),
-          { checkoutMethod: "card" }
+          "card"
         );
       }
       paymentIntent = (isSetupIntent ? nextAction.setupIntent : nextAction.paymentIntent) ?? null;
@@ -6310,17 +6345,17 @@ async function handleSavedPaymentRedirectResult(redirectResult, {
         telemetry
       });
     }
-    throw Object.assign(
+    throw withCheckoutMethod(
       new FloPayError4("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 FloPayError4("PayPal is not available.", "api_error"),
-        { checkoutMethod: "paypal" }
+        "paypal"
       );
     }
     if (redirectResult.paymentMethodId) {
@@ -6328,13 +6363,13 @@ async function handleSavedPaymentRedirectResult(redirectResult, {
         clientSecret: redirectResult.threeDSecureToken
       });
       if (error2) {
-        throw Object.assign(
+        throw withCheckoutMethod(
           new FloPayError4(
             error2.message ?? "PayPal authorization failed.",
             "api_error",
             { code: error2.code }
           ),
-          { checkoutMethod: "paypal" }
+          "paypal"
         );
       }
       return {
@@ -6351,13 +6386,13 @@ async function handleSavedPaymentRedirectResult(redirectResult, {
       redirect: "if_required"
     });
     if (error) {
-      throw Object.assign(
+      throw withCheckoutMethod(
         new FloPayError4(
           error.message ?? "PayPal authorization failed.",
           "api_error",
           { code: error.code }
         ),
-        { checkoutMethod: "paypal" }
+        "paypal"
       );
     }
     return {
@@ -6442,7 +6477,7 @@ async function loadSavedPaymentProviders({
 }
 
 // src/flopay-checkout.tsx
-import { Fragment as Fragment3, jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx9, jsxs as jsxs6 } from "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();
@@ -7657,7 +7692,7 @@ function FloPayCheckout({
     ]
   );
   const shouldShowInterimButtons = Boolean(createSessionParams) && layout === "buttons" && !isPaypalOnlySession && (!flopay || !providerOptions);
-  const modeOverlay = modeOverlayStatus ? /* @__PURE__ */ jsx8(
+  const modeOverlay = modeOverlayStatus ? /* @__PURE__ */ jsx9(
     ProcessingOverlay,
     {
       status: modeOverlayStatus,
@@ -7666,32 +7701,32 @@ function FloPayCheckout({
   ) : null;
   if (isLoading) {
     if (loadingNode) {
-      return /* @__PURE__ */ jsxs5(Fragment3, { children: [
+      return /* @__PURE__ */ jsxs6(Fragment3, { children: [
         loadingNode,
         modeOverlay
       ] });
     }
     if (layout === "buttons") {
       const bundleRadius = themeBundle?.buttonsLayout?.cardButton?.borderRadius ?? themeBundle?.appearance.variables?.borderRadius ?? 8;
-      const skeletonBar = (h) => /* @__PURE__ */ jsx8("div", { style: {
+      const skeletonBar = (h) => /* @__PURE__ */ jsx9("div", { style: {
         height: h,
         borderRadius: bundleRadius,
         background: "#e5e7eb",
         animation: "flopay-loading-pulse 1.5s ease-in-out infinite"
       } });
-      return /* @__PURE__ */ jsxs5(Fragment3, { children: [
-        /* @__PURE__ */ jsxs5("div", { style: { display: "flex", flexDirection: "column", gap: "0.5rem" }, children: [
+      return /* @__PURE__ */ jsxs6(Fragment3, { children: [
+        /* @__PURE__ */ jsxs6("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__ */ jsx8("style", { children: `@keyframes flopay-loading-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }` })
+          /* @__PURE__ */ jsx9("style", { children: `@keyframes flopay-loading-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }` })
         ] }),
         modeOverlay
       ] });
     }
-    return /* @__PURE__ */ jsxs5(Fragment3, { children: [
-      /* @__PURE__ */ jsxs5("div", { style: { display: "flex", justifyContent: "center", padding: 32 }, children: [
-        /* @__PURE__ */ jsx8("div", { style: {
+    return /* @__PURE__ */ jsxs6(Fragment3, { children: [
+      /* @__PURE__ */ jsxs6("div", { style: { display: "flex", justifyContent: "center", padding: 32 }, children: [
+        /* @__PURE__ */ jsx9("div", { style: {
           width: 24,
           height: 24,
           border: "2px solid #e5e7eb",
@@ -7699,16 +7734,16 @@ function FloPayCheckout({
           borderRadius: "50%",
           animation: "spin 0.6s linear infinite"
         } }),
-        /* @__PURE__ */ jsx8("style", { children: `@keyframes spin { to { transform: rotate(360deg); } }` })
+        /* @__PURE__ */ jsx9("style", { children: `@keyframes spin { to { transform: rotate(360deg); } }` })
       ] }),
       modeOverlay
     ] });
   }
   if (loadError) {
     if (errorNode) {
-      return /* @__PURE__ */ jsx8(CheckoutContext.Provider, { value: checkoutValue, children: errorNode(loadError) });
+      return /* @__PURE__ */ jsx9(CheckoutContext.Provider, { value: checkoutValue, children: errorNode(loadError) });
     }
-    return /* @__PURE__ */ jsx8(CheckoutContext.Provider, { value: checkoutValue, children: /* @__PURE__ */ jsx8(
+    return /* @__PURE__ */ jsx9(CheckoutContext.Provider, { value: checkoutValue, children: /* @__PURE__ */ jsx9(
       "div",
       {
         role: "alert",
@@ -7724,8 +7759,8 @@ function FloPayCheckout({
     ) });
   }
   if (shouldShowInterimButtons) {
-    return /* @__PURE__ */ jsxs5(Fragment3, { children: [
-      /* @__PURE__ */ jsx8(CheckoutContext.Provider, { value: checkoutValue, children: /* @__PURE__ */ jsx8(
+    return /* @__PURE__ */ jsxs6(Fragment3, { children: [
+      /* @__PURE__ */ jsx9(CheckoutContext.Provider, { value: checkoutValue, children: /* @__PURE__ */ jsx9(
         InterimButtonsView,
         {
           onButtonClick,
@@ -7745,26 +7780,10 @@ function FloPayCheckout({
     ] });
   }
   if (isPaypalOnlySession && session && directPaypalConfig) {
-    return /* @__PURE__ */ jsxs5(Fragment3, { children: [
-      /* @__PURE__ */ jsx8(CheckoutContext.Provider, { value: checkoutValue, children: /* @__PURE__ */ jsxs5("div", { className, style: { display: "flex", flexDirection: "column", gap: "0.5rem" }, children: [
-        modeError && /* @__PURE__ */ jsx8(
-          "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__ */ jsx8(
+    return /* @__PURE__ */ jsxs6(Fragment3, { children: [
+      /* @__PURE__ */ jsx9(CheckoutContext.Provider, { value: checkoutValue, children: /* @__PURE__ */ jsxs6("div", { className, style: { display: "flex", flexDirection: "column", gap: "0.5rem" }, children: [
+        modeError && /* @__PURE__ */ jsx9(ErrorBanner, { icon: false, children: modeError }),
+        /* @__PURE__ */ jsx9(
           InstrumentedDirectPayPalButton,
           {
             sessionId: activeSessionId,
@@ -7790,12 +7809,12 @@ function FloPayCheckout({
     ] });
   }
   if (!flopay || !providerOptions) {
-    return /* @__PURE__ */ jsx8(Fragment3, { children: modeOverlay });
+    return /* @__PURE__ */ jsx9(Fragment3, { children: modeOverlay });
   }
   if (currentMode === "confirm") {
-    return /* @__PURE__ */ jsxs5(Fragment3, { children: [
-      /* @__PURE__ */ jsx8(CheckoutContext.Provider, { value: checkoutValue, children: /* @__PURE__ */ jsx8(FloPayProvider, { flopay, paypalFlopay, options: providerOptions, children: /* @__PURE__ */ jsxs5("div", { className, children: [
-        modeError && /* @__PURE__ */ jsx8(
+    return /* @__PURE__ */ jsxs6(Fragment3, { children: [
+      /* @__PURE__ */ jsx9(CheckoutContext.Provider, { value: checkoutValue, children: /* @__PURE__ */ jsx9(FloPayProvider, { flopay, paypalFlopay, options: providerOptions, children: /* @__PURE__ */ jsxs6("div", { className, children: [
+        modeError && /* @__PURE__ */ jsx9(
           "div",
           {
             style: {
@@ -7810,7 +7829,7 @@ function FloPayCheckout({
         renderConfirmButton ? renderConfirmButton({
           onConfirm: handleConfirmCheckout,
           isProcessing: confirmProcessing
-        }) : /* @__PURE__ */ jsx8(
+        }) : /* @__PURE__ */ jsx9(
           "button",
           {
             type: "button",
@@ -7835,9 +7854,9 @@ function FloPayCheckout({
       modeOverlay
     ] });
   }
-  return /* @__PURE__ */ jsxs5(Fragment3, { children: [
-    /* @__PURE__ */ jsx8(CheckoutContext.Provider, { value: checkoutValue, children: /* @__PURE__ */ jsx8(FloPayProvider, { flopay, paypalFlopay, options: providerOptions, children: children ? /* @__PURE__ */ jsxs5(Fragment3, { children: [
-      modeError && /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsxs6(Fragment3, { children: [
+    /* @__PURE__ */ jsx9(CheckoutContext.Provider, { value: checkoutValue, children: /* @__PURE__ */ jsx9(FloPayProvider, { flopay, paypalFlopay, options: providerOptions, children: children ? /* @__PURE__ */ jsxs6(Fragment3, { children: [
+      modeError && /* @__PURE__ */ jsx9(
         "div",
         {
           style: {
@@ -7852,7 +7871,7 @@ function FloPayCheckout({
           children: modeError
         }
       ),
-      /* @__PURE__ */ jsx8(
+      /* @__PURE__ */ jsx9(
         SessionInjector,
         {
           sessionId: activeSessionId,
@@ -7862,7 +7881,7 @@ function FloPayCheckout({
           children
         }
       )
-    ] }) : /* @__PURE__ */ jsx8(
+    ] }) : /* @__PURE__ */ jsx9(
       SplitCardForm,
       {
         sessionId: activeSessionId,
@@ -7925,8 +7944,8 @@ function SessionInjector({
   session,
   children
 }) {
-  return /* @__PURE__ */ jsx8(Fragment3, { children: React8.Children.map(children, (child) => {
-    if (!React8.isValidElement(child)) return child;
+  return /* @__PURE__ */ jsx9(Fragment3, { children: React9.Children.map(children, (child) => {
+    if (!React9.isValidElement(child)) return child;
     const existing = child.props;
     const injected = {};
     if (!existing.sessionId) injected.sessionId = sessionId;
@@ -7941,15 +7960,11 @@ function SessionInjector({
         injected.lastName = session.customer.lastName;
     }
     if (Object.keys(injected).length === 0) return child;
-    return React8.cloneElement(child, injected);
+    return React9.cloneElement(child, injected);
   }) });
 }
 function InterimButtonsView({
   onButtonClick,
-  onCardButtonClick,
-  cardLoading = false,
-  cardOpen,
-  errorMessage,
   showPayPal,
   showStripe = true,
   showApplePay,
@@ -7962,12 +7977,6 @@ function InterimButtonsView({
   cardTitleContent
 }) {
   const [showCardForm, setShowCardForm] = useState4(false);
-  const isCardOpenControlled = typeof cardOpen === "boolean";
-  useEffect6(() => {
-    if (isCardOpenControlled) {
-      setShowCardForm(cardOpen);
-    }
-  }, [cardOpen, isCardOpenControlled]);
   const themeBundle = useMemo4(() => resolveTheme2(theme), [theme]);
   const bStyles = useMemo4(() => {
     const base = themeBundle?.buttonsLayout ?? resolveButtonsLayoutTheme2(buttonsTheme);
@@ -7984,7 +7993,7 @@ function InterimButtonsView({
     };
   }, [themeBundle, buttonsTheme, stylesOverride]);
   const skeletonRadius = themeBundle?.buttonsLayout?.cardButton?.borderRadius ?? themeBundle?.appearance.variables?.borderRadius ?? 8;
-  const skeleton = (h) => /* @__PURE__ */ jsx8("div", { style: {
+  const skeleton = (h) => /* @__PURE__ */ jsx9("div", { style: {
     height: h,
     borderRadius: skeletonRadius,
     background: "#e5e7eb",
@@ -7996,25 +8005,20 @@ function InterimButtonsView({
     const inputBg = bStyles.cardInputBackground ?? "white";
     const hideBackButtonLabel = isEmptySlotContent(cardBackButtonContent);
     const hideTitle = isEmptySlotContent(cardTitleContent);
-    return /* @__PURE__ */ jsxs5("div", { style: {
+    return /* @__PURE__ */ jsxs6("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__ */ jsxs5("div", { style: { display: "flex", alignItems: "center", padding: "0.75rem 0 0.625rem" }, children: [
-        /* @__PURE__ */ jsxs5(
+      /* @__PURE__ */ jsxs6("div", { style: { display: "flex", alignItems: "center", padding: "0.75rem 0 0.625rem" }, children: [
+        /* @__PURE__ */ jsxs6(
           "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",
@@ -8026,12 +8030,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__ */ jsx8("span", { style: {
+              /* @__PURE__ */ jsx9("span", { style: {
                 display: "inline-flex",
                 alignItems: "center",
                 justifyContent: "center",
@@ -8040,12 +8044,12 @@ function InterimButtonsView({
                 borderRadius: "50%",
                 backgroundColor: "#f3f4f6",
                 ...bStyles.backButtonIcon
-              }, children: /* @__PURE__ */ jsx8("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx8("path", { d: "M15 18l-6-6 6-6" }) }) }),
-              /* @__PURE__ */ jsx8(BackButtonContentSlot, { content: cardBackButtonContent })
+              }, children: /* @__PURE__ */ jsx9("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx9("path", { d: "M15 18l-6-6 6-6" }) }) }),
+              /* @__PURE__ */ jsx9(BackButtonContentSlot, { content: cardBackButtonContent })
             ]
           }
         ),
-        hideTitle ? /* @__PURE__ */ jsx8("div", { style: { flex: 1 } }) : /* @__PURE__ */ jsx8("div", { style: {
+        hideTitle ? /* @__PURE__ */ jsx9("div", { style: { flex: 1 } }) : /* @__PURE__ */ jsx9("div", { style: {
           flex: 1,
           textAlign: "center",
           fontWeight: 600,
@@ -8053,11 +8057,11 @@ function InterimButtonsView({
           color: "#262833",
           paddingRight: 80,
           ...bStyles.title
-        }, children: /* @__PURE__ */ jsx8(TitleContentSlot, { content: cardTitleContent }) })
+        }, children: /* @__PURE__ */ jsx9(TitleContentSlot, { content: cardTitleContent }) })
       ] }),
-      /* @__PURE__ */ jsx8("div", { style: { backgroundColor: inputBg, border: `1px solid ${inputBorder}`, borderTopLeftRadius: 8, borderTopRightRadius: 8, padding: 12, height: 45 }, children: /* @__PURE__ */ jsx8("div", { style: { width: "60%", height: 14, borderRadius: 4, background: "#e5e7eb", animation: "flopay-interim-pulse 1.5s ease-in-out infinite" } }) }),
-      /* @__PURE__ */ jsxs5("div", { style: { display: "flex" }, children: [
-        /* @__PURE__ */ jsx8("div", { style: {
+      /* @__PURE__ */ jsx9("div", { style: { backgroundColor: inputBg, border: `1px solid ${inputBorder}`, borderTopLeftRadius: 8, borderTopRightRadius: 8, padding: 12, height: 45 }, children: /* @__PURE__ */ jsx9("div", { style: { width: "60%", height: 14, borderRadius: 4, background: "#e5e7eb", animation: "flopay-interim-pulse 1.5s ease-in-out infinite" } }) }),
+      /* @__PURE__ */ jsxs6("div", { style: { display: "flex" }, children: [
+        /* @__PURE__ */ jsx9("div", { style: {
           flex: 1,
           backgroundColor: inputBg,
           borderTop: "none",
@@ -8067,8 +8071,8 @@ function InterimButtonsView({
           borderBottomLeftRadius: 8,
           padding: 12,
           height: 45
-        }, children: /* @__PURE__ */ jsx8("div", { style: { width: "50%", height: 14, borderRadius: 4, background: "#e5e7eb", animation: "flopay-interim-pulse 1.5s ease-in-out infinite" } }) }),
-        /* @__PURE__ */ jsx8("div", { style: {
+        }, children: /* @__PURE__ */ jsx9("div", { style: { width: "50%", height: 14, borderRadius: 4, background: "#e5e7eb", animation: "flopay-interim-pulse 1.5s ease-in-out infinite" } }) }),
+        /* @__PURE__ */ jsx9("div", { style: {
           flex: 1,
           backgroundColor: inputBg,
           borderTop: "none",
@@ -8078,10 +8082,10 @@ function InterimButtonsView({
           borderBottomRightRadius: 8,
           padding: 12,
           height: 45
-        }, children: /* @__PURE__ */ jsx8("div", { style: { width: "40%", height: 14, borderRadius: 4, background: "#e5e7eb", animation: "flopay-interim-pulse 1.5s ease-in-out infinite" } }) })
+        }, children: /* @__PURE__ */ jsx9("div", { style: { width: "40%", height: 14, borderRadius: 4, background: "#e5e7eb", animation: "flopay-interim-pulse 1.5s ease-in-out infinite" } }) })
       ] }),
-      /* @__PURE__ */ jsx8("div", { style: { backgroundColor: inputBg, border: `1px solid ${inputBorder}`, borderRadius: 8, marginTop: 8, padding: 12, height: 45 }, children: /* @__PURE__ */ jsx8("div", { style: { width: "45%", height: 14, borderRadius: 4, background: "#e5e7eb", animation: "flopay-interim-pulse 1.5s ease-in-out infinite" } }) }),
-      /* @__PURE__ */ jsx8("div", { style: {
+      /* @__PURE__ */ jsx9("div", { style: { backgroundColor: inputBg, border: `1px solid ${inputBorder}`, borderRadius: 8, marginTop: 8, padding: 12, height: 45 }, children: /* @__PURE__ */ jsx9("div", { style: { width: "45%", height: 14, borderRadius: 4, background: "#e5e7eb", animation: "flopay-interim-pulse 1.5s ease-in-out infinite" } }) }),
+      /* @__PURE__ */ jsx9("div", { style: {
         height: 50,
         borderRadius: 8,
         marginTop: 16,
@@ -8090,7 +8094,7 @@ function InterimButtonsView({
         ...bStyles.submitButton,
         opacity: 0.5
       } }),
-      /* @__PURE__ */ jsx8("style", { children: `
+      /* @__PURE__ */ jsx9("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); }
@@ -8100,23 +8104,17 @@ function InterimButtonsView({
         ` })
     ] });
   }
-  return /* @__PURE__ */ jsxs5("div", { style: { display: "flex", flexDirection: "column", gap: "0.5rem" }, children: [
+  return /* @__PURE__ */ jsxs6("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__ */ jsx8(
+    showStripe && /* @__PURE__ */ jsx9(
       "button",
       {
         type: "button",
-        onClick: async () => {
-          if (cardLoading) return;
-          if (onCardButtonClick) {
-            await onCardButtonClick();
-            return;
-          }
+        onClick: () => {
           onButtonClick?.("card");
           setShowCardForm(true);
         },
-        disabled: cardLoading,
         style: {
           width: "100%",
           ...cardButtonSizing,
@@ -8126,7 +8124,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",
@@ -8134,7 +8132,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) => {
@@ -8143,27 +8141,10 @@ function InterimButtonsView({
         onMouseUp: (e) => {
           e.currentTarget.style.transform = "scale(1)";
         },
-        children: /* @__PURE__ */ jsx8(CardButtonContentSlot, { content: cardButtonContent })
+        children: /* @__PURE__ */ jsx9(CardButtonContentSlot, { content: cardButtonContent })
       }
     ),
-    errorMessage && /* @__PURE__ */ jsxs5("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__ */ jsx8("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", style: { flexShrink: 0 }, children: /* @__PURE__ */ jsx8("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__ */ jsx8("style", { children: `@keyframes flopay-interim-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }` })
+    /* @__PURE__ */ jsx9("style", { children: `@keyframes flopay-interim-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }` })
   ] });
 }
 
@@ -8171,11 +8152,11 @@ function InterimButtonsView({
 import { PaymentAPI as PaymentAPI5 } from "@flopay/js";
 import { FloPayError as FloPayError6 } from "@flopay/shared";
 import { forwardRef as forwardRef2, useCallback as useCallback5, useEffect as useEffect7, useImperativeHandle as useImperativeHandle2, useState as useState5 } from "react";
-import { Fragment as Fragment4, jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
 var WALLET_RESUME_KEY = "flopay_wallet_resume";
 var CheckoutForm = forwardRef2(
   function CheckoutForm2(props, ref) {
-    return /* @__PURE__ */ jsx9(CheckoutFormInner, { ...props, innerRef: ref });
+    return /* @__PURE__ */ jsx10(CheckoutFormInner, { ...props, innerRef: ref });
   }
 );
 function CheckoutFormInner({
@@ -8418,8 +8399,7 @@ function CheckoutFormInner({
         if (!sessionId || !email) {
           throw new FloPayError6("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,
@@ -8484,8 +8464,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__ */ jsxs6("form", { onSubmit: handleSubmit, className, style: { position: "relative" }, children: [
-    (is3DSActive || isSubmitting) && /* @__PURE__ */ jsx9("div", { "data-testid": "flopay-overlay", style: {
+  return /* @__PURE__ */ jsxs7("form", { onSubmit: handleSubmit, className, style: { position: "relative" }, children: [
+    (is3DSActive || isSubmitting) && /* @__PURE__ */ jsx10("div", { "data-testid": "flopay-overlay", style: {
       position: "absolute",
       inset: 0,
       background: "rgba(255,255,255,0.7)",
@@ -8494,12 +8474,12 @@ function CheckoutFormInner({
       justifyContent: "center",
       zIndex: 10
     }, children: is3DSActive ? "Verifying payment..." : "Processing..." }),
-    !isReady && /* @__PURE__ */ jsx9("div", { "data-testid": "flopay-loading", "aria-busy": "true", children: "Loading payment form..." }),
-    isReady && /* @__PURE__ */ jsxs6(Fragment4, { children: [
-      /* @__PURE__ */ jsx9(PaymentElement, { options: { layout } }),
-      showAddress && /* @__PURE__ */ jsx9(AddressElement, { options: { mode: showAddress === true ? "billing" : showAddress } }),
-      displayError && /* @__PURE__ */ jsx9("div", { role: "alert", "data-testid": "flopay-error", style: { color: "red", margin: "0.75rem 0" }, children: displayError }),
-      children ?? /* @__PURE__ */ jsx9(
+    !isReady && /* @__PURE__ */ jsx10("div", { "data-testid": "flopay-loading", "aria-busy": "true", children: "Loading payment form..." }),
+    isReady && /* @__PURE__ */ jsxs7(Fragment4, { children: [
+      /* @__PURE__ */ jsx10(PaymentElement, { options: { layout } }),
+      showAddress && /* @__PURE__ */ jsx10(AddressElement, { options: { mode: showAddress === true ? "billing" : showAddress } }),
+      displayError && /* @__PURE__ */ jsx10("div", { role: "alert", "data-testid": "flopay-error", style: { color: "red", margin: "0.75rem 0" }, children: displayError }),
+      children ?? /* @__PURE__ */ jsx10(
         "button",
         {
           type: "submit",
@@ -8516,7 +8496,7 @@ function CheckoutFormInner({
 import { PaymentAPI as PaymentAPI6 } from "@flopay/js";
 import { FloPayError as FloPayError7 } from "@flopay/shared";
 import { useCallback as useCallback6, useEffect as useEffect8, useRef as useRef7, useState as useState6 } from "react";
-import { Fragment as Fragment5, jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
 function PayPalButton({
   sessionId,
   nonce,
@@ -8658,11 +8638,11 @@ function PayPalButton({
     }
   }, [flopay, elements, sessionId, nonce, email, baseUrl, dispatchTokenizedBody, onErrorChange]);
   if (!flopay || !elements) {
-    return /* @__PURE__ */ jsx10("div", { style: { height: 45, background: "#f0f0f0", borderRadius: 6, animation: "pulse 1.5s infinite" } });
+    return /* @__PURE__ */ jsx11("div", { style: { height: 45, background: "#f0f0f0", borderRadius: 6, animation: "pulse 1.5s infinite" } });
   }
-  return /* @__PURE__ */ jsxs7(Fragment5, { children: [
-    !ready && /* @__PURE__ */ jsx10("div", { style: { height: 45, background: "#f0f0f0", borderRadius: 6 } }),
-    /* @__PURE__ */ jsx10("div", { style: ready ? {} : { display: "none" }, children: /* @__PURE__ */ jsx10(
+  return /* @__PURE__ */ jsxs8(Fragment5, { children: [
+    !ready && /* @__PURE__ */ jsx11("div", { style: { height: 45, background: "#f0f0f0", borderRadius: 6 } }),
+    /* @__PURE__ */ jsx11("div", { style: ready ? {} : { display: "none" }, children: /* @__PURE__ */ jsx11(
       "button",
       {
         type: "button",
@@ -8684,7 +8664,7 @@ function PayPalButton({
         children: submitting ? "Processing..." : "PayPal"
       }
     ) }),
-    (submitting || isProcessing) && /* @__PURE__ */ jsx10("div", { style: {
+    (submitting || isProcessing) && /* @__PURE__ */ jsx11("div", { style: {
       position: "fixed",
       inset: 0,
       background: "rgba(0,0,0,0.4)",
@@ -8692,7 +8672,7 @@ function PayPalButton({
       alignItems: "center",
       justifyContent: "center",
       zIndex: 1e3
-    }, children: /* @__PURE__ */ jsx10("div", { style: {
+    }, children: /* @__PURE__ */ jsx11("div", { style: {
       background: "white",
       borderRadius: 8,
       padding: "1.5rem",
@@ -8707,7 +8687,7 @@ function PayPalButton({
 import { useCallback as useCallback7, useEffect as useEffect9, useMemo as useMemo5, useRef as useRef8, useState as useState7 } from "react";
 import { PaymentAPI as PaymentAPI7 } from "@flopay/js";
 import { FloPayError as FloPayError8, resolveBillingApiUrl as resolveBillingApiUrl4, resolveButtonsLayoutTheme as resolveButtonsLayoutTheme3, resolveTheme as resolveTheme3 } from "@flopay/shared";
-import { Fragment as Fragment6, jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx12, jsxs as jsxs9 } from "react/jsx-runtime";
 var DEFAULT_BUTTONS_LAYOUT_BUTTON_HEIGHT3 = 44;
 function sleep2(ms) {
   return new Promise((resolve) => setTimeout(resolve, ms));
@@ -9168,8 +9148,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__ */ jsxs8(Fragment6, { children: [
-    /* @__PURE__ */ jsx11(
+  return /* @__PURE__ */ jsxs9(Fragment6, { children: [
+    /* @__PURE__ */ jsx12(
       "button",
       {
         ...buttonProps,
@@ -9233,17 +9213,17 @@ function FloPayAutomaticPaymentButton({
             e.currentTarget.style.transform = "scale(1)";
           }
         },
-        children: /* @__PURE__ */ jsx11(CardButtonContentSlot, { content: children })
+        children: /* @__PURE__ */ jsx12(CardButtonContentSlot, { content: children })
       }
     ),
-    overlayStatus && /* @__PURE__ */ jsx11(
+    overlayStatus && /* @__PURE__ */ jsx12(
       ProcessingOverlay,
       {
         status: overlayStatus,
         errorMessage: overlayError
       }
     ),
-    fallbackSession && /* @__PURE__ */ jsx11(
+    fallbackSession && /* @__PURE__ */ jsx12(
       "div",
       {
         "data-testid": "flopay-automatic-payment-fallback",
@@ -9264,7 +9244,7 @@ function FloPayAutomaticPaymentButton({
           padding: "1.5rem",
           zIndex: 1100
         },
-        children: /* @__PURE__ */ jsx11(
+        children: /* @__PURE__ */ jsx12(
           "div",
           {
             style: {
@@ -9280,7 +9260,7 @@ function FloPayAutomaticPaymentButton({
               flexDirection: "column",
               gap: "1rem"
             },
-            children: /* @__PURE__ */ jsx11(
+            children: /* @__PURE__ */ jsx12(
               FloPayCheckout,
               {
                 sessionId: fallbackSession.sessionId,