@flopay/react 0.4.3 → 0.4.4

package/dist/index.cjs

@@ -36,6 +36,7 @@ __export(index_exports, {
   CardExpiryElement: () => CardExpiryElement,
   CardNumberElement: () => CardNumberElement,
   CheckoutForm: () => CheckoutForm,
+  FloPayAutomaticPaymentButton: () => FloPayAutomaticPaymentButton,
   FloPayCheckout: () => FloPayCheckout,
   FloPayProvider: () => FloPayProvider,
   PayPalButton: () => PayPalButton,
@@ -141,9 +142,9 @@ function FloPayProvider({
 }
 
 // src/flopay-checkout.tsx
-var import_react7 = __toESM(require("react"), 1);
-var import_js = require("@flopay/js");
-var import_shared6 = require("@flopay/shared");
+var import_react8 = __toESM(require("react"), 1);
+var import_js2 = require("@flopay/js");
+var import_shared7 = require("@flopay/shared");
 
 // src/card-button-content.tsx
 var import_react3 = require("react");
@@ -275,7 +276,7 @@ var AddressElement = createElementComponent("address", "AddressElement");
 // src/split-card-form.tsx
 var import_react_stripe_js = require("@stripe/react-stripe-js");
 var import_shared4 = require("@flopay/shared");
-var import_react6 = require("react");
+var import_react7 = require("react");
 
 // src/hooks.ts
 var import_react5 = require("react");
@@ -300,6 +301,157 @@ function useBillingApiUrl() {
   return ctx.billingApiUrl || (0, import_shared2.resolveBillingApiUrl)();
 }
 
+// src/processing-overlay.tsx
+var import_react6 = require("react");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var PROCESSING_OVERLAY_SUCCESS_DELAY_MS = 1200;
+var PROCESSING_OVERLAY_ERROR_DELAY_MS = 1500;
+function ProcessingOverlay({
+  status,
+  errorMessage
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    "div",
+    {
+      "data-testid": "flopay-processing-overlay",
+      "data-status": status,
+      role: "dialog",
+      "aria-modal": "true",
+      style: {
+        position: "fixed",
+        inset: 0,
+        background: "rgba(0,0,0,0.35)",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        zIndex: 1e3,
+        backdropFilter: "blur(2px)"
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+        "div",
+        {
+          style: {
+            background: "white",
+            borderRadius: 12,
+            padding: "2rem 2.5rem",
+            textAlign: "center",
+            boxShadow: "0 8px 32px rgba(0,0,0,0.18)",
+            minWidth: 240,
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
+            gap: 16
+          },
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { width: 48, height: 48, position: "relative" }, children: [
+              status === "processing" && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+                "svg",
+                {
+                  width: "48",
+                  height: "48",
+                  viewBox: "0 0 24 24",
+                  fill: "none",
+                  xmlns: "http://www.w3.org/2000/svg",
+                  style: { animation: "flopay-spin 0.8s linear infinite" },
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("circle", { cx: "12", cy: "12", r: "10", stroke: "#e5e7eb", strokeWidth: "3" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M4 12a8 8 0 018-8v3a5 5 0 00-5 5H4z", fill: "#4A49FF" })
+                  ]
+                }
+              ),
+              status === "success" && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { animation: "flopay-pop 0.4s cubic-bezier(0.34,1.56,0.64,1)" }, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("svg", { width: "48", height: "48", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("circle", { cx: "12", cy: "12", r: "11", fill: "#22c55e" }),
+                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                  "path",
+                  {
+                    d: "M7 12.5l3 3 7-7",
+                    stroke: "white",
+                    strokeWidth: "2.5",
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    style: {
+                      strokeDasharray: 20,
+                      strokeDashoffset: 20,
+                      animation: "flopay-draw 0.4s 0.15s ease forwards"
+                    }
+                  }
+                )
+              ] }) }),
+              status === "error" && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { animation: "flopay-shake 0.4s ease" }, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("svg", { width: "48", height: "48", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("circle", { cx: "12", cy: "12", r: "11", fill: "#ef4444" }),
+                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                  "path",
+                  {
+                    d: "M8 8l8 8M16 8l-8 8",
+                    stroke: "white",
+                    strokeWidth: "2.5",
+                    strokeLinecap: "round",
+                    style: {
+                      strokeDasharray: 12,
+                      strokeDashoffset: 12,
+                      animation: "flopay-draw 0.3s 0.1s ease forwards"
+                    }
+                  }
+                )
+              ] }) })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+              "span",
+              {
+                style: {
+                  fontSize: 14,
+                  fontWeight: 600,
+                  letterSpacing: "0.05em",
+                  color: status === "success" ? "#16a34a" : status === "error" ? "#dc2626" : "#374151"
+                },
+                children: [
+                  status === "processing" && "PROCESSING...",
+                  status === "success" && "PAYMENT SUCCESSFUL",
+                  status === "error" && "PAYMENT FAILED"
+                ]
+              }
+            ),
+            status === "success" && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+              "p",
+              {
+                style: {
+                  fontSize: 13,
+                  color: "#6b7280",
+                  fontWeight: 400,
+                  maxWidth: 260,
+                  lineHeight: 1.4,
+                  margin: 0
+                },
+                children: "You will be automatically redirected, do not close or navigate away from this window."
+              }
+            ),
+            status === "error" && errorMessage && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+              "p",
+              {
+                style: {
+                  fontSize: 13,
+                  color: "#6b7280",
+                  fontWeight: 400,
+                  maxWidth: 260,
+                  lineHeight: 1.4,
+                  margin: 0
+                },
+                children: errorMessage
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("style", { children: `
+          @keyframes flopay-spin { to { transform: rotate(360deg); } }
+          @keyframes flopay-pop { 0% { transform: scale(0); } 100% { transform: scale(1); } }
+          @keyframes flopay-draw { to { stroke-dashoffset: 0; } }
+          @keyframes flopay-shake { 0%,100% { transform: translateX(0); } 20%,60% { transform: translateX(-4px); } 40%,80% { transform: translateX(4px); } }
+        ` })
+          ]
+        }
+      )
+    }
+  );
+}
+
 // src/checkout-utils.ts
 var import_shared3 = require("@flopay/shared");
 function mergeInlineSessionPatches(base, patch) {
@@ -357,7 +509,7 @@ function buildSyntheticSession(params, checkoutModeOverride) {
     },
     successUrl: params.successUrl,
     cancelUrl: params.cancelUrl,
-    checkoutMode: params.checkoutMode ?? checkoutModeOverride ?? "full",
+    checkoutMode: checkoutModeOverride ?? params.checkoutMode ?? "full",
     items: (params.items ?? []).map((item, idx) => ({
       uuid: `synthetic-item-${idx}`,
       checkoutSessionId: "",
@@ -398,10 +550,22 @@ function buildDeclineEvent(method, input, overrides) {
     ...declineCode ? { declineCode } : {}
   };
 }
+function resolveTokenizedPaymentMethodId(tokenizedBody) {
+  const candidates = [
+    tokenizedBody?.id,
+    tokenizedBody?.originalPaymentMethodId
+  ];
+  for (const candidate of candidates) {
+    if (typeof candidate === "string" && candidate.startsWith("pm_")) {
+      return candidate;
+    }
+  }
+  return void 0;
+}
 
 // src/split-card-form.tsx
 var import_shared5 = require("@flopay/shared");
-var import_jsx_runtime4 = require("react/jsx-runtime");
+var import_jsx_runtime5 = require("react/jsx-runtime");
 var WALLET_RESUME_KEY = "flopay_wallet_resume";
 var FLOPAY_KEYFRAMES = `
 @keyframes flopay-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }
@@ -443,7 +607,7 @@ function normalizeBeforeButtonClickError(method, err) {
   );
 }
 function FloPayKeyframes() {
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("style", { children: FLOPAY_KEYFRAMES });
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("style", { children: FLOPAY_KEYFRAMES });
 }
 function toCssSize(value) {
   if (typeof value === "number") return `${value}px`;
@@ -464,8 +628,8 @@ function ExpressCheckoutReadySwap({
   children
 }) {
   if (state === "unavailable") return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { position: "relative", minHeight: 44 }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: { position: "relative", minHeight: 44 }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
       "div",
       {
         "data-testid": placeholderTestId,
@@ -484,7 +648,7 @@ function ExpressCheckoutReadySwap({
         }
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
       "div",
       {
         style: {
@@ -499,109 +663,9 @@ function ExpressCheckoutReadySwap({
     )
   ] });
 }
-function ProcessingOverlay({ status, errorMessage }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: {
-    position: "fixed",
-    inset: 0,
-    background: "rgba(0,0,0,0.35)",
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    zIndex: 1e3,
-    backdropFilter: "blur(2px)"
-  }, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: {
-    background: "white",
-    borderRadius: 12,
-    padding: "2rem 2.5rem",
-    textAlign: "center",
-    boxShadow: "0 8px 32px rgba(0,0,0,0.18)",
-    minWidth: 240,
-    display: "flex",
-    flexDirection: "column",
-    alignItems: "center",
-    gap: 16
-  }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { width: 48, height: 48, position: "relative" }, children: [
-      status === "processing" && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
-        "svg",
-        {
-          width: "48",
-          height: "48",
-          viewBox: "0 0 24 24",
-          fill: "none",
-          xmlns: "http://www.w3.org/2000/svg",
-          style: { animation: "flopay-spin 0.8s linear infinite" },
-          children: [
-            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("circle", { cx: "12", cy: "12", r: "10", stroke: "#e5e7eb", strokeWidth: "3" }),
-            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M4 12a8 8 0 018-8v3a5 5 0 00-5 5H4z", fill: "#4A49FF" })
-          ]
-        }
-      ),
-      status === "success" && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { animation: "flopay-pop 0.4s cubic-bezier(0.34,1.56,0.64,1)" }, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("svg", { width: "48", height: "48", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("circle", { cx: "12", cy: "12", r: "11", fill: "#22c55e" }),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-          "path",
-          {
-            d: "M7 12.5l3 3 7-7",
-            stroke: "white",
-            strokeWidth: "2.5",
-            strokeLinecap: "round",
-            strokeLinejoin: "round",
-            style: { strokeDasharray: 20, strokeDashoffset: 20, animation: "flopay-draw 0.4s 0.15s ease forwards" }
-          }
-        )
-      ] }) }),
-      status === "error" && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { animation: "flopay-shake 0.4s ease" }, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("svg", { width: "48", height: "48", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("circle", { cx: "12", cy: "12", r: "11", fill: "#ef4444" }),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-          "path",
-          {
-            d: "M8 8l8 8M16 8l-8 8",
-            stroke: "white",
-            strokeWidth: "2.5",
-            strokeLinecap: "round",
-            style: { strokeDasharray: 12, strokeDashoffset: 12, animation: "flopay-draw 0.3s 0.1s ease forwards" }
-          }
-        )
-      ] }) })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { style: {
-      fontSize: 14,
-      fontWeight: 600,
-      letterSpacing: "0.05em",
-      color: status === "success" ? "#16a34a" : status === "error" ? "#dc2626" : "#374151"
-    }, children: [
-      status === "processing" && "PROCESSING...",
-      status === "success" && "PAYMENT SUCCESSFUL",
-      status === "error" && "PAYMENT FAILED"
-    ] }),
-    status === "success" && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { style: {
-      fontSize: 13,
-      color: "#6b7280",
-      fontWeight: 400,
-      maxWidth: 260,
-      lineHeight: 1.4,
-      margin: 0
-    }, children: "You will be automatically redirected, do not close or navigate away from this window." }),
-    status === "error" && errorMessage && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { style: {
-      fontSize: 13,
-      color: "#6b7280",
-      fontWeight: 400,
-      maxWidth: 260,
-      lineHeight: 1.4,
-      margin: 0
-    }, children: errorMessage }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("style", { children: `
-          @keyframes flopay-spin { to { transform: rotate(360deg); } }
-          @keyframes flopay-pop { 0% { transform: scale(0); } 100% { transform: scale(1); } }
-          @keyframes flopay-draw { to { stroke-dashoffset: 0; } }
-          @keyframes flopay-shake { 0%,100% { transform: translateX(0); } 20%,60% { transform: translateX(-4px); } 40%,80% { transform: translateX(4px); } }
-        ` })
-  ] }) });
-}
-var SplitCardForm = (0, import_react6.forwardRef)(
+var SplitCardForm = (0, import_react7.forwardRef)(
   function SplitCardForm2(props, ref) {
-    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(SplitCardFormInner, { ...props, innerRef: ref });
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SplitCardFormInner, { ...props, innerRef: ref });
   }
 );
 function PayPalButtonInner({
@@ -617,12 +681,12 @@ function PayPalButtonInner({
 }) {
   const stripe = (0, import_react_stripe_js.useStripe)();
   const elements = (0, import_react_stripe_js.useElements)();
-  const [loadState, setLoadState] = (0, import_react6.useState)("loading");
-  const [submitting, setSubmitting] = (0, import_react6.useState)(false);
-  const paypalResumeAttempted = (0, import_react6.useRef)(false);
-  const beforeClickRef = (0, import_react6.useRef)(null);
+  const [loadState, setLoadState] = (0, import_react7.useState)("loading");
+  const [submitting, setSubmitting] = (0, import_react7.useState)(false);
+  const paypalResumeAttempted = (0, import_react7.useRef)(false);
+  const beforeClickRef = (0, import_react7.useRef)(null);
   const baseUrl = billingApiUrl.replace(/\/+$/, "");
-  (0, import_react6.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     if (!stripe || paypalResumeAttempted.current) return;
     const params = new URLSearchParams(window.location.search);
     const paymentIntentId = params.get("payment_intent");
@@ -669,7 +733,7 @@ function PayPalButtonInner({
       }
     })();
   }, [stripe, onTokenizedBody, onErrorChange, onDecline]);
-  const handlePayPalClick = (0, import_react6.useCallback)(async (event) => {
+  const handlePayPalClick = (0, import_react7.useCallback)(async (event) => {
     if (isProcessing || submitting) {
       event.reject();
       return;
@@ -686,7 +750,7 @@ function PayPalButtonInner({
     };
     event.resolve();
   }, [isProcessing, runBeforeButtonClick, submitting]);
-  const handlePayPalConfirm = (0, import_react6.useCallback)(async (event) => {
+  const handlePayPalConfirm = (0, import_react7.useCallback)(async (event) => {
     if (!stripe || !elements) return;
     let prepared = beforeClickRef.current;
     beforeClickRef.current = null;
@@ -764,8 +828,8 @@ function PayPalButtonInner({
       setSubmitting(false);
     }
   }, [stripe, elements, sessionId, email, baseUrl, onTokenizedBody, onErrorChange, onDecline, onButtonClick, runBeforeButtonClick]);
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ExpressCheckoutReadySwap, { state: loadState, placeholderTestId: "flopay-paypal-placeholder", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ExpressCheckoutReadySwap, { state: loadState, placeholderTestId: "flopay-paypal-placeholder", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
       import_react_stripe_js.ExpressCheckoutElement,
       {
         onReady: (event) => setLoadState(resolveExpressCheckoutLoadState(event, ["paypal"])),
@@ -787,7 +851,7 @@ function PayPalButtonInner({
         }
       }
     ) }),
-    submitting && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ProcessingOverlay, { status: "processing" })
+    submitting && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ProcessingOverlay, { status: "processing" })
   ] });
 }
 function WalletButtonInner({
@@ -804,12 +868,12 @@ function WalletButtonInner({
 }) {
   const stripe = (0, import_react_stripe_js.useStripe)();
   const elements = (0, import_react_stripe_js.useElements)();
-  const [loadState, setLoadState] = (0, import_react6.useState)("loading");
-  const [submitting, setSubmitting] = (0, import_react6.useState)(false);
+  const [loadState, setLoadState] = (0, import_react7.useState)("loading");
+  const [submitting, setSubmitting] = (0, import_react7.useState)(false);
   const baseUrl = billingApiUrl.replace(/\/+$/, "");
-  const lastWalletMethodRef = (0, import_react6.useRef)("card");
-  const beforeClickRef = (0, import_react6.useRef)(null);
-  const handleWalletConfirm = (0, import_react6.useCallback)(
+  const lastWalletMethodRef = (0, import_react7.useRef)("card");
+  const beforeClickRef = (0, import_react7.useRef)(null);
+  const handleWalletConfirm = (0, import_react7.useCallback)(
     async (event) => {
       if (!stripe || !elements) return;
       const walletType = event.expressPaymentType;
@@ -890,8 +954,8 @@ function WalletButtonInner({
     },
     [stripe, elements, sessionId, email, baseUrl, onTokenizedBody, onErrorChange, onDecline, onButtonClick, runBeforeButtonClick]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ExpressCheckoutReadySwap, { state: loadState, placeholderTestId: "flopay-wallet-placeholder", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ExpressCheckoutReadySwap, { state: loadState, placeholderTestId: "flopay-wallet-placeholder", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
       import_react_stripe_js.ExpressCheckoutElement,
       {
         onReady: (event) => setLoadState(resolveExpressCheckoutLoadState(event, ["applePay", "googlePay"])),
@@ -929,7 +993,7 @@ function WalletButtonInner({
         }
       }
     ) }),
-    submitting && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ProcessingOverlay, { status: "processing" })
+    submitting && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ProcessingOverlay, { status: "processing" })
   ] });
 }
 function SplitCardFormInner({
@@ -962,6 +1026,7 @@ function SplitCardFormInner({
   cardButtonContent,
   cardBackButtonContent,
   cardTitleContent,
+  showSecurityFooter = true,
   onButtonClick,
   onBeforeButtonClick,
   enableAVS = false,
@@ -978,39 +1043,39 @@ function SplitCardFormInner({
   const flopay = useFloPay();
   const paypalFlopay = usePayPalFloPay();
   const elements = useElements();
-  const checkout = (0, import_react6.useContext)(CheckoutContext);
+  const checkout = (0, import_react7.useContext)(CheckoutContext);
   const contextBillingUrl = useBillingApiUrl();
-  const [processing, setProcessing] = (0, import_react6.useState)(false);
-  const [error, setError] = (0, import_react6.useState)(null);
-  const [is3DSActive, setIs3DSActive] = (0, import_react6.useState)(false);
-  const [selectedCountry, setSelectedCountry] = (0, import_react6.useState)(countryProp ?? "US");
-  const [zipCode, setZipCode] = (0, import_react6.useState)(zipProp ?? "");
-  const [accountPatch, setAccountPatch] = (0, import_react6.useState)({});
-  const zipCodeRef = (0, import_react6.useRef)(zipProp ?? "");
-  const selectedCountryRef = (0, import_react6.useRef)(countryProp ?? "US");
-  const [viewState, setViewState] = (0, import_react6.useState)(initialCardOpen ? "card" : "buttons");
+  const [processing, setProcessing] = (0, import_react7.useState)(false);
+  const [error, setError] = (0, import_react7.useState)(null);
+  const [is3DSActive, setIs3DSActive] = (0, import_react7.useState)(false);
+  const [selectedCountry, setSelectedCountry] = (0, import_react7.useState)(countryProp ?? "US");
+  const [zipCode, setZipCode] = (0, import_react7.useState)(zipProp ?? "");
+  const [accountPatch, setAccountPatch] = (0, import_react7.useState)({});
+  const zipCodeRef = (0, import_react7.useRef)(zipProp ?? "");
+  const selectedCountryRef = (0, import_react7.useRef)(countryProp ?? "US");
+  const [viewState, setViewState] = (0, import_react7.useState)(initialCardOpen ? "card" : "buttons");
   const showCardForm = viewState === "expanding" || viewState === "card";
   const TRANSITION_MS = 280;
-  const expandToCard = (0, import_react6.useCallback)(() => {
+  const expandToCard = (0, import_react7.useCallback)(() => {
     setViewState("expanding");
     setTimeout(() => setViewState("card"), TRANSITION_MS);
   }, []);
-  const collapseToButtons = (0, import_react6.useCallback)(() => {
+  const collapseToButtons = (0, import_react7.useCallback)(() => {
     setViewState("collapsing");
     setTimeout(() => setViewState("buttons"), TRANSITION_MS);
   }, []);
-  (0, import_react6.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     if (layout === "buttons" && initialCardOpen) {
       setViewState("card");
     }
   }, [layout, initialCardOpen]);
-  const [fullName, setFullName] = (0, import_react6.useState)("");
-  const [formReady, setFormReady] = (0, import_react6.useState)(false);
-  const [overlayStatus, setOverlayStatus] = (0, import_react6.useState)(null);
-  const processingRef = (0, import_react6.useRef)(false);
+  const [fullName, setFullName] = (0, import_react7.useState)("");
+  const [formReady, setFormReady] = (0, import_react7.useState)(false);
+  const [overlayStatus, setOverlayStatus] = (0, import_react7.useState)(null);
+  const processingRef = (0, import_react7.useRef)(false);
   const resolvedBillingApiUrl = billingApiUrl || contextBillingUrl;
   const displayError = externalError ?? error;
-  const bStyles = (0, import_react6.useMemo)(() => {
+  const bStyles = (0, import_react7.useMemo)(() => {
     const base = (0, import_shared4.resolveButtonsLayoutTheme)(buttonsTheme);
     if (!buttonsStylesOverride) return base;
     return {
@@ -1028,7 +1093,7 @@ function SplitCardFormInner({
   const isSubmitting = (externalProcessing ?? processing) || isInlineSessionPatchProcessing;
   const isSelfContained = !onTokenizedBody;
   const baseUrl = resolvedBillingApiUrl.replace(/\/+$/, "");
-  const resolvedAccount = (0, import_react6.useMemo)(() => mergeAccountPatch({
+  const resolvedAccount = (0, import_react7.useMemo)(() => mergeAccountPatch({
     userId,
     email,
     firstName,
@@ -1036,50 +1101,50 @@ function SplitCardFormInner({
     country: countryProp,
     zip: zipProp
   }, accountPatch), [userId, email, firstName, lastName, countryProp, zipProp, accountPatch]);
-  const stripeInstance = (0, import_react6.useMemo)(() => {
+  const stripeInstance = (0, import_react7.useMemo)(() => {
     if (!flopay) return null;
     return flopay.getRawProvider();
   }, [flopay]);
-  const paypalStripeInstance = (0, import_react6.useMemo)(() => {
+  const paypalStripeInstance = (0, import_react7.useMemo)(() => {
     if (!paypalFlopay) return null;
     return paypalFlopay.getRawProvider();
   }, [paypalFlopay]);
   const amountInCents = totalAmount || 100;
-  const walletOptions = (0, import_react6.useMemo)(() => ({
+  const walletOptions = (0, import_react7.useMemo)(() => ({
     mode: "payment",
     amount: amountInCents,
     currency: currency.toLowerCase(),
     paymentMethodCreation: "manual",
     captureMethod: "manual"
   }), [amountInCents, currency]);
-  const paypalOptions = (0, import_react6.useMemo)(() => ({
+  const paypalOptions = (0, import_react7.useMemo)(() => ({
     mode: "payment",
     amount: amountInCents,
     currency: currency.toLowerCase(),
     captureMethod: "manual"
   }), [amountInCents, currency]);
-  const updateError = (0, import_react6.useCallback)(
+  const updateError = (0, import_react7.useCallback)(
     (err) => {
       setError(err);
       onErrorChange?.(err);
     },
     [onErrorChange]
   );
-  const emitDecline = (0, import_react6.useCallback)(
+  const emitDecline = (0, import_react7.useCallback)(
     (method, input, overrides) => {
       onDecline?.(buildDeclineEvent(method, input, overrides));
     },
     [onDecline]
   );
   const showWallets = showApplePay || showGooglePay;
-  const handleNameChange = (0, import_react6.useCallback)((value) => {
+  const handleNameChange = (0, import_react7.useCallback)((value) => {
     setFullName(value);
     onFullNameChange?.(value);
     const parts = value.trim().split(/\s+/);
     onFirstNameChange?.(parts[0] ?? "");
     onLastNameChange?.(parts.length > 1 ? parts.slice(1).join(" ") : "");
   }, [onFullNameChange, onFirstNameChange, onLastNameChange]);
-  const applyInlineSessionPatch = (0, import_react6.useCallback)(
+  const applyInlineSessionPatch = (0, import_react7.useCallback)(
     (patch, method) => {
       if (!checkout.applyInlineSessionPatch) {
         return Promise.resolve({ error: null, sessionId });
@@ -1096,7 +1161,7 @@ function SplitCardFormInner({
     },
     [checkout.applyInlineSessionPatch, onError, sessionId, updateError]
   );
-  const runBeforeButtonClick = (0, import_react6.useCallback)(async (method) => {
+  const runBeforeButtonClick = (0, import_react7.useCallback)(async (method) => {
     if (!onBeforeButtonClick) return { proceed: true };
     try {
       const result = await onBeforeButtonClick({
@@ -1132,7 +1197,7 @@ function SplitCardFormInner({
       return { proceed: false };
     }
   }, [applyInlineSessionPatch, checkout.inlineSessionDraft, onBeforeButtonClick, onError, sessionId, updateError]);
-  const processPaymentInternal = (0, import_react6.useCallback)(
+  const processPaymentInternal = (0, import_react7.useCallback)(
     async (tokenizedBody, overrides) => {
       if (processingRef.current) return;
       processingRef.current = true;
@@ -1163,10 +1228,11 @@ function SplitCardFormInner({
         });
         if (response.ok) {
           setOverlayStatus("success");
-          await new Promise((r) => setTimeout(r, 1200));
+          await new Promise((r) => setTimeout(r, PROCESSING_OVERLAY_SUCCESS_DELAY_MS));
           onComplete?.({
             status: "succeeded",
-            paymentIntentId: tokenizedBody.threeDSecureActionResultTokenId
+            paymentIntentId: tokenizedBody.threeDSecureActionResultTokenId,
+            paymentMethodId: resolveTokenizedPaymentMethodId(tokenizedBody)
           });
           return;
         }
@@ -1196,7 +1262,8 @@ function SplitCardFormInner({
               await processPaymentInternal({
                 id: result.paymentIntentId,
                 type: "card",
-                threeDSecureActionResultTokenId: result.paymentIntentId
+                threeDSecureActionResultTokenId: result.paymentIntentId,
+                originalPaymentMethodId: resolveTokenizedPaymentMethodId(tokenizedBody)
               });
             }
           } finally {
@@ -1250,11 +1317,11 @@ function SplitCardFormInner({
           code: json?.code ?? json?.gatewayErrorCode,
           declineCode: json?.declineCode ?? json?.gatewayDeclineReason
         });
-        await new Promise((r) => setTimeout(r, 1500));
+        await new Promise((r) => setTimeout(r, PROCESSING_OVERLAY_ERROR_DELAY_MS));
       } catch (err) {
         setOverlayStatus("error");
         updateError(err instanceof Error ? err.message : "An unexpected error occurred");
-        await new Promise((r) => setTimeout(r, 1500));
+        await new Promise((r) => setTimeout(r, PROCESSING_OVERLAY_ERROR_DELAY_MS));
       } finally {
         setProcessing(false);
         setOverlayStatus(null);
@@ -1263,7 +1330,7 @@ function SplitCardFormInner({
     },
     [baseUrl, sessionId, resolvedAccount, fullName, chv, flopay, paypalFlopay, onComplete, onError, updateError, emitDecline]
   );
-  const dispatchTokenizedBody = (0, import_react6.useCallback)(
+  const dispatchTokenizedBody = (0, import_react7.useCallback)(
     (tokenizedBody, overrides) => {
       if (onTokenizedBody) {
         onTokenizedBody(tokenizedBody);
@@ -1273,7 +1340,7 @@ function SplitCardFormInner({
     },
     [onTokenizedBody, processPaymentInternal]
   );
-  (0, import_react6.useImperativeHandle)(innerRef, () => ({
+  (0, import_react7.useImperativeHandle)(innerRef, () => ({
     async handleNextAction(secret) {
       if (!flopay) return;
       setIs3DSActive(true);
@@ -1300,7 +1367,7 @@ function SplitCardFormInner({
       }
     }
   }), [flopay, dispatchTokenizedBody, onError, updateError, emitDecline]);
-  (0, import_react6.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     if (typeof window === "undefined") return;
     const stored = localStorage.getItem(WALLET_RESUME_KEY);
     if (!stored) return;
@@ -1318,7 +1385,7 @@ function SplitCardFormInner({
       localStorage.removeItem(WALLET_RESUME_KEY);
     }
   }, [sessionId, dispatchTokenizedBody]);
-  const handleSubmit = (0, import_react6.useCallback)(
+  const handleSubmit = (0, import_react7.useCallback)(
     async (e) => {
       e.preventDefault();
       if (!flopay || !elements || isSubmitting || processingRef.current) return;
@@ -1378,19 +1445,20 @@ function SplitCardFormInner({
           updateError(confirmResult.error.message);
           onError?.(confirmResult.error);
           emitDecline("card", confirmResult.error);
-          await new Promise((r) => setTimeout(r, 1500));
+          await new Promise((r) => setTimeout(r, PROCESSING_OVERLAY_ERROR_DELAY_MS));
           return;
         }
         handedOff = isSelfContained;
         dispatchTokenizedBody({
           id: pmResult.paymentMethodId,
           type: "card",
-          threeDSecureActionResultTokenId: confirmResult.paymentIntentId
+          threeDSecureActionResultTokenId: confirmResult.paymentIntentId,
+          originalPaymentMethodId: pmResult.paymentMethodId
         });
       } catch (err) {
         setOverlayStatus("error");
         updateError(err instanceof Error ? err.message : "An unexpected error occurred");
-        await new Promise((r) => setTimeout(r, 1500));
+        await new Promise((r) => setTimeout(r, PROCESSING_OVERLAY_ERROR_DELAY_MS));
       } finally {
         if (!handedOff) {
           setProcessing(false);
@@ -1402,7 +1470,7 @@ function SplitCardFormInner({
   );
   const isReady = flopay !== null && elements !== null;
   if (!isReady) {
-    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { "data-testid": "flopay-loading", "aria-busy": "true", children: "Loading payment form..." });
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { "data-testid": "flopay-loading", "aria-busy": "true", children: "Loading payment form..." });
   }
   const isButtons = layout === "buttons";
   const resolvedBorder = isButtons ? bStyles.cardInputBorder ?? "#e5e7eb" : "#A4A4FF";
@@ -1445,7 +1513,7 @@ function SplitCardFormInner({
       invalid: { color: "#ef4444" }
     }
   };
-  const cardFormBlock = /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: {
+  const cardFormBlock = /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: {
     backgroundColor: cardBg,
     borderRadius: "8px",
     padding: isButtons ? "0" : "1rem",
@@ -1453,7 +1521,7 @@ function SplitCardFormInner({
     ...isButtons ? { padding: bStyles.cardFormContainer?.padding ?? "0" } : {},
     ...sharedInputPlaceholderVars
   }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("style", { children: `
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("style", { children: `
         .flopay-shared-input::placeholder {
           color: var(--flopay-input-placeholder-color);
           opacity: 1;
@@ -1462,12 +1530,12 @@ function SplitCardFormInner({
           font-weight: var(--flopay-input-font-weight);
         }
       ` }),
-    isButtons && showCardForm && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: {
+    isButtons && showCardForm && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: {
       display: "flex",
       alignItems: "center",
       padding: "0.75rem 0 0.625rem"
     }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
         "button",
         {
           type: "button",
@@ -1489,7 +1557,7 @@ function SplitCardFormInner({
           },
           "aria-label": "Back to payment methods",
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { style: {
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { style: {
               display: "inline-flex",
               alignItems: "center",
               justifyContent: "center",
@@ -1499,12 +1567,12 @@ function SplitCardFormInner({
               backgroundColor: "#f3f4f6",
               transition: "background-color 0.15s",
               ...bStyles.backButtonIcon
-            }, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M15 18l-6-6 6-6" }) }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(BackButtonContentSlot, { content: cardBackButtonContent })
+            }, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M15 18l-6-6 6-6" }) }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(BackButtonContentSlot, { content: cardBackButtonContent })
           ]
         }
       ),
-      hideTitle ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { flex: 1 } }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: {
+      hideTitle ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: { flex: 1 } }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: {
         flex: 1,
         textAlign: "center",
         fontWeight: 600,
@@ -1512,18 +1580,18 @@ function SplitCardFormInner({
         color: "#262833",
         paddingRight: 80,
         ...bStyles.title
-      }, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(TitleContentSlot, { content: cardTitleContent }) })
+      }, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(TitleContentSlot, { content: cardTitleContent }) })
     ] }),
-    !isButtons && !hideTitle && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { textAlign: "center", fontWeight: 600, fontSize: "1.1rem", padding: "0.5rem 0", color: "#262833" }, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(TitleContentSlot, { content: cardTitleContent }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: {
+    !isButtons && !hideTitle && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: { textAlign: "center", fontWeight: 600, fontSize: "1.1rem", padding: "0.5rem 0", color: "#262833" }, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(TitleContentSlot, { content: cardTitleContent }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: {
       backgroundColor: cardInputBg,
       border: `1px solid ${resolvedBorder}`,
       borderTopLeftRadius: "8px",
       borderTopRightRadius: "8px",
       padding: "10px"
-    }, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(CardNumberElement, { onReady: () => setFormReady(true), options: stripeElementStyle }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { display: "flex" }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: {
+    }, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(CardNumberElement, { onReady: () => setFormReady(true), options: stripeElementStyle }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: { display: "flex" }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: {
         flex: 1,
         backgroundColor: cardInputBg,
         border: `1px solid ${resolvedBorder}`,
@@ -1531,23 +1599,23 @@ function SplitCardFormInner({
         borderRight: "none",
         borderBottomLeftRadius: "8px",
         padding: "10px"
-      }, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(CardExpiryElement, { options: stripeElementStyle }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: {
+      }, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(CardExpiryElement, { options: stripeElementStyle }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: {
         flex: 1,
         backgroundColor: cardInputBg,
         border: `1px solid ${resolvedBorder}`,
         borderTop: "none",
         borderBottomRightRadius: "8px",
         padding: "10px"
-      }, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(CardCvcElement, { options: stripeElementStyle }) })
+      }, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(CardCvcElement, { options: stripeElementStyle }) })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: {
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: {
       backgroundColor: cardInputBg,
       border: `1px solid ${resolvedBorder}`,
       borderRadius: "8px",
       marginTop: "0.5rem",
       padding: "10px"
-    }, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    }, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
       "input",
       {
         className: "flopay-shared-input",
@@ -1567,20 +1635,20 @@ function SplitCardFormInner({
         }
       }
     ) }),
-    enableAVS && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: {
+    enableAVS && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: {
       display: "flex",
       flexDirection: avsLayoutProp === "column" ? "column" : "row",
       gap: avsLayoutProp === "column" ? "0.5rem" : "0",
       marginTop: "0.5rem"
     }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: {
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: {
         flex: avsLayoutProp === "row" ? 1 : void 0,
         backgroundColor: cardInputBg,
         border: `1px solid ${resolvedBorder}`,
         padding: "10px",
         ...avsLayoutProp === "row" ? { borderRadius: "0", borderTopLeftRadius: "8px", borderBottomLeftRadius: "8px", borderRight: "none" } : { borderRadius: "8px" },
         ...isButtons && bStyles.countrySelect ? bStyles.countrySelect : {}
-      }, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      }, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
         "select",
         {
           value: selectedCountry,
@@ -1601,21 +1669,21 @@ function SplitCardFormInner({
             cursor: "pointer",
             ...isButtons && bStyles.nameInput ? bStyles.nameInput : {}
           },
-          children: import_shared4.COUNTRY_OPTIONS.map((c) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("option", { value: c.code, children: [
+          children: import_shared4.COUNTRY_OPTIONS.map((c) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("option", { value: c.code, children: [
             c.flag,
             " ",
             c.name
           ] }, c.code))
         }
       ) }),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: {
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: {
         flex: avsLayoutProp === "row" ? 1 : void 0,
         backgroundColor: cardInputBg,
         border: `1px solid ${resolvedBorder}`,
         padding: "10px",
         ...avsLayoutProp === "row" ? { borderRadius: "0", borderTopRightRadius: "8px", borderBottomRightRadius: "8px" } : { borderRadius: "8px" },
         ...isButtons && bStyles.zipInput ? bStyles.zipInput : {}
-      }, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      }, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
         "input",
         {
           className: "flopay-shared-input",
@@ -1641,7 +1709,7 @@ function SplitCardFormInner({
         }
       ) })
     ] }),
-    displayError && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { role: "alert", "data-testid": "flopay-error", style: {
+    displayError && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { role: "alert", "data-testid": "flopay-error", style: {
       margin: "0.75rem 0",
       padding: "0.625rem 0.875rem",
       background: "#FEF2F2",
@@ -1655,10 +1723,10 @@ function SplitCardFormInner({
       gap: "0.5rem",
       ...isButtons && bStyles.errorBanner ? bStyles.errorBanner : {}
     }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", style: { flexShrink: 0 }, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M12 9v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z", stroke: "#DC2626", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", style: { flexShrink: 0 }, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M12 9v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z", stroke: "#DC2626", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }),
       displayError
     ] }),
-    children ?? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    children ?? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
       "button",
       {
         type: "submit",
@@ -1681,7 +1749,7 @@ function SplitCardFormInner({
         children: isSubmitting ? "PROCESSING..." : submitLabel
       }
     ),
-    !isButtons && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: {
+    !isButtons && showSecurityFooter && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: {
       backgroundColor: "#EFF9F0",
       borderRadius: "8px",
       padding: "0.75rem",
@@ -1698,11 +1766,11 @@ function SplitCardFormInner({
     const cardButtonSizing = cardButtonContent === void 0 ? { boxSizing: "border-box", height: DEFAULT_BUTTONS_LAYOUT_BUTTON_HEIGHT, padding: "0 1rem" } : { padding: "0.9rem 1rem" };
     const buttonsAnim = viewState === "expanding" ? `flopay-buttons-exit ${TRANSITION_MS}ms cubic-bezier(0.4, 0, 0.2, 1) both` : viewState === "collapsing" ? `flopay-buttons-enter ${TRANSITION_MS}ms cubic-bezier(0, 0, 0.2, 1) both` : void 0;
     const cardAnim = viewState === "expanding" ? `flopay-card-enter ${TRANSITION_MS}ms cubic-bezier(0, 0, 0.2, 1) both` : viewState === "collapsing" ? `flopay-card-exit ${TRANSITION_MS}ms cubic-bezier(0.4, 0, 0.2, 1) both` : void 0;
-    return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("form", { onSubmit: handleSubmit, className, style: { position: "relative" }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(FloPayKeyframes, {}),
-      overlayStatus && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ProcessingOverlay, { status: overlayStatus, errorMessage: displayError }),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { display: "grid" }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: {
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("form", { onSubmit: handleSubmit, className, style: { position: "relative" }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(FloPayKeyframes, {}),
+      overlayStatus && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ProcessingOverlay, { status: overlayStatus, errorMessage: displayError }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: { display: "grid" }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: {
           gridArea: "1 / 1",
           display: "flex",
           flexDirection: "column",
@@ -1711,7 +1779,7 @@ function SplitCardFormInner({
           ...!isButtonsView && !buttonsAnim ? { visibility: "hidden", position: "absolute", pointerEvents: "none", width: "100%" } : {},
           ...buttonsAnim ? { animation: buttonsAnim, pointerEvents: "none" } : {}
         }, children: [
-          showPayPal && paypalStripeInstance && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_stripe_js.Elements, { stripe: paypalStripeInstance, options: paypalOptions, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          showPayPal && paypalStripeInstance && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_stripe_js.Elements, { stripe: paypalStripeInstance, options: paypalOptions, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
             PayPalButtonInner,
             {
               sessionId,
@@ -1725,7 +1793,7 @@ function SplitCardFormInner({
               runBeforeButtonClick
             }
           ) }),
-          showWallets && stripeInstance ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_stripe_js.Elements, { stripe: stripeInstance, options: walletOptions, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          showWallets && stripeInstance ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_stripe_js.Elements, { stripe: stripeInstance, options: walletOptions, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
             WalletButtonInner,
             {
               sessionId,
@@ -1739,8 +1807,8 @@ function SplitCardFormInner({
               onDecline,
               runBeforeButtonClick
             }
-          ) }) : showWallets ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { height: DEFAULT_BUTTONS_LAYOUT_BUTTON_HEIGHT, borderRadius: 8, background: "#e5e7eb", animation: "flopay-pulse 1.5s ease-in-out infinite" } }) : null,
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          ) }) : showWallets ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: { height: DEFAULT_BUTTONS_LAYOUT_BUTTON_HEIGHT, borderRadius: 8, background: "#e5e7eb", animation: "flopay-pulse 1.5s ease-in-out infinite" } }) : null,
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
             "button",
             {
               type: "button",
@@ -1778,10 +1846,10 @@ function SplitCardFormInner({
               onMouseUp: (e) => {
                 e.currentTarget.style.transform = "scale(1)";
               },
-              children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(CardButtonContentSlot, { content: cardButtonContent })
+              children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(CardButtonContentSlot, { content: cardButtonContent })
             }
           ),
-          displayError && viewState === "buttons" && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { role: "alert", "data-testid": "flopay-error", style: {
+          displayError && viewState === "buttons" && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { role: "alert", "data-testid": "flopay-error", style: {
             margin: "0.25rem 0",
             padding: "0.625rem 0.875rem",
             background: "#FEF2F2",
@@ -1795,11 +1863,11 @@ function SplitCardFormInner({
             gap: "0.5rem",
             ...bStyles.errorBanner ? bStyles.errorBanner : {}
           }, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", style: { flexShrink: 0 }, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M12 9v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z", stroke: "#DC2626", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", style: { flexShrink: 0 }, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M12 9v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z", stroke: "#DC2626", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }),
             displayError
           ] })
         ] }),
-        isCardView && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: {
+        isCardView && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: {
           gridArea: "1 / 1",
           ...cardAnim ? { animation: cardAnim } : {},
           ...viewState === "collapsing" ? { pointerEvents: "none" } : {}
@@ -1807,10 +1875,10 @@ function SplitCardFormInner({
       ] })
     ] });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("form", { onSubmit: handleSubmit, className, style: { position: "relative" }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(FloPayKeyframes, {}),
-    overlayStatus && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ProcessingOverlay, { status: overlayStatus, errorMessage: displayError }),
-    showWallets && stripeInstance && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_stripe_js.Elements, { stripe: stripeInstance, options: walletOptions, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("form", { onSubmit: handleSubmit, className, style: { position: "relative" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(FloPayKeyframes, {}),
+    overlayStatus && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ProcessingOverlay, { status: overlayStatus, errorMessage: displayError }),
+    showWallets && stripeInstance && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_stripe_js.Elements, { stripe: stripeInstance, options: walletOptions, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
       WalletButtonInner,
       {
         sessionId,
@@ -1823,7 +1891,7 @@ function SplitCardFormInner({
         onDecline
       }
     ) }),
-    showPayPal && paypalStripeInstance && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_stripe_js.Elements, { stripe: paypalStripeInstance, options: paypalOptions, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    showPayPal && paypalStripeInstance && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_stripe_js.Elements, { stripe: paypalStripeInstance, options: paypalOptions, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
       PayPalButtonInner,
       {
         sessionId,
@@ -1835,7 +1903,7 @@ function SplitCardFormInner({
         onDecline
       }
     ) }),
-    (showWallets && stripeInstance || showPayPal && paypalStripeInstance) && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: {
+    (showWallets && stripeInstance || showPayPal && paypalStripeInstance) && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: {
       display: "flex",
       alignItems: "center",
       gap: "0.75rem",
@@ -1843,17 +1911,503 @@ function SplitCardFormInner({
       color: "#999",
       fontSize: "0.85rem"
     }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { flex: 1, height: 1, backgroundColor: "#ddd" } }),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: "or pay with card" }),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { flex: 1, height: 1, backgroundColor: "#ddd" } })
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: { flex: 1, height: 1, backgroundColor: "#ddd" } }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: "or pay with card" }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: { flex: 1, height: 1, backgroundColor: "#ddd" } })
     ] }),
     cardFormBlock
   ] });
 }
 
+// src/saved-payment-flow.ts
+var import_js = require("@flopay/js");
+var import_shared6 = require("@flopay/shared");
+var DEFAULT_SAVED_PAYMENT_DECLINE_METHOD = "card";
+function resolveSavedPaymentReturnUrl(session) {
+  if (typeof window !== "undefined" && window.location.href) {
+    return window.location.href;
+  }
+  return session.successUrl || session.cancelUrl || void 0;
+}
+function isStripePaymentIntentClientSecret(value) {
+  return typeof value === "string" && value.startsWith("pi_") && value.includes("_secret_");
+}
+async function retryOnceOnFetchFailure(action) {
+  try {
+    return await action();
+  } catch (err) {
+    const message = err instanceof Error ? err.message : String(err);
+    if (!/failed to fetch|fetch failed/i.test(message)) {
+      throw err;
+    }
+    return action();
+  }
+}
+function getRedirectTokenFromProcessResponse(json, options) {
+  const directCandidates = [
+    json?.threeDSecureToken,
+    json?.clientSecret,
+    json?.stripeClientSecret
+  ];
+  for (const candidate of directCandidates) {
+    if (typeof candidate === "string" && candidate.length > 0 && (!options?.requirePaymentIntentClientSecret || isStripePaymentIntentClientSecret(candidate))) {
+      return candidate;
+    }
+  }
+  const nested = json?.data;
+  if (nested && typeof nested === "object") {
+    const nestedRecord = nested;
+    const nestedCandidates = [
+      nestedRecord.threeDSecureToken,
+      nestedRecord.clientSecret,
+      nestedRecord.stripeClientSecret,
+      nestedRecord.id
+    ];
+    for (const candidate of nestedCandidates) {
+      if (typeof candidate === "string" && candidate.length > 0 && (!options?.requirePaymentIntentClientSecret || isStripePaymentIntentClientSecret(candidate))) {
+        return candidate;
+      }
+    }
+    const nestedGatewayData = nestedRecord.gatewayData;
+    if (nestedGatewayData && typeof nestedGatewayData === "object") {
+      const nestedGatewayDataRecord = nestedGatewayData;
+      const gatewayCandidates = [
+        nestedGatewayDataRecord.stripeClientSecret,
+        nestedGatewayDataRecord.clientSecret
+      ];
+      for (const candidate of gatewayCandidates) {
+        if (typeof candidate === "string" && candidate.length > 0 && (!options?.requirePaymentIntentClientSecret || isStripePaymentIntentClientSecret(candidate))) {
+          return candidate;
+        }
+      }
+    }
+  }
+  return void 0;
+}
+async function recover3DSRedirectResult({
+  billingApiUrl,
+  sessionId,
+  responseJson
+}) {
+  const directToken = getRedirectTokenFromProcessResponse(responseJson, {
+    requirePaymentIntentClientSecret: true
+  });
+  if (typeof directToken === "string" && directToken.length > 0) {
+    return {
+      type: "3ds_required",
+      threeDSecureToken: directToken
+    };
+  }
+  if (!sessionId) {
+    return null;
+  }
+  try {
+    const api = new import_js.PaymentAPI(billingApiUrl);
+    const unified = await api.getUnifiedCheckoutSession(sessionId);
+    const refreshedToken = unified.provider === "stripe" ? unified.data.stripe?.clientSecret : void 0;
+    if (isStripePaymentIntentClientSecret(refreshedToken)) {
+      return {
+        type: "3ds_required",
+        threeDSecureToken: refreshedToken
+      };
+    }
+  } catch {
+  }
+  return null;
+}
+async function processSavedPaymentForMode({
+  billingApiUrl,
+  sessionId,
+  session,
+  tokenizedData,
+  returnUrl
+}) {
+  const baseUrl = billingApiUrl.replace(/\/+$/, "");
+  const resolvedSessionId = sessionId ?? session.id;
+  const customerId = session.customer?.id ?? session.accountData?.userId ?? "";
+  const customerEmail = session.customer?.email ?? session.accountData?.email ?? "";
+  const firstName = session.customer?.firstName ?? session.accountData?.firstName ?? "";
+  const lastName = session.customer?.lastName ?? session.accountData?.lastName ?? "";
+  const country = session.customer?.country ?? session.accountData?.country ?? void 0;
+  const zip = session.customer?.zip ?? session.accountData?.zip ?? void 0;
+  const response = await retryOnceOnFetchFailure(() => fetch(`${baseUrl}/v1/checkouts/sessions/process`, {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+      "x-user-id": customerId
+    },
+    body: JSON.stringify({
+      sessionId: resolvedSessionId,
+      tokenizedData,
+      accountData: {
+        userId: customerId,
+        email: customerEmail,
+        firstName,
+        lastName,
+        country,
+        zip
+      },
+      returnUrl: returnUrl ?? resolveSavedPaymentReturnUrl(session)
+    })
+  }));
+  if (response.ok) {
+    return {
+      type: "success",
+      result: {
+        status: "succeeded",
+        paymentIntentId: tokenizedData?.threeDSecureActionResultTokenId,
+        paymentMethodId: resolveTokenizedPaymentMethodId(tokenizedData)
+      }
+    };
+  }
+  const json = await response.json().catch(() => null);
+  if (json?.type === "paypal_redirect_required" || json?.type === "3ds_required") {
+    const redirectToken = getRedirectTokenFromProcessResponse(json);
+    if (!redirectToken) {
+      throw new import_shared6.FloPayError(
+        "Authentication is required but no redirect token was provided.",
+        "api_error",
+        { code: "authentication_required" }
+      );
+    }
+    return {
+      type: json.type,
+      threeDSecureToken: redirectToken,
+      paymentMethodId: json.paymentMethodId
+    };
+  }
+  if (json?.gatewayErrorCode === "authentication_required") {
+    const recoveredRedirect = await recover3DSRedirectResult({
+      billingApiUrl: baseUrl,
+      sessionId: resolvedSessionId,
+      responseJson: json
+    });
+    if (recoveredRedirect) {
+      return recoveredRedirect;
+    }
+    throw Object.assign(
+      new import_shared6.FloPayError(
+        "Your card requires authentication. Please enter your payment details below.",
+        "api_error",
+        { code: "authentication_required" }
+      ),
+      { checkoutMethod: "card" }
+    );
+  }
+  throw new import_shared6.FloPayError(
+    json?.message ?? "Payment failed. Please try again.",
+    "api_error",
+    {
+      code: json?.code ?? json?.gatewayErrorCode,
+      declineCode: json?.declineCode ?? json?.gatewayDeclineReason
+    }
+  );
+}
+async function processSavedPaymentWithIntent({
+  billingApiUrl,
+  sessionId,
+  session,
+  paymentMethodId,
+  flopay,
+  returnUrl
+}) {
+  const customerEmail = session.customer?.email ?? session.accountData?.email ?? "";
+  if (!customerEmail) {
+    throw Object.assign(
+      new import_shared6.FloPayError("Customer email is required to create a payment intent.", "validation_error", {
+        param: "email"
+      }),
+      { checkoutMethod: "card" }
+    );
+  }
+  const api = new import_js.PaymentAPI(billingApiUrl);
+  const intentResponse = await retryOnceOnFetchFailure(() => api.createPaymentIntent(
+    sessionId,
+    customerEmail,
+    paymentMethodId
+  ));
+  const intentJson = await intentResponse.json().catch(() => null);
+  if (!intentResponse.ok) {
+    throw Object.assign(
+      new import_shared6.FloPayError(
+        intentJson?.message ?? "Failed to create payment intent.",
+        "api_error",
+        { code: intentJson?.code ?? intentJson?.gatewayErrorCode }
+      ),
+      { checkoutMethod: "card" }
+    );
+  }
+  const intentClientSecret = getRedirectTokenFromProcessResponse(intentJson, {
+    requirePaymentIntentClientSecret: true
+  });
+  if (!intentClientSecret) {
+    throw Object.assign(
+      new import_shared6.FloPayError("No client secret in payment intent response.", "api_error"),
+      { checkoutMethod: "card" }
+    );
+  }
+  const confirmResult = await flopay.confirmCardPayment({
+    clientSecret: intentClientSecret,
+    paymentMethodId
+  });
+  if (confirmResult.error) {
+    throw Object.assign(
+      confirmResult.error,
+      { checkoutMethod: "card" }
+    );
+  }
+  if (!confirmResult.paymentIntentId || confirmResult.status !== "succeeded" && confirmResult.status !== "processing" && confirmResult.status !== "requires_capture") {
+    throw Object.assign(
+      new import_shared6.FloPayError(
+        `Payment intent in unexpected status: ${confirmResult.status}`,
+        "api_error",
+        {
+          code: confirmResult.status === "requires_action" ? "authentication_required" : void 0
+        }
+      ),
+      { checkoutMethod: "card" }
+    );
+  }
+  const followUp = await processSavedPaymentForMode({
+    billingApiUrl,
+    sessionId,
+    session,
+    tokenizedData: {
+      id: paymentMethodId,
+      type: "card",
+      threeDSecureActionResultTokenId: confirmResult.paymentIntentId,
+      originalPaymentMethodId: paymentMethodId
+    },
+    returnUrl
+  });
+  const finalResult = followUp.type === "success" ? followUp.result : await handleSavedPaymentRedirectResult(followUp, {
+    flopay,
+    paypalFlopay: null,
+    attempt3DS: true,
+    billingApiUrl,
+    sessionId,
+    session,
+    returnUrl
+  });
+  return {
+    ...finalResult,
+    paymentIntentId: finalResult.paymentIntentId ?? confirmResult.paymentIntentId,
+    paymentMethodId: finalResult.paymentMethodId ?? paymentMethodId
+  };
+}
+async function handleSavedPaymentRedirectResult(redirectResult, {
+  flopay,
+  paypalFlopay,
+  attempt3DS,
+  billingApiUrl,
+  sessionId,
+  session,
+  returnUrl
+}) {
+  const stripe = flopay?.getRawProvider();
+  if (!stripe) {
+    throw new import_shared6.FloPayError("Payment provider is not available.", "api_error");
+  }
+  if (redirectResult.type === "3ds_required") {
+    if (!attempt3DS || !redirectResult.threeDSecureToken) {
+      throw Object.assign(
+        new import_shared6.FloPayError(
+          "Your card requires authentication. Please enter your payment details below.",
+          "api_error",
+          { code: "authentication_required" }
+        ),
+        { checkoutMethod: "card" }
+      );
+    }
+    let paymentIntent = null;
+    let savedPaymentMethodId = redirectResult.paymentMethodId;
+    if (typeof stripe.retrievePaymentIntent === "function") {
+      const { paymentIntent: existingPaymentIntent, error: retrieveError } = await stripe.retrievePaymentIntent(
+        redirectResult.threeDSecureToken
+      );
+      if (retrieveError) {
+        throw Object.assign(
+          new import_shared6.FloPayError(
+            retrieveError.message ?? "Failed to retrieve 3DS payment status.",
+            "api_error",
+            { code: retrieveError.code }
+          ),
+          { checkoutMethod: "card" }
+        );
+      }
+      if (!savedPaymentMethodId && existingPaymentIntent?.payment_method) {
+        if (typeof existingPaymentIntent.payment_method === "string") {
+          savedPaymentMethodId = existingPaymentIntent.payment_method;
+        } else if ("id" in existingPaymentIntent.payment_method) {
+          savedPaymentMethodId = existingPaymentIntent.payment_method.id;
+        }
+      }
+    }
+    if (savedPaymentMethodId && typeof stripe.confirmCardPayment === "function") {
+      const { error: confirmError, paymentIntent: confirmedPaymentIntent } = await stripe.confirmCardPayment(
+        redirectResult.threeDSecureToken,
+        {
+          payment_method: savedPaymentMethodId,
+          return_url: returnUrl ?? resolveSavedPaymentReturnUrl(session) ?? window.location.href
+        }
+      );
+      if (confirmError) {
+        throw Object.assign(
+          new import_shared6.FloPayError(
+            confirmError.message ?? "3DS authentication failed.",
+            "api_error",
+            { code: confirmError.code }
+          ),
+          { checkoutMethod: "card" }
+        );
+      }
+      paymentIntent = confirmedPaymentIntent ?? null;
+    } else {
+      const { error: nextActionError, paymentIntent: nextActionPaymentIntent } = await stripe.handleNextAction({
+        clientSecret: redirectResult.threeDSecureToken
+      });
+      if (nextActionError) {
+        throw Object.assign(
+          new import_shared6.FloPayError(
+            nextActionError.message ?? "3DS authentication failed.",
+            "api_error",
+            { code: nextActionError.code }
+          ),
+          { checkoutMethod: "card" }
+        );
+      }
+      paymentIntent = nextActionPaymentIntent ?? null;
+    }
+    if (paymentIntent && (paymentIntent.status === "requires_capture" || paymentIntent.status === "succeeded" || paymentIntent.status === "processing")) {
+      const followUp = await processSavedPaymentForMode({
+        billingApiUrl,
+        sessionId,
+        session,
+        tokenizedData: {
+          id: paymentIntent.id,
+          type: "card",
+          threeDSecureActionResultTokenId: paymentIntent.id,
+          originalPaymentMethodId: savedPaymentMethodId
+        },
+        returnUrl
+      });
+      if (followUp.type === "success") {
+        return {
+          ...followUp.result,
+          paymentIntentId: followUp.result.paymentIntentId ?? paymentIntent.id,
+          paymentMethodId: followUp.result.paymentMethodId ?? savedPaymentMethodId
+        };
+      }
+      return handleSavedPaymentRedirectResult(followUp, {
+        flopay,
+        paypalFlopay,
+        attempt3DS,
+        billingApiUrl,
+        sessionId,
+        session,
+        returnUrl
+      });
+    }
+    throw Object.assign(
+      new import_shared6.FloPayError("3DS authentication did not complete successfully.", "api_error"),
+      { checkoutMethod: "card" }
+    );
+  }
+  if (redirectResult.type === "paypal_redirect_required") {
+    const paypalStripe = (paypalFlopay ?? flopay)?.getRawProvider();
+    if (!paypalStripe) {
+      throw Object.assign(
+        new import_shared6.FloPayError("PayPal is not available.", "api_error"),
+        { checkoutMethod: "paypal" }
+      );
+    }
+    const confirmParams = {
+      return_url: returnUrl ?? resolveSavedPaymentReturnUrl(session) ?? window.location.href
+    };
+    if (redirectResult.paymentMethodId) {
+      confirmParams["payment_method"] = redirectResult.paymentMethodId;
+    }
+    const { error } = await paypalStripe.confirmPayment({
+      clientSecret: redirectResult.threeDSecureToken,
+      confirmParams,
+      redirect: "if_required"
+    });
+    if (error) {
+      throw Object.assign(
+        new import_shared6.FloPayError(
+          error.message ?? "PayPal authorization failed.",
+          "api_error",
+          { code: error.code }
+        ),
+        { checkoutMethod: "paypal" }
+      );
+    }
+    return { status: "succeeded" };
+  }
+  throw new import_shared6.FloPayError("Unsupported payment redirect state.", "api_error");
+}
+function normalizeSavedPaymentError(err) {
+  if (err instanceof import_shared6.FloPayError) {
+    return err;
+  }
+  return new import_shared6.FloPayError(
+    err instanceof Error ? err.message : "Payment failed. Please try again.",
+    "api_error"
+  );
+}
+function resolveSavedPaymentPublishableKeys(unified, fallbackPublishableKey) {
+  let publishableKey;
+  let paypalPublishableKey;
+  if (unified.provider === "stripe") {
+    publishableKey = unified.data.stripe?.publishableKey;
+    paypalPublishableKey = unified.data.stripe?.paypalPublishableKey ?? void 0;
+  }
+  if (!publishableKey) {
+    publishableKey = fallbackPublishableKey;
+  }
+  if (!publishableKey) {
+    throw new import_shared6.FloPayError(
+      "No publishable key found. Provide fallbackPublishableKey or ensure the session includes gatewayData.publishableKey.",
+      "validation_error"
+    );
+  }
+  return {
+    publishableKey,
+    paypalPublishableKey
+  };
+}
+async function loadSavedPaymentProviders({
+  publishableKey,
+  paypalPublishableKey,
+  billingApiUrl,
+  locale
+}) {
+  const needsSeparatePaypal = Boolean(paypalPublishableKey) && paypalPublishableKey !== publishableKey;
+  const [instance, paypalInstanceOrError] = await Promise.all([
+    (0, import_js.loadFloPay)(publishableKey, {
+      billingApiUrl,
+      locale
+    }),
+    needsSeparatePaypal ? (0, import_js.loadFloPay)(paypalPublishableKey, {
+      billingApiUrl,
+      locale
+    }).catch((err) => {
+      console.warn("[FloPay] Failed to load PayPal Stripe instance:", err);
+      return null;
+    }) : Promise.resolve(null)
+  ]);
+  return {
+    flopay: instance,
+    paypalFlopay: paypalPublishableKey ? needsSeparatePaypal ? paypalInstanceOrError : instance : null
+  };
+}
+
 // src/flopay-checkout.tsx
-var import_jsx_runtime5 = require("react/jsx-runtime");
+var import_jsx_runtime6 = require("react/jsx-runtime");
 var DEFAULT_BUTTONS_LAYOUT_BUTTON_HEIGHT2 = 44;
+function sleep(ms) {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}
 function hasInlineSessionPatchData(patch) {
   if (!patch) return false;
   return Boolean(
@@ -1884,6 +2438,7 @@ function FloPayCheckout({
   cardButtonContent,
   cardBackButtonContent,
   cardTitleContent,
+  showSecurityFooter = true,
   onButtonClick,
   onBeforeButtonClick,
   enableAVS,
@@ -1896,171 +2451,131 @@ function FloPayCheckout({
   renderConfirmButton,
   onSessionCompleted
 }) {
-  const resolvedBillingUrl = (0, import_shared6.resolveBillingApiUrl)(billingApiUrl);
+  const resolvedBillingUrl = (0, import_shared7.resolveBillingApiUrl)(billingApiUrl);
   const checkoutType = createSessionParams ? "embedded_checkout" : "standard_checkout";
   const checkoutLayout = children ? "custom_layout" : layout === "buttons" ? "buttons_layout" : "default_layout";
-  const [unified, setUnified] = (0, import_react7.useState)(null);
-  const [flopay, setFloPay] = (0, import_react7.useState)(null);
-  const flopayRef = (0, import_react7.useRef)(null);
-  const [paypalFlopay, setPaypalFloPay] = (0, import_react7.useState)(null);
-  const paypalFlopayRef = (0, import_react7.useRef)(null);
-  const [session, setSession] = (0, import_react7.useState)(null);
-  const [resolvedSessionId, setResolvedSessionId] = (0, import_react7.useState)(sessionIdProp ?? "");
-  const [isLoading, setIsLoading] = (0, import_react7.useState)(true);
-  const [loadError, setLoadError] = (0, import_react7.useState)(null);
-  const [currentMode, setCurrentMode] = (0, import_react7.useState)("full");
-  const [confirmProcessing, setConfirmProcessing] = (0, import_react7.useState)(false);
-  const [modeError, setModeError] = (0, import_react7.useState)(null);
-  const [createSessionPatch, setCreateSessionPatch] = (0, import_react7.useState)(void 0);
-  const [createSessionPatchBaseHash, setCreateSessionPatchBaseHash] = (0, import_react7.useState)("");
-  const [cardBootstrapPending, setCardBootstrapPending] = (0, import_react7.useState)(false);
-  const autoCheckoutAttempted = (0, import_react7.useRef)(false);
-  const onCompleteRef = (0, import_react7.useRef)(onComplete);
+  const [unified, setUnified] = (0, import_react8.useState)(null);
+  const [flopay, setFloPay] = (0, import_react8.useState)(null);
+  const flopayRef = (0, import_react8.useRef)(null);
+  const [paypalFlopay, setPaypalFloPay] = (0, import_react8.useState)(null);
+  const paypalFlopayRef = (0, import_react8.useRef)(null);
+  const [session, setSession] = (0, import_react8.useState)(null);
+  const [resolvedSessionId, setResolvedSessionId] = (0, import_react8.useState)(sessionIdProp ?? "");
+  const activeSessionId = sessionIdProp ?? resolvedSessionId;
+  const initSessionDependency = createSessionParams ? "" : activeSessionId;
+  const [isLoading, setIsLoading] = (0, import_react8.useState)(true);
+  const [loadError, setLoadError] = (0, import_react8.useState)(null);
+  const [currentMode, setCurrentMode] = (0, import_react8.useState)("full");
+  const [confirmProcessing, setConfirmProcessing] = (0, import_react8.useState)(false);
+  const [modeError, setModeError] = (0, import_react8.useState)(null);
+  const [modeOverlayStatus, setModeOverlayStatus] = (0, import_react8.useState)(null);
+  const [modeOverlayError, setModeOverlayError] = (0, import_react8.useState)(null);
+  const [createSessionPatch, setCreateSessionPatch] = (0, import_react8.useState)(void 0);
+  const [createSessionPatchBaseHash, setCreateSessionPatchBaseHash] = (0, import_react8.useState)("");
+  const [cardBootstrapPending, setCardBootstrapPending] = (0, import_react8.useState)(false);
+  const autoCheckoutAttempted = (0, import_react8.useRef)(false);
+  const onCompleteRef = (0, import_react8.useRef)(onComplete);
   onCompleteRef.current = onComplete;
-  const onErrorRef = (0, import_react7.useRef)(onError);
+  const onErrorRef = (0, import_react8.useRef)(onError);
   onErrorRef.current = onError;
-  const onDeclineRef = (0, import_react7.useRef)(onDecline);
+  const onDeclineRef = (0, import_react8.useRef)(onDecline);
   onDeclineRef.current = onDecline;
-  const onSessionCompletedRef = (0, import_react7.useRef)(onSessionCompleted);
+  const onSessionCompletedRef = (0, import_react8.useRef)(onSessionCompleted);
   onSessionCompletedRef.current = onSessionCompleted;
-  (0, import_react7.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     console.info("[FloPay] Checkout initialized", {
-      sdk_version: import_shared6.SDK_VERSION,
+      sdk_version: import_shared7.SDK_VERSION,
       checkout_type: checkoutType,
       checkout_layout: checkoutLayout,
       billing_api_url: resolvedBillingUrl
     });
   }, [checkoutLayout, checkoutType, resolvedBillingUrl]);
-  const baseCreateSessionHash = (0, import_react7.useMemo)(
+  const baseCreateSessionHash = (0, import_react8.useMemo)(
     () => createSessionParams ? hashCreateParams(createSessionParams) : "",
     [createSessionParams]
   );
-  const activeCreateSessionPatch = (0, import_react7.useMemo)(
+  const activeCreateSessionPatch = (0, import_react8.useMemo)(
     () => createSessionPatchBaseHash === baseCreateSessionHash ? createSessionPatch : void 0,
     [createSessionPatch, createSessionPatchBaseHash, baseCreateSessionHash]
   );
-  const effectiveCreateSession = (0, import_react7.useMemo)(
+  const effectiveCreateSessionBase = (0, import_react8.useMemo)(
     () => createSessionParams ? mergeInlineSessionPatch(createSessionParams, activeCreateSessionPatch) : void 0,
     [createSessionParams, activeCreateSessionPatch]
   );
-  (0, import_react7.useEffect)(() => {
+  const effectiveCreateSessionMode = checkoutModeProp ?? effectiveCreateSessionBase?.checkoutMode ?? "full";
+  const effectiveCreateSession = (0, import_react8.useMemo)(
+    () => effectiveCreateSessionBase ? {
+      ...effectiveCreateSessionBase,
+      checkoutMode: effectiveCreateSessionMode
+    } : void 0,
+    [effectiveCreateSessionBase, effectiveCreateSessionMode]
+  );
+  (0, import_react8.useEffect)(() => {
     setCreateSessionPatch(void 0);
     setCreateSessionPatchBaseHash(baseCreateSessionHash);
   }, [baseCreateSessionHash]);
-  const emitDecline = (0, import_react7.useCallback)(
+  const emitDecline = (0, import_react8.useCallback)(
     (method, input, overrides) => {
       onDeclineRef.current?.(buildDeclineEvent(method, input, overrides));
     },
     []
   );
-  const processPaymentForMode = (0, import_react7.useCallback)(
-    async (sess) => {
-      const baseUrl = resolvedBillingUrl.replace(/\/+$/, "");
-      const response = await fetch(`${baseUrl}/v1/checkouts/sessions/process`, {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json",
-          "x-user-id": sess.customer?.id ?? ""
-        },
-        body: JSON.stringify({
-          sessionId: resolvedSessionId,
-          tokenizedData: { id: void 0 },
-          accountData: {
-            userId: sess.customer?.id ?? "",
-            email: sess.customer?.email ?? "",
-            firstName: sess.customer?.firstName ?? "",
-            lastName: sess.customer?.lastName ?? ""
-          }
-        })
-      });
-      if (response.ok) {
-        onCompleteRef.current?.({ status: "succeeded" });
-        return null;
-      }
-      const json = await response.json().catch(() => null);
-      if ((json?.type === "paypal_redirect_required" || json?.type === "3ds_required") && json?.threeDSecureToken) {
-        return {
-          type: json.type,
-          threeDSecureToken: json.threeDSecureToken,
-          paymentMethodId: json.paymentMethodId
-        };
-      }
-      if (json?.gatewayErrorCode === "authentication_required") {
-        return {
-          type: "3ds_required",
-          threeDSecureToken: ""
-          // No client secret available
-        };
-      }
-      throw new import_shared6.FloPayError(
-        json?.message ?? "Payment failed. Please try again.",
-        "api_error",
-        {
-          code: json?.code ?? json?.gatewayErrorCode,
-          declineCode: json?.declineCode ?? json?.gatewayDeclineReason
-        }
-      );
-    },
-    [resolvedBillingUrl, resolvedSessionId]
-  );
-  const handleRedirectResult = (0, import_react7.useCallback)(
-    async (redirectResult, sess, options) => {
-      const stripe = flopayRef.current?.getRawProvider();
-      if (!stripe) return false;
-      if (redirectResult.type === "3ds_required") {
-        if (!options?.attempt3DS || !redirectResult.threeDSecureToken) {
-          setModeError("Your card requires authentication. Please enter your payment details below.");
-          return false;
-        }
-        const { error: nextActionError, paymentIntent } = await stripe.handleNextAction({
-          clientSecret: redirectResult.threeDSecureToken
+  const runSavedPaymentFlow = (0, import_react8.useCallback)(
+    async (sess, options) => {
+      setModeError(null);
+      setModeOverlayError(null);
+      setModeOverlayStatus("processing");
+      const activeSessionId2 = options?.sessionId ?? sess.id;
+      try {
+        const result = await processSavedPaymentForMode({
+          billingApiUrl: resolvedBillingUrl,
+          sessionId: activeSessionId2,
+          session: sess
         });
-        if (nextActionError) {
-          setModeError(nextActionError.message ?? "3DS authentication failed.");
-          emitDecline("card", nextActionError.message ?? "3DS authentication failed.", {
-            code: nextActionError.code
-          });
-          return false;
-        }
-        if (paymentIntent && (paymentIntent.status === "requires_capture" || paymentIntent.status === "succeeded")) {
-          onCompleteRef.current?.({ status: "succeeded", paymentIntentId: paymentIntent.id });
-          return true;
-        }
-        return false;
-      }
-      if (redirectResult.type === "paypal_redirect_required") {
-        const paypalStripe = paypalFlopayRef.current?.getRawProvider();
-        if (!paypalStripe) {
-          setModeError("PayPal is not available.");
-          return false;
-        }
-        const confirmParams = {
-          return_url: window.location.href
-        };
-        if (redirectResult.paymentMethodId) {
-          confirmParams["payment_method"] = redirectResult.paymentMethodId;
-        }
-        const { error } = await paypalStripe.confirmPayment({
-          clientSecret: redirectResult.threeDSecureToken,
-          confirmParams,
-          redirect: "if_required"
+        const paymentResult = result.type === "success" ? result.result : await handleSavedPaymentRedirectResult(result, {
+          flopay: flopayRef.current,
+          paypalFlopay: paypalFlopayRef.current,
+          attempt3DS: options?.attempt3DS,
+          billingApiUrl: resolvedBillingUrl,
+          sessionId: activeSessionId2,
+          session: sess
         });
-        if (error) {
-          setModeError(error.message ?? "PayPal authorization failed.");
-          emitDecline("paypal", error.message ?? "PayPal authorization failed.", {
-            code: error.code
-          });
-          return false;
-        }
-        onCompleteRef.current?.({ status: "succeeded" });
+        setModeOverlayStatus("success");
+        await sleep(PROCESSING_OVERLAY_SUCCESS_DELAY_MS);
+        onCompleteRef.current?.(paymentResult);
         return true;
+      } catch (err) {
+        const floPayErr = normalizeSavedPaymentError(err);
+        const method = floPayErr.checkoutMethod ?? DEFAULT_SAVED_PAYMENT_DECLINE_METHOD;
+        setModeError(floPayErr.message);
+        setModeOverlayError(floPayErr.message);
+        if (options?.fallbackToFull) {
+          setCurrentMode("full");
+        }
+        onErrorRef.current?.(floPayErr);
+        emitDecline(method, floPayErr, {
+          code: floPayErr.code,
+          declineCode: floPayErr.declineCode
+        });
+        setModeOverlayStatus("error");
+        await Promise.allSettled([
+          sleep(PROCESSING_OVERLAY_ERROR_DELAY_MS),
+          options?.ensureProvidersReady ? options.ensureProvidersReady() : Promise.resolve()
+        ]);
+        return false;
+      } finally {
+        setModeOverlayStatus(null);
+        setModeOverlayError(null);
       }
-      return false;
     },
-    [resolvedBillingUrl, resolvedSessionId, emitDecline]
+    [
+      emitDecline,
+      normalizeSavedPaymentError,
+      resolvedBillingUrl
+    ]
   );
-  const inflightRef = (0, import_react7.useRef)(/* @__PURE__ */ new Map());
-  const initializedHashRef = (0, import_react7.useRef)(null);
+  const inflightRef = (0, import_react8.useRef)(/* @__PURE__ */ new Map());
+  const initializedHashRef = (0, import_react8.useRef)(null);
   function hashCreateParams(params) {
     const key = JSON.stringify({
       c: params?.clientId,
@@ -2080,17 +2595,23 @@ function FloPayCheckout({
     }
     return `flopay_session_${Math.abs(h).toString(36)}`;
   }
-  const createSessionHash = (0, import_react7.useMemo)(
+  const createSessionHash = (0, import_react8.useMemo)(
     () => effectiveCreateSession ? hashCreateParams(effectiveCreateSession) : "",
     [effectiveCreateSession]
   );
-  const createSessionParamsRef = (0, import_react7.useRef)(effectiveCreateSession);
+  const createSessionParamsRef = (0, import_react8.useRef)(effectiveCreateSession);
   createSessionParamsRef.current = effectiveCreateSession;
-  (0, import_react7.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     setResolvedSessionId(sessionIdProp ?? "");
   }, [sessionIdProp]);
+  (0, import_react8.useEffect)(() => {
+    autoCheckoutAttempted.current = false;
+    setModeError(null);
+    setModeOverlayError(null);
+    setModeOverlayStatus(null);
+  }, [sessionIdProp, createSessionHash]);
   async function resolveInlineSession(params, cacheKey) {
-    const api = new import_js.PaymentAPI(resolvedBillingUrl);
+    const api = new import_js2.PaymentAPI(resolvedBillingUrl);
     let sid = typeof window !== "undefined" ? window.sessionStorage.getItem(cacheKey) : null;
     let realResult = null;
     if (sid) {
@@ -2115,11 +2636,11 @@ function FloPayCheckout({
     }
     return { sid: sid ?? "", result: realResult };
   }
-  const bootstrapInlineSession = (0, import_react7.useCallback)(
+  const bootstrapInlineSession = (0, import_react8.useCallback)(
     async (patch) => {
       const baseParams = createSessionParamsRef.current;
       if (!baseParams) {
-        throw new import_shared6.FloPayError("createSession is required to bootstrap checkout.", "validation_error");
+        throw new import_shared7.FloPayError("createSession is required to bootstrap checkout.", "validation_error");
       }
       const mergedParams = mergeInlineSessionPatch(baseParams, patch);
       const cacheKey = hashCreateParams(mergedParams);
@@ -2148,43 +2669,23 @@ function FloPayCheckout({
         if (sid) {
           setResolvedSessionId(sid);
         }
-        let publishableKey;
-        let paypalPublishableKey;
-        if (realResult.provider === "stripe") {
-          publishableKey = realResult.data.stripe?.publishableKey;
-          paypalPublishableKey = realResult.data.stripe?.paypalPublishableKey;
-        }
-        if (!publishableKey) publishableKey = fallbackPublishableKey;
-        if (!publishableKey) {
-          throw new import_shared6.FloPayError(
-            "No publishable key found. Provide fallbackPublishableKey or ensure the session includes gatewayData.publishableKey.",
-            "validation_error"
-          );
-        }
-        const needsSeparatePaypal = Boolean(paypalPublishableKey) && paypalPublishableKey !== publishableKey;
-        const [instance, paypalInstanceOrError] = await Promise.all([
-          (0, import_js.loadFloPay)(publishableKey, {
-            billingApiUrl: resolvedBillingUrl,
-            locale
-          }),
-          needsSeparatePaypal ? (0, import_js.loadFloPay)(paypalPublishableKey, {
-            billingApiUrl: resolvedBillingUrl,
-            locale
-          }).catch((err) => {
-            console.warn("[FloPay] Failed to load PayPal Stripe instance:", err);
-            return null;
-          }) : Promise.resolve(null)
-        ]);
+        const {
+          publishableKey,
+          paypalPublishableKey
+        } = resolveSavedPaymentPublishableKeys(realResult, fallbackPublishableKey);
+        const {
+          flopay: instance,
+          paypalFlopay: paypalInstance
+        } = await loadSavedPaymentProviders({
+          publishableKey,
+          paypalPublishableKey,
+          billingApiUrl: resolvedBillingUrl,
+          locale
+        });
         flopayRef.current = instance;
         setFloPay(instance);
-        if (paypalPublishableKey) {
-          const paypalInstance = needsSeparatePaypal ? paypalInstanceOrError : instance;
-          paypalFlopayRef.current = paypalInstance;
-          setPaypalFloPay(paypalInstance);
-        } else {
-          paypalFlopayRef.current = null;
-          setPaypalFloPay(null);
-        }
+        paypalFlopayRef.current = paypalInstance;
+        setPaypalFloPay(paypalInstance);
         setIsLoading(false);
       } catch (err) {
         if (initializedHashRef.current === cacheKey) {
@@ -2196,7 +2697,7 @@ function FloPayCheckout({
     },
     [fallbackPublishableKey, locale, resolvedBillingUrl]
   );
-  const handleInlineSessionPatch = (0, import_react7.useCallback)(async (patch) => {
+  const handleInlineSessionPatch = (0, import_react8.useCallback)(async (patch) => {
     if (!hasInlineSessionPatchData(patch) || cardBootstrapPending) {
       return {
         sessionId: resolvedSessionId,
@@ -2219,21 +2720,61 @@ function FloPayCheckout({
     resolvedSessionId,
     session
   ]);
-  (0, import_react7.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     let cancelled = false;
     setLoadError(null);
     if (createSessionHash) {
-      if (initializedHashRef.current === createSessionHash) return;
       const params = createSessionParamsRef.current;
       setSession(buildSyntheticSession(params, checkoutModeProp));
-      setCurrentMode(params.checkoutMode ?? checkoutModeProp ?? "full");
+      setCurrentMode(effectiveCreateSessionMode);
       setIsLoading(false);
+      if (initializedHashRef.current === createSessionHash) {
+        return () => {
+          cancelled = true;
+        };
+      }
       (async () => {
+        const shouldAutoProcessInlineSession = effectiveCreateSessionMode === "auto" && !autoCheckoutAttempted.current;
+        if (shouldAutoProcessInlineSession) {
+          setModeError(null);
+          setModeOverlayError(null);
+          setModeOverlayStatus("processing");
+        }
         try {
-          await bootstrapInlineSession();
+          const resolved = await bootstrapInlineSession();
+          const resolvedSession = resolved.result.data.session ?? null;
+          if (!cancelled && shouldAutoProcessInlineSession && resolvedSession) {
+            autoCheckoutAttempted.current = true;
+            await runSavedPaymentFlow(resolvedSession, {
+              attempt3DS: true,
+              fallbackToFull: true,
+              sessionId: resolved.sid || resolvedSession.id
+            });
+            return;
+          }
+          if (!cancelled && shouldAutoProcessInlineSession) {
+            setModeOverlayStatus(null);
+            setModeOverlayError(null);
+          }
         } catch (err) {
           if (cancelled) return;
-          const floPayErr = err instanceof import_shared6.FloPayError ? err : new import_shared6.FloPayError(err instanceof Error ? err.message : "Failed to create session", "api_error");
+          const errorCode = err instanceof import_shared7.FloPayError ? err.code : typeof err === "object" && err !== null && "code" in err ? err.code : void 0;
+          if (shouldAutoProcessInlineSession && errorCode === "session_auto_completed") {
+            autoCheckoutAttempted.current = true;
+            setModeOverlayStatus("success");
+            await sleep(PROCESSING_OVERLAY_SUCCESS_DELAY_MS);
+            if (!cancelled) {
+              onCompleteRef.current?.({ status: "succeeded" });
+              setModeOverlayStatus(null);
+              setModeOverlayError(null);
+            }
+            return;
+          }
+          if (shouldAutoProcessInlineSession) {
+            setModeOverlayStatus(null);
+            setModeOverlayError(null);
+          }
+          const floPayErr = err instanceof import_shared7.FloPayError ? err : new import_shared7.FloPayError(err instanceof Error ? err.message : "Failed to create session", "api_error");
           setLoadError(floPayErr);
         }
       })();
@@ -2244,14 +2785,14 @@ function FloPayCheckout({
     setIsLoading(true);
     async function init() {
       try {
-        const api = new import_js.PaymentAPI(resolvedBillingUrl);
-        const result = await api.getUnifiedCheckoutSession(resolvedSessionId);
+        const api = new import_js2.PaymentAPI(resolvedBillingUrl);
+        const result = await api.getUnifiedCheckoutSession(activeSessionId);
         if (cancelled) return;
         setUnified(result);
         const sess = result.data.session ?? null;
         setSession(sess);
         if (!sess) {
-          throw new import_shared6.FloPayError("No session data returned", "api_error");
+          throw new import_shared7.FloPayError("No session data returned", "api_error");
         }
         if (sess.status === "complete") {
           setIsLoading(false);
@@ -2265,22 +2806,20 @@ function FloPayCheckout({
           autoCheckoutAttempted.current = true;
           const stripeInitPromise = initStripe(result);
           try {
-            const redirectResult = await processPaymentForMode(sess);
-            if (!redirectResult) {
-              if (!cancelled) setIsLoading(false);
-              return;
-            }
+            await runSavedPaymentFlow(sess, {
+              attempt3DS: true,
+              fallbackToFull: true,
+              ensureProvidersReady: () => stripeInitPromise,
+              sessionId: activeSessionId || sess.id
+            });
             if (cancelled) return;
             await stripeInitPromise;
-            const handled = await handleRedirectResult(redirectResult, sess, { attempt3DS: true });
             if (!cancelled) {
-              if (!handled) setCurrentMode("full");
               setIsLoading(false);
             }
             return;
           } catch {
             if (cancelled) return;
-            setCurrentMode("full");
             await stripeInitPromise;
             if (!cancelled) setIsLoading(false);
             return;
@@ -2290,82 +2829,56 @@ function FloPayCheckout({
         if (!cancelled) setIsLoading(false);
       } catch (err) {
         if (cancelled) return;
-        const floPayErr = err instanceof import_shared6.FloPayError ? err : new import_shared6.FloPayError(err instanceof Error ? err.message : "Failed to initialize checkout", "api_error");
+        const floPayErr = err instanceof import_shared7.FloPayError ? err : new import_shared7.FloPayError(err instanceof Error ? err.message : "Failed to initialize checkout", "api_error");
         setLoadError(floPayErr);
         setIsLoading(false);
       }
     }
     async function initStripe(result) {
-      let publishableKey;
-      let paypalPublishableKey;
-      if (result.provider === "stripe") {
-        publishableKey = result.data.stripe?.publishableKey;
-        paypalPublishableKey = result.data.stripe?.paypalPublishableKey;
-      }
-      if (!publishableKey) publishableKey = fallbackPublishableKey;
-      if (!publishableKey) {
-        throw new import_shared6.FloPayError(
-          "No publishable key found in session response. Provide a fallbackPublishableKey prop or ensure the session includes gatewayData.publishableKey.",
-          "validation_error"
-        );
-      }
-      const needsSeparatePaypal = Boolean(paypalPublishableKey) && paypalPublishableKey !== publishableKey;
-      const [instance, paypalInstanceOrError] = await Promise.all([
-        (0, import_js.loadFloPay)(publishableKey, {
-          billingApiUrl: resolvedBillingUrl,
-          locale
-        }),
-        needsSeparatePaypal ? (0, import_js.loadFloPay)(paypalPublishableKey, {
-          billingApiUrl: resolvedBillingUrl,
-          locale
-        }).catch((err) => {
-          console.warn("[FloPay] Failed to load PayPal Stripe instance:", err);
-          return null;
-        }) : Promise.resolve(null)
-      ]);
+      const {
+        publishableKey,
+        paypalPublishableKey
+      } = resolveSavedPaymentPublishableKeys(result, fallbackPublishableKey);
+      const {
+        flopay: instance,
+        paypalFlopay: paypalInstance
+      } = await loadSavedPaymentProviders({
+        publishableKey,
+        paypalPublishableKey,
+        billingApiUrl: resolvedBillingUrl,
+        locale
+      });
       flopayRef.current = instance;
       setFloPay(instance);
-      if (paypalPublishableKey) {
-        const paypalInstance = needsSeparatePaypal ? paypalInstanceOrError : instance;
-        paypalFlopayRef.current = paypalInstance;
-        setPaypalFloPay(paypalInstance);
-      } else {
-        paypalFlopayRef.current = null;
-        setPaypalFloPay(null);
-      }
+      paypalFlopayRef.current = paypalInstance;
+      setPaypalFloPay(paypalInstance);
     }
     init();
     return () => {
       cancelled = true;
     };
-  }, [resolvedSessionId, createSessionHash, checkoutModeProp, bootstrapInlineSession]);
-  const handleConfirmCheckout = (0, import_react7.useCallback)(async () => {
+  }, [
+    bootstrapInlineSession,
+    checkoutModeProp,
+    createSessionHash,
+    effectiveCreateSessionMode,
+    initSessionDependency,
+    runSavedPaymentFlow
+  ]);
+  const handleConfirmCheckout = (0, import_react8.useCallback)(async () => {
     if (confirmProcessing || !session) return;
     setConfirmProcessing(true);
     setModeError(null);
     try {
-      const redirectResult = await processPaymentForMode(session);
-      if (!redirectResult) {
-        return;
-      }
-      const handled = await handleRedirectResult(redirectResult, session);
-      if (!handled) {
-        setCurrentMode("full");
-      }
-    } catch (err) {
-      const floPayErr = err instanceof import_shared6.FloPayError ? err : new import_shared6.FloPayError(
-        err instanceof Error ? err.message : "Payment failed",
-        "api_error"
-      );
-      setModeError(floPayErr.message);
-      onError?.(floPayErr);
-      emitDecline("card", floPayErr);
-      setCurrentMode("full");
+      await runSavedPaymentFlow(session, {
+        fallbackToFull: true,
+        sessionId: activeSessionId || session.id
+      });
     } finally {
       setConfirmProcessing(false);
     }
-  }, [confirmProcessing, session, processPaymentForMode, handleRedirectResult, onError, emitDecline]);
-  const providerOptions = (0, import_react7.useMemo)(() => {
+  }, [activeSessionId, confirmProcessing, runSavedPaymentFlow, session]);
+  const providerOptions = (0, import_react8.useMemo)(() => {
     if (!unified || !session) return void 0;
     const opts = {
       appearance,
@@ -2375,16 +2888,16 @@ function FloPayCheckout({
     if (unified.provider === "stripe" && unified.data.stripe?.clientSecret) {
       opts.clientSecret = unified.data.stripe.clientSecret;
     } else {
-      const displayTotal = (0, import_shared6.buildCheckoutDisplayData)(session).total;
+      const displayTotal = (0, import_shared7.buildCheckoutDisplayData)(session).total;
       opts.amount = Math.round(displayTotal * 100) || session.amount;
       opts.currency = session.currency?.toLowerCase();
     }
     return opts;
   }, [unified, session, appearance, resolvedBillingUrl]);
   const shouldHandleInlineSessionPatch = Boolean(
-    createSessionParams && !children && layout === "buttons" && onBeforeButtonClick && (effectiveCreateSession?.checkoutMode ?? checkoutModeProp ?? "full") === "full"
+    createSessionParams && !children && layout === "buttons" && onBeforeButtonClick && effectiveCreateSessionMode === "full"
   );
-  const checkoutValue = (0, import_react7.useMemo)(
+  const checkoutValue = (0, import_react8.useMemo)(
     () => ({
       session,
       loading: isLoading,
@@ -2406,37 +2919,55 @@ function FloPayCheckout({
     ]
   );
   const shouldShowInterimButtons = Boolean(createSessionParams) && layout === "buttons" && (!flopay || !providerOptions);
+  const modeOverlay = modeOverlayStatus ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    ProcessingOverlay,
+    {
+      status: modeOverlayStatus,
+      errorMessage: modeOverlayError
+    }
+  ) : null;
   if (isLoading) {
-    if (loadingNode) return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_jsx_runtime5.Fragment, { children: loadingNode });
+    if (loadingNode) {
+      return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
+        loadingNode,
+        modeOverlay
+      ] });
+    }
     if (layout === "buttons") {
-      const skeletonBar = (h) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: {
+      const skeletonBar = (h) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: {
         height: h,
         borderRadius: 8,
         background: "#e5e7eb",
         animation: "flopay-loading-pulse 1.5s ease-in-out infinite"
       } });
-      return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: "0.5rem" }, children: [
-        showPayPal && skeletonBar(DEFAULT_BUTTONS_LAYOUT_BUTTON_HEIGHT2),
-        (showApplePay || showGooglePay) && skeletonBar(DEFAULT_BUTTONS_LAYOUT_BUTTON_HEIGHT2),
-        skeletonBar(DEFAULT_BUTTONS_LAYOUT_BUTTON_HEIGHT2),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("style", { children: `@keyframes flopay-loading-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }` })
+      return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: "0.5rem" }, children: [
+          showPayPal && skeletonBar(DEFAULT_BUTTONS_LAYOUT_BUTTON_HEIGHT2),
+          (showApplePay || showGooglePay) && skeletonBar(DEFAULT_BUTTONS_LAYOUT_BUTTON_HEIGHT2),
+          skeletonBar(DEFAULT_BUTTONS_LAYOUT_BUTTON_HEIGHT2),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("style", { children: `@keyframes flopay-loading-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }` })
+        ] }),
+        modeOverlay
       ] });
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: { display: "flex", justifyContent: "center", padding: 32 }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: {
-        width: 24,
-        height: 24,
-        border: "2px solid #e5e7eb",
-        borderTopColor: "#6b7280",
-        borderRadius: "50%",
-        animation: "spin 0.6s linear infinite"
-      } }),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("style", { children: `@keyframes spin { to { transform: rotate(360deg); } }` })
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { display: "flex", justifyContent: "center", padding: 32 }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: {
+          width: 24,
+          height: 24,
+          border: "2px solid #e5e7eb",
+          borderTopColor: "#6b7280",
+          borderRadius: "50%",
+          animation: "spin 0.6s linear infinite"
+        } }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("style", { children: `@keyframes spin { to { transform: rotate(360deg); } }` })
+      ] }),
+      modeOverlay
     ] });
   }
   if (loadError) {
-    if (errorNode) return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_jsx_runtime5.Fragment, { children: errorNode(loadError) });
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    if (errorNode) return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_jsx_runtime6.Fragment, { children: errorNode(loadError) });
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
       "div",
       {
         style: {
@@ -2450,99 +2981,111 @@ function FloPayCheckout({
     );
   }
   if (shouldShowInterimButtons) {
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(CheckoutContext.Provider, { value: checkoutValue, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-      InterimButtonsView,
-      {
-        onButtonClick,
-        showPayPal,
-        showApplePay,
-        showGooglePay,
-        buttonsTheme,
-        buttonsStyles,
-        cardButtonContent,
-        cardBackButtonContent,
-        cardTitleContent
-      }
-    ) });
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(CheckoutContext.Provider, { value: checkoutValue, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        InterimButtonsView,
+        {
+          onButtonClick,
+          showPayPal,
+          showApplePay,
+          showGooglePay,
+          buttonsTheme,
+          buttonsStyles,
+          cardButtonContent,
+          cardBackButtonContent,
+          cardTitleContent
+        }
+      ) }),
+      modeOverlay
+    ] });
+  }
+  if (!flopay || !providerOptions) {
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_jsx_runtime6.Fragment, { children: modeOverlay });
   }
-  if (!flopay || !providerOptions) return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_jsx_runtime5.Fragment, {});
   if (currentMode === "confirm") {
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(CheckoutContext.Provider, { value: checkoutValue, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(FloPayProvider, { flopay, paypalFlopay, options: providerOptions, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className, children: [
-      modeError && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(CheckoutContext.Provider, { value: checkoutValue, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(FloPayProvider, { flopay, paypalFlopay, options: providerOptions, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className, children: [
+        modeError && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          "div",
+          {
+            style: {
+              color: "#dc2626",
+              fontSize: "0.875rem",
+              marginBottom: "0.75rem",
+              textAlign: "center"
+            },
+            children: modeError
+          }
+        ),
+        renderConfirmButton ? renderConfirmButton({
+          onConfirm: handleConfirmCheckout,
+          isProcessing: confirmProcessing
+        }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          "button",
+          {
+            type: "button",
+            onClick: handleConfirmCheckout,
+            disabled: confirmProcessing,
+            style: {
+              width: "100%",
+              padding: "0.875rem",
+              backgroundColor: "#4A49FF",
+              color: "white",
+              border: "none",
+              borderRadius: "8px",
+              fontSize: "1rem",
+              fontWeight: 600,
+              cursor: confirmProcessing ? "not-allowed" : "pointer",
+              opacity: confirmProcessing ? 0.6 : 1
+            },
+            children: confirmProcessing ? "Processing..." : confirmLabel ?? "Confirm Purchase"
+          }
+        )
+      ] }) }) }),
+      modeOverlay
+    ] });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(CheckoutContext.Provider, { value: checkoutValue, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(FloPayProvider, { flopay, paypalFlopay, options: providerOptions, children: children ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
+      modeError && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
         "div",
         {
           style: {
-            color: "#dc2626",
-            fontSize: "0.875rem",
+            padding: "0.75rem 1rem",
             marginBottom: "0.75rem",
-            textAlign: "center"
+            backgroundColor: "#FEF3C7",
+            border: "1px solid #F59E0B",
+            borderRadius: "8px",
+            color: "#92400E",
+            fontSize: "0.875rem"
           },
           children: modeError
         }
       ),
-      renderConfirmButton ? renderConfirmButton({
-        onConfirm: handleConfirmCheckout,
-        isProcessing: confirmProcessing
-      }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-        "button",
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        SessionInjector,
         {
-          type: "button",
-          onClick: handleConfirmCheckout,
-          disabled: confirmProcessing,
-          style: {
-            width: "100%",
-            padding: "0.875rem",
-            backgroundColor: "#4A49FF",
-            color: "white",
-            border: "none",
-            borderRadius: "8px",
-            fontSize: "1rem",
-            fontWeight: 600,
-            cursor: confirmProcessing ? "not-allowed" : "pointer",
-            opacity: confirmProcessing ? 0.6 : 1
-          },
-          children: confirmProcessing ? "Processing..." : confirmLabel ?? "Confirm Purchase"
+          sessionId: activeSessionId,
+          billingApiUrl: resolvedBillingUrl,
+          session,
+          children
         }
       )
-    ] }) }) });
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(CheckoutContext.Provider, { value: checkoutValue, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(FloPayProvider, { flopay, paypalFlopay, options: providerOptions, children: [
-    modeError && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-      "div",
-      {
-        style: {
-          padding: "0.75rem 1rem",
-          marginBottom: "0.75rem",
-          backgroundColor: "#FEF3C7",
-          border: "1px solid #F59E0B",
-          borderRadius: "8px",
-          color: "#92400E",
-          fontSize: "0.875rem"
-        },
-        children: modeError
-      }
-    ),
-    children ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-      SessionInjector,
-      {
-        sessionId: resolvedSessionId,
-        billingApiUrl: resolvedBillingUrl,
-        session,
-        children
-      }
-    ) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    ] }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
       SplitCardForm,
       {
-        sessionId: resolvedSessionId,
+        sessionId: activeSessionId,
         email: session?.customer?.email,
         userId: session?.customer?.id,
         firstName: session?.customer?.firstName,
         lastName: session?.customer?.lastName,
-        totalAmount: session ? Math.round((0, import_shared6.buildCheckoutDisplayData)(session).total * 100) : 0,
+        totalAmount: session ? Math.round((0, import_shared7.buildCheckoutDisplayData)(session).total * 100) : 0,
         currency: session?.currency?.toLowerCase() ?? "usd",
         onComplete,
         onError,
         onDecline,
+        error: modeError,
+        onErrorChange: setModeError,
         onFullNameChange,
         showPayPal,
         showApplePay,
@@ -2553,6 +3096,7 @@ function FloPayCheckout({
         cardButtonContent,
         cardBackButtonContent,
         cardTitleContent,
+        showSecurityFooter,
         onButtonClick,
         onBeforeButtonClick,
         enableAVS,
@@ -2563,8 +3107,9 @@ function FloPayCheckout({
         submitLabel,
         className
       }
-    )
-  ] }) });
+    ) }) }),
+    modeOverlay
+  ] });
 }
 function SessionInjector({
   sessionId,
@@ -2572,8 +3117,8 @@ function SessionInjector({
   session,
   children
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_jsx_runtime5.Fragment, { children: import_react7.default.Children.map(children, (child) => {
-    if (!import_react7.default.isValidElement(child)) return child;
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_jsx_runtime6.Fragment, { children: import_react8.default.Children.map(children, (child) => {
+    if (!import_react8.default.isValidElement(child)) return child;
     const existing = child.props;
     const injected = {};
     if (!existing.sessionId) injected.sessionId = sessionId;
@@ -2587,7 +3132,7 @@ function SessionInjector({
         injected.lastName = session.customer.lastName;
     }
     if (Object.keys(injected).length === 0) return child;
-    return import_react7.default.cloneElement(child, injected);
+    return import_react8.default.cloneElement(child, injected);
   }) });
 }
 function InterimButtonsView({
@@ -2605,15 +3150,15 @@ function InterimButtonsView({
   cardBackButtonContent,
   cardTitleContent
 }) {
-  const [showCardForm, setShowCardForm] = (0, import_react7.useState)(false);
+  const [showCardForm, setShowCardForm] = (0, import_react8.useState)(false);
   const isCardOpenControlled = typeof cardOpen === "boolean";
-  (0, import_react7.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     if (isCardOpenControlled) {
       setShowCardForm(cardOpen);
     }
   }, [cardOpen, isCardOpenControlled]);
-  const bStyles = (0, import_react7.useMemo)(() => {
-    const base = (0, import_shared6.resolveButtonsLayoutTheme)(buttonsTheme);
+  const bStyles = (0, import_react8.useMemo)(() => {
+    const base = (0, import_shared7.resolveButtonsLayoutTheme)(buttonsTheme);
     if (!stylesOverride) return base;
     return {
       ...base,
@@ -2626,7 +3171,7 @@ function InterimButtonsView({
       title: { ...base.title, ...stylesOverride.title }
     };
   }, [buttonsTheme, stylesOverride]);
-  const skeleton = (h) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: {
+  const skeleton = (h) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: {
     height: h,
     borderRadius: 8,
     background: "#e5e7eb",
@@ -2638,15 +3183,15 @@ function InterimButtonsView({
     const inputBg = bStyles.cardInputBackground ?? "white";
     const hideBackButtonLabel = isEmptySlotContent(cardBackButtonContent);
     const hideTitle = isEmptySlotContent(cardTitleContent);
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: {
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: {
       backgroundColor: bStyles.cardFormContainer?.backgroundColor ?? "white",
       borderRadius: "8px",
       animation: "flopay-interim-expand 0.35s cubic-bezier(0.4, 0, 0.2, 1) both",
       overflow: "hidden",
       ...bStyles.cardFormContainer
     }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: { display: "flex", alignItems: "center", padding: "0.75rem 0 0.625rem" }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { display: "flex", alignItems: "center", padding: "0.75rem 0 0.625rem" }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
           "button",
           {
             type: "button",
@@ -2673,7 +3218,7 @@ function InterimButtonsView({
               ...bStyles.backButton
             },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { style: {
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { style: {
                 display: "inline-flex",
                 alignItems: "center",
                 justifyContent: "center",
@@ -2682,12 +3227,12 @@ function InterimButtonsView({
                 borderRadius: "50%",
                 backgroundColor: "#f3f4f6",
                 ...bStyles.backButtonIcon
-              }, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M15 18l-6-6 6-6" }) }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(BackButtonContentSlot, { content: cardBackButtonContent })
+              }, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { d: "M15 18l-6-6 6-6" }) }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(BackButtonContentSlot, { content: cardBackButtonContent })
             ]
           }
         ),
-        hideTitle ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: { flex: 1 } }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: {
+        hideTitle ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { flex: 1 } }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: {
           flex: 1,
           textAlign: "center",
           fontWeight: 600,
@@ -2695,15 +3240,15 @@ function InterimButtonsView({
           color: "#262833",
           paddingRight: 80,
           ...bStyles.title
-        }, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(TitleContentSlot, { content: cardTitleContent }) })
+        }, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(TitleContentSlot, { content: cardTitleContent }) })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: { backgroundColor: inputBg, border: `1px solid ${inputBorder}`, borderTopLeftRadius: 8, borderTopRightRadius: 8, padding: 12, height: 45 }, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: { width: "60%", height: 14, borderRadius: 4, background: "#e5e7eb", animation: "flopay-interim-pulse 1.5s ease-in-out infinite" } }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: { display: "flex" }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: { flex: 1, backgroundColor: inputBg, border: `1px solid ${inputBorder}`, borderTop: "none", borderRight: "none", borderBottomLeftRadius: 8, padding: 12, height: 45 }, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: { width: "50%", height: 14, borderRadius: 4, background: "#e5e7eb", animation: "flopay-interim-pulse 1.5s ease-in-out infinite" } }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: { flex: 1, backgroundColor: inputBg, border: `1px solid ${inputBorder}`, borderTop: "none", borderBottomRightRadius: 8, padding: 12, height: 45 }, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: { width: "40%", height: 14, borderRadius: 4, background: "#e5e7eb", animation: "flopay-interim-pulse 1.5s ease-in-out infinite" } }) })
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { backgroundColor: inputBg, border: `1px solid ${inputBorder}`, borderTopLeftRadius: 8, borderTopRightRadius: 8, padding: 12, height: 45 }, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { width: "60%", height: 14, borderRadius: 4, background: "#e5e7eb", animation: "flopay-interim-pulse 1.5s ease-in-out infinite" } }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { display: "flex" }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { flex: 1, backgroundColor: inputBg, border: `1px solid ${inputBorder}`, borderTop: "none", borderRight: "none", borderBottomLeftRadius: 8, padding: 12, height: 45 }, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { width: "50%", height: 14, borderRadius: 4, background: "#e5e7eb", animation: "flopay-interim-pulse 1.5s ease-in-out infinite" } }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { flex: 1, backgroundColor: inputBg, border: `1px solid ${inputBorder}`, borderTop: "none", borderBottomRightRadius: 8, padding: 12, height: 45 }, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { width: "40%", height: 14, borderRadius: 4, background: "#e5e7eb", animation: "flopay-interim-pulse 1.5s ease-in-out infinite" } }) })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: { backgroundColor: inputBg, border: `1px solid ${inputBorder}`, borderRadius: 8, marginTop: 8, padding: 12, height: 45 }, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: { width: "45%", height: 14, borderRadius: 4, background: "#e5e7eb", animation: "flopay-interim-pulse 1.5s ease-in-out infinite" } }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: {
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { backgroundColor: inputBg, border: `1px solid ${inputBorder}`, borderRadius: 8, marginTop: 8, padding: 12, height: 45 }, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { width: "45%", height: 14, borderRadius: 4, background: "#e5e7eb", animation: "flopay-interim-pulse 1.5s ease-in-out infinite" } }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: {
         height: 50,
         borderRadius: 8,
         marginTop: 16,
@@ -2712,7 +3257,7 @@ function InterimButtonsView({
         ...bStyles.submitButton,
         opacity: 0.5
       } }),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("style", { children: `
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("style", { children: `
           @keyframes flopay-interim-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }
           @keyframes flopay-interim-expand {
             0% { opacity: 0; max-height: 0; transform: translateY(-12px); }
@@ -2722,10 +3267,10 @@ function InterimButtonsView({
         ` })
     ] });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: "0.5rem" }, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: "0.5rem" }, children: [
     showPayPal && skeleton(DEFAULT_BUTTONS_LAYOUT_BUTTON_HEIGHT2),
     (showApplePay || showGooglePay) && skeleton(DEFAULT_BUTTONS_LAYOUT_BUTTON_HEIGHT2),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
       "button",
       {
         type: "button",
@@ -2765,10 +3310,10 @@ function InterimButtonsView({
         onMouseUp: (e) => {
           e.currentTarget.style.transform = "scale(1)";
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(CardButtonContentSlot, { content: cardButtonContent })
+        children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(CardButtonContentSlot, { content: cardButtonContent })
       }
     ),
-    errorMessage && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: {
+    errorMessage && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: {
       margin: "0.25rem 0",
       padding: "0.625rem 0.875rem",
       background: "#FEF2F2",
@@ -2782,21 +3327,21 @@ function InterimButtonsView({
       gap: "0.5rem",
       ...bStyles.errorBanner
     }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", style: { flexShrink: 0 }, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M12 9v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z", stroke: "#DC2626", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", style: { flexShrink: 0 }, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { d: "M12 9v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z", stroke: "#DC2626", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }),
       errorMessage
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("style", { children: `@keyframes flopay-interim-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }` })
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("style", { children: `@keyframes flopay-interim-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }` })
   ] });
 }
 
 // src/checkout-form.tsx
-var import_shared7 = require("@flopay/shared");
-var import_react8 = require("react");
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_shared8 = require("@flopay/shared");
+var import_react9 = require("react");
+var import_jsx_runtime7 = require("react/jsx-runtime");
 var WALLET_RESUME_KEY2 = "flopay_wallet_resume";
-var CheckoutForm = (0, import_react8.forwardRef)(
+var CheckoutForm = (0, import_react9.forwardRef)(
   function CheckoutForm2(props, ref) {
-    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(CheckoutFormInner, { ...props, innerRef: ref });
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CheckoutFormInner, { ...props, innerRef: ref });
   }
 );
 function CheckoutFormInner({
@@ -2825,27 +3370,27 @@ function CheckoutFormInner({
   const paypalFlopay = usePayPalFloPay();
   const elements = useElements();
   const contextBillingUrl = useBillingApiUrl();
-  const [processing, setProcessing] = (0, import_react8.useState)(false);
-  const [error, setError] = (0, import_react8.useState)(null);
-  const [is3DSActive, setIs3DSActive] = (0, import_react8.useState)(false);
+  const [processing, setProcessing] = (0, import_react9.useState)(false);
+  const [error, setError] = (0, import_react9.useState)(null);
+  const [is3DSActive, setIs3DSActive] = (0, import_react9.useState)(false);
   const displayError = externalError ?? error;
   const isSubmitting = externalProcessing ?? processing;
   const isSelfContained = !onTokenizedBody;
   const baseUrl = (billingApiUrl || contextBillingUrl).replace(/\/+$/, "");
-  const updateError = (0, import_react8.useCallback)(
+  const updateError = (0, import_react9.useCallback)(
     (err) => {
       setError(err);
       onErrorChange?.(err);
     },
     [onErrorChange]
   );
-  const emitDecline = (0, import_react8.useCallback)(
+  const emitDecline = (0, import_react9.useCallback)(
     (input, overrides) => {
       onDecline?.(buildDeclineEvent("card", input, overrides));
     },
     [onDecline]
   );
-  const processPaymentInternal = (0, import_react8.useCallback)(
+  const processPaymentInternal = (0, import_react9.useCallback)(
     async (tokenizedBody) => {
       setProcessing(true);
       updateError(null);
@@ -2871,7 +3416,8 @@ function CheckoutFormInner({
         if (response.ok) {
           onComplete?.({
             status: "succeeded",
-            paymentIntentId: tokenizedBody.threeDSecureActionResultTokenId
+            paymentIntentId: tokenizedBody.threeDSecureActionResultTokenId,
+            paymentMethodId: resolveTokenizedPaymentMethodId(tokenizedBody)
           });
           return;
         }
@@ -2898,7 +3444,8 @@ function CheckoutFormInner({
               await processPaymentInternal({
                 id: result.paymentIntentId,
                 type: "card",
-                threeDSecureActionResultTokenId: result.paymentIntentId
+                threeDSecureActionResultTokenId: result.paymentIntentId,
+                originalPaymentMethodId: resolveTokenizedPaymentMethodId(tokenizedBody)
               });
             }
           } finally {
@@ -2953,7 +3500,7 @@ function CheckoutFormInner({
     },
     [baseUrl, sessionId, userId, email, firstName, lastName, chv, flopay, paypalFlopay, onComplete, onError, onDecline, updateError, emitDecline]
   );
-  const dispatchTokenizedBody = (0, import_react8.useCallback)(
+  const dispatchTokenizedBody = (0, import_react9.useCallback)(
     (tokenizedBody) => {
       if (onTokenizedBody) {
         onTokenizedBody(tokenizedBody);
@@ -2963,7 +3510,7 @@ function CheckoutFormInner({
     },
     [onTokenizedBody, processPaymentInternal]
   );
-  (0, import_react8.useImperativeHandle)(innerRef, () => ({
+  (0, import_react9.useImperativeHandle)(innerRef, () => ({
     async handleNextAction(secret) {
       if (!flopay) return;
       setIs3DSActive(true);
@@ -2990,7 +3537,7 @@ function CheckoutFormInner({
       }
     }
   }), [flopay, dispatchTokenizedBody, onError, updateError, emitDecline]);
-  (0, import_react8.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     if (typeof window === "undefined") return;
     const stored = localStorage.getItem(WALLET_RESUME_KEY2);
     if (!stored) return;
@@ -3008,7 +3555,7 @@ function CheckoutFormInner({
       localStorage.removeItem(WALLET_RESUME_KEY2);
     }
   }, [sessionId, dispatchTokenizedBody]);
-  const handleSubmit = (0, import_react8.useCallback)(
+  const handleSubmit = (0, import_react9.useCallback)(
     async (e) => {
       e.preventDefault();
       if (!flopay || !elements || isSubmitting) return;
@@ -3027,7 +3574,7 @@ function CheckoutFormInner({
           return;
         }
         if (!sessionId || !email) {
-          throw new import_shared7.FloPayError("Missing sessionId or email", "validation_error");
+          throw new import_shared8.FloPayError("Missing sessionId or email", "validation_error");
         }
         const intentResponse = await fetch(`${baseUrl}/v1/checkouts/payments/intents`, {
           method: "POST",
@@ -3039,10 +3586,10 @@ function CheckoutFormInner({
             isPaypal: false
           })
         });
-        if (!intentResponse.ok) throw new import_shared7.FloPayError("Failed to create payment intent", "api_error");
+        if (!intentResponse.ok) throw new import_shared8.FloPayError("Failed to create payment intent", "api_error");
         const intentJson = await intentResponse.json();
         const intentClientSecret = intentJson.data?.id;
-        if (!intentClientSecret) throw new import_shared7.FloPayError("No client_secret in payment intent response", "api_error");
+        if (!intentClientSecret) throw new import_shared8.FloPayError("No client_secret in payment intent response", "api_error");
         const confirmResult = await flopay.confirmCardPayment({
           clientSecret: intentClientSecret,
           paymentMethodId: pmResult.paymentMethodId
@@ -3056,7 +3603,8 @@ function CheckoutFormInner({
         dispatchTokenizedBody({
           id: pmResult.paymentMethodId,
           type: "card",
-          threeDSecureActionResultTokenId: confirmResult.paymentIntentId
+          threeDSecureActionResultTokenId: confirmResult.paymentIntentId,
+          originalPaymentMethodId: pmResult.paymentMethodId
         });
       } catch (err) {
         updateError(err instanceof Error ? err.message : "An unexpected error occurred");
@@ -3070,8 +3618,8 @@ function CheckoutFormInner({
     [flopay, elements, isSubmitting, sessionId, email, baseUrl, isSelfContained, dispatchTokenizedBody, onError, updateError, emitDecline]
   );
   const isReady = flopay !== null && elements !== null;
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("form", { onSubmit: handleSubmit, className, style: { position: "relative" }, children: [
-    (is3DSActive || isSubmitting) && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { "data-testid": "flopay-overlay", style: {
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("form", { onSubmit: handleSubmit, className, style: { position: "relative" }, children: [
+    (is3DSActive || isSubmitting) && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { "data-testid": "flopay-overlay", style: {
       position: "absolute",
       inset: 0,
       background: "rgba(255,255,255,0.7)",
@@ -3080,12 +3628,12 @@ function CheckoutFormInner({
       justifyContent: "center",
       zIndex: 10
     }, children: is3DSActive ? "Verifying payment..." : "Processing..." }),
-    !isReady && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { "data-testid": "flopay-loading", "aria-busy": "true", children: "Loading payment form..." }),
-    isReady && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(PaymentElement, { options: { layout } }),
-      showAddress && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(AddressElement, { options: { mode: showAddress === true ? "billing" : showAddress } }),
-      displayError && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { role: "alert", "data-testid": "flopay-error", style: { color: "red", margin: "0.75rem 0" }, children: displayError }),
-      children ?? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    !isReady && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { "data-testid": "flopay-loading", "aria-busy": "true", children: "Loading payment form..." }),
+    isReady && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(PaymentElement, { options: { layout } }),
+      showAddress && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(AddressElement, { options: { mode: showAddress === true ? "billing" : showAddress } }),
+      displayError && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { role: "alert", "data-testid": "flopay-error", style: { color: "red", margin: "0.75rem 0" }, children: displayError }),
+      children ?? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
         "button",
         {
           type: "submit",
@@ -3099,9 +3647,9 @@ function CheckoutFormInner({
 }
 
 // src/paypal-button.tsx
-var import_shared8 = require("@flopay/shared");
-var import_react9 = require("react");
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_shared9 = require("@flopay/shared");
+var import_react10 = require("react");
+var import_jsx_runtime8 = require("react/jsx-runtime");
 function PayPalButton({
   sessionId,
   billingApiUrl,
@@ -3118,11 +3666,11 @@ function PayPalButton({
   const flopay = useFloPay();
   const elements = useElements();
   const contextBillingUrl = useBillingApiUrl();
-  const [ready, setReady] = (0, import_react9.useState)(false);
-  const [submitting, setSubmitting] = (0, import_react9.useState)(false);
-  const paypalResumeAttempted = (0, import_react9.useRef)(false);
+  const [ready, setReady] = (0, import_react10.useState)(false);
+  const [submitting, setSubmitting] = (0, import_react10.useState)(false);
+  const paypalResumeAttempted = (0, import_react10.useRef)(false);
   const baseUrl = (billingApiUrl || contextBillingUrl).replace(/\/+$/, "");
-  const processPaymentInternal = (0, import_react9.useCallback)(
+  const processPaymentInternal = (0, import_react10.useCallback)(
     async (tokenizedBody) => {
       try {
         const response = await fetch(`${baseUrl}/v1/checkouts/sessions/process`, {
@@ -3155,7 +3703,7 @@ function PayPalButton({
     },
     [baseUrl, sessionId, userId, email, firstName, lastName, chv, onComplete, onErrorChange]
   );
-  const dispatchTokenizedBody = (0, import_react9.useCallback)(
+  const dispatchTokenizedBody = (0, import_react10.useCallback)(
     (body) => {
       if (onTokenizedBody) {
         onTokenizedBody(body);
@@ -3165,7 +3713,7 @@ function PayPalButton({
     },
     [onTokenizedBody, processPaymentInternal]
   );
-  (0, import_react9.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     if (!flopay || paypalResumeAttempted.current) return;
     const params = new URLSearchParams(window.location.search);
     const paymentIntentId = params.get("payment_intent");
@@ -3213,13 +3761,13 @@ function PayPalButton({
       }
     })();
   }, [flopay, dispatchTokenizedBody, onErrorChange]);
-  const handlePayPalConfirm = (0, import_react9.useCallback)(async () => {
+  const handlePayPalConfirm = (0, import_react10.useCallback)(async () => {
     if (!flopay || !elements) return;
     try {
       setSubmitting(true);
       onErrorChange?.(null);
       if (!sessionId || !email) {
-        throw new import_shared8.FloPayError("Missing sessionId or email for PayPal payment", "validation_error");
+        throw new import_shared9.FloPayError("Missing sessionId or email for PayPal payment", "validation_error");
       }
       const intentResponse = await fetch(`${baseUrl}/v1/checkouts/payments/intents`, {
         method: "POST",
@@ -3231,10 +3779,10 @@ function PayPalButton({
           isPaypal: "true"
         })
       });
-      if (!intentResponse.ok) throw new import_shared8.FloPayError("Failed to create payment intent", "api_error");
+      if (!intentResponse.ok) throw new import_shared9.FloPayError("Failed to create payment intent", "api_error");
       const intentJson = await intentResponse.json();
       const intentClientSecret = intentJson.data?.id;
-      if (!intentClientSecret) throw new import_shared8.FloPayError("No client_secret in response", "api_error");
+      if (!intentClientSecret) throw new import_shared9.FloPayError("No client_secret in response", "api_error");
       const result = await flopay.confirmPayment({
         clientSecret: intentClientSecret,
         returnUrl: window.location.href
@@ -3256,11 +3804,11 @@ function PayPalButton({
     }
   }, [flopay, elements, sessionId, email, baseUrl, dispatchTokenizedBody, onErrorChange]);
   if (!flopay || !elements) {
-    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: { height: 45, background: "#f0f0f0", borderRadius: 6, animation: "pulse 1.5s infinite" } });
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: { height: 45, background: "#f0f0f0", borderRadius: 6, animation: "pulse 1.5s infinite" } });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
-    !ready && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: { height: 45, background: "#f0f0f0", borderRadius: 6 } }),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: ready ? {} : { display: "none" }, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
+    !ready && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: { height: 45, background: "#f0f0f0", borderRadius: 6 } }),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: ready ? {} : { display: "none" }, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
       "button",
       {
         type: "button",
@@ -3282,7 +3830,7 @@ function PayPalButton({
         children: submitting ? "Processing..." : "PayPal"
       }
     ) }),
-    (submitting || isProcessing) && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: {
+    (submitting || isProcessing) && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: {
       position: "fixed",
       inset: 0,
       background: "rgba(0,0,0,0.4)",
@@ -3290,7 +3838,7 @@ function PayPalButton({
       alignItems: "center",
       justifyContent: "center",
       zIndex: 1e3
-    }, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: {
+    }, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: {
       background: "white",
       borderRadius: 8,
       padding: "1.5rem",
@@ -3300,6 +3848,676 @@ function PayPalButton({
     }, children: "Processing PayPal payment..." }) })
   ] });
 }
+
+// src/automatic-payment-button.tsx
+var import_react11 = require("react");
+var import_js3 = require("@flopay/js");
+var import_shared10 = require("@flopay/shared");
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var DEFAULT_BUTTONS_LAYOUT_BUTTON_HEIGHT3 = 44;
+var PAYPAL_RESUME_STORAGE_KEY = "flopay_automatic_payment_button_resume";
+function sleep2(ms) {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}
+function coerceError(err, fallbackMessage) {
+  if (err instanceof import_shared10.FloPayError) {
+    return err;
+  }
+  return new import_shared10.FloPayError(
+    err instanceof Error ? err.message : fallbackMessage,
+    "api_error"
+  );
+}
+function canUseStorage() {
+  return typeof window !== "undefined" && typeof window.sessionStorage !== "undefined";
+}
+function shouldShowFallbackCheckout(error, sessionId) {
+  if (!sessionId) return false;
+  if (error.type === "validation_error") return false;
+  if (error.checkoutMethod && error.checkoutMethod !== "card") return false;
+  return true;
+}
+function readPayPalResumeState() {
+  if (!canUseStorage()) return null;
+  try {
+    const raw = window.sessionStorage.getItem(PAYPAL_RESUME_STORAGE_KEY);
+    if (!raw) return null;
+    return JSON.parse(raw);
+  } catch {
+    return null;
+  }
+}
+function persistPayPalResumeState(state) {
+  if (!canUseStorage()) return;
+  try {
+    window.sessionStorage.setItem(PAYPAL_RESUME_STORAGE_KEY, JSON.stringify(state));
+  } catch (error) {
+    console.warn("[FloPayAutomaticPaymentButton] Failed to persist PayPal resume state.", error);
+  }
+}
+function clearPayPalResumeState() {
+  if (!canUseStorage()) return;
+  try {
+    window.sessionStorage.removeItem(PAYPAL_RESUME_STORAGE_KEY);
+  } catch (error) {
+    console.warn("[FloPayAutomaticPaymentButton] Failed to clear PayPal resume state.", error);
+  }
+}
+function clearPayPalRedirectParams() {
+  if (typeof window === "undefined") return;
+  const url = new URL(window.location.href);
+  const keys = ["payment_intent", "payment_intent_client_secret", "redirect_status"];
+  let changed = false;
+  for (const key of keys) {
+    if (url.searchParams.has(key)) {
+      url.searchParams.delete(key);
+      changed = true;
+    }
+  }
+  if (changed) {
+    window.history.replaceState({}, "", url.toString());
+  }
+}
+function resolveCreateSessionDraft(props) {
+  if (props.createSession) {
+    return {
+      ...props.createSession,
+      checkoutMode: "auto"
+    };
+  }
+  if (!props.clientId || !props.account || !props.successUrl || !props.cancelUrl) {
+    return null;
+  }
+  return {
+    clientId: props.clientId,
+    items: props.items,
+    subscriptions: props.subscriptions,
+    account: props.account,
+    successUrl: props.successUrl,
+    cancelUrl: props.cancelUrl,
+    couponCodes: props.couponCodes,
+    tagsData: props.tagsData,
+    utmMetadata: props.utmMetadata,
+    checkoutMode: "auto"
+  };
+}
+function FloPayAutomaticPaymentButton({
+  sessionId,
+  createSession,
+  paymentMethodId,
+  clientId,
+  items,
+  subscriptions,
+  account,
+  successUrl,
+  cancelUrl,
+  couponCodes,
+  tagsData,
+  utmMetadata,
+  billingApiUrl,
+  locale,
+  fallbackPublishableKey,
+  buttonsTheme,
+  buttonsStyles: stylesOverride,
+  onSuccess,
+  onError,
+  onDecline,
+  children,
+  disabled = false,
+  type = "button",
+  style,
+  ...buttonProps
+}) {
+  const resolvedBillingUrl = (0, import_react11.useMemo)(
+    () => (0, import_shared10.resolveBillingApiUrl)(billingApiUrl),
+    [billingApiUrl]
+  );
+  const createSessionDraft = (0, import_react11.useMemo)(
+    () => resolveCreateSessionDraft({
+      createSession,
+      clientId,
+      items,
+      subscriptions,
+      account,
+      successUrl,
+      cancelUrl,
+      couponCodes,
+      tagsData,
+      utmMetadata
+    }),
+    [
+      account,
+      cancelUrl,
+      clientId,
+      couponCodes,
+      createSession,
+      items,
+      subscriptions,
+      successUrl,
+      tagsData,
+      utmMetadata
+    ]
+  );
+  const [isProcessing, setIsProcessing] = (0, import_react11.useState)(false);
+  const [overlayStatus, setOverlayStatus] = (0, import_react11.useState)(null);
+  const [overlayError, setOverlayError] = (0, import_react11.useState)(null);
+  const [fallbackSession, setFallbackSession] = (0, import_react11.useState)(null);
+  const automaticPaymentToken = (0, import_react11.useMemo)(
+    () => paymentMethodId ? {
+      id: paymentMethodId,
+      type: "card"
+    } : void 0,
+    [paymentMethodId]
+  );
+  const isMountedRef = (0, import_react11.useRef)(true);
+  const resumeAttemptedRef = (0, import_react11.useRef)(false);
+  const fallbackSessionRef = (0, import_react11.useRef)(fallbackSession);
+  const onSuccessRef = (0, import_react11.useRef)(onSuccess);
+  const onErrorRef = (0, import_react11.useRef)(onError);
+  const onDeclineRef = (0, import_react11.useRef)(onDecline);
+  (0, import_react11.useEffect)(() => {
+    fallbackSessionRef.current = fallbackSession;
+  }, [fallbackSession]);
+  (0, import_react11.useEffect)(() => {
+    onSuccessRef.current = onSuccess;
+  }, [onSuccess]);
+  (0, import_react11.useEffect)(() => {
+    onErrorRef.current = onError;
+  }, [onError]);
+  (0, import_react11.useEffect)(() => {
+    onDeclineRef.current = onDecline;
+  }, [onDecline]);
+  (0, import_react11.useEffect)(() => {
+    isMountedRef.current = true;
+    return () => {
+      isMountedRef.current = false;
+    };
+  }, []);
+  (0, import_react11.useEffect)(() => {
+    if (!fallbackSession || typeof window === "undefined") {
+      return;
+    }
+    const handleKeyDown = (event) => {
+      if (event.key === "Escape") {
+        setFallbackSession(null);
+      }
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => {
+      window.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [fallbackSession]);
+  const emitDecline = (0, import_react11.useCallback)((error, method = DEFAULT_SAVED_PAYMENT_DECLINE_METHOD) => {
+    onDeclineRef.current?.(buildDeclineEvent(method, error, {
+      code: error.code,
+      declineCode: error.declineCode
+    }));
+  }, []);
+  const showSuccess = (0, import_react11.useCallback)(async (event) => {
+    if (!isMountedRef.current) return;
+    setOverlayError(null);
+    setOverlayStatus("success");
+    await sleep2(PROCESSING_OVERLAY_SUCCESS_DELAY_MS);
+    if (!isMountedRef.current) return;
+    onSuccessRef.current?.(event);
+  }, []);
+  const showError = (0, import_react11.useCallback)(async (error, options) => {
+    if (!isMountedRef.current) return;
+    onErrorRef.current?.(error);
+    if (options?.emitDecline) {
+      emitDecline(error, options.method);
+    }
+    setOverlayError(error.message);
+    setOverlayStatus("error");
+    await sleep2(PROCESSING_OVERLAY_ERROR_DELAY_MS);
+  }, [emitDecline]);
+  const processResolvedSession = (0, import_react11.useCallback)(async (apiResult, resolvedSessionId) => {
+    const session = apiResult.data.session ?? null;
+    if (!session) {
+      throw new import_shared10.FloPayError("No session data returned", "api_error");
+    }
+    if (session.status === "complete") {
+      await showSuccess({
+        result: { status: "succeeded" },
+        session,
+        sessionId: session.id || resolvedSessionId,
+        autoCompleted: false
+      });
+      return;
+    }
+    try {
+      const result = await processSavedPaymentForMode({
+        billingApiUrl: resolvedBillingUrl,
+        sessionId: resolvedSessionId ?? session.id,
+        session,
+        tokenizedData: automaticPaymentToken
+      });
+      let paymentResult = result.type === "success" ? result.result : null;
+      if (result.type !== "success") {
+        const {
+          publishableKey,
+          paypalPublishableKey
+        } = resolveSavedPaymentPublishableKeys(apiResult, fallbackPublishableKey);
+        if (result.type === "paypal_redirect_required") {
+          persistPayPalResumeState({
+            sessionId: session.id || resolvedSessionId,
+            publishableKey,
+            paypalPublishableKey
+          });
+        }
+        const {
+          flopay,
+          paypalFlopay
+        } = await loadSavedPaymentProviders({
+          publishableKey,
+          paypalPublishableKey,
+          billingApiUrl: resolvedBillingUrl,
+          locale
+        });
+        paymentResult = await handleSavedPaymentRedirectResult(result, {
+          flopay,
+          paypalFlopay,
+          attempt3DS: true,
+          billingApiUrl: resolvedBillingUrl,
+          sessionId: session.id || resolvedSessionId,
+          session
+        });
+        if (result.type === "paypal_redirect_required") {
+          clearPayPalResumeState();
+        }
+      }
+      await showSuccess({
+        result: paymentResult ? {
+          ...paymentResult,
+          paymentMethodId: paymentResult.paymentMethodId ?? paymentMethodId
+        } : {
+          status: "succeeded",
+          paymentMethodId: paymentMethodId ?? void 0
+        },
+        session,
+        sessionId: session.id || resolvedSessionId,
+        autoCompleted: false
+      });
+    } catch (err) {
+      let floPayErr = normalizeSavedPaymentError(err);
+      const fallbackSessionId = session.id || resolvedSessionId;
+      if (floPayErr.code === "authentication_required" && fallbackSessionId && automaticPaymentToken?.id && automaticPaymentToken.id.startsWith("pm_")) {
+        try {
+          const {
+            publishableKey,
+            paypalPublishableKey
+          } = resolveSavedPaymentPublishableKeys(apiResult, fallbackPublishableKey);
+          const {
+            flopay
+          } = await loadSavedPaymentProviders({
+            publishableKey,
+            paypalPublishableKey,
+            billingApiUrl: resolvedBillingUrl,
+            locale
+          });
+          const paymentResult = await processSavedPaymentWithIntent({
+            billingApiUrl: resolvedBillingUrl,
+            sessionId: fallbackSessionId,
+            session,
+            paymentMethodId: automaticPaymentToken.id,
+            flopay
+          });
+          await showSuccess({
+            result: {
+              ...paymentResult,
+              paymentMethodId: paymentResult.paymentMethodId ?? paymentMethodId
+            },
+            session,
+            sessionId: fallbackSessionId,
+            autoCompleted: false
+          });
+          return;
+        } catch (intentRecoveryErr) {
+          floPayErr = normalizeSavedPaymentError(intentRecoveryErr);
+        }
+      }
+      await showError(floPayErr, {
+        emitDecline: true,
+        method: floPayErr.checkoutMethod ?? DEFAULT_SAVED_PAYMENT_DECLINE_METHOD
+      });
+      if (shouldShowFallbackCheckout(floPayErr, fallbackSessionId) && fallbackSessionId && isMountedRef.current) {
+        setFallbackSession({
+          sessionId: fallbackSessionId,
+          errorMessage: floPayErr.message
+        });
+      }
+    }
+  }, [
+    fallbackPublishableKey,
+    locale,
+    automaticPaymentToken,
+    paymentMethodId,
+    resolvedBillingUrl,
+    showError,
+    showSuccess
+  ]);
+  const handleButtonClick = (0, import_react11.useCallback)(async (event) => {
+    buttonProps.onClick?.(event);
+    if (event.defaultPrevented || disabled || isProcessing) {
+      return;
+    }
+    setFallbackSession(null);
+    if (sessionId && createSessionDraft) {
+      const error = new import_shared10.FloPayError(
+        "Provide either sessionId or create-session props, not both.",
+        "validation_error"
+      );
+      await showError(error);
+      if (isMountedRef.current) {
+        setOverlayStatus(null);
+        setOverlayError(null);
+      }
+      return;
+    }
+    if (!sessionId && !createSessionDraft) {
+      const error = new import_shared10.FloPayError(
+        "Provide a sessionId or the props required to create an automatic payment session.",
+        "validation_error"
+      );
+      await showError(error);
+      if (isMountedRef.current) {
+        setOverlayStatus(null);
+        setOverlayError(null);
+      }
+      return;
+    }
+    setIsProcessing(true);
+    setOverlayError(null);
+    setOverlayStatus("processing");
+    try {
+      const api = new import_js3.PaymentAPI(resolvedBillingUrl);
+      if (sessionId) {
+        const result = await api.getUnifiedCheckoutSession(sessionId);
+        await processResolvedSession(result, sessionId);
+        return;
+      }
+      try {
+        const result = await api.createAndFetchSession(createSessionDraft);
+        await processResolvedSession(result, result.data.session?.id ?? null);
+      } catch (err) {
+        if (err instanceof import_shared10.FloPayError && err.code === "session_auto_completed") {
+          await showSuccess({
+            result: { status: "succeeded" },
+            session: null,
+            sessionId: null,
+            autoCompleted: true
+          });
+          return;
+        }
+        throw err;
+      }
+    } catch (err) {
+      await showError(
+        coerceError(err, "Automatic payment failed. Please try again.")
+      );
+    } finally {
+      if (isMountedRef.current) {
+        setOverlayStatus(null);
+        setOverlayError(null);
+        setIsProcessing(false);
+      }
+    }
+  }, [
+    buttonProps,
+    createSessionDraft,
+    disabled,
+    isProcessing,
+    processResolvedSession,
+    resolvedBillingUrl,
+    sessionId,
+    showError,
+    showSuccess
+  ]);
+  const handleFallbackComplete = (0, import_react11.useCallback)((result) => {
+    const activeFallback = fallbackSessionRef.current;
+    setFallbackSession(null);
+    onSuccessRef.current?.({
+      result,
+      session: null,
+      sessionId: activeFallback?.sessionId ?? null,
+      autoCompleted: false
+    });
+  }, []);
+  const handleFallbackError = (0, import_react11.useCallback)((error) => {
+    onErrorRef.current?.(error);
+  }, []);
+  const handleFallbackDecline = (0, import_react11.useCallback)((decline) => {
+    onDeclineRef.current?.(decline);
+  }, []);
+  (0, import_react11.useEffect)(() => {
+    if (typeof window === "undefined" || resumeAttemptedRef.current) {
+      return;
+    }
+    const params = new URLSearchParams(window.location.search);
+    const clientSecret = params.get("payment_intent_client_secret");
+    if (!clientSecret) {
+      return;
+    }
+    const resumeState = readPayPalResumeState();
+    if (!resumeState) {
+      return;
+    }
+    resumeAttemptedRef.current = true;
+    void (async () => {
+      setIsProcessing(true);
+      setOverlayError(null);
+      setOverlayStatus("processing");
+      try {
+        if (params.get("redirect_status") === "failed") {
+          throw Object.assign(
+            new import_shared10.FloPayError("PayPal payment was declined. Please try again.", "api_error"),
+            { checkoutMethod: "paypal" }
+          );
+        }
+        const {
+          flopay,
+          paypalFlopay
+        } = await loadSavedPaymentProviders({
+          publishableKey: resumeState.publishableKey,
+          paypalPublishableKey: resumeState.paypalPublishableKey,
+          billingApiUrl: resolvedBillingUrl,
+          locale
+        });
+        const paypalStripe = (paypalFlopay ?? flopay).getRawProvider();
+        if (!paypalStripe) {
+          throw Object.assign(
+            new import_shared10.FloPayError("PayPal is not available.", "api_error"),
+            { checkoutMethod: "paypal" }
+          );
+        }
+        const { paymentIntent, error } = await paypalStripe.retrievePaymentIntent(clientSecret);
+        if (error) {
+          throw Object.assign(
+            new import_shared10.FloPayError(
+              error.message ?? "Failed to retrieve PayPal payment status.",
+              "api_error",
+              { code: error.code }
+            ),
+            { checkoutMethod: "paypal" }
+          );
+        }
+        if (paymentIntent && (paymentIntent.status === "requires_capture" || paymentIntent.status === "succeeded" || paymentIntent.status === "processing")) {
+          await showSuccess({
+            result: { status: "succeeded", paymentIntentId: paymentIntent.id },
+            session: null,
+            sessionId: resumeState.sessionId,
+            autoCompleted: false
+          });
+        } else {
+          throw Object.assign(
+            new import_shared10.FloPayError("PayPal payment was not completed. Please try again.", "api_error"),
+            { checkoutMethod: "paypal" }
+          );
+        }
+      } catch (err) {
+        const floPayErr = normalizeSavedPaymentError(err);
+        await showError(floPayErr, {
+          emitDecline: true,
+          method: floPayErr.checkoutMethod ?? "paypal"
+        });
+      } finally {
+        clearPayPalResumeState();
+        clearPayPalRedirectParams();
+        if (isMountedRef.current) {
+          setOverlayStatus(null);
+          setOverlayError(null);
+          setIsProcessing(false);
+        }
+      }
+    })();
+  }, [locale, resolvedBillingUrl, showError, showSuccess]);
+  const bStyles = (0, import_react11.useMemo)(() => {
+    const base = (0, import_shared10.resolveButtonsLayoutTheme)(buttonsTheme);
+    if (!stylesOverride) return base;
+    return {
+      ...base,
+      ...stylesOverride,
+      cardButton: { ...base.cardButton, ...stylesOverride.cardButton }
+    };
+  }, [buttonsTheme, stylesOverride]);
+  const cardButtonSizing = children === void 0 ? { boxSizing: "border-box", height: DEFAULT_BUTTONS_LAYOUT_BUTTON_HEIGHT3, padding: "0 1rem" } : { padding: "0.9rem 1rem" };
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      "button",
+      {
+        ...buttonProps,
+        type,
+        onClick: handleButtonClick,
+        disabled: disabled || isProcessing,
+        "aria-busy": isProcessing,
+        style: {
+          width: "100%",
+          ...cardButtonSizing,
+          backgroundColor: "white",
+          color: "#262833",
+          border: "1px solid #d1d5db",
+          borderRadius: "8px",
+          fontSize: bStyles.cardButtonFontSize ?? "0.95rem",
+          fontWeight: 600,
+          cursor: disabled || isProcessing ? "not-allowed" : "pointer",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          gap: "0.625rem",
+          boxShadow: "0 1px 2px rgba(0,0,0,0.04)",
+          transition: "border-color 0.2s, box-shadow 0.2s, transform 0.1s",
+          position: "relative",
+          opacity: disabled || isProcessing ? 0.6 : 1,
+          ...bStyles.cardButton,
+          ...style
+        },
+        onMouseDown: (e) => {
+          buttonProps.onMouseDown?.(e);
+          if (!e.defaultPrevented) {
+            e.currentTarget.style.transform = "scale(0.985)";
+          }
+        },
+        onMouseUp: (e) => {
+          buttonProps.onMouseUp?.(e);
+          if (!e.defaultPrevented) {
+            e.currentTarget.style.transform = "scale(1)";
+          }
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(CardButtonContentSlot, { content: children })
+      }
+    ),
+    overlayStatus && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      ProcessingOverlay,
+      {
+        status: overlayStatus,
+        errorMessage: overlayError
+      }
+    ),
+    fallbackSession && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      "div",
+      {
+        "data-testid": "flopay-automatic-payment-fallback",
+        role: "dialog",
+        "aria-modal": "true",
+        onClick: (event) => {
+          if (event.target === event.currentTarget) {
+            setFallbackSession(null);
+          }
+        },
+        style: {
+          position: "fixed",
+          inset: 0,
+          background: "rgba(0, 0, 0, 0.45)",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          padding: "1.5rem",
+          zIndex: 1100
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+          "div",
+          {
+            style: {
+              width: "100%",
+              maxWidth: 520,
+              maxHeight: "90vh",
+              overflowY: "auto",
+              background: "white",
+              borderRadius: 20,
+              padding: "1.5rem",
+              boxShadow: "0 24px 80px rgba(15, 23, 42, 0.28)",
+              display: "flex",
+              flexDirection: "column",
+              gap: "1rem"
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                "div",
+                {
+                  style: {
+                    display: "flex",
+                    gap: "1rem",
+                    alignItems: "flex-start"
+                  },
+                  children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                    "div",
+                    {
+                      style: {
+                        flex: 1,
+                        background: "#fef2f2",
+                        color: "#b91c1c",
+                        border: "1px solid #fecaca",
+                        borderRadius: "12px",
+                        padding: "0.75rem 1rem",
+                        fontSize: "0.9rem",
+                        lineHeight: 1.5
+                      },
+                      children: fallbackSession.errorMessage
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                FloPayCheckout,
+                {
+                  sessionId: fallbackSession.sessionId,
+                  checkoutMode: "full",
+                  billingApiUrl: resolvedBillingUrl,
+                  fallbackPublishableKey,
+                  cardTitleContent: null,
+                  showSecurityFooter: false,
+                  onComplete: handleFallbackComplete,
+                  onError: handleFallbackError,
+                  onDecline: handleFallbackDecline
+                }
+              )
+            ]
+          }
+        )
+      }
+    )
+  ] });
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AddressElement,
@@ -3308,6 +4526,7 @@ function PayPalButton({
   CardExpiryElement,
   CardNumberElement,
   CheckoutForm,
+  FloPayAutomaticPaymentButton,
   FloPayCheckout,
   FloPayProvider,
   PayPalButton,