@flopay/react 1.2.8 → 1.3.1

package/dist/index.mjs

@@ -100,7 +100,7 @@ function FloPayProvider({
 }
 
 // src/flopay-checkout.tsx
-import React7, { useCallback as useCallback2, useEffect as useEffect5, useMemo as useMemo4, useRef as useRef4, useState as useState4 } from "react";
+import React8, { useCallback as useCallback2, useEffect as useEffect6, useMemo as useMemo4, useRef as useRef5, useState as useState4 } from "react";
 import { PaymentAPI as PaymentAPI4 } from "@flopay/js";
 import { SDK_VERSION, FloPayError as FloPayError5, resolveBillingApiUrl as resolveBillingApiUrl3, buildCheckoutDisplayData, resolveButtonsLayoutTheme as resolveButtonsLayoutTheme2, resolveTheme as resolveTheme2 } from "@flopay/shared";
 
@@ -248,9 +248,10 @@ import {
   resolveAVSConfig,
   isAVSFieldVisible,
   getStateFromPostalCode,
-  filterStripeMethodsByCurrency,
+  isPostalCodeSupported,
+  isValidPostalCode,
+  getPostalCodeExample,
   filterStripeMethodsByCountry,
-  filterStripeMethodsByAmount,
   getStripeMethodDisplayName,
   hasVendoredStripeMethodLogo,
   needsStripeMethodExplicitConfirm,
@@ -259,7 +260,80 @@ import {
   stripeExpressMethodToOptionKey
 } from "@flopay/shared";
 import { PaymentAPI as PaymentAPI2 } from "@flopay/js";
-import React6, { forwardRef, useCallback, useContext as useContext3, useEffect as useEffect4, useImperativeHandle, useMemo as useMemo3, useRef as useRef3, useState as useState3 } from "react";
+
+// src/vault-card-fields.tsx
+import { useEffect as useEffect3, useRef as useRef2 } from "react";
+import { jsx as jsx4 } from "react/jsx-runtime";
+function VaultCardFields({
+  capture,
+  html,
+  messageToken,
+  expectedOrigin,
+  theme,
+  containerStyle,
+  onReady,
+  onError,
+  onValidation
+}) {
+  const containerRef = useRef2(null);
+  const onReadyRef = useRef2(onReady);
+  const onErrorRef = useRef2(onError);
+  const onValidationRef = useRef2(onValidation);
+  onReadyRef.current = onReady;
+  onErrorRef.current = onError;
+  onValidationRef.current = onValidation;
+  const themeRef = useRef2(theme);
+  themeRef.current = theme;
+  useEffect3(() => {
+    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]);
+  useEffect3(() => {
+    if (theme) capture.applyTheme?.(theme);
+  }, [capture, theme]);
+  return /* @__PURE__ */ jsx4("div", { ref: containerRef, "data-testid": "flopay-vault-card-fields", style: containerStyle });
+}
+
+// src/split-card-form.tsx
+import React7, { forwardRef, useCallback, useContext as useContext3, useEffect as useEffect5, useImperativeHandle, useMemo as useMemo3, useRef as useRef4, useState as useState3 } from "react";
 
 // src/hooks.ts
 import { useContext as useContext2 } from "react";
@@ -286,14 +360,14 @@ function useBillingApiUrl() {
 
 // src/processing-overlay.tsx
 import "react";
-import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
 var PROCESSING_OVERLAY_SUCCESS_DELAY_MS = 1200;
 var PROCESSING_OVERLAY_ERROR_DELAY_MS = 1500;
 function ProcessingOverlay({
   status,
   errorMessage
 }) {
-  return /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsx5(
     "div",
     {
       "data-testid": "flopay-processing-overlay",
@@ -337,14 +411,14 @@ function ProcessingOverlay({
                   xmlns: "http://www.w3.org/2000/svg",
                   style: { animation: "flopay-spin 0.8s linear infinite" },
                   children: [
-                    /* @__PURE__ */ jsx4("circle", { cx: "12", cy: "12", r: "10", stroke: "#e5e7eb", strokeWidth: "3" }),
-                    /* @__PURE__ */ jsx4("path", { d: "M4 12a8 8 0 018-8v3a5 5 0 00-5 5H4z", fill: "#4A49FF" })
+                    /* @__PURE__ */ jsx5("circle", { cx: "12", cy: "12", r: "10", stroke: "#e5e7eb", strokeWidth: "3" }),
+                    /* @__PURE__ */ jsx5("path", { d: "M4 12a8 8 0 018-8v3a5 5 0 00-5 5H4z", fill: "#4A49FF" })
                   ]
                 }
               ),
-              status === "success" && /* @__PURE__ */ jsx4("div", { style: { animation: "flopay-pop 0.4s cubic-bezier(0.34,1.56,0.64,1)" }, children: /* @__PURE__ */ jsxs2("svg", { width: "48", height: "48", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
-                /* @__PURE__ */ jsx4("circle", { cx: "12", cy: "12", r: "11", fill: "#22c55e" }),
-                /* @__PURE__ */ jsx4(
+              status === "success" && /* @__PURE__ */ jsx5("div", { style: { animation: "flopay-pop 0.4s cubic-bezier(0.34,1.56,0.64,1)" }, children: /* @__PURE__ */ jsxs2("svg", { width: "48", height: "48", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+                /* @__PURE__ */ jsx5("circle", { cx: "12", cy: "12", r: "11", fill: "#22c55e" }),
+                /* @__PURE__ */ jsx5(
                   "path",
                   {
                     d: "M7 12.5l3 3 7-7",
@@ -360,9 +434,9 @@ function ProcessingOverlay({
                   }
                 )
               ] }) }),
-              status === "error" && /* @__PURE__ */ jsx4("div", { style: { animation: "flopay-shake 0.4s ease" }, children: /* @__PURE__ */ jsxs2("svg", { width: "48", height: "48", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
-                /* @__PURE__ */ jsx4("circle", { cx: "12", cy: "12", r: "11", fill: "#ef4444" }),
-                /* @__PURE__ */ jsx4(
+              status === "error" && /* @__PURE__ */ jsx5("div", { style: { animation: "flopay-shake 0.4s ease" }, children: /* @__PURE__ */ jsxs2("svg", { width: "48", height: "48", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+                /* @__PURE__ */ jsx5("circle", { cx: "12", cy: "12", r: "11", fill: "#ef4444" }),
+                /* @__PURE__ */ jsx5(
                   "path",
                   {
                     d: "M8 8l8 8M16 8l-8 8",
@@ -394,7 +468,7 @@ function ProcessingOverlay({
                 ]
               }
             ),
-            status === "success" && /* @__PURE__ */ jsx4(
+            status === "success" && /* @__PURE__ */ jsx5(
               "p",
               {
                 style: {
@@ -408,7 +482,7 @@ function ProcessingOverlay({
                 children: "You will be automatically redirected, do not close or navigate away from this window."
               }
             ),
-            status === "error" && errorMessage && /* @__PURE__ */ jsx4(
+            status === "error" && errorMessage && /* @__PURE__ */ jsx5(
               "p",
               {
                 style: {
@@ -422,7 +496,7 @@ function ProcessingOverlay({
                 children: errorMessage
               }
             ),
-            /* @__PURE__ */ jsx4("style", { children: `
+            /* @__PURE__ */ jsx5("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; } }
@@ -696,11 +770,11 @@ function isInAppBrowser(userAgent) {
 }
 
 // src/direct-paypal-button.tsx
-import { useEffect as useEffect3, useMemo as useMemo2, useRef as useRef2, useState as useState2 } from "react";
+import { useEffect as useEffect4, useMemo as useMemo2, useRef as useRef3, useState as useState2 } from "react";
 import { loadScript } from "@paypal/paypal-js";
 import { PaymentAPI } from "@flopay/js";
 import { FloPayError as FloPayError2, normalizeGatewayEnvironment } from "@flopay/shared";
-import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
 var DEFAULT_BUTTON_HEIGHT = 45;
 function DirectPayPalButton({
   sessionId,
@@ -723,7 +797,7 @@ function DirectPayPalButton({
   existingOrderId,
   debug = false
 }) {
-  const containerRef = useRef2(null);
+  const containerRef = useRef3(null);
   const [ready, setReady] = useState2(false);
   const [failed, setFailed] = useState2(false);
   const [submitting, setSubmitting] = useState2(false);
@@ -733,52 +807,52 @@ function DirectPayPalButton({
     if (!debug) return;
     setDebugLines((prev) => [...prev, `${(/* @__PURE__ */ new Date()).toISOString().slice(11, 23)} ${line}`]);
   };
-  const onTokenizedBodyRef = useRef2(onTokenizedBody);
-  const onCompleteRef = useRef2(onComplete);
-  const onErrorChangeRef = useRef2(onErrorChange);
-  const onDeclineRef = useRef2(onDecline);
-  const onButtonClickRef = useRef2(onButtonClick);
-  const onLoadStateChangeRef = useRef2(onLoadStateChange);
-  const runBeforeButtonClickRef = useRef2(runBeforeButtonClick);
-  const sessionRef = useRef2(session);
-  const emailRef = useRef2(email);
-  const nonceRef = useRef2(nonce);
-  const beforeClickRef = useRef2(null);
-  useEffect3(() => {
+  const onTokenizedBodyRef = useRef3(onTokenizedBody);
+  const onCompleteRef = useRef3(onComplete);
+  const onErrorChangeRef = useRef3(onErrorChange);
+  const onDeclineRef = useRef3(onDecline);
+  const onButtonClickRef = useRef3(onButtonClick);
+  const onLoadStateChangeRef = useRef3(onLoadStateChange);
+  const runBeforeButtonClickRef = useRef3(runBeforeButtonClick);
+  const sessionRef = useRef3(session);
+  const emailRef = useRef3(email);
+  const nonceRef = useRef3(nonce);
+  const beforeClickRef = useRef3(null);
+  useEffect4(() => {
     onTokenizedBodyRef.current = onTokenizedBody;
   }, [onTokenizedBody]);
-  useEffect3(() => {
+  useEffect4(() => {
     onCompleteRef.current = onComplete;
   }, [onComplete]);
-  useEffect3(() => {
+  useEffect4(() => {
     onErrorChangeRef.current = onErrorChange;
   }, [onErrorChange]);
-  useEffect3(() => {
+  useEffect4(() => {
     onDeclineRef.current = onDecline;
   }, [onDecline]);
-  useEffect3(() => {
+  useEffect4(() => {
     onButtonClickRef.current = onButtonClick;
   }, [onButtonClick]);
-  useEffect3(() => {
+  useEffect4(() => {
     onLoadStateChangeRef.current = onLoadStateChange;
   }, [onLoadStateChange]);
-  useEffect3(() => {
+  useEffect4(() => {
     runBeforeButtonClickRef.current = runBeforeButtonClick;
   }, [runBeforeButtonClick]);
-  useEffect3(() => {
+  useEffect4(() => {
     sessionRef.current = session;
   }, [session]);
-  useEffect3(() => {
+  useEffect4(() => {
     emailRef.current = email;
   }, [email]);
-  useEffect3(() => {
+  useEffect4(() => {
     nonceRef.current = nonce;
   }, [nonce]);
-  useEffect3(() => {
+  useEffect4(() => {
     onLoadStateChangeRef.current?.(ready && !failed);
   }, [ready, failed]);
   const normalizedEnv = normalizeGatewayEnvironment(environment);
-  useEffect3(() => {
+  useEffect4(() => {
     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}`);
@@ -1215,7 +1289,7 @@ ${debugLines.join("\n")}`
     }
   ) : null;
   if (failed) {
-    return debug ? /* @__PURE__ */ jsx5("div", { children: debugPanel }) : null;
+    return debug ? /* @__PURE__ */ jsx6("div", { children: debugPanel }) : null;
   }
   return (
     // Single wrapper so the parent flex container sees exactly one flex item
@@ -1225,7 +1299,7 @@ ${debugLines.join("\n")}`
     /* @__PURE__ */ jsxs3("div", { children: [
       debugPanel,
       /* @__PURE__ */ jsxs3("div", { style: { position: "relative", minHeight: DEFAULT_BUTTON_HEIGHT }, children: [
-        !ready && /* @__PURE__ */ jsx5(
+        !ready && /* @__PURE__ */ jsx6(
           "div",
           {
             "data-testid": "flopay-direct-paypal-placeholder",
@@ -1239,7 +1313,7 @@ ${debugLines.join("\n")}`
             }
           }
         ),
-        /* @__PURE__ */ jsx5(
+        /* @__PURE__ */ jsx6(
           "div",
           {
             ref: containerRef,
@@ -1259,10 +1333,28 @@ ${debugLines.join("\n")}`
 
 // src/split-card-form.tsx
 import { FloPayError as FloPayError3, isSetupIntentClientSecret as isSetupIntentClientSecret2, resolveTheme } from "@flopay/shared";
-import { Fragment as Fragment2, jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
 var STRIPE_RESUME_KEY = "flopay_stripe_resume";
 var LEGACY_WALLET_RESUME_KEY = "flopay_wallet_resume";
 var PAYPAL_RESUME_KEY = "flopay_paypal_resume";
+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); } }
@@ -1287,18 +1379,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,
@@ -1325,6 +1419,18 @@ function getButtonMethodLabel(method) {
       return "Card";
   }
 }
+function malformedPostcodeMessage(country) {
+  const example = getPostalCodeExample(country);
+  return `Enter a valid ${getPostalCodeLabel(country)}${example ? ` (e.g. ${example})` : ""}`;
+}
+function computePostalCodeState(country, zip, visible) {
+  const supported = isPostalCodeSupported(country);
+  const trimmed = zip.trim();
+  const required = visible && supported;
+  const empty = required && !trimmed;
+  const malformed = required && !!trimmed && !isValidPostalCode(country, trimmed);
+  return { visible, supported, required, empty, malformed };
+}
 function normalizeBeforeButtonClickError(method, err) {
   return err instanceof FloPayError3 ? err : new FloPayError3(
     err instanceof Error ? err.message : `${getButtonMethodLabel(method)} before-click hook failed.`,
@@ -1332,7 +1438,7 @@ function normalizeBeforeButtonClickError(method, err) {
   );
 }
 function FloPayKeyframes() {
-  return /* @__PURE__ */ jsx6("style", { children: FLOPAY_KEYFRAMES });
+  return /* @__PURE__ */ jsx7("style", { children: FLOPAY_KEYFRAMES });
 }
 function toCssSize(value) {
   if (typeof value === "number") return `${value}px`;
@@ -1355,7 +1461,7 @@ function ExpressCheckoutReadySwap({
 }) {
   if (state === "unavailable" || state === "load_error") return null;
   return /* @__PURE__ */ jsxs4("div", { style: { position: "relative", minHeight: 44 }, children: [
-    /* @__PURE__ */ jsx6(
+    /* @__PURE__ */ jsx7(
       "div",
       {
         "data-testid": placeholderTestId,
@@ -1374,7 +1480,7 @@ function ExpressCheckoutReadySwap({
         }
       }
     ),
-    /* @__PURE__ */ jsx6(
+    /* @__PURE__ */ jsx7(
       "div",
       {
         style: {
@@ -1394,7 +1500,7 @@ function isExpressCheckoutRowVisible(state) {
 }
 var SplitCardForm = forwardRef(
   function SplitCardForm2(props, ref) {
-    return /* @__PURE__ */ jsx6(SplitCardFormInner, { ...props, innerRef: ref });
+    return /* @__PURE__ */ jsx7(SplitCardFormInner, { ...props, innerRef: ref });
   }
 );
 function PayPalButtonInner({
@@ -1414,14 +1520,14 @@ function PayPalButtonInner({
   const stripe = useStripeRaw();
   const elements = useStripeElements();
   const [loadState, setLoadState] = useState3("loading");
-  useEffect4(() => {
+  useEffect5(() => {
     onLoadStateChange?.(loadState);
   }, [loadState, onLoadStateChange]);
   const [submitting, setSubmitting] = useState3(false);
-  const paypalResumeAttempted = useRef3(false);
-  const beforeClickRef = useRef3(null);
+  const paypalResumeAttempted = useRef4(false);
+  const beforeClickRef = useRef4(null);
   const baseUrl = billingApiUrl.replace(/\/+$/, "");
-  useEffect4(() => {
+  useEffect5(() => {
     if (!stripe || paypalResumeAttempted.current) return;
     const params = new URLSearchParams(window.location.search);
     const paymentIntentId = params.get("payment_intent");
@@ -1627,13 +1733,13 @@ function PayPalButtonInner({
     }
   }, [stripe, elements, sessionId, nonce, email, baseUrl, onTokenizedBody, onErrorChange, onDecline, runBeforeButtonClick]);
   return /* @__PURE__ */ jsxs4(Fragment2, { children: [
-    /* @__PURE__ */ jsx6(
+    /* @__PURE__ */ jsx7(
       ExpressCheckoutReadySwap,
       {
         state: loadState,
         placeholderTestId: "flopay-paypal-placeholder",
         borderRadius: placeholderBorderRadius,
-        children: /* @__PURE__ */ jsx6(
+        children: /* @__PURE__ */ jsx7(
           ExpressCheckoutElement,
           {
             onReady: (event) => setLoadState(resolveExpressCheckoutLoadState(event, ["paypal"])),
@@ -1660,7 +1766,7 @@ function PayPalButtonInner({
         )
       }
     ),
-    submitting && /* @__PURE__ */ jsx6(ProcessingOverlay, { status: "processing" })
+    submitting && /* @__PURE__ */ jsx7(ProcessingOverlay, { status: "processing" })
   ] });
 }
 function WalletButtonInner({
@@ -1680,13 +1786,13 @@ function WalletButtonInner({
   const stripe = useStripeRaw();
   const elements = useStripeElements();
   const [loadState, setLoadState] = useState3("loading");
-  useEffect4(() => {
+  useEffect5(() => {
     onLoadStateChange?.(loadState);
   }, [loadState, onLoadStateChange]);
   const [submitting, setSubmitting] = useState3(false);
   const baseUrl = billingApiUrl.replace(/\/+$/, "");
-  const lastWalletMethodRef = useRef3("card");
-  const beforeClickRef = useRef3(null);
+  const lastWalletMethodRef = useRef4("card");
+  const beforeClickRef = useRef4(null);
   const handleWalletConfirm = useCallback(
     async (event) => {
       if (!stripe || !elements) return;
@@ -1796,13 +1902,13 @@ function WalletButtonInner({
     [expressMethods]
   );
   return /* @__PURE__ */ jsxs4(Fragment2, { children: [
-    /* @__PURE__ */ jsx6(
+    /* @__PURE__ */ jsx7(
       ExpressCheckoutReadySwap,
       {
         state: loadState,
         placeholderTestId: "flopay-wallet-placeholder",
         borderRadius: placeholderBorderRadius,
-        children: /* @__PURE__ */ jsx6(
+        children: /* @__PURE__ */ jsx7(
           ExpressCheckoutElement,
           {
             onReady: (event) => {
@@ -1841,7 +1947,7 @@ function WalletButtonInner({
         )
       }
     ),
-    submitting && /* @__PURE__ */ jsx6(ProcessingOverlay, { status: "processing" })
+    submitting && /* @__PURE__ */ jsx7(ProcessingOverlay, { status: "processing" })
   ] });
 }
 function StripeMethodButton({
@@ -1862,7 +1968,7 @@ function StripeMethodButton({
   const resolvedBackground = brand?.backgroundColor ?? backgroundColor ?? "#ffffff";
   const resolvedBorder = brand?.borderColor ?? borderColor ?? "#d1d5db";
   const resolvedTextColor = brand?.textColor ?? textColor ?? "#262833";
-  return /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsx7(
     "button",
     {
       type: "button",
@@ -1909,7 +2015,7 @@ 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__ */ jsx6("span", { style: { margin: "0 auto" }, children: `Connecting to ${getStripeMethodDisplayName(method)}\u2026` })
+        /* @__PURE__ */ jsx7("span", { style: { margin: "0 auto" }, children: `Connecting to ${getStripeMethodDisplayName(method)}\u2026` })
       ) : /* @__PURE__ */ jsxs4(Fragment2, { children: [
         /* @__PURE__ */ jsxs4(
           "span",
@@ -1924,7 +2030,7 @@ function StripeMethodButton({
               gap: hasVendoredStripeMethodLogo(method) ? 8 : 0
             },
             children: [
-              brand?.logoSvg && /* @__PURE__ */ jsx6(
+              brand?.logoSvg && /* @__PURE__ */ jsx7(
                 "span",
                 {
                   "aria-hidden": "true",
@@ -1943,11 +2049,11 @@ function StripeMethodButton({
                   dangerouslySetInnerHTML: { __html: brand.logoSvg }
                 }
               ),
-              /* @__PURE__ */ jsx6("span", { children: getStripeMethodDisplayName(method) })
+              /* @__PURE__ */ jsx7("span", { children: getStripeMethodDisplayName(method) })
             ]
           }
         ),
-        hasNextStep && /* @__PURE__ */ jsx6(
+        hasNextStep && /* @__PURE__ */ jsx7(
           "svg",
           {
             width: "14",
@@ -1967,7 +2073,7 @@ function StripeMethodButton({
               opacity: 0.7
             },
             "aria-hidden": "true",
-            children: /* @__PURE__ */ jsx6("path", { d: "M9 18l6-6-6-6" })
+            children: /* @__PURE__ */ jsx7("path", { d: "M9 18l6-6-6-6" })
           }
         )
       ] })
@@ -1990,12 +2096,13 @@ function StripeMethodInlineForm({
   isProcessing,
   submitButtonColor,
   submitButtonBorderRadius,
-  submitButtonStyle
+  submitButtonStyle,
+  errorText
 }) {
   const stripe = useStripeRaw();
   const elements = useStripeElements();
   const [submitting, setSubmitting] = useState3(false);
-  const submittingRef = useRef3(false);
+  const submittingRef = useRef4(false);
   const [isMethodComplete, setIsMethodComplete] = useState3(false);
   const [loadState, setLoadState] = useState3("loading");
   const baseUrl = billingApiUrl.replace(/\/+$/, "");
@@ -2140,7 +2247,7 @@ function StripeMethodInlineForm({
   ]);
   void onCancel;
   return /* @__PURE__ */ jsxs4("div", { "data-testid": `flopay-stripe-method-form-${method}`, style: { display: "flex", flexDirection: "column" }, children: [
-    /* @__PURE__ */ jsx6(
+    /* @__PURE__ */ jsx7(
       PaymentElement2,
       {
         onReady: () => setLoadState("ready"),
@@ -2160,7 +2267,7 @@ function StripeMethodInlineForm({
         }
       }
     ),
-    /* @__PURE__ */ jsx6(
+    /* @__PURE__ */ jsx7(
       "button",
       {
         type: "button",
@@ -2186,7 +2293,23 @@ function StripeMethodInlineForm({
         },
         children: submitting ? "Processing\u2026" : `Pay with ${getStripeMethodDisplayName(method)}`
       }
-    )
+    ),
+    errorText && /* @__PURE__ */ jsxs4("div", { role: "alert", "data-testid": "flopay-error", style: {
+      margin: "0.75rem 0 0",
+      padding: "0.625rem 0.875rem",
+      background: "#FEF2F2",
+      border: "1px solid #FECACA",
+      borderRadius: "8px",
+      color: "#991B1B",
+      fontSize: "0.85rem",
+      fontWeight: 600,
+      display: "flex",
+      alignItems: "center",
+      gap: "0.5rem"
+    }, children: [
+      /* @__PURE__ */ jsx7("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", style: { flexShrink: 0 }, children: /* @__PURE__ */ jsx7("path", { d: "M12 9v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z", stroke: "#DC2626", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }),
+      errorText
+    ] })
   ] });
 }
 function StripePaymentElementInner({
@@ -2216,8 +2339,8 @@ function StripePaymentElementInner({
   const baseUrl = billingApiUrl.replace(/\/+$/, "");
   const [expandedMethod, setExpandedMethod] = useState3(null);
   const [submittingMethod, setSubmittingMethod] = useState3(null);
-  const submittingRef = useRef3(false);
-  useEffect4(() => {
+  const submittingRef = useRef4(false);
+  useEffect5(() => {
     if (paymentElementMethods.length > 0 && stripeInstance) {
       onLoadStateChange?.("ready");
     } else if (!stripeInstance) {
@@ -2385,7 +2508,7 @@ function StripePaymentElementInner({
       paymentMethodTypes: [localExpandedMethod]
     };
   }, [localExpandedMethod, paymentElementBaseOptions]);
-  return /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsx7(
     "div",
     {
       "data-testid": "flopay-stripe-payment-element-region",
@@ -2394,8 +2517,8 @@ function StripePaymentElementInner({
         const isExpanded = expandedApmMethod === method;
         const isSubmittingThis = submittingMethod === method;
         const otherInProgress = submittingMethod !== null && submittingMethod !== method || expandedApmMethod !== null && expandedApmMethod !== void 0 && expandedApmMethod !== method;
-        return /* @__PURE__ */ jsxs4(React6.Fragment, { children: [
-          /* @__PURE__ */ jsx6(
+        return /* @__PURE__ */ jsxs4(React7.Fragment, { children: [
+          /* @__PURE__ */ jsx7(
             StripeMethodButton,
             {
               method,
@@ -2412,12 +2535,12 @@ function StripePaymentElementInner({
               fontFamily: buttonAppearance?.fontFamily
             }
           ),
-          !onExpandApm && localExpandedMethod === method && localInlineElementsOptions && stripeInstance && /* @__PURE__ */ jsx6(
+          !onExpandApm && localExpandedMethod === method && localInlineElementsOptions && stripeInstance && /* @__PURE__ */ jsx7(
             StripeElements,
             {
               stripe: stripeInstance,
               options: localInlineElementsOptions,
-              children: /* @__PURE__ */ jsx6(
+              children: /* @__PURE__ */ jsx7(
                 StripeMethodInlineForm,
                 {
                   method,
@@ -2470,6 +2593,7 @@ function SplitCardFormInner({
   showPayPal = true,
   showStripe = true,
   enabledPaymentMethods,
+  enabledPaymentMethodCountries,
   showApplePay = true,
   showGooglePay = true,
   layout = "default",
@@ -2484,6 +2608,8 @@ function SplitCardFormInner({
   onButtonClick,
   onBeforeButtonClick,
   enableAVS: enableAVSProp,
+  cardFieldOrder,
+  cardPreFormSlot,
   avsLayout: avsLayoutProp = "row",
   country: countryProp,
   zip: zipProp,
@@ -2520,14 +2646,49 @@ function SplitCardFormInner({
   const [city, setCity] = useState3(cityProp ?? "");
   const [stateValue, setStateValue] = useState3(stateProp ?? "");
   const [accountPatch, setAccountPatch] = useState3({});
-  const zipCodeRef = useRef3(zipProp ?? "");
-  const selectedCountryRef = useRef3(countryProp ?? "US");
-  const addressLine1Ref = useRef3(addressLine1Prop ?? "");
-  const addressLine2Ref = useRef3(addressLine2Prop ?? "");
-  const cityRef = useRef3(cityProp ?? "");
-  const stateRef = useRef3(stateProp ?? "");
+  const zipCodeRef = useRef4(zipProp ?? "");
+  const selectedCountryRef = useRef4(countryProp ?? "US");
+  const addressLine1Ref = useRef4(addressLine1Prop ?? "");
+  const addressLine2Ref = useRef4(addressLine2Prop ?? "");
+  const cityRef = useRef4(cityProp ?? "");
+  const stateRef = useRef4(stateProp ?? "");
   const avsConfig = useMemo3(() => resolveAVSConfig(enableAVSProp), [enableAVSProp]);
   const enableAVS = avsConfig !== null;
+  const vaultBlockReady = Boolean(session?.vault?.html);
+  const vaultGatewayAdvertised = Boolean(session?.gateways?.pcivault);
+  const vaultActive = Boolean(
+    showStripe && (vaultBlockReady || vaultGatewayAdvertised) && flopay && sessionId
+  );
+  const cardCapture = useMemo3(() => {
+    if (!flopay || !vaultActive || !sessionId) return null;
+    return flopay.cardCapture({ sessionId });
+  }, [flopay, vaultActive, sessionId]);
+  const postalCodeState = useMemo3(() => {
+    const cc = selectedCountry;
+    const visible = avsConfig ? isAVSFieldVisible(avsConfig.postal_code, cc) : false;
+    return computePostalCodeState(cc, zipCode, visible);
+  }, [avsConfig, selectedCountry, zipCode]);
+  const { avsInvalid, invalidAvsFields } = useMemo3(() => {
+    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) => 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] = useState3(false);
+  const [zipTouched, setZipTouched] = useState3(false);
+  const [vaultMount, setVaultMount] = useState3(
+    () => toVaultMount(session?.vault)
+  );
   const [viewState, setViewState] = useState3(initialCardOpen ? "card" : "buttons");
   const [expandedApmMethod, setExpandedApmMethod] = useState3(null);
   const showCardForm = viewState === "expanding" || viewState === "card";
@@ -2552,7 +2713,7 @@ function SplitCardFormInner({
       setExpandedApmMethod(null);
     }, TRANSITION_MS);
   }, []);
-  useEffect4(() => {
+  useEffect5(() => {
     if (layout === "buttons" && initialCardOpen) {
       setViewState("card");
     }
@@ -2560,10 +2721,10 @@ function SplitCardFormInner({
   const [fullName, setFullName] = useState3("");
   const [formReady, setFormReady] = useState3(false);
   const [overlayStatus, setOverlayStatus] = useState3(null);
-  const processingRef = useRef3(false);
+  const processingRef = useRef4(false);
   const [paypalDirectRetry, setPaypalDirectRetry] = useState3(null);
-  const paypalDirectRetryRef = useRef3(paypalDirectRetry);
-  useEffect4(() => {
+  const paypalDirectRetryRef = useRef4(paypalDirectRetry);
+  useEffect5(() => {
     paypalDirectRetryRef.current = paypalDirectRetry;
   }, [paypalDirectRetry]);
   const resolvedBillingApiUrl = billingApiUrl || contextBillingUrl;
@@ -2584,6 +2745,31 @@ function SplitCardFormInner({
     };
   }, [themeBundle, buttonsTheme, buttonsStylesOverride]);
   const appearance = appearanceOverride ?? themeBundle?.appearance;
+  const vaultThemeColors = useMemo3(() => {
+    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;
@@ -2652,12 +2838,174 @@ function SplitCardFormInner({
     },
     [onErrorChange]
   );
+  useEffect5(() => {
+    if (!vaultActive || !cardCapture) return;
+    cardCapture.setSubmitGate?.(avsInvalid);
+  }, [vaultActive, cardCapture, avsInvalid]);
+  useEffect5(() => {
+    if (!vaultActive || !cardCapture) return;
+    cardCapture.setCardFieldOrder?.(cardFieldOrder ?? null, avsConfig == null);
+  }, [vaultActive, cardCapture, cardFieldOrder, avsConfig]);
+  useEffect5(() => {
+    if (viewState === "expanding" || viewState === "collapsing" || viewState === "apm-expanding" || viewState === "apm-collapsing") {
+      updateError(null);
+    }
+  }, [viewState, updateError]);
   const emitDecline = useCallback(
     (method, input, overrides) => {
       onDecline?.(buildDeclineEvent(method, input, overrides));
     },
     [onDecline]
   );
+  useEffect5(() => {
+    if (!vaultActive || !sessionId) {
+      setVaultMount(null);
+      return;
+    }
+    const embedded = toVaultMount(session?.vault);
+    if (embedded) {
+      setVaultMount(embedded);
+      return;
+    }
+    setVaultMount(null);
+    let active = true;
+    new PaymentAPI2(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 = useRef4({
+    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 = useRef4(false);
+  useEffect5(() => {
+    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 ? isAVSFieldVisible(avsConfig2.state, cc) : false;
+      const line1Visible = avsConfig2 ? isAVSFieldVisible(avsConfig2.address_line_1, cc) : false;
+      const zipVisible = avsConfig2 ? isAVSFieldVisible(avsConfig2.postal_code, cc) : false;
+      const cityVisible = avsConfig2 ? isAVSFieldVisible(avsConfig2.city, cc) : false;
+      const line2Visible = avsConfig2 ? isAVSFieldVisible(avsConfig2.address_line_2, cc) : false;
+      const derivedState = line1Visible && !stateVisible && zipVisible ? getStateFromPostalCode(cc, zipCodeRef.current ?? "") : null;
+      const stateValue2 = stateVisible ? stateRef.current : derivedState;
+      void new PaymentAPI2(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: 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 FloPayError3(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;
@@ -2681,17 +3029,18 @@ function SplitCardFormInner({
   }, [showApplePay, showGooglePay]);
   const walletExpressMethods = hasEnabledMethodsPayload ? expressMethodsForWalletRow : legacyExpressMethods;
   const showWallets = showStripe && walletExpressMethods.length > 0;
-  const paymentElementMethodsForCurrency = useMemo3(
-    () => filterStripeMethodsByAmount(
-      filterStripeMethodsByCountry(
-        filterStripeMethodsByCurrency(paymentElementMethods, currency),
-        countryProp
-      ),
-      currency,
-      amountInCents
-    ),
-    [paymentElementMethods, currency, countryProp, amountInCents]
-  );
+  const apmCountry = enableAVS ? selectedCountry : countryProp;
+  const paymentElementMethodsForCurrency = useMemo3(() => {
+    const target = apmCountry?.trim().toUpperCase();
+    if (!target) return paymentElementMethods;
+    if (!enabledPaymentMethodCountries) {
+      return filterStripeMethodsByCountry(paymentElementMethods, apmCountry);
+    }
+    return paymentElementMethods.filter((method) => {
+      const allowed = enabledPaymentMethodCountries[method];
+      return !allowed || allowed.length === 0 || allowed.includes(target);
+    });
+  }, [paymentElementMethods, apmCountry, enabledPaymentMethodCountries]);
   const paymentElementBaseOptions = useMemo3(() => ({
     mode: "payment",
     amount: amountInCents,
@@ -2704,7 +3053,7 @@ function SplitCardFormInner({
   const [paymentElementLoadState, setPaymentElementLoadState] = useState3("loading");
   const [directPaypalReady, setDirectPaypalReady] = useState3(false);
   const [inAppBrowserDetected, setInAppBrowserDetected] = useState3();
-  useEffect4(() => {
+  useEffect5(() => {
     setInAppBrowserDetected(isInAppBrowser());
   }, []);
   const shouldShowPayPal = showPayPal && (directPaypalConfigured || (hasEnabledMethodsPayload ? paypalEnabled : inAppBrowserDetected === false));
@@ -2716,8 +3065,8 @@ function SplitCardFormInner({
   const shouldDisplayPayPalRow = shouldRenderDirectPayPal ? directPaypalReady : shouldRenderStripePayPal && isExpressCheckoutRowVisible(paypalLoadState);
   const shouldDisplayWalletRow = shouldRenderWallets && isExpressCheckoutRowVisible(walletLoadState);
   const shouldDisplayPaymentElementRow = shouldRenderPaymentElement && paymentElementLoadState !== "load_error";
-  const validationFiredRef = useRef3(false);
-  useEffect4(() => {
+  const validationFiredRef = useRef4(false);
+  useEffect5(() => {
     if (validationFiredRef.current) return;
     if (!showStripe && !showPayPal) {
       validationFiredRef.current = true;
@@ -2737,8 +3086,8 @@ function SplitCardFormInner({
       updateError(err.message);
     }
   }, [showStripe, showPayPal, directPaypalConfigured, paypalStripeInstance, onError, updateError]);
-  const deprecationLoggedRef = useRef3(false);
-  useEffect4(() => {
+  const deprecationLoggedRef = useRef4(false);
+  useEffect5(() => {
     if (deprecationLoggedRef.current) return;
     if (!hasEnabledMethods) return;
     const stale = [];
@@ -3064,8 +3413,8 @@ function SplitCardFormInner({
       }
     }
   }), [flopay, dispatchTokenizedBody, onError, updateError, emitDecline]);
-  const stripeResumeAttemptedRef = useRef3(false);
-  useEffect4(() => {
+  const stripeResumeAttemptedRef = useRef4(false);
+  useEffect5(() => {
     if (typeof window === "undefined" || stripeResumeAttemptedRef.current) return;
     const params = new URLSearchParams(window.location.search);
     const paymentIntentId = params.get("payment_intent");
@@ -3147,6 +3496,7 @@ function SplitCardFormInner({
     async (e) => {
       e.preventDefault();
       if (!flopay || !elements || isSubmitting || processingRef.current) return;
+      if (vaultActive) return;
       if (layout !== "buttons") {
         onButtonClick?.("card");
       }
@@ -3157,10 +3507,21 @@ function SplitCardFormInner({
       try {
         if (avsConfig) {
           const country = selectedCountryRef.current;
-          if (isAVSFieldVisible(avsConfig.postal_code, country) && !zipCodeRef.current.trim()) {
+          const postal = computePostalCodeState(
+            country,
+            zipCodeRef.current,
+            isAVSFieldVisible(avsConfig.postal_code, country)
+          );
+          if (postal.empty) {
+            setZipTouched(true);
             updateError(getPostalCodeLabel(country) + " is required");
             return;
           }
+          if (postal.malformed) {
+            setZipTouched(true);
+            updateError(malformedPostcodeMessage(country));
+            return;
+          }
           if (isAVSFieldVisible(avsConfig.address_line_1, country) && !addressLine1Ref.current.trim()) {
             updateError("Street address is required");
             return;
@@ -3174,11 +3535,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;
@@ -3203,75 +3566,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 FloPayError3("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 FloPayError3("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 FloPayError3("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 FloPayError3("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 FloPayError3("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");
@@ -3283,11 +3648,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__ */ jsx6("div", { "data-testid": "flopay-loading", "aria-busy": "true", children: "Loading payment form..." });
+    return /* @__PURE__ */ jsx7("div", { "data-testid": "flopay-loading", "aria-busy": "true", children: "Loading payment form..." });
   }
   const isButtons = layout === "buttons";
   const appearanceVars = appearance?.variables;
@@ -3295,6 +3660,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);
@@ -3306,7 +3675,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,
@@ -3340,14 +3711,73 @@ function SplitCardFormInner({
   const containerOverrides = bStyles.cardFormContainer ?? {};
   const containerPadding = containerOverrides.padding ?? (isButtons ? "0" : "1rem");
   const containerRadius = containerOverrides.borderRadius ?? resolvedBorderRadius;
+  const vaultCardFieldsNode = cardCapture && vaultMount ? /* @__PURE__ */ jsx7(
+    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__ */ jsx7(
+    "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__ */ jsxs4("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__ */ jsx6("style", { children: `
+    /* @__PURE__ */ jsx7("style", { children: `
         .flopay-shared-input::placeholder {
           color: var(--flopay-input-placeholder-color);
           opacity: 1;
@@ -3359,7 +3789,9 @@ function SplitCardFormInner({
     isButtons && showCardForm && /* @__PURE__ */ jsxs4("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__ */ jsxs4(
         "button",
@@ -3383,7 +3815,7 @@ function SplitCardFormInner({
           },
           "aria-label": "Back to payment methods",
           children: [
-            /* @__PURE__ */ jsx6("span", { style: {
+            /* @__PURE__ */ jsx7("span", { style: {
               display: "inline-flex",
               alignItems: "center",
               justifyContent: "center",
@@ -3393,12 +3825,12 @@ function SplitCardFormInner({
               backgroundColor: "#f3f4f6",
               transition: "background-color 0.15s",
               ...bStyles.backButtonIcon
-            }, children: /* @__PURE__ */ jsx6("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx6("path", { d: "M15 18l-6-6 6-6" }) }) }),
-            /* @__PURE__ */ jsx6(BackButtonContentSlot, { content: cardBackButtonContent })
+            }, children: /* @__PURE__ */ jsx7("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx7("path", { d: "M15 18l-6-6 6-6" }) }) }),
+            /* @__PURE__ */ jsx7(BackButtonContentSlot, { content: cardBackButtonContent })
           ]
         }
       ),
-      hideTitle ? /* @__PURE__ */ jsx6("div", { style: { flex: 1 } }) : /* @__PURE__ */ jsx6("div", { style: {
+      hideTitle ? /* @__PURE__ */ jsx7("div", { style: { flex: 1 } }) : /* @__PURE__ */ jsx7("div", { style: {
         flex: 1,
         textAlign: "center",
         fontWeight: 600,
@@ -3406,58 +3838,65 @@ function SplitCardFormInner({
         color: "#262833",
         paddingRight: 80,
         ...bStyles.title
-      }, children: /* @__PURE__ */ jsx6(TitleContentSlot, { content: cardTitleContent }) })
+      }, children: /* @__PURE__ */ jsx7(TitleContentSlot, { content: cardTitleContent }) })
     ] }),
-    !isButtons && !hideTitle && /* @__PURE__ */ jsx6("div", { style: {
+    !isButtons && !hideTitle && /* @__PURE__ */ jsx7("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__ */ jsx6(TitleContentSlot, { content: cardTitleContent }) }),
-    /* @__PURE__ */ jsx6("div", { style: {
-      backgroundColor: cardInputBg,
-      border: `1px solid ${resolvedBorder}`,
-      borderTopLeftRadius: "8px",
-      borderTopRightRadius: "8px",
-      padding: "10px"
-    }, children: /* @__PURE__ */ jsx6(CardNumberElement, { onReady: () => setFormReady(true), options: stripeElementStyle }) }),
-    /* @__PURE__ */ jsxs4("div", { style: { display: "flex" }, children: [
-      /* @__PURE__ */ jsx6("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__ */ jsx6(CardExpiryElement, { options: stripeElementStyle }) }),
-      /* @__PURE__ */ jsx6("div", { style: {
-        flex: 1,
+    }, children: /* @__PURE__ */ jsx7(TitleContentSlot, { content: cardTitleContent }) }),
+    !vaultActive && /* @__PURE__ */ jsxs4(Fragment2, { children: [
+      /* @__PURE__ */ jsx7("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__ */ jsx6(CardCvcElement, { options: stripeElementStyle }) })
+      }, children: /* @__PURE__ */ jsx7(CardNumberElement, { onReady: () => setFormReady(true), options: stripeElementStyle }) }),
+      /* @__PURE__ */ jsxs4("div", { style: { display: "flex" }, children: [
+        /* @__PURE__ */ jsx7("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__ */ jsx7(CardExpiryElement, { options: stripeElementStyle }) }),
+        /* @__PURE__ */ jsx7("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__ */ jsx7(CardCvcElement, { options: stripeElementStyle }) })
+      ] })
     ] }),
-    /* @__PURE__ */ jsx6("div", { style: {
+    !vaultActive && /* @__PURE__ */ jsx7("div", { style: {
       backgroundColor: cardInputBg,
       border: `1px solid ${resolvedBorder}`,
-      borderRadius: "8px",
+      borderRadius: resolvedBorderRadius,
       marginTop: "0.5rem",
       padding: "10px"
-    }, children: /* @__PURE__ */ jsx6(
+    }, children: /* @__PURE__ */ jsx7(
       "input",
       {
         className: "flopay-shared-input",
+        id: "flopay-cc-name",
+        name: "cc-name",
         placeholder: "Full Name on Card",
         autoComplete: "cc-name",
         value: fullName,
@@ -3474,32 +3913,32 @@ function SplitCardFormInner({
         }
       }
     ) }),
-    avsConfig && (() => {
+    avsConfig && /* @__PURE__ */ jsx7("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 = getStateOptions(cc);
       return /* @__PURE__ */ jsxs4(Fragment2, { children: [
-        isAVSFieldVisible(avsConfig.address_line_1, cc) && /* @__PURE__ */ jsx6("div", { style: inputWrapStyle(bStyles.addressLine1Input), children: /* @__PURE__ */ jsx6(
+        isAVSFieldVisible(avsConfig.address_line_1, cc) && /* @__PURE__ */ jsx7("div", { style: inputWrapStyle(invalidAvsFields.line1), children: /* @__PURE__ */ jsx7(
           "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;
@@ -3511,12 +3950,14 @@ function SplitCardFormInner({
             style: inputFieldStyle()
           }
         ) }),
-        isAVSFieldVisible(avsConfig.address_line_2, cc) && /* @__PURE__ */ jsx6("div", { style: inputWrapStyle(bStyles.addressLine2Input), children: /* @__PURE__ */ jsx6(
+        isAVSFieldVisible(avsConfig.address_line_2, cc) && /* @__PURE__ */ jsx7("div", { style: inputWrapStyle(), children: /* @__PURE__ */ jsx7(
           "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;
@@ -3532,24 +3973,25 @@ function SplitCardFormInner({
           gap: "0",
           marginTop: "0.5rem"
         }, children: [
-          isAVSFieldVisible(avsConfig.city, cc) && /* @__PURE__ */ jsx6("div", { style: {
+          isAVSFieldVisible(avsConfig.city, cc) && /* @__PURE__ */ jsx7("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",
-            ...isAVSFieldVisible(avsConfig.state, cc) ? { borderRight: "none", borderTopRightRadius: 0, borderBottomRightRadius: 0 } : { borderRadius: "8px" },
-            ...isButtons && bStyles.cityInput ? bStyles.cityInput : {}
-          }, children: /* @__PURE__ */ jsx6(
+            borderTopLeftRadius: resolvedBorderRadius,
+            borderBottomLeftRadius: resolvedBorderRadius,
+            ...isAVSFieldVisible(avsConfig.state, cc) ? { borderRight: "none", borderTopRightRadius: 0, borderBottomRightRadius: 0 } : { borderRadius: resolvedBorderRadius }
+          }, children: /* @__PURE__ */ jsx7(
             "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;
@@ -3561,39 +4003,42 @@ function SplitCardFormInner({
               style: inputFieldStyle()
             }
           ) }),
-          isAVSFieldVisible(avsConfig.state, cc) && /* @__PURE__ */ jsx6("div", { style: {
+          isAVSFieldVisible(avsConfig.state, cc) && /* @__PURE__ */ jsx7("div", { style: {
             flex: 1,
             backgroundColor: cardInputBg,
-            border: `1px solid ${resolvedBorder}`,
+            border: `1px solid ${avsBorderColor(invalidAvsFields.state)}`,
             padding: "10px",
-            borderTopRightRadius: "8px",
-            borderBottomRightRadius: "8px",
-            ...isAVSFieldVisible(avsConfig.city, cc) ? { borderTopLeftRadius: 0, borderBottomLeftRadius: 0 } : { borderRadius: "8px" },
-            ...isButtons && bStyles.stateInput ? bStyles.stateInput : {}
+            borderTopRightRadius: resolvedBorderRadius,
+            borderBottomRightRadius: resolvedBorderRadius,
+            ...isAVSFieldVisible(avsConfig.city, cc) ? { borderTopLeftRadius: 0, borderBottomLeftRadius: 0 } : { borderRadius: resolvedBorderRadius }
           }, children: stateOpts ? /* @__PURE__ */ jsxs4(
             "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__ */ jsx6("option", { value: "", children: getStateLabel(cc) }),
-                stateOpts.map((s) => /* @__PURE__ */ jsx6("option", { value: s.code, children: s.name }, s.code))
+                /* @__PURE__ */ jsx7("option", { value: "", children: getStateLabel(cc) }),
+                stateOpts.map((s) => /* @__PURE__ */ jsx7("option", { value: s.code, children: s.name }, s.code))
               ]
             }
-          ) : /* @__PURE__ */ jsx6(
+          ) : /* @__PURE__ */ jsx7(
             "input",
             {
               className: "flopay-shared-input",
+              id: "flopay-billing-state",
+              name: "billing-state",
               placeholder: getStateLabel(cc),
-              autoComplete: "address-level1",
+              autoComplete: "billing address-level1",
               value: stateValue,
               onChange: (e) => {
                 stateRef.current = e.target.value;
@@ -3612,7 +4057,7 @@ function SplitCardFormInner({
           gap: avsLayoutProp === "column" ? "0.5rem" : "0",
           marginTop: "0.5rem"
         }, children: [
-          isAVSFieldVisible(avsConfig.country, cc) && /* @__PURE__ */ jsx6("div", { style: {
+          isAVSFieldVisible(avsConfig.country, cc) && /* @__PURE__ */ jsx7("div", { style: {
             flex: avsLayoutProp === "row" ? 1 : void 0,
             backgroundColor: cardInputBg,
             borderTop: `1px solid ${resolvedBorder}`,
@@ -3620,11 +4065,12 @@ function SplitCardFormInner({
             borderBottom: `1px solid ${resolvedBorder}`,
             borderLeft: `1px solid ${resolvedBorder}`,
             padding: "10px",
-            ...avsLayoutProp === "row" && isAVSFieldVisible(avsConfig.postal_code, cc) ? { borderRadius: "0", borderTopLeftRadius: "8px", borderBottomLeftRadius: "8px", borderRight: "none" } : { borderRadius: "8px" },
-            ...isButtons && bStyles.countrySelect ? bStyles.countrySelect : {}
-          }, children: /* @__PURE__ */ jsx6(
+            ...avsLayoutProp === "row" && isAVSFieldVisible(avsConfig.postal_code, cc) ? { borderRadius: "0", borderTopLeftRadius: resolvedBorderRadius, borderBottomLeftRadius: resolvedBorderRadius, borderRight: "none" } : { borderRadius: resolvedBorderRadius }
+          }, children: /* @__PURE__ */ jsx7(
             "select",
             {
+              id: "flopay-billing-country",
+              name: "billing-country",
               value: selectedCountry,
               onChange: (e) => {
                 selectedCountryRef.current = e.target.value;
@@ -3634,7 +4080,7 @@ function SplitCardFormInner({
                 setStateValue("");
               },
               disabled: isSubmitting,
-              autoComplete: "country",
+              autoComplete: "billing country",
               "data-testid": "flopay-country",
               style: { ...inputFieldStyle(), cursor: "pointer" },
               children: COUNTRY_OPTIONS.map((c) => /* @__PURE__ */ jsxs4("option", { value: c.code, children: [
@@ -3644,34 +4090,55 @@ function SplitCardFormInner({
               ] }, c.code))
             }
           ) }),
-          isAVSFieldVisible(avsConfig.postal_code, cc) && /* @__PURE__ */ jsx6("div", { style: {
+          isAVSFieldVisible(avsConfig.postal_code, cc) && /* @__PURE__ */ jsx7("div", { style: {
             flex: avsLayoutProp === "row" ? 1 : void 0,
             backgroundColor: cardInputBg,
-            border: `1px solid ${resolvedBorder}`,
+            border: `1px solid ${zipBorderColor}`,
             padding: "10px",
-            ...avsLayoutProp === "row" && isAVSFieldVisible(avsConfig.country, cc) ? { borderRadius: "0", borderTopRightRadius: "8px", borderBottomRightRadius: "8px" } : { borderRadius: "8px" },
-            ...isButtons && bStyles.zipInput ? bStyles.zipInput : {}
-          }, children: /* @__PURE__ */ jsx6(
+            ...avsLayoutProp === "row" && isAVSFieldVisible(avsConfig.country, cc) ? { borderRadius: "0", borderTopRightRadius: resolvedBorderRadius, borderBottomRightRadius: resolvedBorderRadius } : { borderRadius: resolvedBorderRadius }
+          }, children: /* @__PURE__ */ jsx7(
             "input",
             {
               className: "flopay-shared-input",
+              id: "flopay-billing-postal-code",
+              name: "billing-postal-code",
               placeholder: 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__ */ jsx7(
+          "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 ? `${getPostalCodeLabel(cc)} is required` : malformedPostcodeMessage(cc)
+          }
+        )
       ] });
-    })(),
+    })() }),
+    vaultActive && cardPreFormSlot && /* @__PURE__ */ jsx7("div", { style: { order: -2, width: "100%" }, children: cardPreFormSlot }),
+    vaultActive && vaultCardFieldsNode,
     displayError && /* @__PURE__ */ jsxs4("div", { role: "alert", "data-testid": "flopay-error", style: {
       margin: "0.75rem 0",
       padding: "0.625rem 0.875rem",
@@ -3686,15 +4153,21 @@ function SplitCardFormInner({
       gap: "0.5rem",
       ...bStyles.errorBanner ? bStyles.errorBanner : {}
     }, children: [
-      /* @__PURE__ */ jsx6("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", style: { flexShrink: 0 }, children: /* @__PURE__ */ jsx6("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__ */ jsx7("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", style: { flexShrink: 0 }, children: /* @__PURE__ */ jsx7("path", { d: "M12 9v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z", stroke: "#DC2626", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }),
       displayError
     ] }),
-    children ?? /* @__PURE__ */ jsx6(
+    !vaultActive && (children ?? /* @__PURE__ */ jsx7(
       "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",
@@ -3707,11 +4180,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,
@@ -3727,9 +4201,9 @@ function SplitCardFormInner({
   const renderDirectPaypalGateDebug = (testId) => {
     if (!debug) return null;
     if (!showPayPal || !directPaypalConfigured) {
-      return /* @__PURE__ */ jsx6("pre", { "data-testid": testId, style: gateDebugStyle, children: "FloPay/DirectPayPal-debug - not enabled" });
+      return /* @__PURE__ */ jsx7("pre", { "data-testid": testId, style: gateDebugStyle, children: "FloPay/DirectPayPal-debug - not enabled" });
     }
-    return /* @__PURE__ */ jsx6("pre", { "data-testid": testId, style: gateDebugStyle, children: [
+    return /* @__PURE__ */ jsx7("pre", { "data-testid": testId, style: gateDebugStyle, children: [
       "FloPay/DirectPayPal-debug (parent gate)",
       `  showPayPal=${showPayPal}`,
       `  directPaypalConfigured=${directPaypalConfigured}`,
@@ -3742,9 +4216,9 @@ function SplitCardFormInner({
   const renderStripeGateDebug = (testId) => {
     if (!debug) return null;
     if (!showStripe || !stripeInstance) {
-      return /* @__PURE__ */ jsx6("pre", { "data-testid": testId, style: gateDebugStyle, children: "FloPay/Stripe-debug - not enabled" });
+      return /* @__PURE__ */ jsx7("pre", { "data-testid": testId, style: gateDebugStyle, children: "FloPay/Stripe-debug - not enabled" });
     }
-    return /* @__PURE__ */ jsx6("pre", { "data-testid": testId, style: gateDebugStyle, children: [
+    return /* @__PURE__ */ jsx7("pre", { "data-testid": testId, style: gateDebugStyle, children: [
       "FloPay/Stripe-debug (parent gate)",
       `  showStripe=${showStripe}`,
       `  currency=${currency}`,
@@ -3774,8 +4248,8 @@ function SplitCardFormInner({
     const buttonsAnim = viewState === "expanding" || viewState === "apm-expanding" ? `flopay-buttons-exit ${TRANSITION_MS}ms cubic-bezier(0.4, 0, 0.2, 1) both` : viewState === "collapsing" || viewState === "apm-collapsing" ? `flopay-buttons-enter ${TRANSITION_MS}ms cubic-bezier(0, 0, 0.2, 1) both` : void 0;
     const cardAnim = viewState === "expanding" ? `flopay-card-enter ${TRANSITION_MS}ms cubic-bezier(0, 0, 0.2, 1) both` : viewState === "collapsing" ? `flopay-card-exit ${TRANSITION_MS}ms cubic-bezier(0.4, 0, 0.2, 1) both` : void 0;
     return /* @__PURE__ */ jsxs4("form", { onSubmit: handleSubmit, className, style: { position: "relative" }, children: [
-      /* @__PURE__ */ jsx6(FloPayKeyframes, {}),
-      overlayStatus && /* @__PURE__ */ jsx6(ProcessingOverlay, { status: overlayStatus, errorMessage: displayError }),
+      /* @__PURE__ */ jsx7(FloPayKeyframes, {}),
+      overlayStatus && /* @__PURE__ */ jsx7(ProcessingOverlay, { status: overlayStatus, errorMessage: displayError }),
       /* @__PURE__ */ jsxs4("div", { style: { display: "grid" }, children: [
         /* @__PURE__ */ jsxs4(
           "div",
@@ -3795,7 +4269,7 @@ function SplitCardFormInner({
               renderDirectPaypalGateDebug("flopay-direct-paypal-gate-debug"),
               renderStripeGateDebug("flopay-stripe-gate-debug"),
               shouldRenderDirectPayPal && directPaypal && /* @__PURE__ */ jsxs4(Fragment2, { children: [
-                paypalDirectRetry && /* @__PURE__ */ jsx6(
+                paypalDirectRetry && /* @__PURE__ */ jsx7(
                   "div",
                   {
                     "data-testid": "flopay-paypal-direct-retry-notice",
@@ -3811,7 +4285,7 @@ function SplitCardFormInner({
                     children: "Please confirm your PayPal payment to complete checkout."
                   }
                 ),
-                /* @__PURE__ */ jsx6(
+                /* @__PURE__ */ jsx7(
                   DirectPayPalButton,
                   {
                     sessionId,
@@ -3837,7 +4311,7 @@ function SplitCardFormInner({
                   paypalDirectRetry?.orderId ?? "fresh"
                 )
               ] }),
-              shouldRenderStripePayPal && /* @__PURE__ */ jsx6(StripeElements, { stripe: paypalStripeInstance, options: paypalOptions, children: /* @__PURE__ */ jsx6(
+              shouldRenderStripePayPal && /* @__PURE__ */ jsx7(StripeElements, { stripe: paypalStripeInstance, options: paypalOptions, children: /* @__PURE__ */ jsx7(
                 PayPalButtonInner,
                 {
                   sessionId,
@@ -3851,10 +4325,10 @@ function SplitCardFormInner({
                   onDecline,
                   runBeforeButtonClick,
                   onLoadStateChange: setPaypalLoadState,
-                  placeholderBorderRadius: bStyles.cardButton?.borderRadius ?? resolvedBorderRadius
+                  placeholderBorderRadius: buttonBorderRadius
                 }
               ) }),
-              shouldRenderWallets ? /* @__PURE__ */ jsx6(StripeElements, { stripe: stripeInstance, options: walletOptions, children: /* @__PURE__ */ jsx6(
+              shouldRenderWallets ? /* @__PURE__ */ jsx7(StripeElements, { stripe: stripeInstance, options: walletOptions, children: /* @__PURE__ */ jsx7(
                 WalletButtonInner,
                 {
                   sessionId,
@@ -3868,10 +4342,10 @@ function SplitCardFormInner({
                   onDecline,
                   runBeforeButtonClick,
                   onLoadStateChange: setWalletLoadState,
-                  placeholderBorderRadius: bStyles.cardButton?.borderRadius ?? resolvedBorderRadius
+                  placeholderBorderRadius: buttonBorderRadius
                 }
-              ) }) : shouldShowWallets ? /* @__PURE__ */ jsx6("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__ */ jsx6(
+              ) }) : shouldShowWallets ? /* @__PURE__ */ jsx7("div", { style: { height: DEFAULT_BUTTONS_LAYOUT_BUTTON_HEIGHT, borderRadius: buttonBorderRadius, background: "#e5e7eb", animation: "flopay-pulse 1.5s ease-in-out infinite" } }) : null,
+              shouldRenderPaymentElement && /* @__PURE__ */ jsx7(
                 StripePaymentElementInner,
                 {
                   sessionId,
@@ -3899,11 +4373,11 @@ function SplitCardFormInner({
                     backgroundColor: bStyles.cardButton?.backgroundColor,
                     borderColor: bStyles.cardInputBorder,
                     textColor: bStyles.cardButton?.color,
-                    borderRadius: bStyles.cardButton?.borderRadius
+                    borderRadius: buttonBorderRadius
                   }
                 }
               ),
-              showStripe && /* @__PURE__ */ jsx6(
+              showStripe && /* @__PURE__ */ jsx7(
                 "button",
                 {
                   type: "button",
@@ -3931,7 +4405,8 @@ function SplitCardFormInner({
                       themeBundle,
                       resolvedPrimaryColor,
                       resolvedBorderRadius,
-                      submitButtonStyle: bStyles.submitButton
+                      submitButtonStyle: bStyles.submitButton,
+                      explicitPrimaryColor: appearanceVars?.colorPrimary
                     }),
                     fontSize: bStyles.cardButtonFontSize ?? "0.95rem",
                     fontWeight: 600,
@@ -3940,17 +4415,25 @@ 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__ */ jsx6(CardButtonContentSlot, { content: cardButtonContent })
+                  children: /* @__PURE__ */ jsx7(CardButtonContentSlot, { content: cardButtonContent })
                 }
               ),
               displayError && viewState === "buttons" && /* @__PURE__ */ jsxs4("div", { role: "alert", "data-testid": "flopay-error", style: {
@@ -3967,18 +4450,18 @@ function SplitCardFormInner({
                 gap: "0.5rem",
                 ...bStyles.errorBanner ? bStyles.errorBanner : {}
               }, children: [
-                /* @__PURE__ */ jsx6("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", style: { flexShrink: 0 }, children: /* @__PURE__ */ jsx6("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__ */ jsx7("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", style: { flexShrink: 0 }, children: /* @__PURE__ */ jsx7("path", { d: "M12 9v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z", stroke: "#DC2626", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }),
                 displayError
               ] })
             ]
           }
         ),
-        showStripe && isCardView && /* @__PURE__ */ jsx6("div", { style: {
+        showStripe && isCardView && /* @__PURE__ */ jsx7("div", { style: {
           gridArea: "1 / 1",
           ...cardAnim ? { animation: cardAnim } : {},
           ...viewState === "collapsing" ? { pointerEvents: "none" } : {}
         }, children: cardFormBlock }),
-        showStripe && isApmView && expandedApmMethod && apmInlineOptions && stripeInstance && /* @__PURE__ */ jsx6("div", { style: {
+        showStripe && isApmView && expandedApmMethod && apmInlineOptions && stripeInstance && /* @__PURE__ */ jsx7("div", { style: {
           gridArea: "1 / 1",
           ...apmAnim ? { animation: apmAnim } : {},
           ...viewState === "apm-collapsing" ? { pointerEvents: "none" } : {}
@@ -4016,7 +4499,7 @@ function SplitCardFormInner({
                 },
                 "aria-label": "Back to payment methods",
                 children: [
-                  /* @__PURE__ */ jsx6("span", { style: {
+                  /* @__PURE__ */ jsx7("span", { style: {
                     display: "inline-flex",
                     alignItems: "center",
                     justifyContent: "center",
@@ -4026,12 +4509,12 @@ function SplitCardFormInner({
                     backgroundColor: "#f3f4f6",
                     transition: "background-color 0.15s",
                     ...bStyles.backButtonIcon
-                  }, children: /* @__PURE__ */ jsx6("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx6("path", { d: "M15 18l-6-6 6-6" }) }) }),
-                  /* @__PURE__ */ jsx6(BackButtonContentSlot, { content: cardBackButtonContent })
+                  }, children: /* @__PURE__ */ jsx7("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx7("path", { d: "M15 18l-6-6 6-6" }) }) }),
+                  /* @__PURE__ */ jsx7(BackButtonContentSlot, { content: cardBackButtonContent })
                 ]
               }
             ),
-            /* @__PURE__ */ jsx6("div", { style: {
+            /* @__PURE__ */ jsx7("div", { style: {
               flex: 1,
               textAlign: "center",
               fontWeight: 600,
@@ -4041,12 +4524,12 @@ function SplitCardFormInner({
               ...bStyles.title
             }, children: `Pay with ${getStripeMethodDisplayName(expandedApmMethod)}` })
           ] }),
-          /* @__PURE__ */ jsx6(
+          /* @__PURE__ */ jsx7(
             StripeElements,
             {
               stripe: stripeInstance,
               options: apmInlineOptions,
-              children: /* @__PURE__ */ jsx6(
+              children: /* @__PURE__ */ jsx7(
                 StripeMethodInlineForm,
                 {
                   method: expandedApmMethod,
@@ -4064,7 +4547,8 @@ function SplitCardFormInner({
                   isProcessing: isSubmitting,
                   submitButtonColor: resolvedPrimaryColor,
                   submitButtonBorderRadius: resolvedBorderRadius,
-                  submitButtonStyle: bStyles.submitButton
+                  submitButtonStyle: bStyles.submitButton,
+                  errorText: displayError
                 }
               )
             },
@@ -4076,9 +4560,9 @@ function SplitCardFormInner({
   }
   if (isApmView && expandedApmMethod && apmInlineOptions && stripeInstance && showStripe) {
     return /* @__PURE__ */ jsxs4("form", { onSubmit: handleSubmit, className, style: { position: "relative" }, children: [
-      /* @__PURE__ */ jsx6(FloPayKeyframes, {}),
-      overlayStatus && /* @__PURE__ */ jsx6(ProcessingOverlay, { status: overlayStatus, errorMessage: displayError }),
-      /* @__PURE__ */ jsx6("div", { style: {
+      /* @__PURE__ */ jsx7(FloPayKeyframes, {}),
+      overlayStatus && /* @__PURE__ */ jsx7(ProcessingOverlay, { status: overlayStatus, errorMessage: displayError }),
+      /* @__PURE__ */ jsx7("div", { style: {
         ...apmAnim ? { animation: apmAnim } : {},
         ...viewState === "apm-collapsing" ? { pointerEvents: "none" } : {}
       }, children: /* @__PURE__ */ jsxs4("div", { style: {
@@ -4115,7 +4599,7 @@ function SplitCardFormInner({
               },
               "aria-label": "Back to payment methods",
               children: [
-                /* @__PURE__ */ jsx6("span", { style: {
+                /* @__PURE__ */ jsx7("span", { style: {
                   display: "inline-flex",
                   alignItems: "center",
                   justifyContent: "center",
@@ -4125,12 +4609,12 @@ function SplitCardFormInner({
                   backgroundColor: "#f3f4f6",
                   transition: "background-color 0.15s",
                   ...bStyles.backButtonIcon
-                }, children: /* @__PURE__ */ jsx6("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx6("path", { d: "M15 18l-6-6 6-6" }) }) }),
-                /* @__PURE__ */ jsx6(BackButtonContentSlot, { content: cardBackButtonContent })
+                }, children: /* @__PURE__ */ jsx7("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx7("path", { d: "M15 18l-6-6 6-6" }) }) }),
+                /* @__PURE__ */ jsx7(BackButtonContentSlot, { content: cardBackButtonContent })
               ]
             }
           ),
-          /* @__PURE__ */ jsx6("div", { style: {
+          /* @__PURE__ */ jsx7("div", { style: {
             flex: 1,
             textAlign: "center",
             fontWeight: 600,
@@ -4140,12 +4624,12 @@ function SplitCardFormInner({
             ...bStyles.title
           }, children: `Pay with ${getStripeMethodDisplayName(expandedApmMethod)}` })
         ] }),
-        /* @__PURE__ */ jsx6(
+        /* @__PURE__ */ jsx7(
           StripeElements,
           {
             stripe: stripeInstance,
             options: apmInlineOptions,
-            children: /* @__PURE__ */ jsx6(
+            children: /* @__PURE__ */ jsx7(
               StripeMethodInlineForm,
               {
                 method: expandedApmMethod,
@@ -4163,7 +4647,8 @@ function SplitCardFormInner({
                 isProcessing: isSubmitting,
                 submitButtonColor: resolvedPrimaryColor,
                 submitButtonBorderRadius: resolvedBorderRadius,
-                submitButtonStyle: bStyles.submitButton
+                submitButtonStyle: bStyles.submitButton,
+                errorText: displayError
               }
             )
           },
@@ -4173,13 +4658,13 @@ function SplitCardFormInner({
     ] });
   }
   return /* @__PURE__ */ jsxs4("form", { onSubmit: handleSubmit, className, style: { position: "relative" }, children: [
-    /* @__PURE__ */ jsx6(FloPayKeyframes, {}),
-    overlayStatus && /* @__PURE__ */ jsx6(ProcessingOverlay, { status: overlayStatus, errorMessage: displayError }),
+    /* @__PURE__ */ jsx7(FloPayKeyframes, {}),
+    overlayStatus && /* @__PURE__ */ jsx7(ProcessingOverlay, { status: overlayStatus, errorMessage: displayError }),
     /* @__PURE__ */ jsxs4("div", { style: { display: "flex", flexDirection: "column", gap: "0.5rem" }, children: [
       renderDirectPaypalGateDebug("flopay-direct-paypal-gate-debug-default"),
       renderStripeGateDebug("flopay-stripe-gate-debug-default"),
       shouldRenderDirectPayPal && directPaypal && /* @__PURE__ */ jsxs4(Fragment2, { children: [
-        paypalDirectRetry && /* @__PURE__ */ jsx6(
+        paypalDirectRetry && /* @__PURE__ */ jsx7(
           "div",
           {
             "data-testid": "flopay-paypal-direct-retry-notice-default",
@@ -4195,7 +4680,7 @@ function SplitCardFormInner({
             children: "Please confirm your PayPal payment to complete checkout."
           }
         ),
-        /* @__PURE__ */ jsx6(
+        /* @__PURE__ */ jsx7(
           DirectPayPalButton,
           {
             sessionId,
@@ -4221,7 +4706,7 @@ function SplitCardFormInner({
           paypalDirectRetry?.orderId ?? "fresh"
         )
       ] }),
-      shouldRenderStripePayPal && /* @__PURE__ */ jsx6(StripeElements, { stripe: paypalStripeInstance, options: paypalOptions, children: /* @__PURE__ */ jsx6(
+      shouldRenderStripePayPal && /* @__PURE__ */ jsx7(StripeElements, { stripe: paypalStripeInstance, options: paypalOptions, children: /* @__PURE__ */ jsx7(
         PayPalButtonInner,
         {
           sessionId,
@@ -4235,10 +4720,10 @@ function SplitCardFormInner({
           onDecline,
           runBeforeButtonClick,
           onLoadStateChange: setPaypalLoadState,
-          placeholderBorderRadius: bStyles.cardButton?.borderRadius ?? resolvedBorderRadius
+          placeholderBorderRadius: buttonBorderRadius
         }
       ) }),
-      shouldRenderWallets && /* @__PURE__ */ jsx6(StripeElements, { stripe: stripeInstance, options: walletOptions, children: /* @__PURE__ */ jsx6(
+      shouldRenderWallets && /* @__PURE__ */ jsx7(StripeElements, { stripe: stripeInstance, options: walletOptions, children: /* @__PURE__ */ jsx7(
         WalletButtonInner,
         {
           sessionId,
@@ -4252,10 +4737,10 @@ function SplitCardFormInner({
           onDecline,
           runBeforeButtonClick,
           onLoadStateChange: setWalletLoadState,
-          placeholderBorderRadius: bStyles.cardButton?.borderRadius ?? resolvedBorderRadius
+          placeholderBorderRadius: buttonBorderRadius
         }
       ) }),
-      shouldRenderPaymentElement && /* @__PURE__ */ jsx6(
+      shouldRenderPaymentElement && /* @__PURE__ */ jsx7(
         StripePaymentElementInner,
         {
           sessionId,
@@ -4283,7 +4768,7 @@ function SplitCardFormInner({
             backgroundColor: bStyles.cardButton?.backgroundColor,
             borderColor: bStyles.cardInputBorder,
             textColor: bStyles.cardButton?.color,
-            borderRadius: bStyles.cardButton?.borderRadius
+            borderRadius: buttonBorderRadius
           }
         }
       )
@@ -4296,9 +4781,9 @@ function SplitCardFormInner({
       color: "#999",
       fontSize: "0.85rem"
     }, children: [
-      /* @__PURE__ */ jsx6("div", { style: { flex: 1, height: 1, backgroundColor: "#ddd" } }),
-      /* @__PURE__ */ jsx6("span", { children: "or pay with card" }),
-      /* @__PURE__ */ jsx6("div", { style: { flex: 1, height: 1, backgroundColor: "#ddd" } })
+      /* @__PURE__ */ jsx7("div", { style: { flex: 1, height: 1, backgroundColor: "#ddd" } }),
+      /* @__PURE__ */ jsx7("span", { children: "or pay with card" }),
+      /* @__PURE__ */ jsx7("div", { style: { flex: 1, height: 1, backgroundColor: "#ddd" } })
     ] }),
     showStripe && cardFormBlock
   ] });
@@ -4341,6 +4826,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 FloPayError4("3DS challenge requires a browser environment.", "api_error", {
+      code: "three_ds_no_window"
+    });
+  }
+  if (input.signal?.aborted) {
+    throw new FloPayError4("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 FloPayError4("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 FloPayError4("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;
@@ -4782,7 +5471,7 @@ async function loadSavedPaymentProviders({
 }
 
 // src/flopay-checkout.tsx
-import { Fragment as Fragment3, jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
 var DEFAULT_BUTTONS_LAYOUT_BUTTON_HEIGHT2 = 44;
 var PAYPAL_RESUME_STORAGE_KEY = "flopay_checkout_saved_payment_resume";
 var sessionInflightMap = /* @__PURE__ */ new Map();
@@ -4831,6 +5520,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);
@@ -4889,6 +5608,8 @@ function FloPayCheckout({
   onButtonClick,
   onBeforeButtonClick,
   enableAVS,
+  cardFieldOrder,
+  cardPreFormSlot,
   avsLayout,
   submitLabel,
   className,
@@ -4906,9 +5627,9 @@ function FloPayCheckout({
   const checkoutLayout = children ? "custom_layout" : layout === "buttons" ? "buttons_layout" : "default_layout";
   const [unified, setUnified] = useState4(null);
   const [flopay, setFloPay] = useState4(null);
-  const flopayRef = useRef4(null);
+  const flopayRef = useRef5(null);
   const [paypalFlopay, setPaypalFloPay] = useState4(null);
-  const paypalFlopayRef = useRef4(null);
+  const paypalFlopayRef = useRef5(null);
   const [session, setSession] = useState4(null);
   const [resolvedSessionId, setResolvedSessionId] = useState4(sessionIdProp ?? "");
   const activeSessionId = sessionIdProp ?? resolvedSessionId;
@@ -4923,18 +5644,18 @@ function FloPayCheckout({
   const [createSessionPatch, setCreateSessionPatch] = useState4(void 0);
   const [createSessionPatchBaseHash, setCreateSessionPatchBaseHash] = useState4("");
   const [cardBootstrapPending, setCardBootstrapPending] = useState4(false);
-  const autoCheckoutAttempted = useRef4(false);
-  const paypalResumeAttempted = useRef4(false);
-  const savedPaymentKeysRef = useRef4(null);
-  const onCompleteRef = useRef4(onComplete);
+  const autoCheckoutAttempted = useRef5(false);
+  const paypalResumeAttempted = useRef5(false);
+  const savedPaymentKeysRef = useRef5(null);
+  const onCompleteRef = useRef5(onComplete);
   onCompleteRef.current = onComplete;
-  const onErrorRef = useRef4(onError);
+  const onErrorRef = useRef5(onError);
   onErrorRef.current = onError;
-  const onDeclineRef = useRef4(onDecline);
+  const onDeclineRef = useRef5(onDecline);
   onDeclineRef.current = onDecline;
-  const onSessionCompletedRef = useRef4(onSessionCompleted);
+  const onSessionCompletedRef = useRef5(onSessionCompleted);
   onSessionCompletedRef.current = onSessionCompleted;
-  useEffect5(() => {
+  useEffect6(() => {
     console.info("[FloPay] Checkout initialized", {
       sdk_version: SDK_VERSION,
       checkout_type: checkoutType,
@@ -4962,11 +5683,11 @@ function FloPayCheckout({
     } : void 0,
     [effectiveCreateSessionBase, effectiveCreateSessionMode]
   );
-  useEffect5(() => {
+  useEffect6(() => {
     setCreateSessionPatch(void 0);
     setCreateSessionPatchBaseHash(baseCreateSessionHash);
   }, [baseCreateSessionHash]);
-  useEffect5(() => {
+  useEffect6(() => {
     setModeError(initialErrorMessage);
   }, [initialErrorMessage]);
   const emitDecline = useCallback2(
@@ -5093,7 +5814,7 @@ function FloPayCheckout({
       resolvedBillingUrl
     ]
   );
-  useEffect5(() => {
+  useEffect6(() => {
     if (typeof window === "undefined" || paypalResumeAttempted.current) {
       return;
     }
@@ -5210,7 +5931,7 @@ function FloPayCheckout({
       }
     })();
   }, [emitDecline, locale, normalizeSavedPaymentError, resolvedBillingUrl]);
-  const initializedHashRef = useRef4(null);
+  const initializedHashRef = useRef5(null);
   function hashCreateParams(params) {
     const key = JSON.stringify({
       c: params?.clientId,
@@ -5247,12 +5968,12 @@ function FloPayCheckout({
     () => effectiveCreateSession ? hashCreateParams(effectiveCreateSession) : "",
     [effectiveCreateSession]
   );
-  const createSessionParamsRef = useRef4(effectiveCreateSession);
+  const createSessionParamsRef = useRef5(effectiveCreateSession);
   createSessionParamsRef.current = effectiveCreateSession;
-  useEffect5(() => {
+  useEffect6(() => {
     setResolvedSessionId(sessionIdProp ?? "");
   }, [sessionIdProp]);
-  useEffect5(() => {
+  useEffect6(() => {
     autoCheckoutAttempted.current = false;
     setModeError(initialErrorMessage);
     setModeOverlayError(null);
@@ -5260,22 +5981,23 @@ function FloPayCheckout({
   }, [createSessionHash, initialErrorMessage, sessionIdProp]);
   async function resolveInlineSession(params, cacheKey) {
     const api = new PaymentAPI4(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;
       }
     }
@@ -5289,8 +6011,8 @@ 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 };
@@ -5379,7 +6101,7 @@ function FloPayCheckout({
     resolvedSessionId,
     session
   ]);
-  useEffect5(() => {
+  useEffect6(() => {
     let cancelled = false;
     setLoadError(null);
     if (createSessionHash) {
@@ -5601,7 +6323,7 @@ function FloPayCheckout({
     ]
   );
   const shouldShowInterimButtons = Boolean(createSessionParams) && layout === "buttons" && !isPaypalOnlySession && (!flopay || !providerOptions);
-  const modeOverlay = modeOverlayStatus ? /* @__PURE__ */ jsx7(
+  const modeOverlay = modeOverlayStatus ? /* @__PURE__ */ jsx8(
     ProcessingOverlay,
     {
       status: modeOverlayStatus,
@@ -5617,7 +6339,7 @@ function FloPayCheckout({
     }
     if (layout === "buttons") {
       const bundleRadius = themeBundle?.buttonsLayout?.cardButton?.borderRadius ?? themeBundle?.appearance.variables?.borderRadius ?? 8;
-      const skeletonBar = (h) => /* @__PURE__ */ jsx7("div", { style: {
+      const skeletonBar = (h) => /* @__PURE__ */ jsx8("div", { style: {
         height: h,
         borderRadius: bundleRadius,
         background: "#e5e7eb",
@@ -5628,14 +6350,14 @@ function FloPayCheckout({
           showPayPal && skeletonBar(DEFAULT_BUTTONS_LAYOUT_BUTTON_HEIGHT2),
           showStripe && (showApplePay || showGooglePay) && skeletonBar(DEFAULT_BUTTONS_LAYOUT_BUTTON_HEIGHT2),
           showStripe && skeletonBar(DEFAULT_BUTTONS_LAYOUT_BUTTON_HEIGHT2),
-          /* @__PURE__ */ jsx7("style", { children: `@keyframes flopay-loading-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }` })
+          /* @__PURE__ */ jsx8("style", { children: `@keyframes flopay-loading-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }` })
         ] }),
         modeOverlay
       ] });
     }
     return /* @__PURE__ */ jsxs5(Fragment3, { children: [
       /* @__PURE__ */ jsxs5("div", { style: { display: "flex", justifyContent: "center", padding: 32 }, children: [
-        /* @__PURE__ */ jsx7("div", { style: {
+        /* @__PURE__ */ jsx8("div", { style: {
           width: 24,
           height: 24,
           border: "2px solid #e5e7eb",
@@ -5643,16 +6365,16 @@ function FloPayCheckout({
           borderRadius: "50%",
           animation: "spin 0.6s linear infinite"
         } }),
-        /* @__PURE__ */ jsx7("style", { children: `@keyframes spin { to { transform: rotate(360deg); } }` })
+        /* @__PURE__ */ jsx8("style", { children: `@keyframes spin { to { transform: rotate(360deg); } }` })
       ] }),
       modeOverlay
     ] });
   }
   if (loadError) {
     if (errorNode) {
-      return /* @__PURE__ */ jsx7(CheckoutContext.Provider, { value: checkoutValue, children: errorNode(loadError) });
+      return /* @__PURE__ */ jsx8(CheckoutContext.Provider, { value: checkoutValue, children: errorNode(loadError) });
     }
-    return /* @__PURE__ */ jsx7(CheckoutContext.Provider, { value: checkoutValue, children: /* @__PURE__ */ jsx7(
+    return /* @__PURE__ */ jsx8(CheckoutContext.Provider, { value: checkoutValue, children: /* @__PURE__ */ jsx8(
       "div",
       {
         role: "alert",
@@ -5669,7 +6391,7 @@ function FloPayCheckout({
   }
   if (shouldShowInterimButtons) {
     return /* @__PURE__ */ jsxs5(Fragment3, { children: [
-      /* @__PURE__ */ jsx7(CheckoutContext.Provider, { value: checkoutValue, children: /* @__PURE__ */ jsx7(
+      /* @__PURE__ */ jsx8(CheckoutContext.Provider, { value: checkoutValue, children: /* @__PURE__ */ jsx8(
         InterimButtonsView,
         {
           onButtonClick,
@@ -5690,8 +6412,8 @@ function FloPayCheckout({
   }
   if (isPaypalOnlySession && session && directPaypalConfig) {
     return /* @__PURE__ */ jsxs5(Fragment3, { children: [
-      /* @__PURE__ */ jsx7(CheckoutContext.Provider, { value: checkoutValue, children: /* @__PURE__ */ jsxs5("div", { className, style: { display: "flex", flexDirection: "column", gap: "0.5rem" }, children: [
-        modeError && /* @__PURE__ */ jsx7(
+      /* @__PURE__ */ jsx8(CheckoutContext.Provider, { value: checkoutValue, children: /* @__PURE__ */ jsxs5("div", { className, style: { display: "flex", flexDirection: "column", gap: "0.5rem" }, children: [
+        modeError && /* @__PURE__ */ jsx8(
           "div",
           {
             role: "alert",
@@ -5708,7 +6430,7 @@ function FloPayCheckout({
             children: modeError
           }
         ),
-        /* @__PURE__ */ jsx7(
+        /* @__PURE__ */ jsx8(
           DirectPayPalButton,
           {
             sessionId: activeSessionId,
@@ -5732,12 +6454,12 @@ function FloPayCheckout({
     ] });
   }
   if (!flopay || !providerOptions) {
-    return /* @__PURE__ */ jsx7(Fragment3, { children: modeOverlay });
+    return /* @__PURE__ */ jsx8(Fragment3, { children: modeOverlay });
   }
   if (currentMode === "confirm") {
     return /* @__PURE__ */ jsxs5(Fragment3, { children: [
-      /* @__PURE__ */ jsx7(CheckoutContext.Provider, { value: checkoutValue, children: /* @__PURE__ */ jsx7(FloPayProvider, { flopay, paypalFlopay, options: providerOptions, children: /* @__PURE__ */ jsxs5("div", { className, children: [
-        modeError && /* @__PURE__ */ jsx7(
+      /* @__PURE__ */ jsx8(CheckoutContext.Provider, { value: checkoutValue, children: /* @__PURE__ */ jsx8(FloPayProvider, { flopay, paypalFlopay, options: providerOptions, children: /* @__PURE__ */ jsxs5("div", { className, children: [
+        modeError && /* @__PURE__ */ jsx8(
           "div",
           {
             style: {
@@ -5752,7 +6474,7 @@ function FloPayCheckout({
         renderConfirmButton ? renderConfirmButton({
           onConfirm: handleConfirmCheckout,
           isProcessing: confirmProcessing
-        }) : /* @__PURE__ */ jsx7(
+        }) : /* @__PURE__ */ jsx8(
           "button",
           {
             type: "button",
@@ -5778,8 +6500,8 @@ function FloPayCheckout({
     ] });
   }
   return /* @__PURE__ */ jsxs5(Fragment3, { children: [
-    /* @__PURE__ */ jsx7(CheckoutContext.Provider, { value: checkoutValue, children: /* @__PURE__ */ jsx7(FloPayProvider, { flopay, paypalFlopay, options: providerOptions, children: children ? /* @__PURE__ */ jsxs5(Fragment3, { children: [
-      modeError && /* @__PURE__ */ jsx7(
+    /* @__PURE__ */ jsx8(CheckoutContext.Provider, { value: checkoutValue, children: /* @__PURE__ */ jsx8(FloPayProvider, { flopay, paypalFlopay, options: providerOptions, children: children ? /* @__PURE__ */ jsxs5(Fragment3, { children: [
+      modeError && /* @__PURE__ */ jsx8(
         "div",
         {
           style: {
@@ -5794,7 +6516,7 @@ function FloPayCheckout({
           children: modeError
         }
       ),
-      /* @__PURE__ */ jsx7(
+      /* @__PURE__ */ jsx8(
         SessionInjector,
         {
           sessionId: activeSessionId,
@@ -5804,7 +6526,7 @@ function FloPayCheckout({
           children
         }
       )
-    ] }) : /* @__PURE__ */ jsx7(
+    ] }) : /* @__PURE__ */ jsx8(
       SplitCardForm,
       {
         sessionId: activeSessionId,
@@ -5824,6 +6546,7 @@ function FloPayCheckout({
         showPayPal,
         showStripe,
         enabledPaymentMethods: unified?.data.stripe?.enabledPaymentMethods,
+        enabledPaymentMethodCountries: unified?.data.stripe?.enabledPaymentMethodCountries,
         showApplePay,
         showGooglePay,
         layout,
@@ -5837,6 +6560,8 @@ function FloPayCheckout({
         onButtonClick,
         onBeforeButtonClick,
         enableAVS,
+        ...cardFieldOrder ? { cardFieldOrder } : {},
+        ...cardPreFormSlot ? { cardPreFormSlot } : {},
         avsLayout,
         country: session?.customer?.country,
         city: session?.customer?.city,
@@ -5864,8 +6589,8 @@ function SessionInjector({
   session,
   children
 }) {
-  return /* @__PURE__ */ jsx7(Fragment3, { children: React7.Children.map(children, (child) => {
-    if (!React7.isValidElement(child)) return child;
+  return /* @__PURE__ */ jsx8(Fragment3, { children: React8.Children.map(children, (child) => {
+    if (!React8.isValidElement(child)) return child;
     const existing = child.props;
     const injected = {};
     if (!existing.sessionId) injected.sessionId = sessionId;
@@ -5880,7 +6605,7 @@ function SessionInjector({
         injected.lastName = session.customer.lastName;
     }
     if (Object.keys(injected).length === 0) return child;
-    return React7.cloneElement(child, injected);
+    return React8.cloneElement(child, injected);
   }) });
 }
 function InterimButtonsView({
@@ -5902,7 +6627,7 @@ function InterimButtonsView({
 }) {
   const [showCardForm, setShowCardForm] = useState4(false);
   const isCardOpenControlled = typeof cardOpen === "boolean";
-  useEffect5(() => {
+  useEffect6(() => {
     if (isCardOpenControlled) {
       setShowCardForm(cardOpen);
     }
@@ -5923,7 +6648,7 @@ function InterimButtonsView({
     };
   }, [themeBundle, buttonsTheme, stylesOverride]);
   const skeletonRadius = themeBundle?.buttonsLayout?.cardButton?.borderRadius ?? themeBundle?.appearance.variables?.borderRadius ?? 8;
-  const skeleton = (h) => /* @__PURE__ */ jsx7("div", { style: {
+  const skeleton = (h) => /* @__PURE__ */ jsx8("div", { style: {
     height: h,
     borderRadius: skeletonRadius,
     background: "#e5e7eb",
@@ -5970,7 +6695,7 @@ function InterimButtonsView({
               ...bStyles.backButton
             },
             children: [
-              /* @__PURE__ */ jsx7("span", { style: {
+              /* @__PURE__ */ jsx8("span", { style: {
                 display: "inline-flex",
                 alignItems: "center",
                 justifyContent: "center",
@@ -5979,12 +6704,12 @@ function InterimButtonsView({
                 borderRadius: "50%",
                 backgroundColor: "#f3f4f6",
                 ...bStyles.backButtonIcon
-              }, children: /* @__PURE__ */ jsx7("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx7("path", { d: "M15 18l-6-6 6-6" }) }) }),
-              /* @__PURE__ */ jsx7(BackButtonContentSlot, { content: cardBackButtonContent })
+              }, children: /* @__PURE__ */ jsx8("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx8("path", { d: "M15 18l-6-6 6-6" }) }) }),
+              /* @__PURE__ */ jsx8(BackButtonContentSlot, { content: cardBackButtonContent })
             ]
           }
         ),
-        hideTitle ? /* @__PURE__ */ jsx7("div", { style: { flex: 1 } }) : /* @__PURE__ */ jsx7("div", { style: {
+        hideTitle ? /* @__PURE__ */ jsx8("div", { style: { flex: 1 } }) : /* @__PURE__ */ jsx8("div", { style: {
           flex: 1,
           textAlign: "center",
           fontWeight: 600,
@@ -5992,11 +6717,11 @@ function InterimButtonsView({
           color: "#262833",
           paddingRight: 80,
           ...bStyles.title
-        }, children: /* @__PURE__ */ jsx7(TitleContentSlot, { content: cardTitleContent }) })
+        }, children: /* @__PURE__ */ jsx8(TitleContentSlot, { content: cardTitleContent }) })
       ] }),
-      /* @__PURE__ */ jsx7("div", { style: { backgroundColor: inputBg, border: `1px solid ${inputBorder}`, borderTopLeftRadius: 8, borderTopRightRadius: 8, padding: 12, height: 45 }, children: /* @__PURE__ */ jsx7("div", { style: { width: "60%", height: 14, borderRadius: 4, background: "#e5e7eb", animation: "flopay-interim-pulse 1.5s ease-in-out infinite" } }) }),
+      /* @__PURE__ */ jsx8("div", { style: { backgroundColor: inputBg, border: `1px solid ${inputBorder}`, borderTopLeftRadius: 8, borderTopRightRadius: 8, padding: 12, height: 45 }, children: /* @__PURE__ */ jsx8("div", { style: { width: "60%", height: 14, borderRadius: 4, background: "#e5e7eb", animation: "flopay-interim-pulse 1.5s ease-in-out infinite" } }) }),
       /* @__PURE__ */ jsxs5("div", { style: { display: "flex" }, children: [
-        /* @__PURE__ */ jsx7("div", { style: {
+        /* @__PURE__ */ jsx8("div", { style: {
           flex: 1,
           backgroundColor: inputBg,
           borderTop: "none",
@@ -6006,8 +6731,8 @@ function InterimButtonsView({
           borderBottomLeftRadius: 8,
           padding: 12,
           height: 45
-        }, children: /* @__PURE__ */ jsx7("div", { style: { width: "50%", height: 14, borderRadius: 4, background: "#e5e7eb", animation: "flopay-interim-pulse 1.5s ease-in-out infinite" } }) }),
-        /* @__PURE__ */ jsx7("div", { style: {
+        }, children: /* @__PURE__ */ jsx8("div", { style: { width: "50%", height: 14, borderRadius: 4, background: "#e5e7eb", animation: "flopay-interim-pulse 1.5s ease-in-out infinite" } }) }),
+        /* @__PURE__ */ jsx8("div", { style: {
           flex: 1,
           backgroundColor: inputBg,
           borderTop: "none",
@@ -6017,10 +6742,10 @@ function InterimButtonsView({
           borderBottomRightRadius: 8,
           padding: 12,
           height: 45
-        }, children: /* @__PURE__ */ jsx7("div", { style: { width: "40%", height: 14, borderRadius: 4, background: "#e5e7eb", animation: "flopay-interim-pulse 1.5s ease-in-out infinite" } }) })
+        }, children: /* @__PURE__ */ jsx8("div", { style: { width: "40%", height: 14, borderRadius: 4, background: "#e5e7eb", animation: "flopay-interim-pulse 1.5s ease-in-out infinite" } }) })
       ] }),
-      /* @__PURE__ */ jsx7("div", { style: { backgroundColor: inputBg, border: `1px solid ${inputBorder}`, borderRadius: 8, marginTop: 8, padding: 12, height: 45 }, children: /* @__PURE__ */ jsx7("div", { style: { width: "45%", height: 14, borderRadius: 4, background: "#e5e7eb", animation: "flopay-interim-pulse 1.5s ease-in-out infinite" } }) }),
-      /* @__PURE__ */ jsx7("div", { style: {
+      /* @__PURE__ */ jsx8("div", { style: { backgroundColor: inputBg, border: `1px solid ${inputBorder}`, borderRadius: 8, marginTop: 8, padding: 12, height: 45 }, children: /* @__PURE__ */ jsx8("div", { style: { width: "45%", height: 14, borderRadius: 4, background: "#e5e7eb", animation: "flopay-interim-pulse 1.5s ease-in-out infinite" } }) }),
+      /* @__PURE__ */ jsx8("div", { style: {
         height: 50,
         borderRadius: 8,
         marginTop: 16,
@@ -6029,7 +6754,7 @@ function InterimButtonsView({
         ...bStyles.submitButton,
         opacity: 0.5
       } }),
-      /* @__PURE__ */ jsx7("style", { children: `
+      /* @__PURE__ */ jsx8("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); }
@@ -6042,7 +6767,7 @@ function InterimButtonsView({
   return /* @__PURE__ */ jsxs5("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__ */ jsx7(
+    showStripe && /* @__PURE__ */ jsx8(
       "button",
       {
         type: "button",
@@ -6082,7 +6807,7 @@ function InterimButtonsView({
         onMouseUp: (e) => {
           e.currentTarget.style.transform = "scale(1)";
         },
-        children: /* @__PURE__ */ jsx7(CardButtonContentSlot, { content: cardButtonContent })
+        children: /* @__PURE__ */ jsx8(CardButtonContentSlot, { content: cardButtonContent })
       }
     ),
     errorMessage && /* @__PURE__ */ jsxs5("div", { style: {
@@ -6099,22 +6824,22 @@ function InterimButtonsView({
       gap: "0.5rem",
       ...bStyles.errorBanner
     }, children: [
-      /* @__PURE__ */ jsx7("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", style: { flexShrink: 0 }, children: /* @__PURE__ */ jsx7("path", { d: "M12 9v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z", stroke: "#DC2626", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }),
+      /* @__PURE__ */ jsx8("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", style: { flexShrink: 0 }, children: /* @__PURE__ */ jsx8("path", { d: "M12 9v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z", stroke: "#DC2626", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }),
       errorMessage
     ] }),
-    /* @__PURE__ */ jsx7("style", { children: `@keyframes flopay-interim-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }` })
+    /* @__PURE__ */ jsx8("style", { children: `@keyframes flopay-interim-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }` })
   ] });
 }
 
 // src/checkout-form.tsx
 import { PaymentAPI as PaymentAPI5 } from "@flopay/js";
 import { FloPayError as FloPayError6 } from "@flopay/shared";
-import { forwardRef as forwardRef2, useCallback as useCallback3, useEffect as useEffect6, useImperativeHandle as useImperativeHandle2, useState as useState5 } from "react";
-import { Fragment as Fragment4, jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
+import { forwardRef as forwardRef2, useCallback as useCallback3, useEffect as useEffect7, useImperativeHandle as useImperativeHandle2, useState as useState5 } from "react";
+import { Fragment as Fragment4, jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
 var WALLET_RESUME_KEY = "flopay_wallet_resume";
 var CheckoutForm = forwardRef2(
   function CheckoutForm2(props, ref) {
-    return /* @__PURE__ */ jsx8(CheckoutFormInner, { ...props, innerRef: ref });
+    return /* @__PURE__ */ jsx9(CheckoutFormInner, { ...props, innerRef: ref });
   }
 );
 function CheckoutFormInner({
@@ -6313,7 +7038,7 @@ function CheckoutFormInner({
       }
     }
   }), [flopay, dispatchTokenizedBody, onError, updateError, emitDecline]);
-  useEffect6(() => {
+  useEffect7(() => {
     if (typeof window === "undefined") return;
     const stored = localStorage.getItem(WALLET_RESUME_KEY);
     if (!stored) return;
@@ -6424,7 +7149,7 @@ function CheckoutFormInner({
   );
   const isReady = flopay !== null && elements !== null;
   return /* @__PURE__ */ jsxs6("form", { onSubmit: handleSubmit, className, style: { position: "relative" }, children: [
-    (is3DSActive || isSubmitting) && /* @__PURE__ */ jsx8("div", { "data-testid": "flopay-overlay", style: {
+    (is3DSActive || isSubmitting) && /* @__PURE__ */ jsx9("div", { "data-testid": "flopay-overlay", style: {
       position: "absolute",
       inset: 0,
       background: "rgba(255,255,255,0.7)",
@@ -6433,12 +7158,12 @@ function CheckoutFormInner({
       justifyContent: "center",
       zIndex: 10
     }, children: is3DSActive ? "Verifying payment..." : "Processing..." }),
-    !isReady && /* @__PURE__ */ jsx8("div", { "data-testid": "flopay-loading", "aria-busy": "true", children: "Loading payment form..." }),
+    !isReady && /* @__PURE__ */ jsx9("div", { "data-testid": "flopay-loading", "aria-busy": "true", children: "Loading payment form..." }),
     isReady && /* @__PURE__ */ jsxs6(Fragment4, { children: [
-      /* @__PURE__ */ jsx8(PaymentElement, { options: { layout } }),
-      showAddress && /* @__PURE__ */ jsx8(AddressElement, { options: { mode: showAddress === true ? "billing" : showAddress } }),
-      displayError && /* @__PURE__ */ jsx8("div", { role: "alert", "data-testid": "flopay-error", style: { color: "red", margin: "0.75rem 0" }, children: displayError }),
-      children ?? /* @__PURE__ */ jsx8(
+      /* @__PURE__ */ jsx9(PaymentElement, { options: { layout } }),
+      showAddress && /* @__PURE__ */ jsx9(AddressElement, { options: { mode: showAddress === true ? "billing" : showAddress } }),
+      displayError && /* @__PURE__ */ jsx9("div", { role: "alert", "data-testid": "flopay-error", style: { color: "red", margin: "0.75rem 0" }, children: displayError }),
+      children ?? /* @__PURE__ */ jsx9(
         "button",
         {
           type: "submit",
@@ -6454,8 +7179,8 @@ function CheckoutFormInner({
 // src/paypal-button.tsx
 import { PaymentAPI as PaymentAPI6 } from "@flopay/js";
 import { FloPayError as FloPayError7 } from "@flopay/shared";
-import { useCallback as useCallback4, useEffect as useEffect7, useRef as useRef5, useState as useState6 } from "react";
-import { Fragment as Fragment5, jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
+import { useCallback as useCallback4, useEffect as useEffect8, useRef as useRef6, useState as useState6 } from "react";
+import { Fragment as Fragment5, jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
 function PayPalButton({
   sessionId,
   nonce,
@@ -6475,7 +7200,7 @@ function PayPalButton({
   const contextBillingUrl = useBillingApiUrl();
   const [ready, setReady] = useState6(false);
   const [submitting, setSubmitting] = useState6(false);
-  const paypalResumeAttempted = useRef5(false);
+  const paypalResumeAttempted = useRef6(false);
   const baseUrl = (billingApiUrl || contextBillingUrl).replace(/\/+$/, "");
   const processPaymentInternal = useCallback4(
     async (tokenizedBody) => {
@@ -6515,7 +7240,7 @@ function PayPalButton({
     },
     [onTokenizedBody, processPaymentInternal]
   );
-  useEffect7(() => {
+  useEffect8(() => {
     if (!flopay || paypalResumeAttempted.current) return;
     const params = new URLSearchParams(window.location.search);
     const paymentIntentId = params.get("payment_intent");
@@ -6597,11 +7322,11 @@ function PayPalButton({
     }
   }, [flopay, elements, sessionId, nonce, email, baseUrl, dispatchTokenizedBody, onErrorChange]);
   if (!flopay || !elements) {
-    return /* @__PURE__ */ jsx9("div", { style: { height: 45, background: "#f0f0f0", borderRadius: 6, animation: "pulse 1.5s infinite" } });
+    return /* @__PURE__ */ jsx10("div", { style: { height: 45, background: "#f0f0f0", borderRadius: 6, animation: "pulse 1.5s infinite" } });
   }
   return /* @__PURE__ */ jsxs7(Fragment5, { children: [
-    !ready && /* @__PURE__ */ jsx9("div", { style: { height: 45, background: "#f0f0f0", borderRadius: 6 } }),
-    /* @__PURE__ */ jsx9("div", { style: ready ? {} : { display: "none" }, children: /* @__PURE__ */ jsx9(
+    !ready && /* @__PURE__ */ jsx10("div", { style: { height: 45, background: "#f0f0f0", borderRadius: 6 } }),
+    /* @__PURE__ */ jsx10("div", { style: ready ? {} : { display: "none" }, children: /* @__PURE__ */ jsx10(
       "button",
       {
         type: "button",
@@ -6623,7 +7348,7 @@ function PayPalButton({
         children: submitting ? "Processing..." : "PayPal"
       }
     ) }),
-    (submitting || isProcessing) && /* @__PURE__ */ jsx9("div", { style: {
+    (submitting || isProcessing) && /* @__PURE__ */ jsx10("div", { style: {
       position: "fixed",
       inset: 0,
       background: "rgba(0,0,0,0.4)",
@@ -6631,7 +7356,7 @@ function PayPalButton({
       alignItems: "center",
       justifyContent: "center",
       zIndex: 1e3
-    }, children: /* @__PURE__ */ jsx9("div", { style: {
+    }, children: /* @__PURE__ */ jsx10("div", { style: {
       background: "white",
       borderRadius: 8,
       padding: "1.5rem",
@@ -6643,10 +7368,10 @@ function PayPalButton({
 }
 
 // src/automatic-payment-button.tsx
-import { useCallback as useCallback5, useEffect as useEffect8, useMemo as useMemo5, useRef as useRef6, useState as useState7 } from "react";
+import { useCallback as useCallback5, useEffect as useEffect9, useMemo as useMemo5, useRef as useRef7, useState as useState7 } from "react";
 import { PaymentAPI as PaymentAPI7 } from "@flopay/js";
 import { FloPayError as FloPayError8, resolveBillingApiUrl as resolveBillingApiUrl4, resolveButtonsLayoutTheme as resolveButtonsLayoutTheme3, resolveTheme as resolveTheme3 } from "@flopay/shared";
-import { Fragment as Fragment6, jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
 var DEFAULT_BUTTONS_LAYOUT_BUTTON_HEIGHT3 = 44;
 function sleep2(ms) {
   return new Promise((resolve) => setTimeout(resolve, ms));
@@ -6714,6 +7439,7 @@ function FloPayAutomaticPaymentButton({
   billingApiUrl,
   locale,
   theme,
+  appearance,
   buttonsTheme,
   buttonsStyles: stylesOverride,
   onSuccess,
@@ -6761,30 +7487,32 @@ function FloPayAutomaticPaymentButton({
   const [overlayStatus, setOverlayStatus] = useState7(null);
   const [overlayError, setOverlayError] = useState7(null);
   const [fallbackSession, setFallbackSession] = useState7(null);
-  const isMountedRef = useRef6(true);
-  const fallbackSessionRef = useRef6(fallbackSession);
-  const onSuccessRef = useRef6(onSuccess);
-  const onErrorRef = useRef6(onError);
-  const onDeclineRef = useRef6(onDecline);
-  useEffect8(() => {
+  const isMountedRef = useRef7(true);
+  const threeDsAbortRef = useRef7(null);
+  const fallbackSessionRef = useRef7(fallbackSession);
+  const onSuccessRef = useRef7(onSuccess);
+  const onErrorRef = useRef7(onError);
+  const onDeclineRef = useRef7(onDecline);
+  useEffect9(() => {
     fallbackSessionRef.current = fallbackSession;
   }, [fallbackSession]);
-  useEffect8(() => {
+  useEffect9(() => {
     onSuccessRef.current = onSuccess;
   }, [onSuccess]);
-  useEffect8(() => {
+  useEffect9(() => {
     onErrorRef.current = onError;
   }, [onError]);
-  useEffect8(() => {
+  useEffect9(() => {
     onDeclineRef.current = onDecline;
   }, [onDecline]);
-  useEffect8(() => {
+  useEffect9(() => {
     isMountedRef.current = true;
     return () => {
       isMountedRef.current = false;
+      threeDsAbortRef.current?.abort();
     };
   }, []);
-  useEffect8(() => {
+  useEffect9(() => {
     if (!fallbackSession || typeof window === "undefined") {
       return;
     }
@@ -6863,6 +7591,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 PaymentAPI7(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.",
@@ -7030,9 +7814,26 @@ function FloPayAutomaticPaymentButton({
       cardButton: { ...base.cardButton, ...stylesOverride.cardButton }
     };
   }, [themeBundle, buttonsTheme, stylesOverride]);
+  const resolvedAppearance = useMemo5(() => {
+    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__ */ jsxs8(Fragment6, { children: [
-    /* @__PURE__ */ jsx10(
+    /* @__PURE__ */ jsx11(
       "button",
       {
         ...buttonProps,
@@ -7048,14 +7849,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,
@@ -7064,11 +7868,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) {
@@ -7081,17 +7897,17 @@ function FloPayAutomaticPaymentButton({
             e.currentTarget.style.transform = "scale(1)";
           }
         },
-        children: /* @__PURE__ */ jsx10(CardButtonContentSlot, { content: children })
+        children: /* @__PURE__ */ jsx11(CardButtonContentSlot, { content: children })
       }
     ),
-    overlayStatus && /* @__PURE__ */ jsx10(
+    overlayStatus && /* @__PURE__ */ jsx11(
       ProcessingOverlay,
       {
         status: overlayStatus,
         errorMessage: overlayError
       }
     ),
-    fallbackSession && /* @__PURE__ */ jsx10(
+    fallbackSession && /* @__PURE__ */ jsx11(
       "div",
       {
         "data-testid": "flopay-automatic-payment-fallback",
@@ -7112,7 +7928,7 @@ function FloPayAutomaticPaymentButton({
           padding: "1.5rem",
           zIndex: 1100
         },
-        children: /* @__PURE__ */ jsx10(
+        children: /* @__PURE__ */ jsx11(
           "div",
           {
             style: {
@@ -7128,7 +7944,7 @@ function FloPayAutomaticPaymentButton({
               flexDirection: "column",
               gap: "1rem"
             },
-            children: /* @__PURE__ */ jsx10(
+            children: /* @__PURE__ */ jsx11(
               FloPayCheckout,
               {
                 sessionId: fallbackSession.sessionId,
@@ -7137,6 +7953,7 @@ function FloPayAutomaticPaymentButton({
                 billingApiUrl: resolvedBillingUrl,
                 locale,
                 theme,
+                ...resolvedAppearance ? { appearance: resolvedAppearance } : {},
                 buttonsTheme,
                 buttonsStyles: stylesOverride,
                 initialErrorMessage: fallbackSession.errorMessage,
@@ -7166,6 +7983,7 @@ export {
   PayPalButton,
   PaymentElement,
   SplitCardForm,
+  VaultCardFields,
   useCheckout,
   useElements,
   useFloPay,