@flopay/react 1.2.8 → 1.3.1

package/dist/index.cjs

@@ -43,6 +43,7 @@ __export(index_exports, {
   PayPalButton: () => PayPalButton,
   PaymentElement: () => PaymentElement,
   SplitCardForm: () => SplitCardForm,
+  VaultCardFields: () => VaultCardFields,
   useCheckout: () => useCheckout,
   useElements: () => useElements,
   useFloPay: () => useFloPay,
@@ -152,7 +153,7 @@ function FloPayProvider({
 }
 
 // src/flopay-checkout.tsx
-var import_react9 = __toESM(require("react"), 1);
+var import_react10 = __toESM(require("react"), 1);
 var import_js4 = require("@flopay/js");
 var import_shared8 = require("@flopay/shared");
 
@@ -287,41 +288,114 @@ var AddressElement = createElementComponent("address", "AddressElement");
 var import_react_stripe_js = require("@stripe/react-stripe-js");
 var import_shared5 = require("@flopay/shared");
 var import_js2 = require("@flopay/js");
-var import_react8 = __toESM(require("react"), 1);
 
-// src/hooks.ts
+// src/vault-card-fields.tsx
 var import_react5 = require("react");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+function VaultCardFields({
+  capture,
+  html,
+  messageToken,
+  expectedOrigin,
+  theme,
+  containerStyle,
+  onReady,
+  onError,
+  onValidation
+}) {
+  const containerRef = (0, import_react5.useRef)(null);
+  const onReadyRef = (0, import_react5.useRef)(onReady);
+  const onErrorRef = (0, import_react5.useRef)(onError);
+  const onValidationRef = (0, import_react5.useRef)(onValidation);
+  onReadyRef.current = onReady;
+  onErrorRef.current = onError;
+  onValidationRef.current = onValidation;
+  const themeRef = (0, import_react5.useRef)(theme);
+  themeRef.current = theme;
+  (0, import_react5.useEffect)(() => {
+    const el = containerRef.current;
+    if (!el) return;
+    let active = true;
+    let readyEmitted = false;
+    const emitReadyOnce = () => {
+      if (!active || readyEmitted) return;
+      readyEmitted = true;
+      onReadyRef.current?.();
+    };
+    const offReady = capture.on("ready", () => {
+      emitReadyOnce();
+    });
+    const offError = capture.on("error", (event) => {
+      onErrorRef.current?.(event.message ?? "There was a problem loading the secure card form.");
+    });
+    const offValidation = capture.on("validation", (event) => {
+      onValidationRef.current?.(event.message ?? null);
+    });
+    const mountOptions = {
+      html,
+      ...messageToken ? { messageToken } : {},
+      ...expectedOrigin ? { expectedOrigin } : {},
+      ...themeRef.current ? { theme: themeRef.current } : {}
+    };
+    capture.mount(el, mountOptions).then(() => {
+      emitReadyOnce();
+    }).catch((err) => {
+      if (active) {
+        onErrorRef.current?.(
+          err instanceof Error ? err.message : "Failed to load the secure card form."
+        );
+      }
+    });
+    return () => {
+      active = false;
+      offReady();
+      offError();
+      offValidation();
+      capture.unmount();
+    };
+  }, [capture, html, messageToken, expectedOrigin]);
+  (0, import_react5.useEffect)(() => {
+    if (theme) capture.applyTheme?.(theme);
+  }, [capture, theme]);
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { ref: containerRef, "data-testid": "flopay-vault-card-fields", style: containerStyle });
+}
+
+// src/split-card-form.tsx
+var import_react9 = __toESM(require("react"), 1);
+
+// src/hooks.ts
+var import_react6 = require("react");
 var import_shared2 = require("@flopay/shared");
 function useFloPay() {
-  const ctx = (0, import_react5.useContext)(FloPayContext);
+  const ctx = (0, import_react6.useContext)(FloPayContext);
   return ctx.flopay;
 }
 function usePayPalFloPay() {
-  const ctx = (0, import_react5.useContext)(FloPayContext);
+  const ctx = (0, import_react6.useContext)(FloPayContext);
   return ctx.paypalFlopay ?? null;
 }
 function useElements() {
-  const ctx = (0, import_react5.useContext)(FloPayContext);
+  const ctx = (0, import_react6.useContext)(FloPayContext);
   return ctx.elements;
 }
 function useCheckout() {
-  return (0, import_react5.useContext)(CheckoutContext);
+  return (0, import_react6.useContext)(CheckoutContext);
 }
 function useBillingApiUrl() {
-  const ctx = (0, import_react5.useContext)(FloPayContext);
+  const ctx = (0, import_react6.useContext)(FloPayContext);
   return ctx.billingApiUrl || (0, import_shared2.resolveBillingApiUrl)();
 }
 
 // src/processing-overlay.tsx
-var import_react6 = require("react");
-var import_jsx_runtime4 = require("react/jsx-runtime");
+var import_react7 = require("react");
+var import_jsx_runtime5 = require("react/jsx-runtime");
 var PROCESSING_OVERLAY_SUCCESS_DELAY_MS = 1200;
 var PROCESSING_OVERLAY_ERROR_DELAY_MS = 1500;
 function ProcessingOverlay({
   status,
   errorMessage
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
     "div",
     {
       "data-testid": "flopay-processing-overlay",
@@ -338,7 +412,7 @@ function ProcessingOverlay({
         zIndex: 1e3,
         backdropFilter: "blur(2px)"
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
         "div",
         {
           style: {
@@ -354,8 +428,8 @@ function ProcessingOverlay({
             gap: 16
           },
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { width: 48, height: 48, position: "relative" }, children: [
-              status === "processing" && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: { width: 48, height: 48, position: "relative" }, children: [
+              status === "processing" && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
                 "svg",
                 {
                   width: "48",
@@ -365,14 +439,14 @@ function ProcessingOverlay({
                   xmlns: "http://www.w3.org/2000/svg",
                   style: { animation: "flopay-spin 0.8s linear infinite" },
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("circle", { cx: "12", cy: "12", r: "10", stroke: "#e5e7eb", strokeWidth: "3" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M4 12a8 8 0 018-8v3a5 5 0 00-5 5H4z", fill: "#4A49FF" })
+                    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("circle", { cx: "12", cy: "12", r: "10", stroke: "#e5e7eb", strokeWidth: "3" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M4 12a8 8 0 018-8v3a5 5 0 00-5 5H4z", fill: "#4A49FF" })
                   ]
                 }
               ),
-              status === "success" && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { animation: "flopay-pop 0.4s cubic-bezier(0.34,1.56,0.64,1)" }, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("svg", { width: "48", height: "48", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("circle", { cx: "12", cy: "12", r: "11", fill: "#22c55e" }),
-                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+              status === "success" && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: { animation: "flopay-pop 0.4s cubic-bezier(0.34,1.56,0.64,1)" }, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("svg", { width: "48", height: "48", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("circle", { cx: "12", cy: "12", r: "11", fill: "#22c55e" }),
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                   "path",
                   {
                     d: "M7 12.5l3 3 7-7",
@@ -388,9 +462,9 @@ function ProcessingOverlay({
                   }
                 )
               ] }) }),
-              status === "error" && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { animation: "flopay-shake 0.4s ease" }, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("svg", { width: "48", height: "48", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("circle", { cx: "12", cy: "12", r: "11", fill: "#ef4444" }),
-                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+              status === "error" && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: { animation: "flopay-shake 0.4s ease" }, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("svg", { width: "48", height: "48", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("circle", { cx: "12", cy: "12", r: "11", fill: "#ef4444" }),
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                   "path",
                   {
                     d: "M8 8l8 8M16 8l-8 8",
@@ -406,7 +480,7 @@ function ProcessingOverlay({
                 )
               ] }) })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
               "span",
               {
                 style: {
@@ -422,7 +496,7 @@ function ProcessingOverlay({
                 ]
               }
             ),
-            status === "success" && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            status === "success" && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
               "p",
               {
                 style: {
@@ -436,7 +510,7 @@ function ProcessingOverlay({
                 children: "You will be automatically redirected, do not close or navigate away from this window."
               }
             ),
-            status === "error" && errorMessage && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            status === "error" && errorMessage && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
               "p",
               {
                 style: {
@@ -450,7 +524,7 @@ function ProcessingOverlay({
                 children: errorMessage
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("style", { children: `
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("style", { children: `
           @keyframes flopay-spin { to { transform: rotate(360deg); } }
           @keyframes flopay-pop { 0% { transform: scale(0); } 100% { transform: scale(1); } }
           @keyframes flopay-draw { to { stroke-dashoffset: 0; } }
@@ -724,11 +798,11 @@ function isInAppBrowser(userAgent) {
 }
 
 // src/direct-paypal-button.tsx
-var import_react7 = require("react");
+var import_react8 = require("react");
 var import_paypal_js = require("@paypal/paypal-js");
 var import_js = require("@flopay/js");
 var import_shared4 = require("@flopay/shared");
-var import_jsx_runtime5 = require("react/jsx-runtime");
+var import_jsx_runtime6 = require("react/jsx-runtime");
 var DEFAULT_BUTTON_HEIGHT = 45;
 function DirectPayPalButton({
   sessionId,
@@ -751,62 +825,62 @@ function DirectPayPalButton({
   existingOrderId,
   debug = false
 }) {
-  const containerRef = (0, import_react7.useRef)(null);
-  const [ready, setReady] = (0, import_react7.useState)(false);
-  const [failed, setFailed] = (0, import_react7.useState)(false);
-  const [submitting, setSubmitting] = (0, import_react7.useState)(false);
-  const baseUrl = (0, import_react7.useMemo)(() => billingApiUrl.replace(/\/+$/, ""), [billingApiUrl]);
-  const [debugLines, setDebugLines] = (0, import_react7.useState)([]);
+  const containerRef = (0, import_react8.useRef)(null);
+  const [ready, setReady] = (0, import_react8.useState)(false);
+  const [failed, setFailed] = (0, import_react8.useState)(false);
+  const [submitting, setSubmitting] = (0, import_react8.useState)(false);
+  const baseUrl = (0, import_react8.useMemo)(() => billingApiUrl.replace(/\/+$/, ""), [billingApiUrl]);
+  const [debugLines, setDebugLines] = (0, import_react8.useState)([]);
   const appendDebug = (line) => {
     if (!debug) return;
     setDebugLines((prev) => [...prev, `${(/* @__PURE__ */ new Date()).toISOString().slice(11, 23)} ${line}`]);
   };
-  const onTokenizedBodyRef = (0, import_react7.useRef)(onTokenizedBody);
-  const onCompleteRef = (0, import_react7.useRef)(onComplete);
-  const onErrorChangeRef = (0, import_react7.useRef)(onErrorChange);
-  const onDeclineRef = (0, import_react7.useRef)(onDecline);
-  const onButtonClickRef = (0, import_react7.useRef)(onButtonClick);
-  const onLoadStateChangeRef = (0, import_react7.useRef)(onLoadStateChange);
-  const runBeforeButtonClickRef = (0, import_react7.useRef)(runBeforeButtonClick);
-  const sessionRef = (0, import_react7.useRef)(session);
-  const emailRef = (0, import_react7.useRef)(email);
-  const nonceRef = (0, import_react7.useRef)(nonce);
-  const beforeClickRef = (0, import_react7.useRef)(null);
-  (0, import_react7.useEffect)(() => {
+  const onTokenizedBodyRef = (0, import_react8.useRef)(onTokenizedBody);
+  const onCompleteRef = (0, import_react8.useRef)(onComplete);
+  const onErrorChangeRef = (0, import_react8.useRef)(onErrorChange);
+  const onDeclineRef = (0, import_react8.useRef)(onDecline);
+  const onButtonClickRef = (0, import_react8.useRef)(onButtonClick);
+  const onLoadStateChangeRef = (0, import_react8.useRef)(onLoadStateChange);
+  const runBeforeButtonClickRef = (0, import_react8.useRef)(runBeforeButtonClick);
+  const sessionRef = (0, import_react8.useRef)(session);
+  const emailRef = (0, import_react8.useRef)(email);
+  const nonceRef = (0, import_react8.useRef)(nonce);
+  const beforeClickRef = (0, import_react8.useRef)(null);
+  (0, import_react8.useEffect)(() => {
     onTokenizedBodyRef.current = onTokenizedBody;
   }, [onTokenizedBody]);
-  (0, import_react7.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     onCompleteRef.current = onComplete;
   }, [onComplete]);
-  (0, import_react7.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     onErrorChangeRef.current = onErrorChange;
   }, [onErrorChange]);
-  (0, import_react7.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     onDeclineRef.current = onDecline;
   }, [onDecline]);
-  (0, import_react7.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     onButtonClickRef.current = onButtonClick;
   }, [onButtonClick]);
-  (0, import_react7.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     onLoadStateChangeRef.current = onLoadStateChange;
   }, [onLoadStateChange]);
-  (0, import_react7.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     runBeforeButtonClickRef.current = runBeforeButtonClick;
   }, [runBeforeButtonClick]);
-  (0, import_react7.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     sessionRef.current = session;
   }, [session]);
-  (0, import_react7.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     emailRef.current = email;
   }, [email]);
-  (0, import_react7.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     nonceRef.current = nonce;
   }, [nonce]);
-  (0, import_react7.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     onLoadStateChangeRef.current?.(ready && !failed);
   }, [ready, failed]);
   const normalizedEnv = (0, import_shared4.normalizeGatewayEnvironment)(environment);
-  (0, import_react7.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     const maskedClient = clientId ? `${clientId.slice(0, 6)}\u2026(len ${clientId.length})` : "(empty)";
     const ua = typeof navigator !== "undefined" ? navigator.userAgent : "(no navigator)";
     appendDebug(`mount clientId=${maskedClient} env=${environment ?? "(unset)"}\u2192${normalizedEnv ?? "live"} ccy=${currency} sub=${isSubscription}`);
@@ -1218,7 +1292,7 @@ function DirectPayPalButton({
       }
     };
   }, [baseUrl, clientId, currency, environment, isSubscription, sessionId, existingOrderId]);
-  const debugPanel = debug ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+  const debugPanel = debug ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
     "pre",
     {
       "data-testid": "flopay-direct-paypal-debug",
@@ -1243,17 +1317,17 @@ ${debugLines.join("\n")}`
     }
   ) : null;
   if (failed) {
-    return debug ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { children: debugPanel }) : null;
+    return debug ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { children: debugPanel }) : null;
   }
   return (
     // Single wrapper so the parent flex container sees exactly one flex item
     // (otherwise the fragment's placeholder + container become two siblings
     // and any spacing-sensitive layout has to reason about both). The wrapper
     // intentionally has no margin/padding so the parent owns all spacing.
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { children: [
       debugPanel,
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: { position: "relative", minHeight: DEFAULT_BUTTON_HEIGHT }, children: [
-        !ready && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { position: "relative", minHeight: DEFAULT_BUTTON_HEIGHT }, children: [
+        !ready && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
           "div",
           {
             "data-testid": "flopay-direct-paypal-placeholder",
@@ -1267,7 +1341,7 @@ ${debugLines.join("\n")}`
             }
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
           "div",
           {
             ref: containerRef,
@@ -1287,10 +1361,28 @@ ${debugLines.join("\n")}`
 
 // src/split-card-form.tsx
 var import_shared6 = require("@flopay/shared");
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_jsx_runtime7 = require("react/jsx-runtime");
 var STRIPE_RESUME_KEY = "flopay_stripe_resume";
 var LEGACY_WALLET_RESUME_KEY = "flopay_wallet_resume";
 var PAYPAL_RESUME_KEY = "flopay_paypal_resume";
+function toVaultMount(block) {
+  if (!block?.html) return null;
+  return {
+    html: block.html,
+    ...block.messageToken ? { messageToken: block.messageToken } : {},
+    ...block.expectedOrigin ? { expectedOrigin: block.expectedOrigin } : {}
+  };
+}
+function darkenHex(hex, amount = 0.12) {
+  const match = /^#?([0-9a-fA-F]{6})$/.exec(hex.trim());
+  if (!match) return hex;
+  const value = parseInt(match[1], 16);
+  const scale = Math.max(0, Math.min(1, 1 - amount));
+  const r = Math.round((value >> 16 & 255) * scale);
+  const g = Math.round((value >> 8 & 255) * scale);
+  const b = Math.round((value & 255) * scale);
+  return `#${(1 << 24 | r << 16 | g << 8 | b).toString(16).slice(1)}`;
+}
 var FLOPAY_KEYFRAMES = `
 .paypal-buttons { margin: 0 !important; vertical-align: top !important; }
 @keyframes flopay-spin { to { transform: rotate(360deg); } }
@@ -1315,18 +1407,20 @@ var FLOPAY_KEYFRAMES = `
 `;
 var DEFAULT_BUTTONS_LAYOUT_BUTTON_HEIGHT = 44;
 function derivePrimaryTileStyle(opts) {
-  if (!opts.themeBundle) {
+  if (!opts.themeBundle && !opts.explicitPrimaryColor) {
     return {
       backgroundColor: "white",
       color: "#262833",
       border: "1px solid #d1d5db",
-      borderRadius: "8px",
+      borderRadius: opts.resolvedBorderRadius,
       boxShadow: "0 1px 2px rgba(0,0,0,0.04)"
     };
   }
-  const submit = opts.submitButtonStyle ?? {};
+  const submit = opts.themeBundle ? opts.submitButtonStyle ?? {} : {};
   return {
-    backgroundColor: submit.backgroundColor ?? opts.resolvedPrimaryColor,
+    // `colorPrimary` wins so a per-checkout override re-skins the card / auto-pay
+    // buttons in lock-step with the submit CTA (which also keys off it).
+    backgroundColor: opts.resolvedPrimaryColor,
     color: submit.color ?? "white",
     border: submit.border ?? "none",
     borderRadius: submit.borderRadius ?? opts.resolvedBorderRadius,
@@ -1353,6 +1447,18 @@ function getButtonMethodLabel(method) {
       return "Card";
   }
 }
+function malformedPostcodeMessage(country) {
+  const example = (0, import_shared5.getPostalCodeExample)(country);
+  return `Enter a valid ${(0, import_shared5.getPostalCodeLabel)(country)}${example ? ` (e.g. ${example})` : ""}`;
+}
+function computePostalCodeState(country, zip, visible) {
+  const supported = (0, import_shared5.isPostalCodeSupported)(country);
+  const trimmed = zip.trim();
+  const required = visible && supported;
+  const empty = required && !trimmed;
+  const malformed = required && !!trimmed && !(0, import_shared5.isValidPostalCode)(country, trimmed);
+  return { visible, supported, required, empty, malformed };
+}
 function normalizeBeforeButtonClickError(method, err) {
   return err instanceof import_shared6.FloPayError ? err : new import_shared6.FloPayError(
     err instanceof Error ? err.message : `${getButtonMethodLabel(method)} before-click hook failed.`,
@@ -1360,7 +1466,7 @@ function normalizeBeforeButtonClickError(method, err) {
   );
 }
 function FloPayKeyframes() {
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("style", { children: FLOPAY_KEYFRAMES });
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("style", { children: FLOPAY_KEYFRAMES });
 }
 function toCssSize(value) {
   if (typeof value === "number") return `${value}px`;
@@ -1382,8 +1488,8 @@ function ExpressCheckoutReadySwap({
   children
 }) {
   if (state === "unavailable" || state === "load_error") return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { position: "relative", minHeight: 44 }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: { position: "relative", minHeight: 44 }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
       "div",
       {
         "data-testid": placeholderTestId,
@@ -1402,7 +1508,7 @@ function ExpressCheckoutReadySwap({
         }
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
       "div",
       {
         style: {
@@ -1420,9 +1526,9 @@ function ExpressCheckoutReadySwap({
 function isExpressCheckoutRowVisible(state) {
   return state !== "unavailable" && state !== "load_error";
 }
-var SplitCardForm = (0, import_react8.forwardRef)(
+var SplitCardForm = (0, import_react9.forwardRef)(
   function SplitCardForm2(props, ref) {
-    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(SplitCardFormInner, { ...props, innerRef: ref });
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SplitCardFormInner, { ...props, innerRef: ref });
   }
 );
 function PayPalButtonInner({
@@ -1441,15 +1547,15 @@ function PayPalButtonInner({
 }) {
   const stripe = (0, import_react_stripe_js.useStripe)();
   const elements = (0, import_react_stripe_js.useElements)();
-  const [loadState, setLoadState] = (0, import_react8.useState)("loading");
-  (0, import_react8.useEffect)(() => {
+  const [loadState, setLoadState] = (0, import_react9.useState)("loading");
+  (0, import_react9.useEffect)(() => {
     onLoadStateChange?.(loadState);
   }, [loadState, onLoadStateChange]);
-  const [submitting, setSubmitting] = (0, import_react8.useState)(false);
-  const paypalResumeAttempted = (0, import_react8.useRef)(false);
-  const beforeClickRef = (0, import_react8.useRef)(null);
+  const [submitting, setSubmitting] = (0, import_react9.useState)(false);
+  const paypalResumeAttempted = (0, import_react9.useRef)(false);
+  const beforeClickRef = (0, import_react9.useRef)(null);
   const baseUrl = billingApiUrl.replace(/\/+$/, "");
-  (0, import_react8.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     if (!stripe || paypalResumeAttempted.current) return;
     const params = new URLSearchParams(window.location.search);
     const paymentIntentId = params.get("payment_intent");
@@ -1515,7 +1621,7 @@ function PayPalButtonInner({
       }
     })();
   }, [stripe, onTokenizedBody, onErrorChange, onDecline]);
-  const handlePayPalClick = (0, import_react8.useCallback)(async (event) => {
+  const handlePayPalClick = (0, import_react9.useCallback)(async (event) => {
     if (isProcessing || submitting) {
       event.reject();
       return;
@@ -1534,7 +1640,7 @@ function PayPalButtonInner({
     onButtonClick?.("paypal");
     event.resolve();
   }, [isProcessing, onButtonClick, runBeforeButtonClick, submitting]);
-  const handlePayPalConfirm = (0, import_react8.useCallback)(async (event) => {
+  const handlePayPalConfirm = (0, import_react9.useCallback)(async (event) => {
     if (!stripe || !elements) return;
     let prepared = beforeClickRef.current;
     beforeClickRef.current = null;
@@ -1654,14 +1760,14 @@ function PayPalButtonInner({
       setSubmitting(false);
     }
   }, [stripe, elements, sessionId, nonce, email, baseUrl, onTokenizedBody, onErrorChange, onDecline, runBeforeButtonClick]);
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
       ExpressCheckoutReadySwap,
       {
         state: loadState,
         placeholderTestId: "flopay-paypal-placeholder",
         borderRadius: placeholderBorderRadius,
-        children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
           import_react_stripe_js.ExpressCheckoutElement,
           {
             onReady: (event) => setLoadState(resolveExpressCheckoutLoadState(event, ["paypal"])),
@@ -1688,7 +1794,7 @@ function PayPalButtonInner({
         )
       }
     ),
-    submitting && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ProcessingOverlay, { status: "processing" })
+    submitting && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ProcessingOverlay, { status: "processing" })
   ] });
 }
 function WalletButtonInner({
@@ -1707,15 +1813,15 @@ function WalletButtonInner({
 }) {
   const stripe = (0, import_react_stripe_js.useStripe)();
   const elements = (0, import_react_stripe_js.useElements)();
-  const [loadState, setLoadState] = (0, import_react8.useState)("loading");
-  (0, import_react8.useEffect)(() => {
+  const [loadState, setLoadState] = (0, import_react9.useState)("loading");
+  (0, import_react9.useEffect)(() => {
     onLoadStateChange?.(loadState);
   }, [loadState, onLoadStateChange]);
-  const [submitting, setSubmitting] = (0, import_react8.useState)(false);
+  const [submitting, setSubmitting] = (0, import_react9.useState)(false);
   const baseUrl = billingApiUrl.replace(/\/+$/, "");
-  const lastWalletMethodRef = (0, import_react8.useRef)("card");
-  const beforeClickRef = (0, import_react8.useRef)(null);
-  const handleWalletConfirm = (0, import_react8.useCallback)(
+  const lastWalletMethodRef = (0, import_react9.useRef)("card");
+  const beforeClickRef = (0, import_react9.useRef)(null);
+  const handleWalletConfirm = (0, import_react9.useCallback)(
     async (event) => {
       if (!stripe || !elements) return;
       const walletType = event.expressPaymentType;
@@ -1805,7 +1911,7 @@ function WalletButtonInner({
     },
     [stripe, elements, sessionId, nonce, email, baseUrl, onTokenizedBody, onErrorChange, onDecline, runBeforeButtonClick]
   );
-  const expressMethodMap = (0, import_react8.useMemo)(() => {
+  const expressMethodMap = (0, import_react9.useMemo)(() => {
     const allKeys = ["applePay", "googlePay", "paypal", "link", "amazonPay", "klarna"];
     const alwaysCapable = /* @__PURE__ */ new Set(["applePay", "googlePay"]);
     const enabledKeys = new Set(expressMethods.map(import_shared5.stripeExpressMethodToOptionKey));
@@ -1819,18 +1925,18 @@ function WalletButtonInner({
     }
     return out;
   }, [expressMethods]);
-  const availableMethodKeys = (0, import_react8.useMemo)(
+  const availableMethodKeys = (0, import_react9.useMemo)(
     () => expressMethods.map(import_shared5.stripeExpressMethodToOptionKey),
     [expressMethods]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
       ExpressCheckoutReadySwap,
       {
         state: loadState,
         placeholderTestId: "flopay-wallet-placeholder",
         borderRadius: placeholderBorderRadius,
-        children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
           import_react_stripe_js.ExpressCheckoutElement,
           {
             onReady: (event) => {
@@ -1869,7 +1975,7 @@ function WalletButtonInner({
         )
       }
     ),
-    submitting && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ProcessingOverlay, { status: "processing" })
+    submitting && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ProcessingOverlay, { status: "processing" })
   ] });
 }
 function StripeMethodButton({
@@ -1890,7 +1996,7 @@ function StripeMethodButton({
   const resolvedBackground = brand?.backgroundColor ?? backgroundColor ?? "#ffffff";
   const resolvedBorder = brand?.borderColor ?? borderColor ?? "#d1d5db";
   const resolvedTextColor = brand?.textColor ?? textColor ?? "#262833";
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
     "button",
     {
       type: "button",
@@ -1937,9 +2043,9 @@ function StripeMethodButton({
         // Pulse-skeleton parity with the wallet ECE: no spinner, just the
         // status text on top of the pulsing background. Keeps the loading
         // affordance shape-equivalent across both kinds of tile.
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { style: { margin: "0 auto" }, children: `Connecting to ${(0, import_shared5.getStripeMethodDisplayName)(method)}\u2026` })
-      ) : /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { style: { margin: "0 auto" }, children: `Connecting to ${(0, import_shared5.getStripeMethodDisplayName)(method)}\u2026` })
+      ) : /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
           "span",
           {
             style: {
@@ -1952,7 +2058,7 @@ function StripeMethodButton({
               gap: (0, import_shared5.hasVendoredStripeMethodLogo)(method) ? 8 : 0
             },
             children: [
-              brand?.logoSvg && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+              brand?.logoSvg && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                 "span",
                 {
                   "aria-hidden": "true",
@@ -1971,11 +2077,11 @@ function StripeMethodButton({
                   dangerouslySetInnerHTML: { __html: brand.logoSvg }
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { children: (0, import_shared5.getStripeMethodDisplayName)(method) })
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { children: (0, import_shared5.getStripeMethodDisplayName)(method) })
             ]
           }
         ),
-        hasNextStep && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        hasNextStep && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
           "svg",
           {
             width: "14",
@@ -1995,7 +2101,7 @@ function StripeMethodButton({
               opacity: 0.7
             },
             "aria-hidden": "true",
-            children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { d: "M9 18l6-6-6-6" })
+            children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: "M9 18l6-6-6-6" })
           }
         )
       ] })
@@ -2018,16 +2124,17 @@ function StripeMethodInlineForm({
   isProcessing,
   submitButtonColor,
   submitButtonBorderRadius,
-  submitButtonStyle
+  submitButtonStyle,
+  errorText
 }) {
   const stripe = (0, import_react_stripe_js.useStripe)();
   const elements = (0, import_react_stripe_js.useElements)();
-  const [submitting, setSubmitting] = (0, import_react8.useState)(false);
-  const submittingRef = (0, import_react8.useRef)(false);
-  const [isMethodComplete, setIsMethodComplete] = (0, import_react8.useState)(false);
-  const [loadState, setLoadState] = (0, import_react8.useState)("loading");
+  const [submitting, setSubmitting] = (0, import_react9.useState)(false);
+  const submittingRef = (0, import_react9.useRef)(false);
+  const [isMethodComplete, setIsMethodComplete] = (0, import_react9.useState)(false);
+  const [loadState, setLoadState] = (0, import_react9.useState)("loading");
   const baseUrl = billingApiUrl.replace(/\/+$/, "");
-  const handlePay = (0, import_react8.useCallback)(async () => {
+  const handlePay = (0, import_react9.useCallback)(async () => {
     if (!stripe || !elements || isProcessing || submittingRef.current || !isMethodComplete) return;
     submittingRef.current = true;
     setSubmitting(true);
@@ -2167,8 +2274,8 @@ function StripeMethodInlineForm({
     onDecline
   ]);
   void onCancel;
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { "data-testid": `flopay-stripe-method-form-${method}`, style: { display: "flex", flexDirection: "column" }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { "data-testid": `flopay-stripe-method-form-${method}`, style: { display: "flex", flexDirection: "column" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
       import_react_stripe_js.PaymentElement,
       {
         onReady: () => setLoadState("ready"),
@@ -2188,7 +2295,7 @@ function StripeMethodInlineForm({
         }
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
       "button",
       {
         type: "button",
@@ -2214,7 +2321,23 @@ function StripeMethodInlineForm({
         },
         children: submitting ? "Processing\u2026" : `Pay with ${(0, import_shared5.getStripeMethodDisplayName)(method)}`
       }
-    )
+    ),
+    errorText && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { role: "alert", "data-testid": "flopay-error", style: {
+      margin: "0.75rem 0 0",
+      padding: "0.625rem 0.875rem",
+      background: "#FEF2F2",
+      border: "1px solid #FECACA",
+      borderRadius: "8px",
+      color: "#991B1B",
+      fontSize: "0.85rem",
+      fontWeight: 600,
+      display: "flex",
+      alignItems: "center",
+      gap: "0.5rem"
+    }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", style: { flexShrink: 0 }, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: "M12 9v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z", stroke: "#DC2626", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }),
+      errorText
+    ] })
   ] });
 }
 function StripePaymentElementInner({
@@ -2242,17 +2365,17 @@ function StripePaymentElementInner({
   expandedApmMethod
 }) {
   const baseUrl = billingApiUrl.replace(/\/+$/, "");
-  const [expandedMethod, setExpandedMethod] = (0, import_react8.useState)(null);
-  const [submittingMethod, setSubmittingMethod] = (0, import_react8.useState)(null);
-  const submittingRef = (0, import_react8.useRef)(false);
-  (0, import_react8.useEffect)(() => {
+  const [expandedMethod, setExpandedMethod] = (0, import_react9.useState)(null);
+  const [submittingMethod, setSubmittingMethod] = (0, import_react9.useState)(null);
+  const submittingRef = (0, import_react9.useRef)(false);
+  (0, import_react9.useEffect)(() => {
     if (paymentElementMethods.length > 0 && stripeInstance) {
       onLoadStateChange?.("ready");
     } else if (!stripeInstance) {
       onLoadStateChange?.("loading");
     }
   }, [paymentElementMethods.length, stripeInstance, onLoadStateChange]);
-  const handleAutoConfirm = (0, import_react8.useCallback)(async (method) => {
+  const handleAutoConfirm = (0, import_react9.useCallback)(async (method) => {
     if (!stripeInstance) return;
     if (submittingRef.current || isProcessing) return;
     submittingRef.current = true;
@@ -2391,9 +2514,9 @@ function StripePaymentElementInner({
     onErrorChange,
     onDecline
   ]);
-  const [localExpandedMethod, setLocalExpandedMethod] = (0, import_react8.useState)(null);
+  const [localExpandedMethod, setLocalExpandedMethod] = (0, import_react9.useState)(null);
   const activeExpandedMethod = onExpandApm ? expandedApmMethod ?? null : localExpandedMethod;
-  const handleMethodClick = (0, import_react8.useCallback)((method) => {
+  const handleMethodClick = (0, import_react9.useCallback)((method) => {
     if (submittingRef.current || isProcessing) return;
     if (activeExpandedMethod && activeExpandedMethod !== method) return;
     if ((0, import_shared5.needsStripeMethodExplicitConfirm)(method)) {
@@ -2406,14 +2529,14 @@ function StripePaymentElementInner({
       void handleAutoConfirm(method);
     }
   }, [activeExpandedMethod, isProcessing, handleAutoConfirm, onExpandApm]);
-  const localInlineElementsOptions = (0, import_react8.useMemo)(() => {
+  const localInlineElementsOptions = (0, import_react9.useMemo)(() => {
     if (!localExpandedMethod) return null;
     return {
       ...paymentElementBaseOptions,
       paymentMethodTypes: [localExpandedMethod]
     };
   }, [localExpandedMethod, paymentElementBaseOptions]);
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
     "div",
     {
       "data-testid": "flopay-stripe-payment-element-region",
@@ -2422,8 +2545,8 @@ function StripePaymentElementInner({
         const isExpanded = expandedApmMethod === method;
         const isSubmittingThis = submittingMethod === method;
         const otherInProgress = submittingMethod !== null && submittingMethod !== method || expandedApmMethod !== null && expandedApmMethod !== void 0 && expandedApmMethod !== method;
-        return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_react8.default.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_react9.default.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
             StripeMethodButton,
             {
               method,
@@ -2440,12 +2563,12 @@ function StripePaymentElementInner({
               fontFamily: buttonAppearance?.fontFamily
             }
           ),
-          !onExpandApm && localExpandedMethod === method && localInlineElementsOptions && stripeInstance && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          !onExpandApm && localExpandedMethod === method && localInlineElementsOptions && stripeInstance && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
             import_react_stripe_js.Elements,
             {
               stripe: stripeInstance,
               options: localInlineElementsOptions,
-              children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+              children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                 StripeMethodInlineForm,
                 {
                   method,
@@ -2498,6 +2621,7 @@ function SplitCardFormInner({
   showPayPal = true,
   showStripe = true,
   enabledPaymentMethods,
+  enabledPaymentMethodCountries,
   showApplePay = true,
   showGooglePay = true,
   layout = "default",
@@ -2512,6 +2636,8 @@ function SplitCardFormInner({
   onButtonClick,
   onBeforeButtonClick,
   enableAVS: enableAVSProp,
+  cardFieldOrder,
+  cardPreFormSlot,
   avsLayout: avsLayoutProp = "row",
   country: countryProp,
   zip: zipProp,
@@ -2536,68 +2662,103 @@ function SplitCardFormInner({
   const flopay = useFloPay();
   const paypalFlopay = usePayPalFloPay();
   const elements = useElements();
-  const checkout = (0, import_react8.useContext)(CheckoutContext);
+  const checkout = (0, import_react9.useContext)(CheckoutContext);
   const contextBillingUrl = useBillingApiUrl();
-  const [processing, setProcessing] = (0, import_react8.useState)(false);
-  const [error, setError] = (0, import_react8.useState)(null);
-  const [is3DSActive, setIs3DSActive] = (0, import_react8.useState)(false);
-  const [selectedCountry, setSelectedCountry] = (0, import_react8.useState)(countryProp ?? "US");
-  const [zipCode, setZipCode] = (0, import_react8.useState)(zipProp ?? "");
-  const [addressLine1, setAddressLine1] = (0, import_react8.useState)(addressLine1Prop ?? "");
-  const [addressLine2, setAddressLine2] = (0, import_react8.useState)(addressLine2Prop ?? "");
-  const [city, setCity] = (0, import_react8.useState)(cityProp ?? "");
-  const [stateValue, setStateValue] = (0, import_react8.useState)(stateProp ?? "");
-  const [accountPatch, setAccountPatch] = (0, import_react8.useState)({});
-  const zipCodeRef = (0, import_react8.useRef)(zipProp ?? "");
-  const selectedCountryRef = (0, import_react8.useRef)(countryProp ?? "US");
-  const addressLine1Ref = (0, import_react8.useRef)(addressLine1Prop ?? "");
-  const addressLine2Ref = (0, import_react8.useRef)(addressLine2Prop ?? "");
-  const cityRef = (0, import_react8.useRef)(cityProp ?? "");
-  const stateRef = (0, import_react8.useRef)(stateProp ?? "");
-  const avsConfig = (0, import_react8.useMemo)(() => (0, import_shared5.resolveAVSConfig)(enableAVSProp), [enableAVSProp]);
+  const [processing, setProcessing] = (0, import_react9.useState)(false);
+  const [error, setError] = (0, import_react9.useState)(null);
+  const [is3DSActive, setIs3DSActive] = (0, import_react9.useState)(false);
+  const [selectedCountry, setSelectedCountry] = (0, import_react9.useState)(countryProp ?? "US");
+  const [zipCode, setZipCode] = (0, import_react9.useState)(zipProp ?? "");
+  const [addressLine1, setAddressLine1] = (0, import_react9.useState)(addressLine1Prop ?? "");
+  const [addressLine2, setAddressLine2] = (0, import_react9.useState)(addressLine2Prop ?? "");
+  const [city, setCity] = (0, import_react9.useState)(cityProp ?? "");
+  const [stateValue, setStateValue] = (0, import_react9.useState)(stateProp ?? "");
+  const [accountPatch, setAccountPatch] = (0, import_react9.useState)({});
+  const zipCodeRef = (0, import_react9.useRef)(zipProp ?? "");
+  const selectedCountryRef = (0, import_react9.useRef)(countryProp ?? "US");
+  const addressLine1Ref = (0, import_react9.useRef)(addressLine1Prop ?? "");
+  const addressLine2Ref = (0, import_react9.useRef)(addressLine2Prop ?? "");
+  const cityRef = (0, import_react9.useRef)(cityProp ?? "");
+  const stateRef = (0, import_react9.useRef)(stateProp ?? "");
+  const avsConfig = (0, import_react9.useMemo)(() => (0, import_shared5.resolveAVSConfig)(enableAVSProp), [enableAVSProp]);
   const enableAVS = avsConfig !== null;
-  const [viewState, setViewState] = (0, import_react8.useState)(initialCardOpen ? "card" : "buttons");
-  const [expandedApmMethod, setExpandedApmMethod] = (0, import_react8.useState)(null);
+  const vaultBlockReady = Boolean(session?.vault?.html);
+  const vaultGatewayAdvertised = Boolean(session?.gateways?.pcivault);
+  const vaultActive = Boolean(
+    showStripe && (vaultBlockReady || vaultGatewayAdvertised) && flopay && sessionId
+  );
+  const cardCapture = (0, import_react9.useMemo)(() => {
+    if (!flopay || !vaultActive || !sessionId) return null;
+    return flopay.cardCapture({ sessionId });
+  }, [flopay, vaultActive, sessionId]);
+  const postalCodeState = (0, import_react9.useMemo)(() => {
+    const cc = selectedCountry;
+    const visible = avsConfig ? (0, import_shared5.isAVSFieldVisible)(avsConfig.postal_code, cc) : false;
+    return computePostalCodeState(cc, zipCode, visible);
+  }, [avsConfig, selectedCountry, zipCode]);
+  const { avsInvalid, invalidAvsFields } = (0, import_react9.useMemo)(() => {
+    const none = { line1: false, city: false, state: false, zip: false };
+    if (!vaultActive || !avsConfig) return { avsInvalid: false, invalidAvsFields: none };
+    const cc = selectedCountry;
+    const isEmpty = (field, value) => (0, import_shared5.isAVSFieldVisible)(field, cc) && !value.trim();
+    const invalidAvsFields2 = {
+      line1: isEmpty(avsConfig.address_line_1, addressLine1),
+      city: isEmpty(avsConfig.city, city),
+      state: isEmpty(avsConfig.state, stateValue),
+      // Empty (required) or malformed both block; unsupported/no-postcode
+      // locales never block (`postalCodeState` fails open above).
+      zip: postalCodeState.empty || postalCodeState.malformed
+    };
+    const avsInvalid2 = invalidAvsFields2.line1 || invalidAvsFields2.city || invalidAvsFields2.state || invalidAvsFields2.zip;
+    return { avsInvalid: avsInvalid2, invalidAvsFields: invalidAvsFields2 };
+  }, [vaultActive, avsConfig, selectedCountry, addressLine1, city, stateValue, postalCodeState]);
+  const [hasAttemptedSubmit, setHasAttemptedSubmit] = (0, import_react9.useState)(false);
+  const [zipTouched, setZipTouched] = (0, import_react9.useState)(false);
+  const [vaultMount, setVaultMount] = (0, import_react9.useState)(
+    () => toVaultMount(session?.vault)
+  );
+  const [viewState, setViewState] = (0, import_react9.useState)(initialCardOpen ? "card" : "buttons");
+  const [expandedApmMethod, setExpandedApmMethod] = (0, import_react9.useState)(null);
   const showCardForm = viewState === "expanding" || viewState === "card";
   const TRANSITION_MS = 280;
-  const expandToCard = (0, import_react8.useCallback)(() => {
+  const expandToCard = (0, import_react9.useCallback)(() => {
     setViewState("expanding");
     setTimeout(() => setViewState("card"), TRANSITION_MS);
   }, []);
-  const collapseToButtons = (0, import_react8.useCallback)(() => {
+  const collapseToButtons = (0, import_react9.useCallback)(() => {
     setViewState("collapsing");
     setTimeout(() => setViewState("buttons"), TRANSITION_MS);
   }, []);
-  const expandToApm = (0, import_react8.useCallback)((method) => {
+  const expandToApm = (0, import_react9.useCallback)((method) => {
     setExpandedApmMethod(method);
     setViewState("apm-expanding");
     setTimeout(() => setViewState("apm-form"), TRANSITION_MS);
   }, []);
-  const collapseFromApm = (0, import_react8.useCallback)(() => {
+  const collapseFromApm = (0, import_react9.useCallback)(() => {
     setViewState("apm-collapsing");
     setTimeout(() => {
       setViewState("buttons");
       setExpandedApmMethod(null);
     }, TRANSITION_MS);
   }, []);
-  (0, import_react8.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     if (layout === "buttons" && initialCardOpen) {
       setViewState("card");
     }
   }, [layout, initialCardOpen]);
-  const [fullName, setFullName] = (0, import_react8.useState)("");
-  const [formReady, setFormReady] = (0, import_react8.useState)(false);
-  const [overlayStatus, setOverlayStatus] = (0, import_react8.useState)(null);
-  const processingRef = (0, import_react8.useRef)(false);
-  const [paypalDirectRetry, setPaypalDirectRetry] = (0, import_react8.useState)(null);
-  const paypalDirectRetryRef = (0, import_react8.useRef)(paypalDirectRetry);
-  (0, import_react8.useEffect)(() => {
+  const [fullName, setFullName] = (0, import_react9.useState)("");
+  const [formReady, setFormReady] = (0, import_react9.useState)(false);
+  const [overlayStatus, setOverlayStatus] = (0, import_react9.useState)(null);
+  const processingRef = (0, import_react9.useRef)(false);
+  const [paypalDirectRetry, setPaypalDirectRetry] = (0, import_react9.useState)(null);
+  const paypalDirectRetryRef = (0, import_react9.useRef)(paypalDirectRetry);
+  (0, import_react9.useEffect)(() => {
     paypalDirectRetryRef.current = paypalDirectRetry;
   }, [paypalDirectRetry]);
   const resolvedBillingApiUrl = billingApiUrl || contextBillingUrl;
   const displayError = externalError ?? error;
-  const themeBundle = (0, import_react8.useMemo)(() => (0, import_shared6.resolveTheme)(theme), [theme]);
-  const bStyles = (0, import_react8.useMemo)(() => {
+  const themeBundle = (0, import_react9.useMemo)(() => (0, import_shared6.resolveTheme)(theme), [theme]);
+  const bStyles = (0, import_react9.useMemo)(() => {
     const base = themeBundle?.buttonsLayout ?? (0, import_shared5.resolveButtonsLayoutTheme)(buttonsTheme);
     if (!buttonsStylesOverride) return base;
     return {
@@ -2612,11 +2773,36 @@ function SplitCardFormInner({
     };
   }, [themeBundle, buttonsTheme, buttonsStylesOverride]);
   const appearance = appearanceOverride ?? themeBundle?.appearance;
+  const vaultThemeColors = (0, import_react9.useMemo)(() => {
+    const vars = appearance?.variables;
+    const asString = (value) => typeof value === "string" && value ? value : void 0;
+    const submitButtonStyle = bStyles.submitButton;
+    const primary = asString(vars?.colorPrimary) ?? asString(submitButtonStyle?.backgroundColor) ?? "#4A49FF";
+    const isButtonsLayout = layout === "buttons";
+    const nameInput = bStyles.nameInput;
+    return {
+      primaryColor: primary,
+      primaryHoverColor: asString(vars?.colorPrimaryHover) ?? darkenHex(primary, 0.12),
+      inputBackgroundColor: asString(bStyles.cardInputBackground) ?? asString(vars?.colorBackground) ?? "#ffffff",
+      textColor: asString(bStyles.cardInputColor) ?? asString(nameInput?.color) ?? asString(vars?.colorText) ?? "#262833",
+      borderColor: asString(bStyles.cardInputBorder) ?? (isButtonsLayout ? "#e5e7eb" : "#A4A4FF"),
+      placeholderColor: asString(bStyles.cardInputPlaceholderColor) ?? "#9ca3af",
+      errorColor: asString(vars?.colorDanger) ?? "#dc2626",
+      successColor: "#16a34a",
+      fontFamily: asString(nameInput?.fontFamily) ?? asString(vars?.fontFamily) ?? "Poppins, sans-serif",
+      fontSize: asString(bStyles.cardInputFontSize) ?? asString(vars?.fontSizeBase) ?? "16px",
+      // `resolvedInputFontWeight` equivalent — sent as a string (the widget's
+      // theme applier only honors string values) so vault inputs/placeholders
+      // match the AVS fields' weight per theme (default 400).
+      fontWeight: String(toCssWeight(nameInput?.fontWeight) ?? 400),
+      borderRadius: asString(vars?.borderRadius) ?? "8px"
+    };
+  }, [appearance, bStyles, layout]);
   const isInlineSessionPatchProcessing = checkout.inlineSessionPatchProcessing ?? false;
   const isSubmitting = (externalProcessing ?? processing) || isInlineSessionPatchProcessing;
   const isSelfContained = !onTokenizedBody;
   const baseUrl = resolvedBillingApiUrl.replace(/\/+$/, "");
-  const resolvedAccount = (0, import_react8.useMemo)(() => mergeAccountPatch({
+  const resolvedAccount = (0, import_react9.useMemo)(() => mergeAccountPatch({
     userId,
     email,
     firstName,
@@ -2624,17 +2810,17 @@ function SplitCardFormInner({
     country: countryProp,
     zip: zipProp
   }, accountPatch), [userId, email, firstName, lastName, countryProp, zipProp, accountPatch]);
-  const stripeInstance = (0, import_react8.useMemo)(() => {
+  const stripeInstance = (0, import_react9.useMemo)(() => {
     if (!flopay) return null;
     return flopay.getRawProvider();
   }, [flopay]);
-  const paypalStripeInstance = (0, import_react8.useMemo)(() => {
+  const paypalStripeInstance = (0, import_react9.useMemo)(() => {
     if (!paypalFlopay) return null;
     return paypalFlopay.getRawProvider();
   }, [paypalFlopay]);
   const amountInCents = totalAmount || 100;
   const stripeAppearanceProp = appearance ? { appearance } : null;
-  const paymentElementAppearance = (0, import_react8.useMemo)(() => {
+  const paymentElementAppearance = (0, import_react9.useMemo)(() => {
     const base = appearance ?? {};
     const baseRules = base.rules ?? {};
     return {
@@ -2654,7 +2840,7 @@ function SplitCardFormInner({
       }
     };
   }, [appearance]);
-  const walletOptions = (0, import_react8.useMemo)(() => {
+  const walletOptions = (0, import_react9.useMemo)(() => {
     const modeOptions = resolveWalletElementsMode(totalAmount);
     return {
       ...modeOptions,
@@ -2665,7 +2851,7 @@ function SplitCardFormInner({
       ...stripeAppearanceProp
     };
   }, [totalAmount, currency, stripeAppearanceProp]);
-  const paypalOptions = (0, import_react8.useMemo)(() => ({
+  const paypalOptions = (0, import_react9.useMemo)(() => ({
     mode: "payment",
     amount: amountInCents,
     currency: currency.toLowerCase(),
@@ -2673,35 +2859,197 @@ function SplitCardFormInner({
     setupFutureUsage: "off_session",
     ...stripeAppearanceProp
   }), [amountInCents, currency, stripeAppearanceProp]);
-  const updateError = (0, import_react8.useCallback)(
+  const updateError = (0, import_react9.useCallback)(
     (err) => {
       setError(err);
       onErrorChange?.(err);
     },
     [onErrorChange]
   );
-  const emitDecline = (0, import_react8.useCallback)(
+  (0, import_react9.useEffect)(() => {
+    if (!vaultActive || !cardCapture) return;
+    cardCapture.setSubmitGate?.(avsInvalid);
+  }, [vaultActive, cardCapture, avsInvalid]);
+  (0, import_react9.useEffect)(() => {
+    if (!vaultActive || !cardCapture) return;
+    cardCapture.setCardFieldOrder?.(cardFieldOrder ?? null, avsConfig == null);
+  }, [vaultActive, cardCapture, cardFieldOrder, avsConfig]);
+  (0, import_react9.useEffect)(() => {
+    if (viewState === "expanding" || viewState === "collapsing" || viewState === "apm-expanding" || viewState === "apm-collapsing") {
+      updateError(null);
+    }
+  }, [viewState, updateError]);
+  const emitDecline = (0, import_react9.useCallback)(
     (method, input, overrides) => {
       onDecline?.(buildDeclineEvent(method, input, overrides));
     },
     [onDecline]
   );
+  (0, import_react9.useEffect)(() => {
+    if (!vaultActive || !sessionId) {
+      setVaultMount(null);
+      return;
+    }
+    const embedded = toVaultMount(session?.vault);
+    if (embedded) {
+      setVaultMount(embedded);
+      return;
+    }
+    setVaultMount(null);
+    let active = true;
+    new import_js2.PaymentAPI(baseUrl).getVaultCapture(sessionId, nonce).then((block) => {
+      if (!active) return;
+      const mount = toVaultMount(block);
+      if (mount) {
+        setVaultMount(mount);
+      } else {
+        updateError("Failed to load the secure card form.");
+      }
+    }).catch((err) => {
+      if (active) {
+        updateError(err instanceof Error ? err.message : "Failed to load the secure card form.");
+      }
+    });
+    return () => {
+      active = false;
+    };
+  }, [
+    vaultActive,
+    sessionId,
+    session?.vault?.html,
+    session?.vault?.messageToken,
+    session?.vault?.expectedOrigin,
+    baseUrl,
+    nonce,
+    updateError
+  ]);
+  const vaultOutcomeRef = (0, import_react9.useRef)({
+    onComplete,
+    onError,
+    updateError,
+    emitDecline,
+    resolvedAccount,
+    fullName,
+    avsConfig,
+    avsCheckProp,
+    sessionId,
+    nonce,
+    baseUrl
+  });
+  vaultOutcomeRef.current = {
+    onComplete,
+    onError,
+    updateError,
+    emitDecline,
+    resolvedAccount,
+    fullName,
+    avsConfig,
+    avsCheckProp,
+    sessionId,
+    nonce,
+    baseUrl
+  };
+  const vaultCompletedRef = (0, import_react9.useRef)(false);
+  (0, import_react9.useEffect)(() => {
+    if (!vaultActive || !cardCapture) return;
+    vaultCompletedRef.current = false;
+    let cancelled = false;
+    const offSubmitting = cardCapture.on("submitting", () => {
+      setHasAttemptedSubmit(true);
+      setOverlayStatus("processing");
+      const { resolvedAccount: resolvedAccount2, avsConfig: avsConfig2, fullName: fullName2, avsCheckProp: avsCheckProp2, baseUrl: baseUrl2, sessionId: sessionId2, nonce: nonce2 } = vaultOutcomeRef.current;
+      if (!sessionId2 || !nonce2) return;
+      const cc = selectedCountryRef.current || resolvedAccount2.country || "US";
+      const stateVisible = avsConfig2 ? (0, import_shared5.isAVSFieldVisible)(avsConfig2.state, cc) : false;
+      const line1Visible = avsConfig2 ? (0, import_shared5.isAVSFieldVisible)(avsConfig2.address_line_1, cc) : false;
+      const zipVisible = avsConfig2 ? (0, import_shared5.isAVSFieldVisible)(avsConfig2.postal_code, cc) : false;
+      const cityVisible = avsConfig2 ? (0, import_shared5.isAVSFieldVisible)(avsConfig2.city, cc) : false;
+      const line2Visible = avsConfig2 ? (0, import_shared5.isAVSFieldVisible)(avsConfig2.address_line_2, cc) : false;
+      const derivedState = line1Visible && !stateVisible && zipVisible ? (0, import_shared5.getStateFromPostalCode)(cc, zipCodeRef.current ?? "") : null;
+      const stateValue2 = stateVisible ? stateRef.current : derivedState;
+      void new import_js2.PaymentAPI(baseUrl2).patchAccountSnapshot(sessionId2, nonce2, {
+        accountData: {
+          userId: resolvedAccount2.userId ?? "",
+          email: resolvedAccount2.email ?? "",
+          firstName: resolvedAccount2.firstName ?? fullName2.trim().split(/\s+/)[0] ?? "",
+          lastName: resolvedAccount2.lastName ?? fullName2.trim().split(/\s+/).slice(1).join(" ") ?? "",
+          ...zipVisible && zipCodeRef.current ? { zip: zipCodeRef.current } : {},
+          ...cityVisible && cityRef.current ? { city: cityRef.current } : {},
+          ...stateValue2 ? { state: stateValue2 } : {},
+          ...line1Visible && addressLine1Ref.current ? { addressLine1: addressLine1Ref.current } : {},
+          ...line2Visible && addressLine2Ref.current ? { addressLine2: addressLine2Ref.current } : {},
+          country: cc
+        },
+        ...avsCheckProp2 !== void 0 ? { avsCheck: avsCheckProp2 } : {},
+        ...avsConfig2 ? {
+          avsConfig: {
+            country: (0, import_shared5.isAVSFieldVisible)(avsConfig2.country, cc),
+            postal_code: zipVisible,
+            address_line_1: line1Visible,
+            address_line_2: line2Visible,
+            city: cityVisible,
+            state: stateVisible
+          }
+        } : {}
+      }).catch(() => {
+      });
+    });
+    const offComplete = cardCapture.on("complete", async (event) => {
+      markSessionRecentlyCompleted(event.sessionId ?? vaultOutcomeRef.current.sessionId);
+      setOverlayStatus("success");
+      await new Promise((r) => setTimeout(r, PROCESSING_OVERLAY_SUCCESS_DELAY_MS));
+      if (vaultCompletedRef.current) return;
+      vaultCompletedRef.current = true;
+      vaultOutcomeRef.current.onComplete?.({
+        status: "succeeded",
+        paymentIntentId: event.intentId,
+        checkoutMethod: "card"
+      });
+    });
+    const offDecline = cardCapture.on("decline", async (event) => {
+      const { updateError: updateError2, emitDecline: emitDecline2 } = vaultOutcomeRef.current;
+      const message = event.message ?? "Your payment was declined. Please try another card or contact your bank.";
+      updateError2(message);
+      setOverlayStatus("error");
+      emitDecline2("card", message, event.declineReason ? { declineCode: event.declineReason } : void 0);
+      await new Promise((r) => setTimeout(r, PROCESSING_OVERLAY_ERROR_DELAY_MS));
+      if (cancelled) return;
+      setOverlayStatus(null);
+    });
+    const offError = cardCapture.on("error", async (event) => {
+      const { updateError: updateError2, onError: onError2 } = vaultOutcomeRef.current;
+      const message = event.message ?? "There was a problem processing your payment. Please try again.";
+      updateError2(message);
+      setOverlayStatus("error");
+      onError2?.(new import_shared6.FloPayError(message, "api_error"));
+      await new Promise((r) => setTimeout(r, PROCESSING_OVERLAY_ERROR_DELAY_MS));
+      if (cancelled) return;
+      setOverlayStatus(null);
+    });
+    return () => {
+      cancelled = true;
+      offSubmitting();
+      offComplete();
+      offDecline();
+      offError();
+    };
+  }, [vaultActive, cardCapture]);
   const directPaypalConfigured = !!directPaypal?.clientId;
   const hasEnabledMethodsPayload = Array.isArray(enabledPaymentMethods);
   const hasEnabledMethods = hasEnabledMethodsPayload && enabledPaymentMethods.length > 0;
   const paypalEnabled = hasEnabledMethodsPayload && enabledPaymentMethods.includes("paypal");
-  const { expressMethods, paymentElementMethods } = (0, import_react8.useMemo)(
+  const { expressMethods, paymentElementMethods } = (0, import_react9.useMemo)(
     () => (0, import_shared5.partitionStripeMethods)(enabledPaymentMethods, {
       excludePaypal: directPaypalConfigured
     }),
     [enabledPaymentMethods, directPaypalConfigured]
   );
   const paypalRenderedSeparately = directPaypalConfigured || !!paypalFlopay;
-  const expressMethodsForWalletRow = (0, import_react8.useMemo)(
+  const expressMethodsForWalletRow = (0, import_react9.useMemo)(
     () => paypalRenderedSeparately ? expressMethods.filter((m) => m !== "paypal") : expressMethods,
     [expressMethods, paypalRenderedSeparately]
   );
-  const legacyExpressMethods = (0, import_react8.useMemo)(() => {
+  const legacyExpressMethods = (0, import_react9.useMemo)(() => {
     const out = [];
     if (showApplePay) out.push("apple_pay");
     if (showGooglePay) out.push("google_pay");
@@ -2709,30 +3057,31 @@ function SplitCardFormInner({
   }, [showApplePay, showGooglePay]);
   const walletExpressMethods = hasEnabledMethodsPayload ? expressMethodsForWalletRow : legacyExpressMethods;
   const showWallets = showStripe && walletExpressMethods.length > 0;
-  const paymentElementMethodsForCurrency = (0, import_react8.useMemo)(
-    () => (0, import_shared5.filterStripeMethodsByAmount)(
-      (0, import_shared5.filterStripeMethodsByCountry)(
-        (0, import_shared5.filterStripeMethodsByCurrency)(paymentElementMethods, currency),
-        countryProp
-      ),
-      currency,
-      amountInCents
-    ),
-    [paymentElementMethods, currency, countryProp, amountInCents]
-  );
-  const paymentElementBaseOptions = (0, import_react8.useMemo)(() => ({
+  const apmCountry = enableAVS ? selectedCountry : countryProp;
+  const paymentElementMethodsForCurrency = (0, import_react9.useMemo)(() => {
+    const target = apmCountry?.trim().toUpperCase();
+    if (!target) return paymentElementMethods;
+    if (!enabledPaymentMethodCountries) {
+      return (0, import_shared5.filterStripeMethodsByCountry)(paymentElementMethods, apmCountry);
+    }
+    return paymentElementMethods.filter((method) => {
+      const allowed = enabledPaymentMethodCountries[method];
+      return !allowed || allowed.length === 0 || allowed.includes(target);
+    });
+  }, [paymentElementMethods, apmCountry, enabledPaymentMethodCountries]);
+  const paymentElementBaseOptions = (0, import_react9.useMemo)(() => ({
     mode: "payment",
     amount: amountInCents,
     currency: currency.toLowerCase(),
     paymentMethodCreation: "manual",
     appearance: paymentElementAppearance
   }), [amountInCents, currency, paymentElementAppearance]);
-  const [paypalLoadState, setPaypalLoadState] = (0, import_react8.useState)("loading");
-  const [walletLoadState, setWalletLoadState] = (0, import_react8.useState)("loading");
-  const [paymentElementLoadState, setPaymentElementLoadState] = (0, import_react8.useState)("loading");
-  const [directPaypalReady, setDirectPaypalReady] = (0, import_react8.useState)(false);
-  const [inAppBrowserDetected, setInAppBrowserDetected] = (0, import_react8.useState)();
-  (0, import_react8.useEffect)(() => {
+  const [paypalLoadState, setPaypalLoadState] = (0, import_react9.useState)("loading");
+  const [walletLoadState, setWalletLoadState] = (0, import_react9.useState)("loading");
+  const [paymentElementLoadState, setPaymentElementLoadState] = (0, import_react9.useState)("loading");
+  const [directPaypalReady, setDirectPaypalReady] = (0, import_react9.useState)(false);
+  const [inAppBrowserDetected, setInAppBrowserDetected] = (0, import_react9.useState)();
+  (0, import_react9.useEffect)(() => {
     setInAppBrowserDetected(isInAppBrowser());
   }, []);
   const shouldShowPayPal = showPayPal && (directPaypalConfigured || (hasEnabledMethodsPayload ? paypalEnabled : inAppBrowserDetected === false));
@@ -2744,8 +3093,8 @@ function SplitCardFormInner({
   const shouldDisplayPayPalRow = shouldRenderDirectPayPal ? directPaypalReady : shouldRenderStripePayPal && isExpressCheckoutRowVisible(paypalLoadState);
   const shouldDisplayWalletRow = shouldRenderWallets && isExpressCheckoutRowVisible(walletLoadState);
   const shouldDisplayPaymentElementRow = shouldRenderPaymentElement && paymentElementLoadState !== "load_error";
-  const validationFiredRef = (0, import_react8.useRef)(false);
-  (0, import_react8.useEffect)(() => {
+  const validationFiredRef = (0, import_react9.useRef)(false);
+  (0, import_react9.useEffect)(() => {
     if (validationFiredRef.current) return;
     if (!showStripe && !showPayPal) {
       validationFiredRef.current = true;
@@ -2765,8 +3114,8 @@ function SplitCardFormInner({
       updateError(err.message);
     }
   }, [showStripe, showPayPal, directPaypalConfigured, paypalStripeInstance, onError, updateError]);
-  const deprecationLoggedRef = (0, import_react8.useRef)(false);
-  (0, import_react8.useEffect)(() => {
+  const deprecationLoggedRef = (0, import_react9.useRef)(false);
+  (0, import_react9.useEffect)(() => {
     if (deprecationLoggedRef.current) return;
     if (!hasEnabledMethods) return;
     const stale = [];
@@ -2778,14 +3127,14 @@ function SplitCardFormInner({
       `[FloPay] ${stale.join(" / ")} ${stale.length === 1 ? "is" : "are"} deprecated: the Apple Pay / Google Pay surface is now driven by \`gateways.stripe.enabledPaymentMethods\` on the session response. Remove the legacy prop(s) to silence this warning.`
     );
   }, [hasEnabledMethods, showApplePay, showGooglePay]);
-  const handleNameChange = (0, import_react8.useCallback)((value) => {
+  const handleNameChange = (0, import_react9.useCallback)((value) => {
     setFullName(value);
     onFullNameChange?.(value);
     const parts = value.trim().split(/\s+/);
     onFirstNameChange?.(parts[0] ?? "");
     onLastNameChange?.(parts.length > 1 ? parts.slice(1).join(" ") : "");
   }, [onFullNameChange, onFirstNameChange, onLastNameChange]);
-  const applyInlineSessionPatch = (0, import_react8.useCallback)(
+  const applyInlineSessionPatch = (0, import_react9.useCallback)(
     (patch, method) => {
       if (!checkout.applyInlineSessionPatch) {
         return Promise.resolve({ error: null, sessionId, nonce });
@@ -2807,7 +3156,7 @@ function SplitCardFormInner({
     },
     [checkout.applyInlineSessionPatch, nonce, onError, sessionId, updateError]
   );
-  const runBeforeButtonClick = (0, import_react8.useCallback)(async (method) => {
+  const runBeforeButtonClick = (0, import_react9.useCallback)(async (method) => {
     if (!onBeforeButtonClick) return { proceed: true };
     try {
       const result = await onBeforeButtonClick({
@@ -2844,7 +3193,7 @@ function SplitCardFormInner({
       return { proceed: false };
     }
   }, [applyInlineSessionPatch, checkout.inlineSessionDraft, onBeforeButtonClick, onError, sessionId, updateError]);
-  const processPaymentInternal = (0, import_react8.useCallback)(
+  const processPaymentInternal = (0, import_react9.useCallback)(
     async (tokenizedBody, overrides) => {
       if (processingRef.current) return;
       processingRef.current = true;
@@ -3055,7 +3404,7 @@ function SplitCardFormInner({
     },
     [baseUrl, sessionId, nonce, resolvedAccount, fullName, chv, flopay, paypalFlopay, onComplete, onError, updateError, emitDecline]
   );
-  const dispatchTokenizedBody = (0, import_react8.useCallback)(
+  const dispatchTokenizedBody = (0, import_react9.useCallback)(
     (tokenizedBody, overrides) => {
       if (onTokenizedBody) {
         onTokenizedBody(tokenizedBody);
@@ -3065,7 +3414,7 @@ function SplitCardFormInner({
     },
     [onTokenizedBody, processPaymentInternal]
   );
-  (0, import_react8.useImperativeHandle)(innerRef, () => ({
+  (0, import_react9.useImperativeHandle)(innerRef, () => ({
     async handleNextAction(secret) {
       if (!flopay) return;
       setIs3DSActive(true);
@@ -3092,8 +3441,8 @@ function SplitCardFormInner({
       }
     }
   }), [flopay, dispatchTokenizedBody, onError, updateError, emitDecline]);
-  const stripeResumeAttemptedRef = (0, import_react8.useRef)(false);
-  (0, import_react8.useEffect)(() => {
+  const stripeResumeAttemptedRef = (0, import_react9.useRef)(false);
+  (0, import_react9.useEffect)(() => {
     if (typeof window === "undefined" || stripeResumeAttemptedRef.current) return;
     const params = new URLSearchParams(window.location.search);
     const paymentIntentId = params.get("payment_intent");
@@ -3171,10 +3520,11 @@ function SplitCardFormInner({
       }, persistedOverrides);
     })();
   }, [sessionId, dispatchTokenizedBody, flopay, updateError, emitDecline]);
-  const handleSubmit = (0, import_react8.useCallback)(
+  const handleSubmit = (0, import_react9.useCallback)(
     async (e) => {
       e.preventDefault();
       if (!flopay || !elements || isSubmitting || processingRef.current) return;
+      if (vaultActive) return;
       if (layout !== "buttons") {
         onButtonClick?.("card");
       }
@@ -3185,10 +3535,21 @@ function SplitCardFormInner({
       try {
         if (avsConfig) {
           const country = selectedCountryRef.current;
-          if ((0, import_shared5.isAVSFieldVisible)(avsConfig.postal_code, country) && !zipCodeRef.current.trim()) {
+          const postal = computePostalCodeState(
+            country,
+            zipCodeRef.current,
+            (0, import_shared5.isAVSFieldVisible)(avsConfig.postal_code, country)
+          );
+          if (postal.empty) {
+            setZipTouched(true);
             updateError((0, import_shared5.getPostalCodeLabel)(country) + " is required");
             return;
           }
+          if (postal.malformed) {
+            setZipTouched(true);
+            updateError(malformedPostcodeMessage(country));
+            return;
+          }
           if ((0, import_shared5.isAVSFieldVisible)(avsConfig.address_line_1, country) && !addressLine1Ref.current.trim()) {
             updateError("Street address is required");
             return;
@@ -3202,11 +3563,13 @@ function SplitCardFormInner({
             return;
           }
         }
-        const submitResult = await flopay.submitElements();
-        if (submitResult.error) {
-          updateError(submitResult.error.message);
-          onError?.(submitResult.error);
-          return;
+        if (!vaultActive) {
+          const submitResult = await flopay.submitElements();
+          if (submitResult.error) {
+            updateError(submitResult.error.message);
+            onError?.(submitResult.error);
+            return;
+          }
         }
         const billingAddress = {};
         const cc = selectedCountryRef.current;
@@ -3231,75 +3594,77 @@ function SplitCardFormInner({
           ...fullName.trim() ? { name: fullName.trim() } : {},
           ...Object.keys(billingAddress).length > 0 ? { address: billingAddress } : {}
         };
-        const pmResult = await flopay.createPaymentMethod(billingDetails);
-        if (pmResult.error || !pmResult.paymentMethodId) {
-          updateError(pmResult.error?.message ?? "Failed to create payment method.");
-          return;
-        }
         if (!sessionId || !resolvedAccount.email) {
           throw new import_shared6.FloPayError("Missing sessionId or email", "validation_error");
         }
-        const intentHeaders = { "Content-Type": "application/json" };
-        if (nonce) intentHeaders["x-checkout-session-token"] = nonce;
-        const intentResponse = await fetch(`${baseUrl}/v1/checkouts/payments/intents`, {
-          method: "POST",
-          headers: intentHeaders,
-          body: JSON.stringify({
-            sessionId,
-            email: resolvedAccount.email,
-            paymentMethodType: pmResult.paymentMethodId,
-            isPaypal: false
-          })
-        });
-        if (!intentResponse.ok) {
-          const intentError = await buildFloPayApiErrorFromResponse(
-            intentResponse,
-            "Failed to create payment intent"
+        {
+          const pmResult = await flopay.createPaymentMethod(billingDetails);
+          if (pmResult.error || !pmResult.paymentMethodId) {
+            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 intentResponse = await fetch(`${baseUrl}/v1/checkouts/payments/intents`, {
+            method: "POST",
+            headers: intentHeaders,
+            body: JSON.stringify({
+              sessionId,
+              email: resolvedAccount.email,
+              paymentMethodType: pmResult.paymentMethodId,
+              isPaypal: false
+            })
+          });
+          if (!intentResponse.ok) {
+            const intentError = await buildFloPayApiErrorFromResponse(
+              intentResponse,
+              "Failed to create payment intent"
+            );
+            setOverlayStatus("error");
+            updateError(intentError.message);
+            onError?.(intentError);
+            emitDecline("card", intentError);
+            await new Promise((r) => setTimeout(r, PROCESSING_OVERLAY_ERROR_DELAY_MS));
+            return;
+          }
+          const intentJson = await intentResponse.json();
+          const intentClientSecret = intentJson.data?.id;
+          if (!intentClientSecret) throw new import_shared6.FloPayError("No client_secret in payment intent response", "api_error");
+          const confirmResult = await flopay.confirmCardPayment({
+            clientSecret: intentClientSecret,
+            paymentMethodId: pmResult.paymentMethodId
+          });
+          if (confirmResult.error) {
+            setOverlayStatus("error");
+            updateError(confirmResult.error.message);
+            onError?.(confirmResult.error);
+            emitDecline("card", confirmResult.error);
+            await new Promise((r) => setTimeout(r, PROCESSING_OVERLAY_ERROR_DELAY_MS));
+            return;
+          }
+          const rawProvider = typeof flopay.getRawProvider === "function" ? flopay.getRawProvider() : null;
+          const confirmedPaymentIntent = await retrievePaymentIntentFromProvider(
+            rawProvider,
+            intentClientSecret
           );
-          setOverlayStatus("error");
-          updateError(intentError.message);
-          onError?.(intentError);
-          emitDecline("card", intentError);
-          await new Promise((r) => setTimeout(r, PROCESSING_OVERLAY_ERROR_DELAY_MS));
-          return;
-        }
-        const intentJson = await intentResponse.json();
-        const intentClientSecret = intentJson.data?.id;
-        if (!intentClientSecret) throw new import_shared6.FloPayError("No client_secret in payment intent response", "api_error");
-        const confirmResult = await flopay.confirmCardPayment({
-          clientSecret: intentClientSecret,
-          paymentMethodId: pmResult.paymentMethodId
-        });
-        if (confirmResult.error) {
-          setOverlayStatus("error");
-          updateError(confirmResult.error.message);
-          onError?.(confirmResult.error);
-          emitDecline("card", confirmResult.error);
-          await new Promise((r) => setTimeout(r, PROCESSING_OVERLAY_ERROR_DELAY_MS));
-          return;
-        }
-        const rawProvider = typeof flopay.getRawProvider === "function" ? flopay.getRawProvider() : null;
-        const confirmedPaymentIntent = await retrievePaymentIntentFromProvider(
-          rawProvider,
-          intentClientSecret
-        );
-        const paymentIntentId = confirmResult.paymentIntentId ?? confirmedPaymentIntent?.id;
-        const paymentMethodId = confirmResult.paymentMethodId ?? resolvePaymentIntentPaymentMethodId(confirmedPaymentIntent) ?? pmResult.paymentMethodId;
-        if (!paymentIntentId) {
-          const error2 = new import_shared6.FloPayError("No payment intent returned after confirmation.", "api_error");
-          setOverlayStatus("error");
-          updateError(error2.message);
-          onError?.(error2);
-          await new Promise((r) => setTimeout(r, PROCESSING_OVERLAY_ERROR_DELAY_MS));
-          return;
+          const paymentIntentId = confirmResult.paymentIntentId ?? confirmedPaymentIntent?.id;
+          const paymentMethodId = confirmResult.paymentMethodId ?? resolvePaymentIntentPaymentMethodId(confirmedPaymentIntent) ?? pmResult.paymentMethodId;
+          if (!paymentIntentId) {
+            const error2 = new import_shared6.FloPayError("No payment intent returned after confirmation.", "api_error");
+            setOverlayStatus("error");
+            updateError(error2.message);
+            onError?.(error2);
+            await new Promise((r) => setTimeout(r, PROCESSING_OVERLAY_ERROR_DELAY_MS));
+            return;
+          }
+          handedOff = isSelfContained;
+          dispatchTokenizedBody({
+            id: paymentMethodId,
+            type: "card",
+            threeDSecureActionResultTokenId: paymentIntentId,
+            originalPaymentMethodId: pmResult.paymentMethodId
+          });
         }
-        handedOff = isSelfContained;
-        dispatchTokenizedBody({
-          id: paymentMethodId,
-          type: "card",
-          threeDSecureActionResultTokenId: paymentIntentId,
-          originalPaymentMethodId: pmResult.paymentMethodId
-        });
       } catch (err) {
         setOverlayStatus("error");
         updateError(err instanceof Error ? err.message : "An unexpected error occurred");
@@ -3311,11 +3676,11 @@ function SplitCardFormInner({
         }
       }
     },
-    [flopay, elements, isSubmitting, sessionId, nonce, resolvedAccount.email, baseUrl, isSelfContained, dispatchTokenizedBody, onButtonClick, onError, updateError, emitDecline, layout]
+    [flopay, elements, isSubmitting, sessionId, nonce, resolvedAccount.email, baseUrl, isSelfContained, vaultActive, dispatchTokenizedBody, onButtonClick, onError, updateError, emitDecline, layout]
   );
-  const isReady = flopay !== null && elements !== null;
+  const isReady = flopay !== null && (vaultActive || elements !== null);
   if (!isReady) {
-    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { "data-testid": "flopay-loading", "aria-busy": "true", children: "Loading payment form..." });
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { "data-testid": "flopay-loading", "aria-busy": "true", children: "Loading payment form..." });
   }
   const isButtons = layout === "buttons";
   const appearanceVars = appearance?.variables;
@@ -3323,6 +3688,10 @@ function SplitCardFormInner({
   const appearanceColorBg = appearanceVars?.colorBackground;
   const themedWrapperBg = appearanceColorBg && !SDK_DEFAULT_WHITES.has(appearanceColorBg) ? appearanceColorBg : void 0;
   const resolvedBorder = bStyles.cardInputBorder ?? (isButtons ? "#e5e7eb" : "#A4A4FF");
+  const resolvedDangerColor = appearanceVars?.colorDanger ?? "#dc2626";
+  const avsBorderColor = (fieldInvalid) => hasAttemptedSubmit && fieldInvalid ? resolvedDangerColor : resolvedBorder;
+  const showPostcodeError = (postalCodeState.malformed || postalCodeState.empty) && (zipTouched || hasAttemptedSubmit);
+  const zipBorderColor = showPostcodeError ? resolvedDangerColor : avsBorderColor(invalidAvsFields.zip);
   const cardBg = bStyles.cardFormContainer?.backgroundColor ?? themedWrapperBg ?? (isButtons ? "white" : "#EDEDFF");
   const cardInputBg = bStyles.cardInputBackground ?? appearanceVars?.colorBackground ?? "white";
   const hideBackButtonLabel = isEmptySlotContent(cardBackButtonContent);
@@ -3334,7 +3703,9 @@ function SplitCardFormInner({
   const resolvedInputColor = bStyles.cardInputColor ?? (typeof nameInputOverrides?.color === "string" ? nameInputOverrides.color : void 0) ?? appearanceVars?.colorText ?? "#262833";
   const resolvedPlaceholderColor = bStyles.cardInputPlaceholderColor ?? "#9ca3af";
   const resolvedBorderRadius = appearanceVars?.borderRadius ?? "8px";
+  const buttonBorderRadius = appearanceVars?.borderRadius ?? bStyles.cardButton?.borderRadius ?? resolvedBorderRadius;
   const resolvedPrimaryColor = appearanceVars?.colorPrimary ?? "#4A49FF";
+  const resolvedPrimaryHoverColor = appearanceVars?.colorPrimaryHover ?? darkenHex(resolvedPrimaryColor, 0.12);
   const resolvedTitleColor = appearanceVars?.colorText ?? "#262833";
   const sharedInputTypography = {
     fontSize: resolvedInputFontSize,
@@ -3368,14 +3739,73 @@ function SplitCardFormInner({
   const containerOverrides = bStyles.cardFormContainer ?? {};
   const containerPadding = containerOverrides.padding ?? (isButtons ? "0" : "1rem");
   const containerRadius = containerOverrides.borderRadius ?? resolvedBorderRadius;
-  const cardFormBlock = /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: {
+  const vaultCardFieldsNode = cardCapture && vaultMount ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    VaultCardFields,
+    {
+      capture: cardCapture,
+      html: vaultMount.html,
+      messageToken: vaultMount.messageToken,
+      expectedOrigin: vaultMount.expectedOrigin,
+      theme: vaultThemeColors,
+      onReady: () => {
+        setFormReady(true);
+        if (!avsConfig || typeof document === "undefined") return;
+        const focusFirstAvs = () => {
+          const block = document.querySelector('[data-testid="flopay-avs-fields"]');
+          const first = block?.querySelector(
+            "input:not([disabled]), select:not([disabled])"
+          );
+          first?.focus();
+        };
+        focusFirstAvs();
+        let tries = 0;
+        const timer = window.setInterval(() => {
+          tries += 1;
+          const active = document.activeElement;
+          const onIframe = !!active && active.tagName === "IFRAME" && active.id === "flopay_vault_form_iframe";
+          if (onIframe) {
+            focusFirstAvs();
+            window.clearInterval(timer);
+          } else if (tries >= 50) {
+            window.clearInterval(timer);
+          }
+        }, 100);
+      },
+      onError: (message) => updateError(message),
+      onValidation: (message) => {
+        updateError(message);
+        if (message) setOverlayStatus(null);
+      }
+    }
+  ) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    "div",
+    {
+      "data-testid": "flopay-vault-loading",
+      style: {
+        minHeight: 120,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        color: "#6b7280",
+        fontSize: 14
+      },
+      children: "Loading secure card form\u2026"
+    }
+  );
+  const cardFormBlock = /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: {
     backgroundColor: cardBg,
     borderRadius: containerRadius,
     ...containerOverrides,
     padding: containerPadding,
-    ...sharedInputPlaceholderVars
+    ...sharedInputPlaceholderVars,
+    // Flex column (BOTH layouts, so default and buttons>card never diverge) so
+    // AVS can be ordered above the vault widget — its submit lives inside the
+    // iframe, so AVS can't sit between fields and button; it goes above the
+    // card form instead of after the button.
+    display: "flex",
+    flexDirection: "column"
   }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("style", { children: `
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("style", { children: `
         .flopay-shared-input::placeholder {
           color: var(--flopay-input-placeholder-color);
           opacity: 1;
@@ -3384,12 +3814,14 @@ function SplitCardFormInner({
           font-weight: var(--flopay-input-font-weight);
         }
       ` }),
-    isButtons && showCardForm && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: {
+    isButtons && showCardForm && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: {
       display: "flex",
       alignItems: "center",
-      padding: "0.75rem 0 0.625rem"
+      padding: "0.75rem 0 0.625rem",
+      // Keep the header on top when AVS is ordered above the card on vault.
+      order: vaultActive ? -2 : 0
     }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
         "button",
         {
           type: "button",
@@ -3411,7 +3843,7 @@ function SplitCardFormInner({
           },
           "aria-label": "Back to payment methods",
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { style: {
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { style: {
               display: "inline-flex",
               alignItems: "center",
               justifyContent: "center",
@@ -3421,12 +3853,12 @@ function SplitCardFormInner({
               backgroundColor: "#f3f4f6",
               transition: "background-color 0.15s",
               ...bStyles.backButtonIcon
-            }, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { d: "M15 18l-6-6 6-6" }) }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(BackButtonContentSlot, { content: cardBackButtonContent })
+            }, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: "M15 18l-6-6 6-6" }) }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(BackButtonContentSlot, { content: cardBackButtonContent })
           ]
         }
       ),
-      hideTitle ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { flex: 1 } }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: {
+      hideTitle ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: { flex: 1 } }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: {
         flex: 1,
         textAlign: "center",
         fontWeight: 600,
@@ -3434,58 +3866,65 @@ function SplitCardFormInner({
         color: "#262833",
         paddingRight: 80,
         ...bStyles.title
-      }, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(TitleContentSlot, { content: cardTitleContent }) })
+      }, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(TitleContentSlot, { content: cardTitleContent }) })
     ] }),
-    !isButtons && !hideTitle && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: {
+    !isButtons && !hideTitle && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: {
       textAlign: "center",
       fontWeight: 600,
       fontSize: "1.1rem",
       padding: "0.5rem 0",
       color: resolvedTitleColor,
+      // Keep the title at the very top on the vault path. The card-form slot
+      // (-2) and AVS block (-1) are ordered below it but above the card form.
+      order: vaultActive ? -3 : 0,
       ...bStyles.title
-    }, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(TitleContentSlot, { content: cardTitleContent }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: {
-      backgroundColor: cardInputBg,
-      border: `1px solid ${resolvedBorder}`,
-      borderTopLeftRadius: "8px",
-      borderTopRightRadius: "8px",
-      padding: "10px"
-    }, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(CardNumberElement, { onReady: () => setFormReady(true), options: stripeElementStyle }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { display: "flex" }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: {
-        flex: 1,
-        backgroundColor: cardInputBg,
-        // Longhand only — mixing `border` shorthand with per-side
-        // overrides triggers React's "shorthand vs longhand" warning
-        // because render order isn't deterministic.
-        borderTop: "none",
-        borderRight: "none",
-        borderBottom: `1px solid ${resolvedBorder}`,
-        borderLeft: `1px solid ${resolvedBorder}`,
-        borderBottomLeftRadius: "8px",
-        padding: "10px"
-      }, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(CardExpiryElement, { options: stripeElementStyle }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: {
-        flex: 1,
+    }, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(TitleContentSlot, { content: cardTitleContent }) }),
+    !vaultActive && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: {
         backgroundColor: cardInputBg,
-        borderTop: "none",
-        borderRight: `1px solid ${resolvedBorder}`,
-        borderBottom: `1px solid ${resolvedBorder}`,
-        borderLeft: `1px solid ${resolvedBorder}`,
-        borderBottomRightRadius: "8px",
+        border: `1px solid ${resolvedBorder}`,
+        borderTopLeftRadius: resolvedBorderRadius,
+        borderTopRightRadius: resolvedBorderRadius,
         padding: "10px"
-      }, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(CardCvcElement, { options: stripeElementStyle }) })
+      }, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CardNumberElement, { onReady: () => setFormReady(true), options: stripeElementStyle }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: { display: "flex" }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: {
+          flex: 1,
+          backgroundColor: cardInputBg,
+          // Longhand only — mixing `border` shorthand with per-side
+          // overrides triggers React's "shorthand vs longhand" warning
+          // because render order isn't deterministic.
+          borderTop: "none",
+          borderRight: "none",
+          borderBottom: `1px solid ${resolvedBorder}`,
+          borderLeft: `1px solid ${resolvedBorder}`,
+          borderBottomLeftRadius: resolvedBorderRadius,
+          padding: "10px"
+        }, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CardExpiryElement, { options: stripeElementStyle }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: {
+          flex: 1,
+          backgroundColor: cardInputBg,
+          borderTop: "none",
+          borderRight: `1px solid ${resolvedBorder}`,
+          borderBottom: `1px solid ${resolvedBorder}`,
+          borderLeft: `1px solid ${resolvedBorder}`,
+          borderBottomRightRadius: resolvedBorderRadius,
+          padding: "10px"
+        }, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CardCvcElement, { options: stripeElementStyle }) })
+      ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: {
+    !vaultActive && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: {
       backgroundColor: cardInputBg,
       border: `1px solid ${resolvedBorder}`,
-      borderRadius: "8px",
+      borderRadius: resolvedBorderRadius,
       marginTop: "0.5rem",
       padding: "10px"
-    }, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    }, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
       "input",
       {
         className: "flopay-shared-input",
+        id: "flopay-cc-name",
+        name: "cc-name",
         placeholder: "Full Name on Card",
         autoComplete: "cc-name",
         value: fullName,
@@ -3502,32 +3941,32 @@ function SplitCardFormInner({
         }
       }
     ) }),
-    avsConfig && (() => {
+    avsConfig && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: { order: vaultActive ? -1 : 0 }, "data-testid": "flopay-avs-fields", children: (() => {
       const cc = selectedCountry;
-      const inputWrapStyle = (extraStyle) => ({
+      const inputWrapStyle = (invalid = false) => ({
         backgroundColor: cardInputBg,
-        border: `1px solid ${resolvedBorder}`,
-        borderRadius: "8px",
+        border: `1px solid ${avsBorderColor(invalid)}`,
+        borderRadius: resolvedBorderRadius,
         marginTop: "0.5rem",
-        padding: "10px",
-        ...isButtons && extraStyle ? extraStyle : {}
+        padding: "10px"
       });
       const inputFieldStyle = () => ({
         width: "100%",
         border: "none",
         outline: "none",
         background: "transparent",
-        ...sharedInputTypography,
-        ...isButtons && bStyles.nameInput ? bStyles.nameInput : {}
+        ...sharedInputTypography
       });
       const stateOpts = (0, import_shared5.getStateOptions)(cc);
-      return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
-        (0, import_shared5.isAVSFieldVisible)(avsConfig.address_line_1, cc) && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: inputWrapStyle(bStyles.addressLine1Input), children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
+        (0, import_shared5.isAVSFieldVisible)(avsConfig.address_line_1, cc) && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: inputWrapStyle(invalidAvsFields.line1), children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
           "input",
           {
             className: "flopay-shared-input",
+            id: "flopay-billing-address-line1",
+            name: "billing-address-line1",
             placeholder: "Street Address (e.g. 123 Main St)",
-            autoComplete: "address-line1",
+            autoComplete: "billing address-line1",
             value: addressLine1,
             onChange: (e) => {
               addressLine1Ref.current = e.target.value;
@@ -3539,12 +3978,14 @@ function SplitCardFormInner({
             style: inputFieldStyle()
           }
         ) }),
-        (0, import_shared5.isAVSFieldVisible)(avsConfig.address_line_2, cc) && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: inputWrapStyle(bStyles.addressLine2Input), children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        (0, import_shared5.isAVSFieldVisible)(avsConfig.address_line_2, cc) && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: inputWrapStyle(), children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
           "input",
           {
             className: "flopay-shared-input",
+            id: "flopay-billing-address-line2",
+            name: "billing-address-line2",
             placeholder: "Apt, Suite, Unit (optional)",
-            autoComplete: "address-line2",
+            autoComplete: "billing address-line2",
             value: addressLine2,
             onChange: (e) => {
               addressLine2Ref.current = e.target.value;
@@ -3555,29 +3996,30 @@ function SplitCardFormInner({
             style: inputFieldStyle()
           }
         ) }),
-        ((0, import_shared5.isAVSFieldVisible)(avsConfig.city, cc) || (0, import_shared5.isAVSFieldVisible)(avsConfig.state, cc)) && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: {
+        ((0, import_shared5.isAVSFieldVisible)(avsConfig.city, cc) || (0, import_shared5.isAVSFieldVisible)(avsConfig.state, cc)) && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: {
           display: "flex",
           gap: "0",
           marginTop: "0.5rem"
         }, children: [
-          (0, import_shared5.isAVSFieldVisible)(avsConfig.city, cc) && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: {
+          (0, import_shared5.isAVSFieldVisible)(avsConfig.city, cc) && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: {
             flex: 1,
             backgroundColor: cardInputBg,
-            borderTop: `1px solid ${resolvedBorder}`,
-            borderRight: `1px solid ${resolvedBorder}`,
-            borderBottom: `1px solid ${resolvedBorder}`,
-            borderLeft: `1px solid ${resolvedBorder}`,
+            borderTop: `1px solid ${avsBorderColor(invalidAvsFields.city)}`,
+            borderRight: `1px solid ${avsBorderColor(invalidAvsFields.city)}`,
+            borderBottom: `1px solid ${avsBorderColor(invalidAvsFields.city)}`,
+            borderLeft: `1px solid ${avsBorderColor(invalidAvsFields.city)}`,
             padding: "10px",
-            borderTopLeftRadius: "8px",
-            borderBottomLeftRadius: "8px",
-            ...(0, import_shared5.isAVSFieldVisible)(avsConfig.state, cc) ? { borderRight: "none", borderTopRightRadius: 0, borderBottomRightRadius: 0 } : { borderRadius: "8px" },
-            ...isButtons && bStyles.cityInput ? bStyles.cityInput : {}
-          }, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+            borderTopLeftRadius: resolvedBorderRadius,
+            borderBottomLeftRadius: resolvedBorderRadius,
+            ...(0, import_shared5.isAVSFieldVisible)(avsConfig.state, cc) ? { borderRight: "none", borderTopRightRadius: 0, borderBottomRightRadius: 0 } : { borderRadius: resolvedBorderRadius }
+          }, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
             "input",
             {
               className: "flopay-shared-input",
+              id: "flopay-billing-city",
+              name: "billing-city",
               placeholder: "City",
-              autoComplete: "address-level2",
+              autoComplete: "billing address-level2",
               value: city,
               onChange: (e) => {
                 cityRef.current = e.target.value;
@@ -3589,39 +4031,42 @@ function SplitCardFormInner({
               style: inputFieldStyle()
             }
           ) }),
-          (0, import_shared5.isAVSFieldVisible)(avsConfig.state, cc) && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: {
+          (0, import_shared5.isAVSFieldVisible)(avsConfig.state, cc) && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: {
             flex: 1,
             backgroundColor: cardInputBg,
-            border: `1px solid ${resolvedBorder}`,
+            border: `1px solid ${avsBorderColor(invalidAvsFields.state)}`,
             padding: "10px",
-            borderTopRightRadius: "8px",
-            borderBottomRightRadius: "8px",
-            ...(0, import_shared5.isAVSFieldVisible)(avsConfig.city, cc) ? { borderTopLeftRadius: 0, borderBottomLeftRadius: 0 } : { borderRadius: "8px" },
-            ...isButtons && bStyles.stateInput ? bStyles.stateInput : {}
-          }, children: stateOpts ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+            borderTopRightRadius: resolvedBorderRadius,
+            borderBottomRightRadius: resolvedBorderRadius,
+            ...(0, import_shared5.isAVSFieldVisible)(avsConfig.city, cc) ? { borderTopLeftRadius: 0, borderBottomLeftRadius: 0 } : { borderRadius: resolvedBorderRadius }
+          }, children: stateOpts ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
             "select",
             {
+              id: "flopay-billing-state",
+              name: "billing-state",
               value: stateValue,
               onChange: (e) => {
                 stateRef.current = e.target.value;
                 setStateValue(e.target.value);
               },
               disabled: isSubmitting,
-              autoComplete: "address-level1",
+              autoComplete: "billing address-level1",
               required: true,
               "data-testid": "flopay-state",
               style: { ...inputFieldStyle(), cursor: "pointer" },
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("option", { value: "", children: (0, import_shared5.getStateLabel)(cc) }),
-                stateOpts.map((s) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("option", { value: s.code, children: s.name }, s.code))
+                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("option", { value: "", children: (0, import_shared5.getStateLabel)(cc) }),
+                stateOpts.map((s) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("option", { value: s.code, children: s.name }, s.code))
               ]
             }
-          ) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          ) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
             "input",
             {
               className: "flopay-shared-input",
+              id: "flopay-billing-state",
+              name: "billing-state",
               placeholder: (0, import_shared5.getStateLabel)(cc),
-              autoComplete: "address-level1",
+              autoComplete: "billing address-level1",
               value: stateValue,
               onChange: (e) => {
                 stateRef.current = e.target.value;
@@ -3634,13 +4079,13 @@ function SplitCardFormInner({
             }
           ) })
         ] }),
-        ((0, import_shared5.isAVSFieldVisible)(avsConfig.country, cc) || (0, import_shared5.isAVSFieldVisible)(avsConfig.postal_code, cc)) && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: {
+        ((0, import_shared5.isAVSFieldVisible)(avsConfig.country, cc) || (0, import_shared5.isAVSFieldVisible)(avsConfig.postal_code, cc)) && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: {
           display: "flex",
           flexDirection: avsLayoutProp === "column" ? "column" : "row",
           gap: avsLayoutProp === "column" ? "0.5rem" : "0",
           marginTop: "0.5rem"
         }, children: [
-          (0, import_shared5.isAVSFieldVisible)(avsConfig.country, cc) && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: {
+          (0, import_shared5.isAVSFieldVisible)(avsConfig.country, cc) && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: {
             flex: avsLayoutProp === "row" ? 1 : void 0,
             backgroundColor: cardInputBg,
             borderTop: `1px solid ${resolvedBorder}`,
@@ -3648,11 +4093,12 @@ function SplitCardFormInner({
             borderBottom: `1px solid ${resolvedBorder}`,
             borderLeft: `1px solid ${resolvedBorder}`,
             padding: "10px",
-            ...avsLayoutProp === "row" && (0, import_shared5.isAVSFieldVisible)(avsConfig.postal_code, cc) ? { borderRadius: "0", borderTopLeftRadius: "8px", borderBottomLeftRadius: "8px", borderRight: "none" } : { borderRadius: "8px" },
-            ...isButtons && bStyles.countrySelect ? bStyles.countrySelect : {}
-          }, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+            ...avsLayoutProp === "row" && (0, import_shared5.isAVSFieldVisible)(avsConfig.postal_code, cc) ? { borderRadius: "0", borderTopLeftRadius: resolvedBorderRadius, borderBottomLeftRadius: resolvedBorderRadius, borderRight: "none" } : { borderRadius: resolvedBorderRadius }
+          }, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
             "select",
             {
+              id: "flopay-billing-country",
+              name: "billing-country",
               value: selectedCountry,
               onChange: (e) => {
                 selectedCountryRef.current = e.target.value;
@@ -3662,45 +4108,66 @@ function SplitCardFormInner({
                 setStateValue("");
               },
               disabled: isSubmitting,
-              autoComplete: "country",
+              autoComplete: "billing country",
               "data-testid": "flopay-country",
               style: { ...inputFieldStyle(), cursor: "pointer" },
-              children: import_shared5.COUNTRY_OPTIONS.map((c) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("option", { value: c.code, children: [
+              children: import_shared5.COUNTRY_OPTIONS.map((c) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("option", { value: c.code, children: [
                 c.flag,
                 " ",
                 c.name
               ] }, c.code))
             }
           ) }),
-          (0, import_shared5.isAVSFieldVisible)(avsConfig.postal_code, cc) && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: {
+          (0, import_shared5.isAVSFieldVisible)(avsConfig.postal_code, cc) && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: {
             flex: avsLayoutProp === "row" ? 1 : void 0,
             backgroundColor: cardInputBg,
-            border: `1px solid ${resolvedBorder}`,
+            border: `1px solid ${zipBorderColor}`,
             padding: "10px",
-            ...avsLayoutProp === "row" && (0, import_shared5.isAVSFieldVisible)(avsConfig.country, cc) ? { borderRadius: "0", borderTopRightRadius: "8px", borderBottomRightRadius: "8px" } : { borderRadius: "8px" },
-            ...isButtons && bStyles.zipInput ? bStyles.zipInput : {}
-          }, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+            ...avsLayoutProp === "row" && (0, import_shared5.isAVSFieldVisible)(avsConfig.country, cc) ? { borderRadius: "0", borderTopRightRadius: resolvedBorderRadius, borderBottomRightRadius: resolvedBorderRadius } : { borderRadius: resolvedBorderRadius }
+          }, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
             "input",
             {
               className: "flopay-shared-input",
+              id: "flopay-billing-postal-code",
+              name: "billing-postal-code",
               placeholder: (0, import_shared5.getPostalCodeLabel)(selectedCountry),
-              autoComplete: "postal-code",
+              autoComplete: "billing postal-code",
               value: zipCode,
               onChange: (e) => {
                 zipCodeRef.current = e.target.value;
                 setZipCode(e.target.value);
                 onZipChange?.(e.target.value);
               },
+              onBlur: () => setZipTouched(true),
               disabled: isSubmitting,
-              required: true,
+              required: postalCodeState.required,
+              "aria-invalid": showPostcodeError || void 0,
+              "aria-describedby": showPostcodeError ? "flopay-billing-postal-code-error" : void 0,
               "data-testid": "flopay-zip",
               style: inputFieldStyle()
             }
           ) })
-        ] })
+        ] }),
+        showPostcodeError && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          "div",
+          {
+            id: "flopay-billing-postal-code-error",
+            role: "alert",
+            "data-testid": "flopay-zip-error",
+            style: {
+              marginTop: "0.375rem",
+              color: resolvedDangerColor,
+              ...sharedInputTypography,
+              fontSize: "0.75rem"
+            },
+            children: postalCodeState.empty ? `${(0, import_shared5.getPostalCodeLabel)(cc)} is required` : malformedPostcodeMessage(cc)
+          }
+        )
       ] });
-    })(),
-    displayError && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { role: "alert", "data-testid": "flopay-error", style: {
+    })() }),
+    vaultActive && cardPreFormSlot && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: { order: -2, width: "100%" }, children: cardPreFormSlot }),
+    vaultActive && vaultCardFieldsNode,
+    displayError && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { role: "alert", "data-testid": "flopay-error", style: {
       margin: "0.75rem 0",
       padding: "0.625rem 0.875rem",
       background: "#FEF2F2",
@@ -3714,15 +4181,21 @@ function SplitCardFormInner({
       gap: "0.5rem",
       ...bStyles.errorBanner ? bStyles.errorBanner : {}
     }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", style: { flexShrink: 0 }, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { d: "M12 9v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z", stroke: "#DC2626", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", style: { flexShrink: 0 }, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: "M12 9v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z", stroke: "#DC2626", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }),
       displayError
     ] }),
-    children ?? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    !vaultActive && (children ?? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
       "button",
       {
         type: "submit",
         disabled: !formReady || isSubmitting,
         "data-testid": "flopay-submit",
+        onMouseEnter: (e) => {
+          if (formReady && !isSubmitting) e.currentTarget.style.backgroundColor = resolvedPrimaryHoverColor;
+        },
+        onMouseLeave: (e) => {
+          e.currentTarget.style.backgroundColor = bStyles.submitButton?.backgroundColor ?? resolvedPrimaryColor;
+        },
         style: {
           width: "100%",
           padding: "0.875rem",
@@ -3735,11 +4208,12 @@ function SplitCardFormInner({
           fontWeight: 600,
           cursor: !formReady || isSubmitting ? "not-allowed" : "pointer",
           opacity: !formReady || isSubmitting ? 0.5 : 1,
+          transition: "background-color 0.15s",
           ...bStyles.submitButton
         },
         children: isSubmitting ? "PROCESSING..." : submitLabel
       }
-    )
+    ))
   ] });
   const gateDebugStyle = {
     margin: 0,
@@ -3755,9 +4229,9 @@ function SplitCardFormInner({
   const renderDirectPaypalGateDebug = (testId) => {
     if (!debug) return null;
     if (!showPayPal || !directPaypalConfigured) {
-      return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("pre", { "data-testid": testId, style: gateDebugStyle, children: "FloPay/DirectPayPal-debug - not enabled" });
+      return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("pre", { "data-testid": testId, style: gateDebugStyle, children: "FloPay/DirectPayPal-debug - not enabled" });
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("pre", { "data-testid": testId, style: gateDebugStyle, children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("pre", { "data-testid": testId, style: gateDebugStyle, children: [
       "FloPay/DirectPayPal-debug (parent gate)",
       `  showPayPal=${showPayPal}`,
       `  directPaypalConfigured=${directPaypalConfigured}`,
@@ -3770,9 +4244,9 @@ function SplitCardFormInner({
   const renderStripeGateDebug = (testId) => {
     if (!debug) return null;
     if (!showStripe || !stripeInstance) {
-      return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("pre", { "data-testid": testId, style: gateDebugStyle, children: "FloPay/Stripe-debug - not enabled" });
+      return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("pre", { "data-testid": testId, style: gateDebugStyle, children: "FloPay/Stripe-debug - not enabled" });
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("pre", { "data-testid": testId, style: gateDebugStyle, children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("pre", { "data-testid": testId, style: gateDebugStyle, children: [
       "FloPay/Stripe-debug (parent gate)",
       `  showStripe=${showStripe}`,
       `  currency=${currency}`,
@@ -3801,11 +4275,11 @@ function SplitCardFormInner({
     const cardButtonSizing = cardButtonContent === void 0 ? { boxSizing: "border-box", height: DEFAULT_BUTTONS_LAYOUT_BUTTON_HEIGHT, padding: "0 1rem" } : { padding: "0.9rem 1rem" };
     const buttonsAnim = viewState === "expanding" || viewState === "apm-expanding" ? `flopay-buttons-exit ${TRANSITION_MS}ms cubic-bezier(0.4, 0, 0.2, 1) both` : viewState === "collapsing" || viewState === "apm-collapsing" ? `flopay-buttons-enter ${TRANSITION_MS}ms cubic-bezier(0, 0, 0.2, 1) both` : void 0;
     const cardAnim = viewState === "expanding" ? `flopay-card-enter ${TRANSITION_MS}ms cubic-bezier(0, 0, 0.2, 1) both` : viewState === "collapsing" ? `flopay-card-exit ${TRANSITION_MS}ms cubic-bezier(0.4, 0, 0.2, 1) both` : void 0;
-    return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("form", { onSubmit: handleSubmit, className, style: { position: "relative" }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(FloPayKeyframes, {}),
-      overlayStatus && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ProcessingOverlay, { status: overlayStatus, errorMessage: displayError }),
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { display: "grid" }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("form", { onSubmit: handleSubmit, className, style: { position: "relative" }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(FloPayKeyframes, {}),
+      overlayStatus && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ProcessingOverlay, { status: overlayStatus, errorMessage: displayError }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: { display: "grid" }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
           "div",
           {
             "data-testid": "flopay-buttons-panel",
@@ -3822,8 +4296,8 @@ function SplitCardFormInner({
             children: [
               renderDirectPaypalGateDebug("flopay-direct-paypal-gate-debug"),
               renderStripeGateDebug("flopay-stripe-gate-debug"),
-              shouldRenderDirectPayPal && directPaypal && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
-                paypalDirectRetry && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+              shouldRenderDirectPayPal && directPaypal && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
+                paypalDirectRetry && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                   "div",
                   {
                     "data-testid": "flopay-paypal-direct-retry-notice",
@@ -3839,7 +4313,7 @@ function SplitCardFormInner({
                     children: "Please confirm your PayPal payment to complete checkout."
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                   DirectPayPalButton,
                   {
                     sessionId,
@@ -3865,7 +4339,7 @@ function SplitCardFormInner({
                   paypalDirectRetry?.orderId ?? "fresh"
                 )
               ] }),
-              shouldRenderStripePayPal && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_stripe_js.Elements, { stripe: paypalStripeInstance, options: paypalOptions, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+              shouldRenderStripePayPal && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_stripe_js.Elements, { stripe: paypalStripeInstance, options: paypalOptions, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                 PayPalButtonInner,
                 {
                   sessionId,
@@ -3879,10 +4353,10 @@ function SplitCardFormInner({
                   onDecline,
                   runBeforeButtonClick,
                   onLoadStateChange: setPaypalLoadState,
-                  placeholderBorderRadius: bStyles.cardButton?.borderRadius ?? resolvedBorderRadius
+                  placeholderBorderRadius: buttonBorderRadius
                 }
               ) }),
-              shouldRenderWallets ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_stripe_js.Elements, { stripe: stripeInstance, options: walletOptions, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+              shouldRenderWallets ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_stripe_js.Elements, { stripe: stripeInstance, options: walletOptions, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                 WalletButtonInner,
                 {
                   sessionId,
@@ -3896,10 +4370,10 @@ function SplitCardFormInner({
                   onDecline,
                   runBeforeButtonClick,
                   onLoadStateChange: setWalletLoadState,
-                  placeholderBorderRadius: bStyles.cardButton?.borderRadius ?? resolvedBorderRadius
+                  placeholderBorderRadius: buttonBorderRadius
                 }
-              ) }) : shouldShowWallets ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { height: DEFAULT_BUTTONS_LAYOUT_BUTTON_HEIGHT, borderRadius: bStyles.cardButton?.borderRadius ?? resolvedBorderRadius, background: "#e5e7eb", animation: "flopay-pulse 1.5s ease-in-out infinite" } }) : null,
-              shouldRenderPaymentElement && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+              ) }) : shouldShowWallets ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: { height: DEFAULT_BUTTONS_LAYOUT_BUTTON_HEIGHT, borderRadius: buttonBorderRadius, background: "#e5e7eb", animation: "flopay-pulse 1.5s ease-in-out infinite" } }) : null,
+              shouldRenderPaymentElement && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                 StripePaymentElementInner,
                 {
                   sessionId,
@@ -3927,11 +4401,11 @@ function SplitCardFormInner({
                     backgroundColor: bStyles.cardButton?.backgroundColor,
                     borderColor: bStyles.cardInputBorder,
                     textColor: bStyles.cardButton?.color,
-                    borderRadius: bStyles.cardButton?.borderRadius
+                    borderRadius: buttonBorderRadius
                   }
                 }
               ),
-              showStripe && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+              showStripe && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                 "button",
                 {
                   type: "button",
@@ -3959,7 +4433,8 @@ function SplitCardFormInner({
                       themeBundle,
                       resolvedPrimaryColor,
                       resolvedBorderRadius,
-                      submitButtonStyle: bStyles.submitButton
+                      submitButtonStyle: bStyles.submitButton,
+                      explicitPrimaryColor: appearanceVars?.colorPrimary
                     }),
                     fontSize: bStyles.cardButtonFontSize ?? "0.95rem",
                     fontWeight: 600,
@@ -3968,20 +4443,28 @@ function SplitCardFormInner({
                     alignItems: "center",
                     justifyContent: "center",
                     gap: "0.625rem",
-                    transition: "border-color 0.2s, box-shadow 0.2s, transform 0.1s",
+                    transition: "background-color 0.15s, border-color 0.2s, box-shadow 0.2s, transform 0.1s",
                     position: "relative",
                     opacity: isSubmitting ? 0.6 : 1
                   },
+                  onMouseEnter: (e) => {
+                    if (!isSubmitting && (themeBundle || appearanceVars?.colorPrimary)) {
+                      e.currentTarget.style.backgroundColor = resolvedPrimaryHoverColor;
+                    }
+                  },
+                  onMouseLeave: (e) => {
+                    if (themeBundle || appearanceVars?.colorPrimary) e.currentTarget.style.backgroundColor = resolvedPrimaryColor;
+                  },
                   onMouseDown: (e) => {
                     e.currentTarget.style.transform = "scale(0.985)";
                   },
                   onMouseUp: (e) => {
                     e.currentTarget.style.transform = "scale(1)";
                   },
-                  children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(CardButtonContentSlot, { content: cardButtonContent })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CardButtonContentSlot, { content: cardButtonContent })
                 }
               ),
-              displayError && viewState === "buttons" && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { role: "alert", "data-testid": "flopay-error", style: {
+              displayError && viewState === "buttons" && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { role: "alert", "data-testid": "flopay-error", style: {
                 margin: "0.25rem 0",
                 padding: "0.625rem 0.875rem",
                 background: "#FEF2F2",
@@ -3995,33 +4478,33 @@ function SplitCardFormInner({
                 gap: "0.5rem",
                 ...bStyles.errorBanner ? bStyles.errorBanner : {}
               }, children: [
-                /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", style: { flexShrink: 0 }, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { d: "M12 9v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z", stroke: "#DC2626", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }),
+                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", style: { flexShrink: 0 }, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: "M12 9v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z", stroke: "#DC2626", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }),
                 displayError
               ] })
             ]
           }
         ),
-        showStripe && isCardView && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: {
+        showStripe && isCardView && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: {
           gridArea: "1 / 1",
           ...cardAnim ? { animation: cardAnim } : {},
           ...viewState === "collapsing" ? { pointerEvents: "none" } : {}
         }, children: cardFormBlock }),
-        showStripe && isApmView && expandedApmMethod && apmInlineOptions && stripeInstance && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: {
+        showStripe && isApmView && expandedApmMethod && apmInlineOptions && stripeInstance && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: {
           gridArea: "1 / 1",
           ...apmAnim ? { animation: apmAnim } : {},
           ...viewState === "apm-collapsing" ? { pointerEvents: "none" } : {}
-        }, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: {
+        }, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: {
           backgroundColor: cardBg,
           borderRadius: containerRadius,
           ...containerOverrides,
           padding: containerPadding
         }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: {
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: {
             display: "flex",
             alignItems: "center",
             padding: "0.75rem 0 0.625rem"
           }, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
               "button",
               {
                 type: "button",
@@ -4044,7 +4527,7 @@ function SplitCardFormInner({
                 },
                 "aria-label": "Back to payment methods",
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { style: {
+                  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { style: {
                     display: "inline-flex",
                     alignItems: "center",
                     justifyContent: "center",
@@ -4054,12 +4537,12 @@ function SplitCardFormInner({
                     backgroundColor: "#f3f4f6",
                     transition: "background-color 0.15s",
                     ...bStyles.backButtonIcon
-                  }, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { d: "M15 18l-6-6 6-6" }) }) }),
-                  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(BackButtonContentSlot, { content: cardBackButtonContent })
+                  }, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: "M15 18l-6-6 6-6" }) }) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(BackButtonContentSlot, { content: cardBackButtonContent })
                 ]
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: {
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: {
               flex: 1,
               textAlign: "center",
               fontWeight: 600,
@@ -4069,12 +4552,12 @@ function SplitCardFormInner({
               ...bStyles.title
             }, children: `Pay with ${(0, import_shared5.getStripeMethodDisplayName)(expandedApmMethod)}` })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
             import_react_stripe_js.Elements,
             {
               stripe: stripeInstance,
               options: apmInlineOptions,
-              children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+              children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                 StripeMethodInlineForm,
                 {
                   method: expandedApmMethod,
@@ -4092,7 +4575,8 @@ function SplitCardFormInner({
                   isProcessing: isSubmitting,
                   submitButtonColor: resolvedPrimaryColor,
                   submitButtonBorderRadius: resolvedBorderRadius,
-                  submitButtonStyle: bStyles.submitButton
+                  submitButtonStyle: bStyles.submitButton,
+                  errorText: displayError
                 }
               )
             },
@@ -4103,24 +4587,24 @@ function SplitCardFormInner({
     ] });
   }
   if (isApmView && expandedApmMethod && apmInlineOptions && stripeInstance && showStripe) {
-    return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("form", { onSubmit: handleSubmit, className, style: { position: "relative" }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(FloPayKeyframes, {}),
-      overlayStatus && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ProcessingOverlay, { status: overlayStatus, errorMessage: displayError }),
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: {
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("form", { onSubmit: handleSubmit, className, style: { position: "relative" }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(FloPayKeyframes, {}),
+      overlayStatus && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ProcessingOverlay, { status: overlayStatus, errorMessage: displayError }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: {
         ...apmAnim ? { animation: apmAnim } : {},
         ...viewState === "apm-collapsing" ? { pointerEvents: "none" } : {}
-      }, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: {
+      }, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: {
         backgroundColor: cardBg,
         borderRadius: containerRadius,
         ...containerOverrides,
         padding: containerPadding
       }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: {
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: {
           display: "flex",
           alignItems: "center",
           padding: "0.75rem 0 0.625rem"
         }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
             "button",
             {
               type: "button",
@@ -4143,7 +4627,7 @@ function SplitCardFormInner({
               },
               "aria-label": "Back to payment methods",
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { style: {
+                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { style: {
                   display: "inline-flex",
                   alignItems: "center",
                   justifyContent: "center",
@@ -4153,12 +4637,12 @@ function SplitCardFormInner({
                   backgroundColor: "#f3f4f6",
                   transition: "background-color 0.15s",
                   ...bStyles.backButtonIcon
-                }, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { d: "M15 18l-6-6 6-6" }) }) }),
-                /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(BackButtonContentSlot, { content: cardBackButtonContent })
+                }, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: "M15 18l-6-6 6-6" }) }) }),
+                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(BackButtonContentSlot, { content: cardBackButtonContent })
               ]
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: {
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: {
             flex: 1,
             textAlign: "center",
             fontWeight: 600,
@@ -4168,12 +4652,12 @@ function SplitCardFormInner({
             ...bStyles.title
           }, children: `Pay with ${(0, import_shared5.getStripeMethodDisplayName)(expandedApmMethod)}` })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
           import_react_stripe_js.Elements,
           {
             stripe: stripeInstance,
             options: apmInlineOptions,
-            children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
               StripeMethodInlineForm,
               {
                 method: expandedApmMethod,
@@ -4191,7 +4675,8 @@ function SplitCardFormInner({
                 isProcessing: isSubmitting,
                 submitButtonColor: resolvedPrimaryColor,
                 submitButtonBorderRadius: resolvedBorderRadius,
-                submitButtonStyle: bStyles.submitButton
+                submitButtonStyle: bStyles.submitButton,
+                errorText: displayError
               }
             )
           },
@@ -4200,14 +4685,14 @@ function SplitCardFormInner({
       ] }) })
     ] });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("form", { onSubmit: handleSubmit, className, style: { position: "relative" }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(FloPayKeyframes, {}),
-    overlayStatus && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ProcessingOverlay, { status: overlayStatus, errorMessage: displayError }),
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: "0.5rem" }, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("form", { onSubmit: handleSubmit, className, style: { position: "relative" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(FloPayKeyframes, {}),
+    overlayStatus && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ProcessingOverlay, { status: overlayStatus, errorMessage: displayError }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: "0.5rem" }, children: [
       renderDirectPaypalGateDebug("flopay-direct-paypal-gate-debug-default"),
       renderStripeGateDebug("flopay-stripe-gate-debug-default"),
-      shouldRenderDirectPayPal && directPaypal && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
-        paypalDirectRetry && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      shouldRenderDirectPayPal && directPaypal && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
+        paypalDirectRetry && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
           "div",
           {
             "data-testid": "flopay-paypal-direct-retry-notice-default",
@@ -4223,7 +4708,7 @@ function SplitCardFormInner({
             children: "Please confirm your PayPal payment to complete checkout."
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
           DirectPayPalButton,
           {
             sessionId,
@@ -4249,7 +4734,7 @@ function SplitCardFormInner({
           paypalDirectRetry?.orderId ?? "fresh"
         )
       ] }),
-      shouldRenderStripePayPal && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_stripe_js.Elements, { stripe: paypalStripeInstance, options: paypalOptions, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      shouldRenderStripePayPal && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_stripe_js.Elements, { stripe: paypalStripeInstance, options: paypalOptions, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
         PayPalButtonInner,
         {
           sessionId,
@@ -4263,10 +4748,10 @@ function SplitCardFormInner({
           onDecline,
           runBeforeButtonClick,
           onLoadStateChange: setPaypalLoadState,
-          placeholderBorderRadius: bStyles.cardButton?.borderRadius ?? resolvedBorderRadius
+          placeholderBorderRadius: buttonBorderRadius
         }
       ) }),
-      shouldRenderWallets && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_stripe_js.Elements, { stripe: stripeInstance, options: walletOptions, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      shouldRenderWallets && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_stripe_js.Elements, { stripe: stripeInstance, options: walletOptions, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
         WalletButtonInner,
         {
           sessionId,
@@ -4280,10 +4765,10 @@ function SplitCardFormInner({
           onDecline,
           runBeforeButtonClick,
           onLoadStateChange: setWalletLoadState,
-          placeholderBorderRadius: bStyles.cardButton?.borderRadius ?? resolvedBorderRadius
+          placeholderBorderRadius: buttonBorderRadius
         }
       ) }),
-      shouldRenderPaymentElement && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      shouldRenderPaymentElement && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
         StripePaymentElementInner,
         {
           sessionId,
@@ -4311,12 +4796,12 @@ function SplitCardFormInner({
             backgroundColor: bStyles.cardButton?.backgroundColor,
             borderColor: bStyles.cardInputBorder,
             textColor: bStyles.cardButton?.color,
-            borderRadius: bStyles.cardButton?.borderRadius
+            borderRadius: buttonBorderRadius
           }
         }
       )
     ] }),
-    showStripe && (shouldDisplayWalletRow || shouldDisplayPayPalRow || shouldDisplayPaymentElementRow) && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: {
+    showStripe && (shouldDisplayWalletRow || shouldDisplayPayPalRow || shouldDisplayPaymentElementRow) && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: {
       display: "flex",
       alignItems: "center",
       gap: "0.75rem",
@@ -4324,9 +4809,9 @@ function SplitCardFormInner({
       color: "#999",
       fontSize: "0.85rem"
     }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { flex: 1, height: 1, backgroundColor: "#ddd" } }),
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { children: "or pay with card" }),
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { flex: 1, height: 1, backgroundColor: "#ddd" } })
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: { flex: 1, height: 1, backgroundColor: "#ddd" } }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { children: "or pay with card" }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: { flex: 1, height: 1, backgroundColor: "#ddd" } })
     ] }),
     showStripe && cardFormBlock
   ] });
@@ -4369,6 +4854,210 @@ function getRedirectResultFromCheckoutProcessError(error) {
     paymentMethodId: error.paymentMethodId
   };
 }
+function isTerminalAutoCheckoutThreeDsOutcome(outcome) {
+  return outcome.status === "succeeded" || outcome.status === "declined";
+}
+async function runAutoCheckoutThreeDsChallenge(input) {
+  if (typeof document === "undefined" || typeof window === "undefined") {
+    throw new import_shared7.FloPayError("3DS challenge requires a browser environment.", "api_error", {
+      code: "three_ds_no_window"
+    });
+  }
+  if (input.signal?.aborted) {
+    throw new import_shared7.FloPayError("Card authentication was cancelled.", "api_error", {
+      code: "three_ds_aborted"
+    });
+  }
+  const CHALLENGE_TIMEOUT_MS = 3e5;
+  const CHALLENGE_POLL_INTERVAL_MS = 1e3;
+  const COMPLETE_REQUEST_TIMEOUT_MS = 15e3;
+  const completionEndpoint = `${input.billingApiUrl.replace(/\/$/, "")}/v1/checkouts/sessions/${encodeURIComponent(
+    input.sessionId
+  )}/3ds/complete`;
+  const completeThreeDs = async () => {
+    const controller = new AbortController();
+    const onParentAbort = () => controller.abort();
+    if (input.signal?.aborted) {
+      controller.abort();
+    } else {
+      input.signal?.addEventListener("abort", onParentAbort);
+    }
+    const requestTimeout = window.setTimeout(() => controller.abort(), COMPLETE_REQUEST_TIMEOUT_MS);
+    try {
+      const response = await fetch(completionEndpoint, {
+        method: "POST",
+        headers: {
+          "x-checkout-session-token": input.nonce,
+          "content-type": "application/json"
+        },
+        body: "{}",
+        signal: controller.signal
+      });
+      if (!response.ok) {
+        return { status: "unknown" };
+      }
+      const json = await response.json().catch(() => null);
+      return coerceThreeDsOutcome(json);
+    } catch {
+      return { status: "unknown" };
+    } finally {
+      window.clearTimeout(requestTimeout);
+      input.signal?.removeEventListener("abort", onParentAbort);
+    }
+  };
+  const previousFocus = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+  const backdrop = document.createElement("div");
+  backdrop.setAttribute("data-flopay-auto-3ds-overlay", "1");
+  backdrop.setAttribute("role", "dialog");
+  backdrop.setAttribute("aria-modal", "true");
+  backdrop.setAttribute("aria-label", "Card authentication");
+  backdrop.style.cssText = [
+    "position:fixed",
+    "inset:0",
+    "z-index:2147483647",
+    "background:rgba(15,23,42,0.6)",
+    "display:flex",
+    "align-items:center",
+    "justify-content:center",
+    "padding:16px"
+  ].join(";");
+  const frame = document.createElement("iframe");
+  frame.setAttribute("title", "Card authentication");
+  frame.setAttribute("allow", "payment");
+  frame.tabIndex = 0;
+  frame.style.cssText = [
+    "width:min(100%,460px)",
+    "height:min(100%,640px)",
+    "border:0",
+    "border-radius:12px",
+    "background:#fff",
+    "box-shadow:0 12px 30px rgba(0,0,0,0.35)"
+  ].join(";");
+  frame.src = input.nextActionRedirectUrl;
+  backdrop.appendChild(frame);
+  document.body.appendChild(backdrop);
+  frame.focus();
+  let expectedReturnOrigin = null;
+  try {
+    expectedReturnOrigin = new URL(input.billingApiUrl, window.location.href).origin;
+  } catch {
+    expectedReturnOrigin = null;
+  }
+  try {
+    const polledOutcome = await new Promise((resolve, reject) => {
+      let settled = false;
+      let timer = 0;
+      let pollTimer = 0;
+      let loadPollTimer = 0;
+      let pollInFlight = false;
+      const cleanup = () => {
+        window.clearTimeout(timer);
+        window.clearInterval(pollTimer);
+        window.clearTimeout(loadPollTimer);
+        window.removeEventListener("message", listener);
+        frame.removeEventListener("load", onFrameLoad);
+        input.signal?.removeEventListener("abort", onAbort);
+      };
+      const maybeResolveFromBackend = async () => {
+        if (settled || pollInFlight) return;
+        pollInFlight = true;
+        try {
+          const outcome = await completeThreeDs();
+          if (settled || !isTerminalAutoCheckoutThreeDsOutcome(outcome)) return;
+          settled = true;
+          cleanup();
+          resolve(outcome);
+        } finally {
+          pollInFlight = false;
+        }
+      };
+      const onFrameLoad = () => {
+        window.clearTimeout(loadPollTimer);
+        loadPollTimer = window.setTimeout(() => {
+          void maybeResolveFromBackend();
+        }, 250);
+      };
+      const onAbort = () => {
+        if (settled) return;
+        settled = true;
+        cleanup();
+        reject(
+          new import_shared7.FloPayError("Card authentication was cancelled.", "api_error", {
+            code: "three_ds_aborted"
+          })
+        );
+      };
+      const listener = (event) => {
+        if (event.source !== frame.contentWindow) return;
+        if (expectedReturnOrigin && event.origin !== expectedReturnOrigin) return;
+        const data = event.data;
+        if (!data || typeof data !== "object") return;
+        const record = data;
+        if (record["source"] !== "flopay-vault-3ds-return") return;
+        if (settled) return;
+        settled = true;
+        cleanup();
+        resolve(null);
+      };
+      timer = window.setTimeout(() => {
+        if (settled) return;
+        settled = true;
+        cleanup();
+        reject(
+          new import_shared7.FloPayError("Card authentication timed out.", "api_error", {
+            code: "three_ds_timeout"
+          })
+        );
+      }, CHALLENGE_TIMEOUT_MS);
+      pollTimer = window.setInterval(() => {
+        void maybeResolveFromBackend();
+      }, CHALLENGE_POLL_INTERVAL_MS);
+      frame.addEventListener("load", onFrameLoad);
+      window.addEventListener("message", listener);
+      input.signal?.addEventListener("abort", onAbort);
+      if (input.signal?.aborted) onAbort();
+    });
+    if (polledOutcome) {
+      return polledOutcome;
+    }
+    return await completeThreeDs();
+  } finally {
+    backdrop.parentNode?.removeChild(backdrop);
+    if (previousFocus?.isConnected) {
+      previousFocus.focus();
+    }
+  }
+}
+function coerceThreeDsOutcome(json) {
+  if (!json || typeof json !== "object") return { status: "unknown" };
+  const status = typeof json["status"] === "string" ? json["status"] : "unknown";
+  const providerIntentId = typeof json["providerIntentId"] === "string" ? json["providerIntentId"] : null;
+  switch (status) {
+    case "succeeded":
+      return { status: "succeeded", providerIntentId };
+    case "declined":
+      return {
+        status: "declined",
+        providerIntentId,
+        declineReason: typeof json["declineReason"] === "string" ? json["declineReason"] : null,
+        gatewayDeclineReason: typeof json["gatewayDeclineReason"] === "string" ? json["gatewayDeclineReason"] : null
+      };
+    case "requires_action":
+      return {
+        status: "requires_action",
+        providerIntentId,
+        nextActionRedirectUrl: typeof json["nextActionRedirectUrl"] === "string" ? json["nextActionRedirectUrl"] : null
+      };
+    case "pending":
+      return { status: "pending", providerIntentId };
+    case "timeout":
+      return { status: "timeout", providerIntentId };
+    case "no_attempt":
+      return { status: "no_attempt" };
+    default:
+      return { status: "unknown" };
+  }
+}
 function checkoutProcessErrorToFloPayError(error, fallbackMessage = "Payment failed. Please try again.", options) {
   const checkoutMethod = options?.checkoutMethod ?? error?.checkoutMethod ?? (error?.type === "paypal_redirect_required" ? "paypal" : "card");
   const rawMessage = error?.message ?? fallbackMessage;
@@ -4810,7 +5499,7 @@ async function loadSavedPaymentProviders({
 }
 
 // src/flopay-checkout.tsx
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_jsx_runtime8 = require("react/jsx-runtime");
 var DEFAULT_BUTTONS_LAYOUT_BUTTON_HEIGHT2 = 44;
 var PAYPAL_RESUME_STORAGE_KEY = "flopay_checkout_saved_payment_resume";
 var sessionInflightMap = /* @__PURE__ */ new Map();
@@ -4859,6 +5548,36 @@ function clearPayPalResumeState() {
     console.warn("[FloPayCheckout] Failed to clear PayPal resume state.", error);
   }
 }
+function readCachedInlineSession(cacheKey) {
+  if (!canUseStorage()) return null;
+  const raw = window.sessionStorage.getItem(cacheKey);
+  if (!raw) return null;
+  try {
+    const parsed = JSON.parse(raw);
+    if (parsed && typeof parsed.sid === "string" && parsed.sid) {
+      return { sid: parsed.sid, nonce: typeof parsed.nonce === "string" ? parsed.nonce : void 0 };
+    }
+    return null;
+  } catch {
+    return { sid: raw };
+  }
+}
+function persistCachedInlineSession(cacheKey, sid, nonce) {
+  if (!canUseStorage()) return;
+  try {
+    window.sessionStorage.setItem(cacheKey, JSON.stringify(nonce ? { sid, nonce } : { sid }));
+  } catch (error) {
+    console.warn("[FloPayCheckout] Failed to persist checkout session cache.", error);
+  }
+}
+function clearCachedInlineSession(cacheKey) {
+  if (!canUseStorage()) return;
+  try {
+    window.sessionStorage.removeItem(cacheKey);
+  } catch (error) {
+    console.warn("[FloPayCheckout] Failed to clear checkout session cache.", error);
+  }
+}
 function clearPayPalRedirectParams() {
   if (typeof window === "undefined") return;
   const url = new URL(window.location.href);
@@ -4917,6 +5636,8 @@ function FloPayCheckout({
   onButtonClick,
   onBeforeButtonClick,
   enableAVS,
+  cardFieldOrder,
+  cardPreFormSlot,
   avsLayout,
   submitLabel,
   className,
@@ -4928,41 +5649,41 @@ function FloPayCheckout({
   onSessionCompleted
 }) {
   const resolvedBillingUrl = (0, import_shared8.resolveBillingApiUrl)(billingApiUrl);
-  const themeBundle = (0, import_react9.useMemo)(() => (0, import_shared8.resolveTheme)(theme), [theme]);
+  const themeBundle = (0, import_react10.useMemo)(() => (0, import_shared8.resolveTheme)(theme), [theme]);
   const appearance = appearanceOverride ?? themeBundle?.appearance;
   const checkoutType = createSessionParams ? "embedded_checkout" : "standard_checkout";
   const checkoutLayout = children ? "custom_layout" : layout === "buttons" ? "buttons_layout" : "default_layout";
-  const [unified, setUnified] = (0, import_react9.useState)(null);
-  const [flopay, setFloPay] = (0, import_react9.useState)(null);
-  const flopayRef = (0, import_react9.useRef)(null);
-  const [paypalFlopay, setPaypalFloPay] = (0, import_react9.useState)(null);
-  const paypalFlopayRef = (0, import_react9.useRef)(null);
-  const [session, setSession] = (0, import_react9.useState)(null);
-  const [resolvedSessionId, setResolvedSessionId] = (0, import_react9.useState)(sessionIdProp ?? "");
+  const [unified, setUnified] = (0, import_react10.useState)(null);
+  const [flopay, setFloPay] = (0, import_react10.useState)(null);
+  const flopayRef = (0, import_react10.useRef)(null);
+  const [paypalFlopay, setPaypalFloPay] = (0, import_react10.useState)(null);
+  const paypalFlopayRef = (0, import_react10.useRef)(null);
+  const [session, setSession] = (0, import_react10.useState)(null);
+  const [resolvedSessionId, setResolvedSessionId] = (0, import_react10.useState)(sessionIdProp ?? "");
   const activeSessionId = sessionIdProp ?? resolvedSessionId;
   const initSessionDependency = createSessionParams ? "" : activeSessionId;
-  const [isLoading, setIsLoading] = (0, import_react9.useState)(true);
-  const [loadError, setLoadError] = (0, import_react9.useState)(null);
-  const [currentMode, setCurrentMode] = (0, import_react9.useState)("full");
-  const [confirmProcessing, setConfirmProcessing] = (0, import_react9.useState)(false);
-  const [modeError, setModeError] = (0, import_react9.useState)(initialErrorMessage);
-  const [modeOverlayStatus, setModeOverlayStatus] = (0, import_react9.useState)(null);
-  const [modeOverlayError, setModeOverlayError] = (0, import_react9.useState)(null);
-  const [createSessionPatch, setCreateSessionPatch] = (0, import_react9.useState)(void 0);
-  const [createSessionPatchBaseHash, setCreateSessionPatchBaseHash] = (0, import_react9.useState)("");
-  const [cardBootstrapPending, setCardBootstrapPending] = (0, import_react9.useState)(false);
-  const autoCheckoutAttempted = (0, import_react9.useRef)(false);
-  const paypalResumeAttempted = (0, import_react9.useRef)(false);
-  const savedPaymentKeysRef = (0, import_react9.useRef)(null);
-  const onCompleteRef = (0, import_react9.useRef)(onComplete);
+  const [isLoading, setIsLoading] = (0, import_react10.useState)(true);
+  const [loadError, setLoadError] = (0, import_react10.useState)(null);
+  const [currentMode, setCurrentMode] = (0, import_react10.useState)("full");
+  const [confirmProcessing, setConfirmProcessing] = (0, import_react10.useState)(false);
+  const [modeError, setModeError] = (0, import_react10.useState)(initialErrorMessage);
+  const [modeOverlayStatus, setModeOverlayStatus] = (0, import_react10.useState)(null);
+  const [modeOverlayError, setModeOverlayError] = (0, import_react10.useState)(null);
+  const [createSessionPatch, setCreateSessionPatch] = (0, import_react10.useState)(void 0);
+  const [createSessionPatchBaseHash, setCreateSessionPatchBaseHash] = (0, import_react10.useState)("");
+  const [cardBootstrapPending, setCardBootstrapPending] = (0, import_react10.useState)(false);
+  const autoCheckoutAttempted = (0, import_react10.useRef)(false);
+  const paypalResumeAttempted = (0, import_react10.useRef)(false);
+  const savedPaymentKeysRef = (0, import_react10.useRef)(null);
+  const onCompleteRef = (0, import_react10.useRef)(onComplete);
   onCompleteRef.current = onComplete;
-  const onErrorRef = (0, import_react9.useRef)(onError);
+  const onErrorRef = (0, import_react10.useRef)(onError);
   onErrorRef.current = onError;
-  const onDeclineRef = (0, import_react9.useRef)(onDecline);
+  const onDeclineRef = (0, import_react10.useRef)(onDecline);
   onDeclineRef.current = onDecline;
-  const onSessionCompletedRef = (0, import_react9.useRef)(onSessionCompleted);
+  const onSessionCompletedRef = (0, import_react10.useRef)(onSessionCompleted);
   onSessionCompletedRef.current = onSessionCompleted;
-  (0, import_react9.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     console.info("[FloPay] Checkout initialized", {
       sdk_version: import_shared8.SDK_VERSION,
       checkout_type: checkoutType,
@@ -4970,40 +5691,40 @@ function FloPayCheckout({
       billing_api_url: resolvedBillingUrl
     });
   }, [checkoutLayout, checkoutType, resolvedBillingUrl]);
-  const baseCreateSessionHash = (0, import_react9.useMemo)(
+  const baseCreateSessionHash = (0, import_react10.useMemo)(
     () => createSessionParams ? hashCreateParams(createSessionParams) : "",
     [createSessionParams]
   );
-  const activeCreateSessionPatch = (0, import_react9.useMemo)(
+  const activeCreateSessionPatch = (0, import_react10.useMemo)(
     () => createSessionPatchBaseHash === baseCreateSessionHash ? createSessionPatch : void 0,
     [createSessionPatch, createSessionPatchBaseHash, baseCreateSessionHash]
   );
-  const effectiveCreateSessionBase = (0, import_react9.useMemo)(
+  const effectiveCreateSessionBase = (0, import_react10.useMemo)(
     () => createSessionParams ? mergeInlineSessionPatch(createSessionParams, activeCreateSessionPatch) : void 0,
     [createSessionParams, activeCreateSessionPatch]
   );
   const effectiveCreateSessionMode = checkoutModeProp ?? effectiveCreateSessionBase?.checkoutMode ?? "full";
-  const effectiveCreateSession = (0, import_react9.useMemo)(
+  const effectiveCreateSession = (0, import_react10.useMemo)(
     () => effectiveCreateSessionBase ? {
       ...effectiveCreateSessionBase,
       checkoutMode: effectiveCreateSessionMode
     } : void 0,
     [effectiveCreateSessionBase, effectiveCreateSessionMode]
   );
-  (0, import_react9.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     setCreateSessionPatch(void 0);
     setCreateSessionPatchBaseHash(baseCreateSessionHash);
   }, [baseCreateSessionHash]);
-  (0, import_react9.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     setModeError(initialErrorMessage);
   }, [initialErrorMessage]);
-  const emitDecline = (0, import_react9.useCallback)(
+  const emitDecline = (0, import_react10.useCallback)(
     (method, input, overrides) => {
       onDeclineRef.current?.(buildDeclineEvent(method, input, overrides));
     },
     []
   );
-  const runSavedPaymentFlow = (0, import_react9.useCallback)(
+  const runSavedPaymentFlow = (0, import_react10.useCallback)(
     async (sess, options) => {
       setModeError(null);
       setModeOverlayError(null);
@@ -5121,7 +5842,7 @@ function FloPayCheckout({
       resolvedBillingUrl
     ]
   );
-  (0, import_react9.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     if (typeof window === "undefined" || paypalResumeAttempted.current) {
       return;
     }
@@ -5238,7 +5959,7 @@ function FloPayCheckout({
       }
     })();
   }, [emitDecline, locale, normalizeSavedPaymentError, resolvedBillingUrl]);
-  const initializedHashRef = (0, import_react9.useRef)(null);
+  const initializedHashRef = (0, import_react10.useRef)(null);
   function hashCreateParams(params) {
     const key = JSON.stringify({
       c: params?.clientId,
@@ -5271,16 +5992,16 @@ function FloPayCheckout({
     }
     return `flopay_session_${Math.abs(h).toString(36)}`;
   }
-  const createSessionHash = (0, import_react9.useMemo)(
+  const createSessionHash = (0, import_react10.useMemo)(
     () => effectiveCreateSession ? hashCreateParams(effectiveCreateSession) : "",
     [effectiveCreateSession]
   );
-  const createSessionParamsRef = (0, import_react9.useRef)(effectiveCreateSession);
+  const createSessionParamsRef = (0, import_react10.useRef)(effectiveCreateSession);
   createSessionParamsRef.current = effectiveCreateSession;
-  (0, import_react9.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     setResolvedSessionId(sessionIdProp ?? "");
   }, [sessionIdProp]);
-  (0, import_react9.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     autoCheckoutAttempted.current = false;
     setModeError(initialErrorMessage);
     setModeOverlayError(null);
@@ -5288,22 +6009,23 @@ function FloPayCheckout({
   }, [createSessionHash, initialErrorMessage, sessionIdProp]);
   async function resolveInlineSession(params, cacheKey) {
     const api = new import_js4.PaymentAPI(resolvedBillingUrl);
-    let sid = typeof window !== "undefined" ? window.sessionStorage.getItem(cacheKey) : null;
+    const cached = readCachedInlineSession(cacheKey);
+    let sid = cached?.sid ?? null;
     let realResult = null;
     if (sid) {
       try {
-        realResult = await api.getUnifiedCheckoutSession(sid);
+        realResult = await api.getUnifiedCheckoutSession(sid, cached?.nonce);
         const status = realResult.data.session?.status;
         if (status === "complete") {
           if (wasSessionRecentlyCompleted(sid)) {
             return { sid, result: realResult };
           }
-          if (typeof window !== "undefined") window.sessionStorage.removeItem(cacheKey);
+          clearCachedInlineSession(cacheKey);
           sid = null;
           realResult = null;
         }
       } catch {
-        if (typeof window !== "undefined") window.sessionStorage.removeItem(cacheKey);
+        clearCachedInlineSession(cacheKey);
         sid = null;
       }
     }
@@ -5317,13 +6039,13 @@ function FloPayCheckout({
       };
       realResult = await api.createAndFetchSession(paramsWithAnalytics);
       sid = realResult.data.session?.id ?? "";
-      if (sid && typeof window !== "undefined") {
-        window.sessionStorage.setItem(cacheKey, sid);
+      if (sid) {
+        persistCachedInlineSession(cacheKey, sid, realResult.data.session?.clientSecret);
       }
     }
     return { sid: sid ?? "", result: realResult };
   }
-  const bootstrapInlineSession = (0, import_react9.useCallback)(
+  const bootstrapInlineSession = (0, import_react10.useCallback)(
     async (patch) => {
       const baseParams = createSessionParamsRef.current;
       if (!baseParams) {
@@ -5384,7 +6106,7 @@ function FloPayCheckout({
     },
     [locale, resolvedBillingUrl]
   );
-  const handleInlineSessionPatch = (0, import_react9.useCallback)(async (patch) => {
+  const handleInlineSessionPatch = (0, import_react10.useCallback)(async (patch) => {
     if (!hasInlineSessionPatchData(patch) || cardBootstrapPending) {
       return {
         sessionId: resolvedSessionId,
@@ -5407,7 +6129,7 @@ function FloPayCheckout({
     resolvedSessionId,
     session
   ]);
-  (0, import_react9.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     let cancelled = false;
     setLoadError(null);
     if (createSessionHash) {
@@ -5573,7 +6295,7 @@ function FloPayCheckout({
     nonceProp,
     runSavedPaymentFlow
   ]);
-  const handleConfirmCheckout = (0, import_react9.useCallback)(async () => {
+  const handleConfirmCheckout = (0, import_react10.useCallback)(async () => {
     if (confirmProcessing || !session) return;
     setConfirmProcessing(true);
     setModeError(null);
@@ -5588,7 +6310,7 @@ function FloPayCheckout({
   }, [activeSessionId, confirmProcessing, runSavedPaymentFlow, session]);
   const directPaypalConfig = resolveDirectPaypalConfig(unified);
   const isPaypalOnlySession = isPayPalOnlyUnified(unified);
-  const providerOptions = (0, import_react9.useMemo)(() => {
+  const providerOptions = (0, import_react10.useMemo)(() => {
     if (!unified || !session || !unified.data.stripe?.publishableKey) return void 0;
     const opts = {
       appearance,
@@ -5607,7 +6329,7 @@ function FloPayCheckout({
   const shouldHandleInlineSessionPatch = Boolean(
     createSessionParams && !children && layout === "buttons" && onBeforeButtonClick && effectiveCreateSessionMode === "full"
   );
-  const checkoutValue = (0, import_react9.useMemo)(
+  const checkoutValue = (0, import_react10.useMemo)(
     () => ({
       session,
       loading: isLoading,
@@ -5629,7 +6351,7 @@ function FloPayCheckout({
     ]
   );
   const shouldShowInterimButtons = Boolean(createSessionParams) && layout === "buttons" && !isPaypalOnlySession && (!flopay || !providerOptions);
-  const modeOverlay = modeOverlayStatus ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+  const modeOverlay = modeOverlayStatus ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
     ProcessingOverlay,
     {
       status: modeOverlayStatus,
@@ -5638,32 +6360,32 @@ function FloPayCheckout({
   ) : null;
   if (isLoading) {
     if (loadingNode) {
-      return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
+      return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
         loadingNode,
         modeOverlay
       ] });
     }
     if (layout === "buttons") {
       const bundleRadius = themeBundle?.buttonsLayout?.cardButton?.borderRadius ?? themeBundle?.appearance.variables?.borderRadius ?? 8;
-      const skeletonBar = (h) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: {
+      const skeletonBar = (h) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: {
         height: h,
         borderRadius: bundleRadius,
         background: "#e5e7eb",
         animation: "flopay-loading-pulse 1.5s ease-in-out infinite"
       } });
-      return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: "0.5rem" }, children: [
+      return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: "0.5rem" }, children: [
           showPayPal && skeletonBar(DEFAULT_BUTTONS_LAYOUT_BUTTON_HEIGHT2),
           showStripe && (showApplePay || showGooglePay) && skeletonBar(DEFAULT_BUTTONS_LAYOUT_BUTTON_HEIGHT2),
           showStripe && skeletonBar(DEFAULT_BUTTONS_LAYOUT_BUTTON_HEIGHT2),
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("style", { children: `@keyframes flopay-loading-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }` })
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("style", { children: `@keyframes flopay-loading-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }` })
         ] }),
         modeOverlay
       ] });
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: { display: "flex", justifyContent: "center", padding: 32 }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: {
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: { display: "flex", justifyContent: "center", padding: 32 }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: {
           width: 24,
           height: 24,
           border: "2px solid #e5e7eb",
@@ -5671,16 +6393,16 @@ function FloPayCheckout({
           borderRadius: "50%",
           animation: "spin 0.6s linear infinite"
         } }),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("style", { children: `@keyframes spin { to { transform: rotate(360deg); } }` })
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("style", { children: `@keyframes spin { to { transform: rotate(360deg); } }` })
       ] }),
       modeOverlay
     ] });
   }
   if (loadError) {
     if (errorNode) {
-      return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CheckoutContext.Provider, { value: checkoutValue, children: errorNode(loadError) });
+      return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(CheckoutContext.Provider, { value: checkoutValue, children: errorNode(loadError) });
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CheckoutContext.Provider, { value: checkoutValue, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(CheckoutContext.Provider, { value: checkoutValue, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
       "div",
       {
         role: "alert",
@@ -5696,8 +6418,8 @@ function FloPayCheckout({
     ) });
   }
   if (shouldShowInterimButtons) {
-    return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CheckoutContext.Provider, { value: checkoutValue, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(CheckoutContext.Provider, { value: checkoutValue, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
         InterimButtonsView,
         {
           onButtonClick,
@@ -5717,9 +6439,9 @@ function FloPayCheckout({
     ] });
   }
   if (isPaypalOnlySession && session && directPaypalConfig) {
-    return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CheckoutContext.Provider, { value: checkoutValue, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className, style: { display: "flex", flexDirection: "column", gap: "0.5rem" }, children: [
-        modeError && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(CheckoutContext.Provider, { value: checkoutValue, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className, style: { display: "flex", flexDirection: "column", gap: "0.5rem" }, children: [
+        modeError && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
           "div",
           {
             role: "alert",
@@ -5736,7 +6458,7 @@ function FloPayCheckout({
             children: modeError
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
           DirectPayPalButton,
           {
             sessionId: activeSessionId,
@@ -5760,12 +6482,12 @@ function FloPayCheckout({
     ] });
   }
   if (!flopay || !providerOptions) {
-    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_jsx_runtime7.Fragment, { children: modeOverlay });
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_jsx_runtime8.Fragment, { children: modeOverlay });
   }
   if (currentMode === "confirm") {
-    return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CheckoutContext.Provider, { value: checkoutValue, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(FloPayProvider, { flopay, paypalFlopay, options: providerOptions, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className, children: [
-        modeError && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(CheckoutContext.Provider, { value: checkoutValue, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(FloPayProvider, { flopay, paypalFlopay, options: providerOptions, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className, children: [
+        modeError && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
           "div",
           {
             style: {
@@ -5780,7 +6502,7 @@ function FloPayCheckout({
         renderConfirmButton ? renderConfirmButton({
           onConfirm: handleConfirmCheckout,
           isProcessing: confirmProcessing
-        }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
           "button",
           {
             type: "button",
@@ -5805,9 +6527,9 @@ function FloPayCheckout({
       modeOverlay
     ] });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CheckoutContext.Provider, { value: checkoutValue, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(FloPayProvider, { flopay, paypalFlopay, options: providerOptions, children: children ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
-      modeError && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(CheckoutContext.Provider, { value: checkoutValue, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(FloPayProvider, { flopay, paypalFlopay, options: providerOptions, children: children ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
+      modeError && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
         "div",
         {
           style: {
@@ -5822,7 +6544,7 @@ function FloPayCheckout({
           children: modeError
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
         SessionInjector,
         {
           sessionId: activeSessionId,
@@ -5832,7 +6554,7 @@ function FloPayCheckout({
           children
         }
       )
-    ] }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    ] }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
       SplitCardForm,
       {
         sessionId: activeSessionId,
@@ -5852,6 +6574,7 @@ function FloPayCheckout({
         showPayPal,
         showStripe,
         enabledPaymentMethods: unified?.data.stripe?.enabledPaymentMethods,
+        enabledPaymentMethodCountries: unified?.data.stripe?.enabledPaymentMethodCountries,
         showApplePay,
         showGooglePay,
         layout,
@@ -5865,6 +6588,8 @@ function FloPayCheckout({
         onButtonClick,
         onBeforeButtonClick,
         enableAVS,
+        ...cardFieldOrder ? { cardFieldOrder } : {},
+        ...cardPreFormSlot ? { cardPreFormSlot } : {},
         avsLayout,
         country: session?.customer?.country,
         city: session?.customer?.city,
@@ -5892,8 +6617,8 @@ function SessionInjector({
   session,
   children
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_jsx_runtime7.Fragment, { children: import_react9.default.Children.map(children, (child) => {
-    if (!import_react9.default.isValidElement(child)) return child;
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_jsx_runtime8.Fragment, { children: import_react10.default.Children.map(children, (child) => {
+    if (!import_react10.default.isValidElement(child)) return child;
     const existing = child.props;
     const injected = {};
     if (!existing.sessionId) injected.sessionId = sessionId;
@@ -5908,7 +6633,7 @@ function SessionInjector({
         injected.lastName = session.customer.lastName;
     }
     if (Object.keys(injected).length === 0) return child;
-    return import_react9.default.cloneElement(child, injected);
+    return import_react10.default.cloneElement(child, injected);
   }) });
 }
 function InterimButtonsView({
@@ -5928,15 +6653,15 @@ function InterimButtonsView({
   cardBackButtonContent,
   cardTitleContent
 }) {
-  const [showCardForm, setShowCardForm] = (0, import_react9.useState)(false);
+  const [showCardForm, setShowCardForm] = (0, import_react10.useState)(false);
   const isCardOpenControlled = typeof cardOpen === "boolean";
-  (0, import_react9.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     if (isCardOpenControlled) {
       setShowCardForm(cardOpen);
     }
   }, [cardOpen, isCardOpenControlled]);
-  const themeBundle = (0, import_react9.useMemo)(() => (0, import_shared8.resolveTheme)(theme), [theme]);
-  const bStyles = (0, import_react9.useMemo)(() => {
+  const themeBundle = (0, import_react10.useMemo)(() => (0, import_shared8.resolveTheme)(theme), [theme]);
+  const bStyles = (0, import_react10.useMemo)(() => {
     const base = themeBundle?.buttonsLayout ?? (0, import_shared8.resolveButtonsLayoutTheme)(buttonsTheme);
     if (!stylesOverride) return base;
     return {
@@ -5951,7 +6676,7 @@ function InterimButtonsView({
     };
   }, [themeBundle, buttonsTheme, stylesOverride]);
   const skeletonRadius = themeBundle?.buttonsLayout?.cardButton?.borderRadius ?? themeBundle?.appearance.variables?.borderRadius ?? 8;
-  const skeleton = (h) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: {
+  const skeleton = (h) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: {
     height: h,
     borderRadius: skeletonRadius,
     background: "#e5e7eb",
@@ -5963,15 +6688,15 @@ function InterimButtonsView({
     const inputBg = bStyles.cardInputBackground ?? "white";
     const hideBackButtonLabel = isEmptySlotContent(cardBackButtonContent);
     const hideTitle = isEmptySlotContent(cardTitleContent);
-    return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: {
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: {
       backgroundColor: bStyles.cardFormContainer?.backgroundColor ?? "white",
       borderRadius: "8px",
       animation: "flopay-interim-expand 0.35s cubic-bezier(0.4, 0, 0.2, 1) both",
       overflow: "hidden",
       ...bStyles.cardFormContainer
     }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: { display: "flex", alignItems: "center", padding: "0.75rem 0 0.625rem" }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: { display: "flex", alignItems: "center", padding: "0.75rem 0 0.625rem" }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
           "button",
           {
             type: "button",
@@ -5998,7 +6723,7 @@ function InterimButtonsView({
               ...bStyles.backButton
             },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { style: {
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { style: {
                 display: "inline-flex",
                 alignItems: "center",
                 justifyContent: "center",
@@ -6007,12 +6732,12 @@ function InterimButtonsView({
                 borderRadius: "50%",
                 backgroundColor: "#f3f4f6",
                 ...bStyles.backButtonIcon
-              }, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: "M15 18l-6-6 6-6" }) }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(BackButtonContentSlot, { content: cardBackButtonContent })
+              }, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("path", { d: "M15 18l-6-6 6-6" }) }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(BackButtonContentSlot, { content: cardBackButtonContent })
             ]
           }
         ),
-        hideTitle ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: { flex: 1 } }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: {
+        hideTitle ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: { flex: 1 } }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: {
           flex: 1,
           textAlign: "center",
           fontWeight: 600,
@@ -6020,11 +6745,11 @@ function InterimButtonsView({
           color: "#262833",
           paddingRight: 80,
           ...bStyles.title
-        }, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(TitleContentSlot, { content: cardTitleContent }) })
+        }, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(TitleContentSlot, { content: cardTitleContent }) })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: { backgroundColor: inputBg, border: `1px solid ${inputBorder}`, borderTopLeftRadius: 8, borderTopRightRadius: 8, padding: 12, height: 45 }, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: { width: "60%", height: 14, borderRadius: 4, background: "#e5e7eb", animation: "flopay-interim-pulse 1.5s ease-in-out infinite" } }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: { display: "flex" }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: {
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: { backgroundColor: inputBg, border: `1px solid ${inputBorder}`, borderTopLeftRadius: 8, borderTopRightRadius: 8, padding: 12, height: 45 }, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: { width: "60%", height: 14, borderRadius: 4, background: "#e5e7eb", animation: "flopay-interim-pulse 1.5s ease-in-out infinite" } }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: { display: "flex" }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: {
           flex: 1,
           backgroundColor: inputBg,
           borderTop: "none",
@@ -6034,8 +6759,8 @@ function InterimButtonsView({
           borderBottomLeftRadius: 8,
           padding: 12,
           height: 45
-        }, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: { width: "50%", height: 14, borderRadius: 4, background: "#e5e7eb", animation: "flopay-interim-pulse 1.5s ease-in-out infinite" } }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: {
+        }, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: { width: "50%", height: 14, borderRadius: 4, background: "#e5e7eb", animation: "flopay-interim-pulse 1.5s ease-in-out infinite" } }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: {
           flex: 1,
           backgroundColor: inputBg,
           borderTop: "none",
@@ -6045,10 +6770,10 @@ function InterimButtonsView({
           borderBottomRightRadius: 8,
           padding: 12,
           height: 45
-        }, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: { width: "40%", height: 14, borderRadius: 4, background: "#e5e7eb", animation: "flopay-interim-pulse 1.5s ease-in-out infinite" } }) })
+        }, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: { width: "40%", height: 14, borderRadius: 4, background: "#e5e7eb", animation: "flopay-interim-pulse 1.5s ease-in-out infinite" } }) })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: { backgroundColor: inputBg, border: `1px solid ${inputBorder}`, borderRadius: 8, marginTop: 8, padding: 12, height: 45 }, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: { width: "45%", height: 14, borderRadius: 4, background: "#e5e7eb", animation: "flopay-interim-pulse 1.5s ease-in-out infinite" } }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: {
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: { backgroundColor: inputBg, border: `1px solid ${inputBorder}`, borderRadius: 8, marginTop: 8, padding: 12, height: 45 }, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: { width: "45%", height: 14, borderRadius: 4, background: "#e5e7eb", animation: "flopay-interim-pulse 1.5s ease-in-out infinite" } }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: {
         height: 50,
         borderRadius: 8,
         marginTop: 16,
@@ -6057,7 +6782,7 @@ function InterimButtonsView({
         ...bStyles.submitButton,
         opacity: 0.5
       } }),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("style", { children: `
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("style", { children: `
           @keyframes flopay-interim-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }
           @keyframes flopay-interim-expand {
             0% { opacity: 0; max-height: 0; transform: translateY(-12px); }
@@ -6067,10 +6792,10 @@ function InterimButtonsView({
         ` })
     ] });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: "0.5rem" }, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: "0.5rem" }, children: [
     showPayPal && skeleton(DEFAULT_BUTTONS_LAYOUT_BUTTON_HEIGHT2),
     showStripe && (showApplePay || showGooglePay) && skeleton(DEFAULT_BUTTONS_LAYOUT_BUTTON_HEIGHT2),
-    showStripe && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    showStripe && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
       "button",
       {
         type: "button",
@@ -6110,10 +6835,10 @@ function InterimButtonsView({
         onMouseUp: (e) => {
           e.currentTarget.style.transform = "scale(1)";
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CardButtonContentSlot, { content: cardButtonContent })
+        children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(CardButtonContentSlot, { content: cardButtonContent })
       }
     ),
-    errorMessage && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: {
+    errorMessage && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: {
       margin: "0.25rem 0",
       padding: "0.625rem 0.875rem",
       background: "#FEF2F2",
@@ -6127,22 +6852,22 @@ function InterimButtonsView({
       gap: "0.5rem",
       ...bStyles.errorBanner
     }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", style: { flexShrink: 0 }, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: "M12 9v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z", stroke: "#DC2626", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", style: { flexShrink: 0 }, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("path", { d: "M12 9v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z", stroke: "#DC2626", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }),
       errorMessage
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("style", { children: `@keyframes flopay-interim-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }` })
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("style", { children: `@keyframes flopay-interim-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }` })
   ] });
 }
 
 // src/checkout-form.tsx
 var import_js5 = require("@flopay/js");
 var import_shared9 = require("@flopay/shared");
-var import_react10 = require("react");
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_react11 = require("react");
+var import_jsx_runtime9 = require("react/jsx-runtime");
 var WALLET_RESUME_KEY = "flopay_wallet_resume";
-var CheckoutForm = (0, import_react10.forwardRef)(
+var CheckoutForm = (0, import_react11.forwardRef)(
   function CheckoutForm2(props, ref) {
-    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(CheckoutFormInner, { ...props, innerRef: ref });
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(CheckoutFormInner, { ...props, innerRef: ref });
   }
 );
 function CheckoutFormInner({
@@ -6172,27 +6897,27 @@ function CheckoutFormInner({
   const paypalFlopay = usePayPalFloPay();
   const elements = useElements();
   const contextBillingUrl = useBillingApiUrl();
-  const [processing, setProcessing] = (0, import_react10.useState)(false);
-  const [error, setError] = (0, import_react10.useState)(null);
-  const [is3DSActive, setIs3DSActive] = (0, import_react10.useState)(false);
+  const [processing, setProcessing] = (0, import_react11.useState)(false);
+  const [error, setError] = (0, import_react11.useState)(null);
+  const [is3DSActive, setIs3DSActive] = (0, import_react11.useState)(false);
   const displayError = externalError ?? error;
   const isSubmitting = externalProcessing ?? processing;
   const isSelfContained = !onTokenizedBody;
   const baseUrl = (billingApiUrl || contextBillingUrl).replace(/\/+$/, "");
-  const updateError = (0, import_react10.useCallback)(
+  const updateError = (0, import_react11.useCallback)(
     (err) => {
       setError(err);
       onErrorChange?.(err);
     },
     [onErrorChange]
   );
-  const emitDecline = (0, import_react10.useCallback)(
+  const emitDecline = (0, import_react11.useCallback)(
     (input, overrides) => {
       onDecline?.(buildDeclineEvent("card", input, overrides));
     },
     [onDecline]
   );
-  const processPaymentInternal = (0, import_react10.useCallback)(
+  const processPaymentInternal = (0, import_react11.useCallback)(
     async (tokenizedBody, completionPaymentMethodId) => {
       setProcessing(true);
       updateError(null);
@@ -6304,7 +7029,7 @@ function CheckoutFormInner({
     },
     [baseUrl, sessionId, nonce, userId, email, firstName, lastName, chv, flopay, paypalFlopay, onComplete, onError, onDecline, updateError, emitDecline]
   );
-  const dispatchTokenizedBody = (0, import_react10.useCallback)(
+  const dispatchTokenizedBody = (0, import_react11.useCallback)(
     (tokenizedBody) => {
       if (onTokenizedBody) {
         onTokenizedBody(tokenizedBody);
@@ -6314,7 +7039,7 @@ function CheckoutFormInner({
     },
     [onTokenizedBody, processPaymentInternal]
   );
-  (0, import_react10.useImperativeHandle)(innerRef, () => ({
+  (0, import_react11.useImperativeHandle)(innerRef, () => ({
     async handleNextAction(secret) {
       if (!flopay) return;
       setIs3DSActive(true);
@@ -6341,7 +7066,7 @@ function CheckoutFormInner({
       }
     }
   }), [flopay, dispatchTokenizedBody, onError, updateError, emitDecline]);
-  (0, import_react10.useEffect)(() => {
+  (0, import_react11.useEffect)(() => {
     if (typeof window === "undefined") return;
     const stored = localStorage.getItem(WALLET_RESUME_KEY);
     if (!stored) return;
@@ -6359,7 +7084,7 @@ function CheckoutFormInner({
       localStorage.removeItem(WALLET_RESUME_KEY);
     }
   }, [sessionId, dispatchTokenizedBody]);
-  const handleSubmit = (0, import_react10.useCallback)(
+  const handleSubmit = (0, import_react11.useCallback)(
     async (e) => {
       e.preventDefault();
       if (!flopay || !elements || isSubmitting) return;
@@ -6451,8 +7176,8 @@ function CheckoutFormInner({
     [flopay, elements, isSubmitting, sessionId, nonce, email, firstName, lastName, baseUrl, isSelfContained, dispatchTokenizedBody, onError, updateError, emitDecline]
   );
   const isReady = flopay !== null && elements !== null;
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("form", { onSubmit: handleSubmit, className, style: { position: "relative" }, children: [
-    (is3DSActive || isSubmitting) && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { "data-testid": "flopay-overlay", style: {
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("form", { onSubmit: handleSubmit, className, style: { position: "relative" }, children: [
+    (is3DSActive || isSubmitting) && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { "data-testid": "flopay-overlay", style: {
       position: "absolute",
       inset: 0,
       background: "rgba(255,255,255,0.7)",
@@ -6461,12 +7186,12 @@ function CheckoutFormInner({
       justifyContent: "center",
       zIndex: 10
     }, children: is3DSActive ? "Verifying payment..." : "Processing..." }),
-    !isReady && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { "data-testid": "flopay-loading", "aria-busy": "true", children: "Loading payment form..." }),
-    isReady && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(PaymentElement, { options: { layout } }),
-      showAddress && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(AddressElement, { options: { mode: showAddress === true ? "billing" : showAddress } }),
-      displayError && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { role: "alert", "data-testid": "flopay-error", style: { color: "red", margin: "0.75rem 0" }, children: displayError }),
-      children ?? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    !isReady && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { "data-testid": "flopay-loading", "aria-busy": "true", children: "Loading payment form..." }),
+    isReady && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(PaymentElement, { options: { layout } }),
+      showAddress && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(AddressElement, { options: { mode: showAddress === true ? "billing" : showAddress } }),
+      displayError && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { role: "alert", "data-testid": "flopay-error", style: { color: "red", margin: "0.75rem 0" }, children: displayError }),
+      children ?? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
         "button",
         {
           type: "submit",
@@ -6482,8 +7207,8 @@ function CheckoutFormInner({
 // src/paypal-button.tsx
 var import_js6 = require("@flopay/js");
 var import_shared10 = require("@flopay/shared");
-var import_react11 = require("react");
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_react12 = require("react");
+var import_jsx_runtime10 = require("react/jsx-runtime");
 function PayPalButton({
   sessionId,
   nonce,
@@ -6501,11 +7226,11 @@ function PayPalButton({
   const flopay = useFloPay();
   const elements = useElements();
   const contextBillingUrl = useBillingApiUrl();
-  const [ready, setReady] = (0, import_react11.useState)(false);
-  const [submitting, setSubmitting] = (0, import_react11.useState)(false);
-  const paypalResumeAttempted = (0, import_react11.useRef)(false);
+  const [ready, setReady] = (0, import_react12.useState)(false);
+  const [submitting, setSubmitting] = (0, import_react12.useState)(false);
+  const paypalResumeAttempted = (0, import_react12.useRef)(false);
   const baseUrl = (billingApiUrl || contextBillingUrl).replace(/\/+$/, "");
-  const processPaymentInternal = (0, import_react11.useCallback)(
+  const processPaymentInternal = (0, import_react12.useCallback)(
     async (tokenizedBody) => {
       try {
         const api = new import_js6.PaymentAPI(baseUrl);
@@ -6533,7 +7258,7 @@ function PayPalButton({
     },
     [baseUrl, sessionId, nonce, userId, email, firstName, lastName, chv, onComplete, onErrorChange]
   );
-  const dispatchTokenizedBody = (0, import_react11.useCallback)(
+  const dispatchTokenizedBody = (0, import_react12.useCallback)(
     (body) => {
       if (onTokenizedBody) {
         onTokenizedBody(body);
@@ -6543,7 +7268,7 @@ function PayPalButton({
     },
     [onTokenizedBody, processPaymentInternal]
   );
-  (0, import_react11.useEffect)(() => {
+  (0, import_react12.useEffect)(() => {
     if (!flopay || paypalResumeAttempted.current) return;
     const params = new URLSearchParams(window.location.search);
     const paymentIntentId = params.get("payment_intent");
@@ -6591,7 +7316,7 @@ function PayPalButton({
       }
     })();
   }, [flopay, dispatchTokenizedBody, onErrorChange]);
-  const handlePayPalConfirm = (0, import_react11.useCallback)(async () => {
+  const handlePayPalConfirm = (0, import_react12.useCallback)(async () => {
     if (!flopay || !elements) return;
     try {
       setSubmitting(true);
@@ -6625,11 +7350,11 @@ function PayPalButton({
     }
   }, [flopay, elements, sessionId, nonce, email, baseUrl, dispatchTokenizedBody, onErrorChange]);
   if (!flopay || !elements) {
-    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: { height: 45, background: "#f0f0f0", borderRadius: 6, animation: "pulse 1.5s infinite" } });
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { style: { height: 45, background: "#f0f0f0", borderRadius: 6, animation: "pulse 1.5s infinite" } });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
-    !ready && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: { height: 45, background: "#f0f0f0", borderRadius: 6 } }),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: ready ? {} : { display: "none" }, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
+    !ready && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { style: { height: 45, background: "#f0f0f0", borderRadius: 6 } }),
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { style: ready ? {} : { display: "none" }, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
       "button",
       {
         type: "button",
@@ -6651,7 +7376,7 @@ function PayPalButton({
         children: submitting ? "Processing..." : "PayPal"
       }
     ) }),
-    (submitting || isProcessing) && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: {
+    (submitting || isProcessing) && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { style: {
       position: "fixed",
       inset: 0,
       background: "rgba(0,0,0,0.4)",
@@ -6659,7 +7384,7 @@ function PayPalButton({
       alignItems: "center",
       justifyContent: "center",
       zIndex: 1e3
-    }, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: {
+    }, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { style: {
       background: "white",
       borderRadius: 8,
       padding: "1.5rem",
@@ -6671,10 +7396,10 @@ function PayPalButton({
 }
 
 // src/automatic-payment-button.tsx
-var import_react12 = require("react");
+var import_react13 = require("react");
 var import_js7 = require("@flopay/js");
 var import_shared11 = require("@flopay/shared");
-var import_jsx_runtime10 = require("react/jsx-runtime");
+var import_jsx_runtime11 = require("react/jsx-runtime");
 var DEFAULT_BUTTONS_LAYOUT_BUTTON_HEIGHT3 = 44;
 function sleep2(ms) {
   return new Promise((resolve) => setTimeout(resolve, ms));
@@ -6742,6 +7467,7 @@ function FloPayAutomaticPaymentButton({
   billingApiUrl,
   locale,
   theme,
+  appearance,
   buttonsTheme,
   buttonsStyles: stylesOverride,
   onSuccess,
@@ -6753,11 +7479,11 @@ function FloPayAutomaticPaymentButton({
   style,
   ...buttonProps
 }) {
-  const resolvedBillingUrl = (0, import_react12.useMemo)(
+  const resolvedBillingUrl = (0, import_react13.useMemo)(
     () => (0, import_shared11.resolveBillingApiUrl)(billingApiUrl),
     [billingApiUrl]
   );
-  const createSessionDraft = (0, import_react12.useMemo)(
+  const createSessionDraft = (0, import_react13.useMemo)(
     () => resolveCreateSessionDraft({
       createSession,
       clientId,
@@ -6785,34 +7511,36 @@ function FloPayAutomaticPaymentButton({
       utmMetadata
     ]
   );
-  const [isProcessing, setIsProcessing] = (0, import_react12.useState)(false);
-  const [overlayStatus, setOverlayStatus] = (0, import_react12.useState)(null);
-  const [overlayError, setOverlayError] = (0, import_react12.useState)(null);
-  const [fallbackSession, setFallbackSession] = (0, import_react12.useState)(null);
-  const isMountedRef = (0, import_react12.useRef)(true);
-  const fallbackSessionRef = (0, import_react12.useRef)(fallbackSession);
-  const onSuccessRef = (0, import_react12.useRef)(onSuccess);
-  const onErrorRef = (0, import_react12.useRef)(onError);
-  const onDeclineRef = (0, import_react12.useRef)(onDecline);
-  (0, import_react12.useEffect)(() => {
+  const [isProcessing, setIsProcessing] = (0, import_react13.useState)(false);
+  const [overlayStatus, setOverlayStatus] = (0, import_react13.useState)(null);
+  const [overlayError, setOverlayError] = (0, import_react13.useState)(null);
+  const [fallbackSession, setFallbackSession] = (0, import_react13.useState)(null);
+  const isMountedRef = (0, import_react13.useRef)(true);
+  const threeDsAbortRef = (0, import_react13.useRef)(null);
+  const fallbackSessionRef = (0, import_react13.useRef)(fallbackSession);
+  const onSuccessRef = (0, import_react13.useRef)(onSuccess);
+  const onErrorRef = (0, import_react13.useRef)(onError);
+  const onDeclineRef = (0, import_react13.useRef)(onDecline);
+  (0, import_react13.useEffect)(() => {
     fallbackSessionRef.current = fallbackSession;
   }, [fallbackSession]);
-  (0, import_react12.useEffect)(() => {
+  (0, import_react13.useEffect)(() => {
     onSuccessRef.current = onSuccess;
   }, [onSuccess]);
-  (0, import_react12.useEffect)(() => {
+  (0, import_react13.useEffect)(() => {
     onErrorRef.current = onError;
   }, [onError]);
-  (0, import_react12.useEffect)(() => {
+  (0, import_react13.useEffect)(() => {
     onDeclineRef.current = onDecline;
   }, [onDecline]);
-  (0, import_react12.useEffect)(() => {
+  (0, import_react13.useEffect)(() => {
     isMountedRef.current = true;
     return () => {
       isMountedRef.current = false;
+      threeDsAbortRef.current?.abort();
     };
   }, []);
-  (0, import_react12.useEffect)(() => {
+  (0, import_react13.useEffect)(() => {
     if (!fallbackSession || typeof window === "undefined") {
       return;
     }
@@ -6826,13 +7554,13 @@ function FloPayAutomaticPaymentButton({
       window.removeEventListener("keydown", handleKeyDown);
     };
   }, [fallbackSession]);
-  const emitDecline = (0, import_react12.useCallback)((error, method = DEFAULT_SAVED_PAYMENT_DECLINE_METHOD) => {
+  const emitDecline = (0, import_react13.useCallback)((error, method = DEFAULT_SAVED_PAYMENT_DECLINE_METHOD) => {
     onDeclineRef.current?.(buildDeclineEvent(method, error, {
       code: error.code,
       declineCode: error.declineCode
     }));
   }, []);
-  const showSuccess = (0, import_react12.useCallback)(async (event) => {
+  const showSuccess = (0, import_react13.useCallback)(async (event) => {
     if (!isMountedRef.current) return;
     setOverlayError(null);
     setOverlayStatus("success");
@@ -6840,7 +7568,7 @@ function FloPayAutomaticPaymentButton({
     if (!isMountedRef.current) return;
     onSuccessRef.current?.(event);
   }, []);
-  const showError = (0, import_react12.useCallback)(async (error, options) => {
+  const showError = (0, import_react13.useCallback)(async (error, options) => {
     if (!isMountedRef.current) return;
     onErrorRef.current?.(error);
     if (options?.emitDecline) {
@@ -6850,7 +7578,7 @@ function FloPayAutomaticPaymentButton({
     setOverlayStatus("error");
     await sleep2(PROCESSING_OVERLAY_ERROR_DELAY_MS);
   }, [emitDecline]);
-  const processResolvedSession = (0, import_react12.useCallback)(async (apiResult, resolvedSessionId, options) => {
+  const processResolvedSession = (0, import_react13.useCallback)(async (apiResult, resolvedSessionId, options) => {
     const session = apiResult.data.session ?? null;
     if (!session) {
       throw new import_shared11.FloPayError("No session data returned", "api_error");
@@ -6891,6 +7619,62 @@ function FloPayAutomaticPaymentButton({
         return;
       }
       if (apiResult.autoProcessingError) {
+        if (apiResult.autoProcessingError.type === "3ds_required" && apiResult.autoProcessingError.nextActionRedirectUrl && resolvedSessionId && effectiveNonce) {
+          const threeDsAbort = new AbortController();
+          threeDsAbortRef.current = threeDsAbort;
+          let outcome;
+          try {
+            outcome = await runAutoCheckoutThreeDsChallenge({
+              billingApiUrl: resolvedBillingUrl,
+              sessionId: resolvedSessionId,
+              nonce: effectiveNonce,
+              nextActionRedirectUrl: apiResult.autoProcessingError.nextActionRedirectUrl,
+              signal: threeDsAbort.signal
+            });
+          } finally {
+            if (threeDsAbortRef.current === threeDsAbort) {
+              threeDsAbortRef.current = null;
+            }
+          }
+          if (outcome.status === "declined") {
+            throw checkoutProcessErrorToFloPayError(
+              {
+                type: outcome.declineReason ?? "decline",
+                message: "Card was declined.",
+                gatewayErrorCode: outcome.gatewayDeclineReason ?? void 0
+              },
+              "Card was declined.",
+              {
+                checkoutMethod: apiResult.autoProcessingError.checkoutMethod
+              }
+            );
+          }
+          const api = new import_js7.PaymentAPI(resolvedBillingUrl);
+          const completed = await api.waitForCheckoutSessionCompletion(resolvedSessionId, {
+            initialDelayMs: 0,
+            nonce: effectiveNonce
+          });
+          const completedSession = completed.data.session;
+          if (!completedSession || completedSession.status !== "complete") {
+            throw checkoutProcessErrorToFloPayError(
+              {
+                type: "unknown",
+                message: "Card authentication was not completed."
+              },
+              "Card authentication was not completed.",
+              {
+                checkoutMethod: apiResult.autoProcessingError.checkoutMethod
+              }
+            );
+          }
+          await showSuccess({
+            result: { status: "succeeded" },
+            session: completedSession,
+            sessionId: completedSession.id || resolvedSessionId,
+            autoCompleted: false
+          });
+          return;
+        }
         throw checkoutProcessErrorToFloPayError(
           apiResult.autoProcessingError,
           "Automatic payment failed. Please try again.",
@@ -6950,7 +7734,7 @@ function FloPayAutomaticPaymentButton({
     showError,
     showSuccess
   ]);
-  const handleButtonClick = (0, import_react12.useCallback)(async (event) => {
+  const handleButtonClick = (0, import_react13.useCallback)(async (event) => {
     buttonProps.onClick?.(event);
     if (event.defaultPrevented || disabled || isProcessing) {
       return;
@@ -7032,7 +7816,7 @@ function FloPayAutomaticPaymentButton({
     showError,
     showSuccess
   ]);
-  const handleFallbackComplete = (0, import_react12.useCallback)((result) => {
+  const handleFallbackComplete = (0, import_react13.useCallback)((result) => {
     const activeFallback = fallbackSessionRef.current;
     setFallbackSession(null);
     onSuccessRef.current?.({
@@ -7042,14 +7826,14 @@ function FloPayAutomaticPaymentButton({
       autoCompleted: false
     });
   }, []);
-  const handleFallbackError = (0, import_react12.useCallback)((error) => {
+  const handleFallbackError = (0, import_react13.useCallback)((error) => {
     onErrorRef.current?.(error);
   }, []);
-  const handleFallbackDecline = (0, import_react12.useCallback)((decline) => {
+  const handleFallbackDecline = (0, import_react13.useCallback)((decline) => {
     onDeclineRef.current?.(decline);
   }, []);
-  const themeBundle = (0, import_react12.useMemo)(() => (0, import_shared11.resolveTheme)(theme), [theme]);
-  const bStyles = (0, import_react12.useMemo)(() => {
+  const themeBundle = (0, import_react13.useMemo)(() => (0, import_shared11.resolveTheme)(theme), [theme]);
+  const bStyles = (0, import_react13.useMemo)(() => {
     const base = themeBundle?.buttonsLayout ?? (0, import_shared11.resolveButtonsLayoutTheme)(buttonsTheme);
     if (!stylesOverride) return base;
     return {
@@ -7058,9 +7842,26 @@ function FloPayAutomaticPaymentButton({
       cardButton: { ...base.cardButton, ...stylesOverride.cardButton }
     };
   }, [themeBundle, buttonsTheme, stylesOverride]);
+  const resolvedAppearance = (0, import_react13.useMemo)(() => {
+    const bundleAppearance = themeBundle?.appearance;
+    if (!appearance) return bundleAppearance;
+    if (!bundleAppearance) return appearance;
+    return {
+      ...bundleAppearance,
+      ...appearance,
+      variables: {
+        ...bundleAppearance.variables,
+        ...appearance.variables
+      }
+    };
+  }, [appearance, themeBundle]);
+  const resolvedAppearanceVars = resolvedAppearance?.variables;
+  const resolvedPrimaryColor = resolvedAppearanceVars?.colorPrimary ?? "#4A49FF";
+  const resolvedPrimaryHoverColor = resolvedAppearanceVars?.colorPrimaryHover ?? darkenHex(resolvedPrimaryColor, 0.12);
+  const resolvedButtonBorderRadius = resolvedAppearanceVars?.borderRadius ?? "8px";
   const cardButtonSizing = children === void 0 ? { boxSizing: "border-box", height: DEFAULT_BUTTONS_LAYOUT_BUTTON_HEIGHT3, padding: "0 1rem" } : { padding: "0.9rem 1rem" };
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
       "button",
       {
         ...buttonProps,
@@ -7076,14 +7877,17 @@ function FloPayAutomaticPaymentButton({
           // on top so the auto-pay button carries the *submit* button's
           // background and text colours — making it visually identical to
           // the "Confirm Payment" / "Pay with X" actions it stands in for.
+          // `resolvedPrimaryColor` is the *merged* appearance value, so a
+          // per-checkout `colorPrimary` override re-skins this button too.
           // Inline `style` consumer override stays at the end so explicit
           // per-button overrides still win.
           ...bStyles.cardButton,
           ...derivePrimaryTileStyle({
             themeBundle,
-            resolvedPrimaryColor: themeBundle?.appearance.variables?.colorPrimary ?? "#4A49FF",
-            resolvedBorderRadius: themeBundle?.appearance.variables?.borderRadius ?? "8px",
-            submitButtonStyle: bStyles.submitButton
+            resolvedPrimaryColor,
+            resolvedBorderRadius: resolvedButtonBorderRadius,
+            submitButtonStyle: bStyles.submitButton,
+            explicitPrimaryColor: resolvedAppearanceVars?.colorPrimary
           }),
           fontSize: bStyles.cardButtonFontSize ?? "0.95rem",
           fontWeight: 600,
@@ -7092,11 +7896,23 @@ function FloPayAutomaticPaymentButton({
           alignItems: "center",
           justifyContent: "center",
           gap: "0.625rem",
-          transition: "border-color 0.2s, box-shadow 0.2s, transform 0.1s",
+          transition: "background-color 0.15s, border-color 0.2s, box-shadow 0.2s, transform 0.1s",
           position: "relative",
           opacity: disabled || isProcessing ? 0.6 : 1,
           ...style
         },
+        onMouseEnter: (e) => {
+          buttonProps.onMouseEnter?.(e);
+          if (!e.defaultPrevented && !disabled && !isProcessing && (themeBundle || resolvedAppearanceVars?.colorPrimary)) {
+            e.currentTarget.style.backgroundColor = resolvedPrimaryHoverColor;
+          }
+        },
+        onMouseLeave: (e) => {
+          buttonProps.onMouseLeave?.(e);
+          if (!e.defaultPrevented && (themeBundle || resolvedAppearanceVars?.colorPrimary)) {
+            e.currentTarget.style.backgroundColor = resolvedPrimaryColor;
+          }
+        },
         onMouseDown: (e) => {
           buttonProps.onMouseDown?.(e);
           if (!e.defaultPrevented) {
@@ -7109,17 +7925,17 @@ function FloPayAutomaticPaymentButton({
             e.currentTarget.style.transform = "scale(1)";
           }
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(CardButtonContentSlot, { content: children })
+        children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(CardButtonContentSlot, { content: children })
       }
     ),
-    overlayStatus && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    overlayStatus && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
       ProcessingOverlay,
       {
         status: overlayStatus,
         errorMessage: overlayError
       }
     ),
-    fallbackSession && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    fallbackSession && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
       "div",
       {
         "data-testid": "flopay-automatic-payment-fallback",
@@ -7140,7 +7956,7 @@ function FloPayAutomaticPaymentButton({
           padding: "1.5rem",
           zIndex: 1100
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
           "div",
           {
             style: {
@@ -7156,7 +7972,7 @@ function FloPayAutomaticPaymentButton({
               flexDirection: "column",
               gap: "1rem"
             },
-            children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
               FloPayCheckout,
               {
                 sessionId: fallbackSession.sessionId,
@@ -7165,6 +7981,7 @@ function FloPayAutomaticPaymentButton({
                 billingApiUrl: resolvedBillingUrl,
                 locale,
                 theme,
+                ...resolvedAppearance ? { appearance: resolvedAppearance } : {},
                 buttonsTheme,
                 buttonsStyles: stylesOverride,
                 initialErrorMessage: fallbackSession.errorMessage,
@@ -7195,6 +8012,7 @@ function FloPayAutomaticPaymentButton({
   PayPalButton,
   PaymentElement,
   SplitCardForm,
+  VaultCardFields,
   useCheckout,
   useElements,
   useFloPay,