@flopay/react 0.4.3 → 0.4.5

package/dist/index.mjs

@@ -91,9 +91,9 @@ function FloPayProvider({
 }
 
 // src/flopay-checkout.tsx
-import React5, { useCallback as useCallback2, useEffect as useEffect4, useMemo as useMemo3, useRef as useRef3, useState as useState3 } from "react";
-import { loadFloPay, PaymentAPI } from "@flopay/js";
-import { SDK_VERSION, FloPayError as FloPayError3, resolveBillingApiUrl as resolveBillingApiUrl3, buildCheckoutDisplayData, resolveButtonsLayoutTheme as resolveButtonsLayoutTheme2 } from "@flopay/shared";
+import React6, { useCallback as useCallback2, useEffect as useEffect4, useMemo as useMemo3, useRef as useRef3, useState as useState3 } from "react";
+import { PaymentAPI as PaymentAPI2 } from "@flopay/js";
+import { SDK_VERSION, FloPayError as FloPayError4, resolveBillingApiUrl as resolveBillingApiUrl3, buildCheckoutDisplayData, resolveButtonsLayoutTheme as resolveButtonsLayoutTheme2 } from "@flopay/shared";
 
 // src/card-button-content.tsx
 import "react";
@@ -255,6 +255,157 @@ function useBillingApiUrl() {
   return ctx.billingApiUrl || resolveBillingApiUrl2();
 }
 
+// src/processing-overlay.tsx
+import "react";
+import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+var PROCESSING_OVERLAY_SUCCESS_DELAY_MS = 1200;
+var PROCESSING_OVERLAY_ERROR_DELAY_MS = 1500;
+function ProcessingOverlay({
+  status,
+  errorMessage
+}) {
+  return /* @__PURE__ */ jsx4(
+    "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__ */ jsxs2(
+        "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__ */ jsxs2("div", { style: { width: 48, height: 48, position: "relative" }, children: [
+              status === "processing" && /* @__PURE__ */ jsxs2(
+                "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__ */ jsx4("circle", { cx: "12", cy: "12", r: "10", stroke: "#e5e7eb", strokeWidth: "3" }),
+                    /* @__PURE__ */ jsx4("path", { d: "M4 12a8 8 0 018-8v3a5 5 0 00-5 5H4z", fill: "#4A49FF" })
+                  ]
+                }
+              ),
+              status === "success" && /* @__PURE__ */ jsx4("div", { style: { animation: "flopay-pop 0.4s cubic-bezier(0.34,1.56,0.64,1)" }, children: /* @__PURE__ */ jsxs2("svg", { width: "48", height: "48", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+                /* @__PURE__ */ jsx4("circle", { cx: "12", cy: "12", r: "11", fill: "#22c55e" }),
+                /* @__PURE__ */ jsx4(
+                  "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__ */ jsx4("div", { style: { animation: "flopay-shake 0.4s ease" }, children: /* @__PURE__ */ jsxs2("svg", { width: "48", height: "48", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+                /* @__PURE__ */ jsx4("circle", { cx: "12", cy: "12", r: "11", fill: "#ef4444" }),
+                /* @__PURE__ */ jsx4(
+                  "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__ */ jsxs2(
+              "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__ */ jsx4(
+              "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__ */ jsx4(
+              "p",
+              {
+                style: {
+                  fontSize: 13,
+                  color: "#6b7280",
+                  fontWeight: 400,
+                  maxWidth: 260,
+                  lineHeight: 1.4,
+                  margin: 0
+                },
+                children: errorMessage
+              }
+            ),
+            /* @__PURE__ */ jsx4("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
 import { FloPayError } from "@flopay/shared";
 function mergeInlineSessionPatches(base, patch) {
@@ -312,7 +463,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: "",
@@ -353,10 +504,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
 import { FloPayError as FloPayError2 } from "@flopay/shared";
-import { Fragment as Fragment2, jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
 var WALLET_RESUME_KEY = "flopay_wallet_resume";
 var FLOPAY_KEYFRAMES = `
 @keyframes flopay-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }
@@ -398,7 +561,7 @@ function normalizeBeforeButtonClickError(method, err) {
   );
 }
 function FloPayKeyframes() {
-  return /* @__PURE__ */ jsx4("style", { children: FLOPAY_KEYFRAMES });
+  return /* @__PURE__ */ jsx5("style", { children: FLOPAY_KEYFRAMES });
 }
 function toCssSize(value) {
   if (typeof value === "number") return `${value}px`;
@@ -419,8 +582,8 @@ function ExpressCheckoutReadySwap({
   children
 }) {
   if (state === "unavailable") return null;
-  return /* @__PURE__ */ jsxs2("div", { style: { position: "relative", minHeight: 44 }, children: [
-    /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsxs3("div", { style: { position: "relative", minHeight: 44 }, children: [
+    /* @__PURE__ */ jsx5(
       "div",
       {
         "data-testid": placeholderTestId,
@@ -439,7 +602,7 @@ function ExpressCheckoutReadySwap({
         }
       }
     ),
-    /* @__PURE__ */ jsx4(
+    /* @__PURE__ */ jsx5(
       "div",
       {
         style: {
@@ -454,109 +617,9 @@ function ExpressCheckoutReadySwap({
     )
   ] });
 }
-function ProcessingOverlay({ status, errorMessage }) {
-  return /* @__PURE__ */ jsx4("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__ */ jsxs2("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__ */ jsxs2("div", { style: { width: 48, height: 48, position: "relative" }, children: [
-      status === "processing" && /* @__PURE__ */ jsxs2(
-        "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__ */ jsx4("circle", { cx: "12", cy: "12", r: "10", stroke: "#e5e7eb", strokeWidth: "3" }),
-            /* @__PURE__ */ jsx4("path", { d: "M4 12a8 8 0 018-8v3a5 5 0 00-5 5H4z", fill: "#4A49FF" })
-          ]
-        }
-      ),
-      status === "success" && /* @__PURE__ */ jsx4("div", { style: { animation: "flopay-pop 0.4s cubic-bezier(0.34,1.56,0.64,1)" }, children: /* @__PURE__ */ jsxs2("svg", { width: "48", height: "48", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
-        /* @__PURE__ */ jsx4("circle", { cx: "12", cy: "12", r: "11", fill: "#22c55e" }),
-        /* @__PURE__ */ jsx4(
-          "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__ */ jsx4("div", { style: { animation: "flopay-shake 0.4s ease" }, children: /* @__PURE__ */ jsxs2("svg", { width: "48", height: "48", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
-        /* @__PURE__ */ jsx4("circle", { cx: "12", cy: "12", r: "11", fill: "#ef4444" }),
-        /* @__PURE__ */ jsx4(
-          "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__ */ jsxs2("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__ */ jsx4("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__ */ jsx4("p", { style: {
-      fontSize: 13,
-      color: "#6b7280",
-      fontWeight: 400,
-      maxWidth: 260,
-      lineHeight: 1.4,
-      margin: 0
-    }, children: errorMessage }),
-    /* @__PURE__ */ jsx4("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 = forwardRef(
   function SplitCardForm2(props, ref) {
-    return /* @__PURE__ */ jsx4(SplitCardFormInner, { ...props, innerRef: ref });
+    return /* @__PURE__ */ jsx5(SplitCardFormInner, { ...props, innerRef: ref });
   }
 );
 function PayPalButtonInner({
@@ -719,8 +782,8 @@ function PayPalButtonInner({
       setSubmitting(false);
     }
   }, [stripe, elements, sessionId, email, baseUrl, onTokenizedBody, onErrorChange, onDecline, onButtonClick, runBeforeButtonClick]);
-  return /* @__PURE__ */ jsxs2(Fragment2, { children: [
-    /* @__PURE__ */ jsx4(ExpressCheckoutReadySwap, { state: loadState, placeholderTestId: "flopay-paypal-placeholder", children: /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsxs3(Fragment2, { children: [
+    /* @__PURE__ */ jsx5(ExpressCheckoutReadySwap, { state: loadState, placeholderTestId: "flopay-paypal-placeholder", children: /* @__PURE__ */ jsx5(
       ExpressCheckoutElement,
       {
         onReady: (event) => setLoadState(resolveExpressCheckoutLoadState(event, ["paypal"])),
@@ -742,7 +805,7 @@ function PayPalButtonInner({
         }
       }
     ) }),
-    submitting && /* @__PURE__ */ jsx4(ProcessingOverlay, { status: "processing" })
+    submitting && /* @__PURE__ */ jsx5(ProcessingOverlay, { status: "processing" })
   ] });
 }
 function WalletButtonInner({
@@ -845,8 +908,8 @@ function WalletButtonInner({
     },
     [stripe, elements, sessionId, email, baseUrl, onTokenizedBody, onErrorChange, onDecline, onButtonClick, runBeforeButtonClick]
   );
-  return /* @__PURE__ */ jsxs2(Fragment2, { children: [
-    /* @__PURE__ */ jsx4(ExpressCheckoutReadySwap, { state: loadState, placeholderTestId: "flopay-wallet-placeholder", children: /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsxs3(Fragment2, { children: [
+    /* @__PURE__ */ jsx5(ExpressCheckoutReadySwap, { state: loadState, placeholderTestId: "flopay-wallet-placeholder", children: /* @__PURE__ */ jsx5(
       ExpressCheckoutElement,
       {
         onReady: (event) => setLoadState(resolveExpressCheckoutLoadState(event, ["applePay", "googlePay"])),
@@ -884,7 +947,7 @@ function WalletButtonInner({
         }
       }
     ) }),
-    submitting && /* @__PURE__ */ jsx4(ProcessingOverlay, { status: "processing" })
+    submitting && /* @__PURE__ */ jsx5(ProcessingOverlay, { status: "processing" })
   ] });
 }
 function SplitCardFormInner({
@@ -917,6 +980,7 @@ function SplitCardFormInner({
   cardButtonContent,
   cardBackButtonContent,
   cardTitleContent,
+  showSecurityFooter = true,
   onButtonClick,
   onBeforeButtonClick,
   enableAVS = false,
@@ -1118,10 +1182,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;
         }
@@ -1151,7 +1216,8 @@ function SplitCardFormInner({
               await processPaymentInternal({
                 id: result.paymentIntentId,
                 type: "card",
-                threeDSecureActionResultTokenId: result.paymentIntentId
+                threeDSecureActionResultTokenId: result.paymentIntentId,
+                originalPaymentMethodId: resolveTokenizedPaymentMethodId(tokenizedBody)
               });
             }
           } finally {
@@ -1205,11 +1271,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);
@@ -1333,19 +1399,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);
@@ -1357,7 +1424,7 @@ function SplitCardFormInner({
   );
   const isReady = flopay !== null && elements !== null;
   if (!isReady) {
-    return /* @__PURE__ */ jsx4("div", { "data-testid": "flopay-loading", "aria-busy": "true", children: "Loading payment form..." });
+    return /* @__PURE__ */ jsx5("div", { "data-testid": "flopay-loading", "aria-busy": "true", children: "Loading payment form..." });
   }
   const isButtons = layout === "buttons";
   const resolvedBorder = isButtons ? bStyles.cardInputBorder ?? "#e5e7eb" : "#A4A4FF";
@@ -1400,7 +1467,7 @@ function SplitCardFormInner({
       invalid: { color: "#ef4444" }
     }
   };
-  const cardFormBlock = /* @__PURE__ */ jsxs2("div", { style: {
+  const cardFormBlock = /* @__PURE__ */ jsxs3("div", { style: {
     backgroundColor: cardBg,
     borderRadius: "8px",
     padding: isButtons ? "0" : "1rem",
@@ -1408,7 +1475,7 @@ function SplitCardFormInner({
     ...isButtons ? { padding: bStyles.cardFormContainer?.padding ?? "0" } : {},
     ...sharedInputPlaceholderVars
   }, children: [
-    /* @__PURE__ */ jsx4("style", { children: `
+    /* @__PURE__ */ jsx5("style", { children: `
         .flopay-shared-input::placeholder {
           color: var(--flopay-input-placeholder-color);
           opacity: 1;
@@ -1417,12 +1484,12 @@ function SplitCardFormInner({
           font-weight: var(--flopay-input-font-weight);
         }
       ` }),
-    isButtons && showCardForm && /* @__PURE__ */ jsxs2("div", { style: {
+    isButtons && showCardForm && /* @__PURE__ */ jsxs3("div", { style: {
       display: "flex",
       alignItems: "center",
       padding: "0.75rem 0 0.625rem"
     }, children: [
-      /* @__PURE__ */ jsxs2(
+      /* @__PURE__ */ jsxs3(
         "button",
         {
           type: "button",
@@ -1444,7 +1511,7 @@ function SplitCardFormInner({
           },
           "aria-label": "Back to payment methods",
           children: [
-            /* @__PURE__ */ jsx4("span", { style: {
+            /* @__PURE__ */ jsx5("span", { style: {
               display: "inline-flex",
               alignItems: "center",
               justifyContent: "center",
@@ -1454,12 +1521,12 @@ function SplitCardFormInner({
               backgroundColor: "#f3f4f6",
               transition: "background-color 0.15s",
               ...bStyles.backButtonIcon
-            }, children: /* @__PURE__ */ jsx4("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx4("path", { d: "M15 18l-6-6 6-6" }) }) }),
-            /* @__PURE__ */ jsx4(BackButtonContentSlot, { content: cardBackButtonContent })
+            }, children: /* @__PURE__ */ jsx5("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx5("path", { d: "M15 18l-6-6 6-6" }) }) }),
+            /* @__PURE__ */ jsx5(BackButtonContentSlot, { content: cardBackButtonContent })
           ]
         }
       ),
-      hideTitle ? /* @__PURE__ */ jsx4("div", { style: { flex: 1 } }) : /* @__PURE__ */ jsx4("div", { style: {
+      hideTitle ? /* @__PURE__ */ jsx5("div", { style: { flex: 1 } }) : /* @__PURE__ */ jsx5("div", { style: {
         flex: 1,
         textAlign: "center",
         fontWeight: 600,
@@ -1467,18 +1534,18 @@ function SplitCardFormInner({
         color: "#262833",
         paddingRight: 80,
         ...bStyles.title
-      }, children: /* @__PURE__ */ jsx4(TitleContentSlot, { content: cardTitleContent }) })
+      }, children: /* @__PURE__ */ jsx5(TitleContentSlot, { content: cardTitleContent }) })
     ] }),
-    !isButtons && !hideTitle && /* @__PURE__ */ jsx4("div", { style: { textAlign: "center", fontWeight: 600, fontSize: "1.1rem", padding: "0.5rem 0", color: "#262833" }, children: /* @__PURE__ */ jsx4(TitleContentSlot, { content: cardTitleContent }) }),
-    /* @__PURE__ */ jsx4("div", { style: {
+    !isButtons && !hideTitle && /* @__PURE__ */ jsx5("div", { style: { textAlign: "center", fontWeight: 600, fontSize: "1.1rem", padding: "0.5rem 0", color: "#262833" }, children: /* @__PURE__ */ jsx5(TitleContentSlot, { content: cardTitleContent }) }),
+    /* @__PURE__ */ jsx5("div", { style: {
       backgroundColor: cardInputBg,
       border: `1px solid ${resolvedBorder}`,
       borderTopLeftRadius: "8px",
       borderTopRightRadius: "8px",
       padding: "10px"
-    }, children: /* @__PURE__ */ jsx4(CardNumberElement, { onReady: () => setFormReady(true), options: stripeElementStyle }) }),
-    /* @__PURE__ */ jsxs2("div", { style: { display: "flex" }, children: [
-      /* @__PURE__ */ jsx4("div", { style: {
+    }, children: /* @__PURE__ */ jsx5(CardNumberElement, { onReady: () => setFormReady(true), options: stripeElementStyle }) }),
+    /* @__PURE__ */ jsxs3("div", { style: { display: "flex" }, children: [
+      /* @__PURE__ */ jsx5("div", { style: {
         flex: 1,
         backgroundColor: cardInputBg,
         border: `1px solid ${resolvedBorder}`,
@@ -1486,23 +1553,23 @@ function SplitCardFormInner({
         borderRight: "none",
         borderBottomLeftRadius: "8px",
         padding: "10px"
-      }, children: /* @__PURE__ */ jsx4(CardExpiryElement, { options: stripeElementStyle }) }),
-      /* @__PURE__ */ jsx4("div", { style: {
+      }, children: /* @__PURE__ */ jsx5(CardExpiryElement, { options: stripeElementStyle }) }),
+      /* @__PURE__ */ jsx5("div", { style: {
         flex: 1,
         backgroundColor: cardInputBg,
         border: `1px solid ${resolvedBorder}`,
         borderTop: "none",
         borderBottomRightRadius: "8px",
         padding: "10px"
-      }, children: /* @__PURE__ */ jsx4(CardCvcElement, { options: stripeElementStyle }) })
+      }, children: /* @__PURE__ */ jsx5(CardCvcElement, { options: stripeElementStyle }) })
     ] }),
-    /* @__PURE__ */ jsx4("div", { style: {
+    /* @__PURE__ */ jsx5("div", { style: {
       backgroundColor: cardInputBg,
       border: `1px solid ${resolvedBorder}`,
       borderRadius: "8px",
       marginTop: "0.5rem",
       padding: "10px"
-    }, children: /* @__PURE__ */ jsx4(
+    }, children: /* @__PURE__ */ jsx5(
       "input",
       {
         className: "flopay-shared-input",
@@ -1522,20 +1589,20 @@ function SplitCardFormInner({
         }
       }
     ) }),
-    enableAVS && /* @__PURE__ */ jsxs2("div", { style: {
+    enableAVS && /* @__PURE__ */ jsxs3("div", { style: {
       display: "flex",
       flexDirection: avsLayoutProp === "column" ? "column" : "row",
       gap: avsLayoutProp === "column" ? "0.5rem" : "0",
       marginTop: "0.5rem"
     }, children: [
-      /* @__PURE__ */ jsx4("div", { style: {
+      /* @__PURE__ */ jsx5("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__ */ jsx4(
+      }, children: /* @__PURE__ */ jsx5(
         "select",
         {
           value: selectedCountry,
@@ -1556,21 +1623,21 @@ function SplitCardFormInner({
             cursor: "pointer",
             ...isButtons && bStyles.nameInput ? bStyles.nameInput : {}
           },
-          children: COUNTRY_OPTIONS.map((c) => /* @__PURE__ */ jsxs2("option", { value: c.code, children: [
+          children: COUNTRY_OPTIONS.map((c) => /* @__PURE__ */ jsxs3("option", { value: c.code, children: [
             c.flag,
             " ",
             c.name
           ] }, c.code))
         }
       ) }),
-      /* @__PURE__ */ jsx4("div", { style: {
+      /* @__PURE__ */ jsx5("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__ */ jsx4(
+      }, children: /* @__PURE__ */ jsx5(
         "input",
         {
           className: "flopay-shared-input",
@@ -1596,7 +1663,7 @@ function SplitCardFormInner({
         }
       ) })
     ] }),
-    displayError && /* @__PURE__ */ jsxs2("div", { role: "alert", "data-testid": "flopay-error", style: {
+    displayError && /* @__PURE__ */ jsxs3("div", { role: "alert", "data-testid": "flopay-error", style: {
       margin: "0.75rem 0",
       padding: "0.625rem 0.875rem",
       background: "#FEF2F2",
@@ -1610,10 +1677,10 @@ function SplitCardFormInner({
       gap: "0.5rem",
       ...isButtons && bStyles.errorBanner ? bStyles.errorBanner : {}
     }, children: [
-      /* @__PURE__ */ jsx4("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", style: { flexShrink: 0 }, children: /* @__PURE__ */ jsx4("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__ */ jsx5("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", style: { flexShrink: 0 }, children: /* @__PURE__ */ jsx5("path", { d: "M12 9v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z", stroke: "#DC2626", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }),
       displayError
     ] }),
-    children ?? /* @__PURE__ */ jsx4(
+    children ?? /* @__PURE__ */ jsx5(
       "button",
       {
         type: "submit",
@@ -1636,7 +1703,7 @@ function SplitCardFormInner({
         children: isSubmitting ? "PROCESSING..." : submitLabel
       }
     ),
-    !isButtons && /* @__PURE__ */ jsx4("div", { style: {
+    !isButtons && showSecurityFooter && /* @__PURE__ */ jsx5("div", { style: {
       backgroundColor: "#EFF9F0",
       borderRadius: "8px",
       padding: "0.75rem",
@@ -1653,11 +1720,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__ */ jsxs2("form", { onSubmit: handleSubmit, className, style: { position: "relative" }, children: [
-      /* @__PURE__ */ jsx4(FloPayKeyframes, {}),
-      overlayStatus && /* @__PURE__ */ jsx4(ProcessingOverlay, { status: overlayStatus, errorMessage: displayError }),
-      /* @__PURE__ */ jsxs2("div", { style: { display: "grid" }, children: [
-        /* @__PURE__ */ jsxs2("div", { style: {
+    return /* @__PURE__ */ jsxs3("form", { onSubmit: handleSubmit, className, style: { position: "relative" }, children: [
+      /* @__PURE__ */ jsx5(FloPayKeyframes, {}),
+      overlayStatus && /* @__PURE__ */ jsx5(ProcessingOverlay, { status: overlayStatus, errorMessage: displayError }),
+      /* @__PURE__ */ jsxs3("div", { style: { display: "grid" }, children: [
+        /* @__PURE__ */ jsxs3("div", { style: {
           gridArea: "1 / 1",
           display: "flex",
           flexDirection: "column",
@@ -1666,7 +1733,7 @@ function SplitCardFormInner({
           ...!isButtonsView && !buttonsAnim ? { visibility: "hidden", position: "absolute", pointerEvents: "none", width: "100%" } : {},
           ...buttonsAnim ? { animation: buttonsAnim, pointerEvents: "none" } : {}
         }, children: [
-          showPayPal && paypalStripeInstance && /* @__PURE__ */ jsx4(StripeElements, { stripe: paypalStripeInstance, options: paypalOptions, children: /* @__PURE__ */ jsx4(
+          showPayPal && paypalStripeInstance && /* @__PURE__ */ jsx5(StripeElements, { stripe: paypalStripeInstance, options: paypalOptions, children: /* @__PURE__ */ jsx5(
             PayPalButtonInner,
             {
               sessionId,
@@ -1680,7 +1747,7 @@ function SplitCardFormInner({
               runBeforeButtonClick
             }
           ) }),
-          showWallets && stripeInstance ? /* @__PURE__ */ jsx4(StripeElements, { stripe: stripeInstance, options: walletOptions, children: /* @__PURE__ */ jsx4(
+          showWallets && stripeInstance ? /* @__PURE__ */ jsx5(StripeElements, { stripe: stripeInstance, options: walletOptions, children: /* @__PURE__ */ jsx5(
             WalletButtonInner,
             {
               sessionId,
@@ -1694,8 +1761,8 @@ function SplitCardFormInner({
               onDecline,
               runBeforeButtonClick
             }
-          ) }) : showWallets ? /* @__PURE__ */ jsx4("div", { style: { height: DEFAULT_BUTTONS_LAYOUT_BUTTON_HEIGHT, borderRadius: 8, background: "#e5e7eb", animation: "flopay-pulse 1.5s ease-in-out infinite" } }) : null,
-          /* @__PURE__ */ jsx4(
+          ) }) : showWallets ? /* @__PURE__ */ jsx5("div", { style: { height: DEFAULT_BUTTONS_LAYOUT_BUTTON_HEIGHT, borderRadius: 8, background: "#e5e7eb", animation: "flopay-pulse 1.5s ease-in-out infinite" } }) : null,
+          /* @__PURE__ */ jsx5(
             "button",
             {
               type: "button",
@@ -1733,10 +1800,10 @@ function SplitCardFormInner({
               onMouseUp: (e) => {
                 e.currentTarget.style.transform = "scale(1)";
               },
-              children: /* @__PURE__ */ jsx4(CardButtonContentSlot, { content: cardButtonContent })
+              children: /* @__PURE__ */ jsx5(CardButtonContentSlot, { content: cardButtonContent })
             }
           ),
-          displayError && viewState === "buttons" && /* @__PURE__ */ jsxs2("div", { role: "alert", "data-testid": "flopay-error", style: {
+          displayError && viewState === "buttons" && /* @__PURE__ */ jsxs3("div", { role: "alert", "data-testid": "flopay-error", style: {
             margin: "0.25rem 0",
             padding: "0.625rem 0.875rem",
             background: "#FEF2F2",
@@ -1750,11 +1817,11 @@ function SplitCardFormInner({
             gap: "0.5rem",
             ...bStyles.errorBanner ? bStyles.errorBanner : {}
           }, children: [
-            /* @__PURE__ */ jsx4("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", style: { flexShrink: 0 }, children: /* @__PURE__ */ jsx4("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__ */ jsx5("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", style: { flexShrink: 0 }, children: /* @__PURE__ */ jsx5("path", { d: "M12 9v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z", stroke: "#DC2626", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }),
             displayError
           ] })
         ] }),
-        isCardView && /* @__PURE__ */ jsx4("div", { style: {
+        isCardView && /* @__PURE__ */ jsx5("div", { style: {
           gridArea: "1 / 1",
           ...cardAnim ? { animation: cardAnim } : {},
           ...viewState === "collapsing" ? { pointerEvents: "none" } : {}
@@ -1762,10 +1829,10 @@ function SplitCardFormInner({
       ] })
     ] });
   }
-  return /* @__PURE__ */ jsxs2("form", { onSubmit: handleSubmit, className, style: { position: "relative" }, children: [
-    /* @__PURE__ */ jsx4(FloPayKeyframes, {}),
-    overlayStatus && /* @__PURE__ */ jsx4(ProcessingOverlay, { status: overlayStatus, errorMessage: displayError }),
-    showWallets && stripeInstance && /* @__PURE__ */ jsx4(StripeElements, { stripe: stripeInstance, options: walletOptions, children: /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsxs3("form", { onSubmit: handleSubmit, className, style: { position: "relative" }, children: [
+    /* @__PURE__ */ jsx5(FloPayKeyframes, {}),
+    overlayStatus && /* @__PURE__ */ jsx5(ProcessingOverlay, { status: overlayStatus, errorMessage: displayError }),
+    showWallets && stripeInstance && /* @__PURE__ */ jsx5(StripeElements, { stripe: stripeInstance, options: walletOptions, children: /* @__PURE__ */ jsx5(
       WalletButtonInner,
       {
         sessionId,
@@ -1778,7 +1845,7 @@ function SplitCardFormInner({
         onDecline
       }
     ) }),
-    showPayPal && paypalStripeInstance && /* @__PURE__ */ jsx4(StripeElements, { stripe: paypalStripeInstance, options: paypalOptions, children: /* @__PURE__ */ jsx4(
+    showPayPal && paypalStripeInstance && /* @__PURE__ */ jsx5(StripeElements, { stripe: paypalStripeInstance, options: paypalOptions, children: /* @__PURE__ */ jsx5(
       PayPalButtonInner,
       {
         sessionId,
@@ -1790,7 +1857,7 @@ function SplitCardFormInner({
         onDecline
       }
     ) }),
-    (showWallets && stripeInstance || showPayPal && paypalStripeInstance) && /* @__PURE__ */ jsxs2("div", { style: {
+    (showWallets && stripeInstance || showPayPal && paypalStripeInstance) && /* @__PURE__ */ jsxs3("div", { style: {
       display: "flex",
       alignItems: "center",
       gap: "0.75rem",
@@ -1798,17 +1865,503 @@ function SplitCardFormInner({
       color: "#999",
       fontSize: "0.85rem"
     }, children: [
-      /* @__PURE__ */ jsx4("div", { style: { flex: 1, height: 1, backgroundColor: "#ddd" } }),
-      /* @__PURE__ */ jsx4("span", { children: "or pay with card" }),
-      /* @__PURE__ */ jsx4("div", { style: { flex: 1, height: 1, backgroundColor: "#ddd" } })
+      /* @__PURE__ */ jsx5("div", { style: { flex: 1, height: 1, backgroundColor: "#ddd" } }),
+      /* @__PURE__ */ jsx5("span", { children: "or pay with card" }),
+      /* @__PURE__ */ jsx5("div", { style: { flex: 1, height: 1, backgroundColor: "#ddd" } })
     ] }),
     cardFormBlock
   ] });
 }
 
+// src/saved-payment-flow.ts
+import { loadFloPay, PaymentAPI } from "@flopay/js";
+import { FloPayError as FloPayError3 } from "@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 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 FloPayError3(
+        "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 FloPayError3(
+        "Your card requires authentication. Please enter your payment details below.",
+        "api_error",
+        { code: "authentication_required" }
+      ),
+      { checkoutMethod: "card" }
+    );
+  }
+  throw new FloPayError3(
+    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 FloPayError3("Customer email is required to create a payment intent.", "validation_error", {
+        param: "email"
+      }),
+      { checkoutMethod: "card" }
+    );
+  }
+  const api = new 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 FloPayError3(
+        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 FloPayError3("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 FloPayError3(
+        `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 FloPayError3("Payment provider is not available.", "api_error");
+  }
+  if (redirectResult.type === "3ds_required") {
+    if (!attempt3DS || !redirectResult.threeDSecureToken) {
+      throw Object.assign(
+        new FloPayError3(
+          "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 FloPayError3(
+            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 FloPayError3(
+            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 FloPayError3(
+            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 FloPayError3("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 FloPayError3("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 FloPayError3(
+          error.message ?? "PayPal authorization failed.",
+          "api_error",
+          { code: error.code }
+        ),
+        { checkoutMethod: "paypal" }
+      );
+    }
+    return { status: "succeeded" };
+  }
+  throw new FloPayError3("Unsupported payment redirect state.", "api_error");
+}
+function normalizeSavedPaymentError(err) {
+  if (err instanceof FloPayError3) {
+    return err;
+  }
+  return new FloPayError3(
+    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 FloPayError3(
+      "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([
+    loadFloPay(publishableKey, {
+      billingApiUrl,
+      locale
+    }),
+    needsSeparatePaypal ? 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
-import { Fragment as Fragment3, jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx6, jsxs as jsxs4 } from "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(
@@ -1839,12 +2392,14 @@ function FloPayCheckout({
   cardButtonContent,
   cardBackButtonContent,
   cardTitleContent,
+  showSecurityFooter = true,
   onButtonClick,
   onBeforeButtonClick,
   enableAVS,
   avsLayout,
   submitLabel,
   className,
+  initialErrorMessage = null,
   children,
   checkoutMode: checkoutModeProp,
   confirmLabel,
@@ -1861,11 +2416,15 @@ function FloPayCheckout({
   const paypalFlopayRef = useRef3(null);
   const [session, setSession] = useState3(null);
   const [resolvedSessionId, setResolvedSessionId] = useState3(sessionIdProp ?? "");
+  const activeSessionId = sessionIdProp ?? resolvedSessionId;
+  const initSessionDependency = createSessionParams ? "" : activeSessionId;
   const [isLoading, setIsLoading] = useState3(true);
   const [loadError, setLoadError] = useState3(null);
   const [currentMode, setCurrentMode] = useState3("full");
   const [confirmProcessing, setConfirmProcessing] = useState3(false);
-  const [modeError, setModeError] = useState3(null);
+  const [modeError, setModeError] = useState3(initialErrorMessage);
+  const [modeOverlayStatus, setModeOverlayStatus] = useState3(null);
+  const [modeOverlayError, setModeOverlayError] = useState3(null);
   const [createSessionPatch, setCreateSessionPatch] = useState3(void 0);
   const [createSessionPatchBaseHash, setCreateSessionPatchBaseHash] = useState3("");
   const [cardBootstrapPending, setCardBootstrapPending] = useState3(false);
@@ -1894,125 +2453,84 @@ function FloPayCheckout({
     () => createSessionPatchBaseHash === baseCreateSessionHash ? createSessionPatch : void 0,
     [createSessionPatch, createSessionPatchBaseHash, baseCreateSessionHash]
   );
-  const effectiveCreateSession = useMemo3(
+  const effectiveCreateSessionBase = useMemo3(
     () => createSessionParams ? mergeInlineSessionPatch(createSessionParams, activeCreateSessionPatch) : void 0,
     [createSessionParams, activeCreateSessionPatch]
   );
+  const effectiveCreateSessionMode = checkoutModeProp ?? effectiveCreateSessionBase?.checkoutMode ?? "full";
+  const effectiveCreateSession = useMemo3(
+    () => effectiveCreateSessionBase ? {
+      ...effectiveCreateSessionBase,
+      checkoutMode: effectiveCreateSessionMode
+    } : void 0,
+    [effectiveCreateSessionBase, effectiveCreateSessionMode]
+  );
   useEffect4(() => {
     setCreateSessionPatch(void 0);
     setCreateSessionPatchBaseHash(baseCreateSessionHash);
   }, [baseCreateSessionHash]);
+  useEffect4(() => {
+    setModeError(initialErrorMessage);
+  }, [initialErrorMessage]);
   const emitDecline = useCallback2(
     (method, input, overrides) => {
       onDeclineRef.current?.(buildDeclineEvent(method, input, overrides));
     },
     []
   );
-  const processPaymentForMode = useCallback2(
-    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 FloPayError3(
-        json?.message ?? "Payment failed. Please try again.",
-        "api_error",
-        {
-          code: json?.code ?? json?.gatewayErrorCode,
-          declineCode: json?.declineCode ?? json?.gatewayDeclineReason
-        }
-      );
-    },
-    [resolvedBillingUrl, resolvedSessionId]
-  );
-  const handleRedirectResult = useCallback2(
-    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 = useCallback2(
+    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;
+        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
+        });
+        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);
       }
-      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"
-        });
-        if (error) {
-          setModeError(error.message ?? "PayPal authorization failed.");
-          emitDecline("paypal", error.message ?? "PayPal authorization failed.", {
-            code: error.code
-          });
-          return false;
-        }
-        onCompleteRef.current?.({ status: "succeeded" });
-        return true;
-      }
-      return false;
     },
-    [resolvedBillingUrl, resolvedSessionId, emitDecline]
+    [
+      emitDecline,
+      normalizeSavedPaymentError,
+      resolvedBillingUrl
+    ]
   );
   const inflightRef = useRef3(/* @__PURE__ */ new Map());
   const initializedHashRef = useRef3(null);
@@ -2044,8 +2562,14 @@ function FloPayCheckout({
   useEffect4(() => {
     setResolvedSessionId(sessionIdProp ?? "");
   }, [sessionIdProp]);
+  useEffect4(() => {
+    autoCheckoutAttempted.current = false;
+    setModeError(initialErrorMessage);
+    setModeOverlayError(null);
+    setModeOverlayStatus(null);
+  }, [createSessionHash, initialErrorMessage, sessionIdProp]);
   async function resolveInlineSession(params, cacheKey) {
-    const api = new PaymentAPI(resolvedBillingUrl);
+    const api = new PaymentAPI2(resolvedBillingUrl);
     let sid = typeof window !== "undefined" ? window.sessionStorage.getItem(cacheKey) : null;
     let realResult = null;
     if (sid) {
@@ -2074,7 +2598,7 @@ function FloPayCheckout({
     async (patch) => {
       const baseParams = createSessionParamsRef.current;
       if (!baseParams) {
-        throw new FloPayError3("createSession is required to bootstrap checkout.", "validation_error");
+        throw new FloPayError4("createSession is required to bootstrap checkout.", "validation_error");
       }
       const mergedParams = mergeInlineSessionPatch(baseParams, patch);
       const cacheKey = hashCreateParams(mergedParams);
@@ -2103,43 +2627,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 FloPayError3(
-            "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([
-          loadFloPay(publishableKey, {
-            billingApiUrl: resolvedBillingUrl,
-            locale
-          }),
-          needsSeparatePaypal ? 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) {
@@ -2178,17 +2682,57 @@ function FloPayCheckout({
     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 FloPayError3 ? err : new FloPayError3(err instanceof Error ? err.message : "Failed to create session", "api_error");
+          const errorCode = err instanceof FloPayError4 ? 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 FloPayError4 ? err : new FloPayError4(err instanceof Error ? err.message : "Failed to create session", "api_error");
           setLoadError(floPayErr);
         }
       })();
@@ -2199,14 +2743,14 @@ function FloPayCheckout({
     setIsLoading(true);
     async function init() {
       try {
-        const api = new PaymentAPI(resolvedBillingUrl);
-        const result = await api.getUnifiedCheckoutSession(resolvedSessionId);
+        const api = new PaymentAPI2(resolvedBillingUrl);
+        const result = await api.getUnifiedCheckoutSession(activeSessionId);
         if (cancelled) return;
         setUnified(result);
         const sess = result.data.session ?? null;
         setSession(sess);
         if (!sess) {
-          throw new FloPayError3("No session data returned", "api_error");
+          throw new FloPayError4("No session data returned", "api_error");
         }
         if (sess.status === "complete") {
           setIsLoading(false);
@@ -2220,22 +2764,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;
@@ -2245,81 +2787,55 @@ function FloPayCheckout({
         if (!cancelled) setIsLoading(false);
       } catch (err) {
         if (cancelled) return;
-        const floPayErr = err instanceof FloPayError3 ? err : new FloPayError3(err instanceof Error ? err.message : "Failed to initialize checkout", "api_error");
+        const floPayErr = err instanceof FloPayError4 ? err : new FloPayError4(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 FloPayError3(
-          "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([
-        loadFloPay(publishableKey, {
-          billingApiUrl: resolvedBillingUrl,
-          locale
-        }),
-        needsSeparatePaypal ? 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]);
+  }, [
+    bootstrapInlineSession,
+    checkoutModeProp,
+    createSessionHash,
+    effectiveCreateSessionMode,
+    initSessionDependency,
+    runSavedPaymentFlow
+  ]);
   const handleConfirmCheckout = useCallback2(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 FloPayError3 ? err : new FloPayError3(
-        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]);
+  }, [activeSessionId, confirmProcessing, runSavedPaymentFlow, session]);
   const providerOptions = useMemo3(() => {
     if (!unified || !session) return void 0;
     const opts = {
@@ -2337,7 +2853,7 @@ function FloPayCheckout({
     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 = useMemo3(
     () => ({
@@ -2361,37 +2877,55 @@ function FloPayCheckout({
     ]
   );
   const shouldShowInterimButtons = Boolean(createSessionParams) && layout === "buttons" && (!flopay || !providerOptions);
+  const modeOverlay = modeOverlayStatus ? /* @__PURE__ */ jsx6(
+    ProcessingOverlay,
+    {
+      status: modeOverlayStatus,
+      errorMessage: modeOverlayError
+    }
+  ) : null;
   if (isLoading) {
-    if (loadingNode) return /* @__PURE__ */ jsx5(Fragment3, { children: loadingNode });
+    if (loadingNode) {
+      return /* @__PURE__ */ jsxs4(Fragment3, { children: [
+        loadingNode,
+        modeOverlay
+      ] });
+    }
     if (layout === "buttons") {
-      const skeletonBar = (h) => /* @__PURE__ */ jsx5("div", { style: {
+      const skeletonBar = (h) => /* @__PURE__ */ jsx6("div", { style: {
         height: h,
         borderRadius: 8,
         background: "#e5e7eb",
         animation: "flopay-loading-pulse 1.5s ease-in-out infinite"
       } });
-      return /* @__PURE__ */ jsxs3("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__ */ jsx5("style", { children: `@keyframes flopay-loading-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }` })
+      return /* @__PURE__ */ jsxs4(Fragment3, { children: [
+        /* @__PURE__ */ jsxs4("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__ */ jsx6("style", { children: `@keyframes flopay-loading-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }` })
+        ] }),
+        modeOverlay
       ] });
     }
-    return /* @__PURE__ */ jsxs3("div", { style: { display: "flex", justifyContent: "center", padding: 32 }, children: [
-      /* @__PURE__ */ jsx5("div", { style: {
-        width: 24,
-        height: 24,
-        border: "2px solid #e5e7eb",
-        borderTopColor: "#6b7280",
-        borderRadius: "50%",
-        animation: "spin 0.6s linear infinite"
-      } }),
-      /* @__PURE__ */ jsx5("style", { children: `@keyframes spin { to { transform: rotate(360deg); } }` })
+    return /* @__PURE__ */ jsxs4(Fragment3, { children: [
+      /* @__PURE__ */ jsxs4("div", { style: { display: "flex", justifyContent: "center", padding: 32 }, children: [
+        /* @__PURE__ */ jsx6("div", { style: {
+          width: 24,
+          height: 24,
+          border: "2px solid #e5e7eb",
+          borderTopColor: "#6b7280",
+          borderRadius: "50%",
+          animation: "spin 0.6s linear infinite"
+        } }),
+        /* @__PURE__ */ jsx6("style", { children: `@keyframes spin { to { transform: rotate(360deg); } }` })
+      ] }),
+      modeOverlay
     ] });
   }
   if (loadError) {
-    if (errorNode) return /* @__PURE__ */ jsx5(Fragment3, { children: errorNode(loadError) });
-    return /* @__PURE__ */ jsx5(
+    if (errorNode) return /* @__PURE__ */ jsx6(Fragment3, { children: errorNode(loadError) });
+    return /* @__PURE__ */ jsx6(
       "div",
       {
         style: {
@@ -2405,90 +2939,100 @@ function FloPayCheckout({
     );
   }
   if (shouldShowInterimButtons) {
-    return /* @__PURE__ */ jsx5(CheckoutContext.Provider, { value: checkoutValue, children: /* @__PURE__ */ jsx5(
-      InterimButtonsView,
-      {
-        onButtonClick,
-        showPayPal,
-        showApplePay,
-        showGooglePay,
-        buttonsTheme,
-        buttonsStyles,
-        cardButtonContent,
-        cardBackButtonContent,
-        cardTitleContent
-      }
-    ) });
+    return /* @__PURE__ */ jsxs4(Fragment3, { children: [
+      /* @__PURE__ */ jsx6(CheckoutContext.Provider, { value: checkoutValue, children: /* @__PURE__ */ jsx6(
+        InterimButtonsView,
+        {
+          onButtonClick,
+          showPayPal,
+          showApplePay,
+          showGooglePay,
+          buttonsTheme,
+          buttonsStyles,
+          cardButtonContent,
+          cardBackButtonContent,
+          cardTitleContent
+        }
+      ) }),
+      modeOverlay
+    ] });
+  }
+  if (!flopay || !providerOptions) {
+    return /* @__PURE__ */ jsx6(Fragment3, { children: modeOverlay });
   }
-  if (!flopay || !providerOptions) return /* @__PURE__ */ jsx5(Fragment3, {});
   if (currentMode === "confirm") {
-    return /* @__PURE__ */ jsx5(CheckoutContext.Provider, { value: checkoutValue, children: /* @__PURE__ */ jsx5(FloPayProvider, { flopay, paypalFlopay, options: providerOptions, children: /* @__PURE__ */ jsxs3("div", { className, children: [
-      modeError && /* @__PURE__ */ jsx5(
+    return /* @__PURE__ */ jsxs4(Fragment3, { children: [
+      /* @__PURE__ */ jsx6(CheckoutContext.Provider, { value: checkoutValue, children: /* @__PURE__ */ jsx6(FloPayProvider, { flopay, paypalFlopay, options: providerOptions, children: /* @__PURE__ */ jsxs4("div", { className, children: [
+        modeError && /* @__PURE__ */ jsx6(
+          "div",
+          {
+            style: {
+              color: "#dc2626",
+              fontSize: "0.875rem",
+              marginBottom: "0.75rem",
+              textAlign: "center"
+            },
+            children: modeError
+          }
+        ),
+        renderConfirmButton ? renderConfirmButton({
+          onConfirm: handleConfirmCheckout,
+          isProcessing: confirmProcessing
+        }) : /* @__PURE__ */ jsx6(
+          "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__ */ jsxs4(Fragment3, { children: [
+    /* @__PURE__ */ jsx6(CheckoutContext.Provider, { value: checkoutValue, children: /* @__PURE__ */ jsx6(FloPayProvider, { flopay, paypalFlopay, options: providerOptions, children: children ? /* @__PURE__ */ jsxs4(Fragment3, { children: [
+      modeError && /* @__PURE__ */ jsx6(
         "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__ */ jsx5(
-        "button",
+      /* @__PURE__ */ jsx6(
+        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__ */ jsx5(CheckoutContext.Provider, { value: checkoutValue, children: /* @__PURE__ */ jsxs3(FloPayProvider, { flopay, paypalFlopay, options: providerOptions, children: [
-    modeError && /* @__PURE__ */ jsx5(
-      "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__ */ jsx5(
-      SessionInjector,
-      {
-        sessionId: resolvedSessionId,
-        billingApiUrl: resolvedBillingUrl,
-        session,
-        children
-      }
-    ) : /* @__PURE__ */ jsx5(
+    ] }) : /* @__PURE__ */ jsx6(
       SplitCardForm,
       {
-        sessionId: resolvedSessionId,
+        sessionId: activeSessionId,
         email: session?.customer?.email,
         userId: session?.customer?.id,
         firstName: session?.customer?.firstName,
@@ -2498,6 +3042,8 @@ function FloPayCheckout({
         onComplete,
         onError,
         onDecline,
+        error: modeError,
+        onErrorChange: setModeError,
         onFullNameChange,
         showPayPal,
         showApplePay,
@@ -2508,6 +3054,7 @@ function FloPayCheckout({
         cardButtonContent,
         cardBackButtonContent,
         cardTitleContent,
+        showSecurityFooter,
         onButtonClick,
         onBeforeButtonClick,
         enableAVS,
@@ -2518,8 +3065,9 @@ function FloPayCheckout({
         submitLabel,
         className
       }
-    )
-  ] }) });
+    ) }) }),
+    modeOverlay
+  ] });
 }
 function SessionInjector({
   sessionId,
@@ -2527,8 +3075,8 @@ function SessionInjector({
   session,
   children
 }) {
-  return /* @__PURE__ */ jsx5(Fragment3, { children: React5.Children.map(children, (child) => {
-    if (!React5.isValidElement(child)) return child;
+  return /* @__PURE__ */ jsx6(Fragment3, { children: React6.Children.map(children, (child) => {
+    if (!React6.isValidElement(child)) return child;
     const existing = child.props;
     const injected = {};
     if (!existing.sessionId) injected.sessionId = sessionId;
@@ -2542,7 +3090,7 @@ function SessionInjector({
         injected.lastName = session.customer.lastName;
     }
     if (Object.keys(injected).length === 0) return child;
-    return React5.cloneElement(child, injected);
+    return React6.cloneElement(child, injected);
   }) });
 }
 function InterimButtonsView({
@@ -2581,7 +3129,7 @@ function InterimButtonsView({
       title: { ...base.title, ...stylesOverride.title }
     };
   }, [buttonsTheme, stylesOverride]);
-  const skeleton = (h) => /* @__PURE__ */ jsx5("div", { style: {
+  const skeleton = (h) => /* @__PURE__ */ jsx6("div", { style: {
     height: h,
     borderRadius: 8,
     background: "#e5e7eb",
@@ -2593,15 +3141,15 @@ function InterimButtonsView({
     const inputBg = bStyles.cardInputBackground ?? "white";
     const hideBackButtonLabel = isEmptySlotContent(cardBackButtonContent);
     const hideTitle = isEmptySlotContent(cardTitleContent);
-    return /* @__PURE__ */ jsxs3("div", { style: {
+    return /* @__PURE__ */ jsxs4("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__ */ jsxs3("div", { style: { display: "flex", alignItems: "center", padding: "0.75rem 0 0.625rem" }, children: [
-        /* @__PURE__ */ jsxs3(
+      /* @__PURE__ */ jsxs4("div", { style: { display: "flex", alignItems: "center", padding: "0.75rem 0 0.625rem" }, children: [
+        /* @__PURE__ */ jsxs4(
           "button",
           {
             type: "button",
@@ -2628,7 +3176,7 @@ function InterimButtonsView({
               ...bStyles.backButton
             },
             children: [
-              /* @__PURE__ */ jsx5("span", { style: {
+              /* @__PURE__ */ jsx6("span", { style: {
                 display: "inline-flex",
                 alignItems: "center",
                 justifyContent: "center",
@@ -2637,12 +3185,12 @@ function InterimButtonsView({
                 borderRadius: "50%",
                 backgroundColor: "#f3f4f6",
                 ...bStyles.backButtonIcon
-              }, children: /* @__PURE__ */ jsx5("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx5("path", { d: "M15 18l-6-6 6-6" }) }) }),
-              /* @__PURE__ */ jsx5(BackButtonContentSlot, { content: cardBackButtonContent })
+              }, children: /* @__PURE__ */ jsx6("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx6("path", { d: "M15 18l-6-6 6-6" }) }) }),
+              /* @__PURE__ */ jsx6(BackButtonContentSlot, { content: cardBackButtonContent })
             ]
           }
         ),
-        hideTitle ? /* @__PURE__ */ jsx5("div", { style: { flex: 1 } }) : /* @__PURE__ */ jsx5("div", { style: {
+        hideTitle ? /* @__PURE__ */ jsx6("div", { style: { flex: 1 } }) : /* @__PURE__ */ jsx6("div", { style: {
           flex: 1,
           textAlign: "center",
           fontWeight: 600,
@@ -2650,15 +3198,15 @@ function InterimButtonsView({
           color: "#262833",
           paddingRight: 80,
           ...bStyles.title
-        }, children: /* @__PURE__ */ jsx5(TitleContentSlot, { content: cardTitleContent }) })
+        }, children: /* @__PURE__ */ jsx6(TitleContentSlot, { content: cardTitleContent }) })
       ] }),
-      /* @__PURE__ */ jsx5("div", { style: { backgroundColor: inputBg, border: `1px solid ${inputBorder}`, borderTopLeftRadius: 8, borderTopRightRadius: 8, padding: 12, height: 45 }, children: /* @__PURE__ */ jsx5("div", { style: { width: "60%", height: 14, borderRadius: 4, background: "#e5e7eb", animation: "flopay-interim-pulse 1.5s ease-in-out infinite" } }) }),
-      /* @__PURE__ */ jsxs3("div", { style: { display: "flex" }, children: [
-        /* @__PURE__ */ jsx5("div", { style: { flex: 1, backgroundColor: inputBg, border: `1px solid ${inputBorder}`, borderTop: "none", borderRight: "none", borderBottomLeftRadius: 8, padding: 12, height: 45 }, children: /* @__PURE__ */ jsx5("div", { style: { width: "50%", height: 14, borderRadius: 4, background: "#e5e7eb", animation: "flopay-interim-pulse 1.5s ease-in-out infinite" } }) }),
-        /* @__PURE__ */ jsx5("div", { style: { flex: 1, backgroundColor: inputBg, border: `1px solid ${inputBorder}`, borderTop: "none", borderBottomRightRadius: 8, padding: 12, height: 45 }, children: /* @__PURE__ */ jsx5("div", { style: { width: "40%", height: 14, borderRadius: 4, background: "#e5e7eb", animation: "flopay-interim-pulse 1.5s ease-in-out infinite" } }) })
+      /* @__PURE__ */ jsx6("div", { style: { backgroundColor: inputBg, border: `1px solid ${inputBorder}`, borderTopLeftRadius: 8, borderTopRightRadius: 8, padding: 12, height: 45 }, children: /* @__PURE__ */ jsx6("div", { style: { width: "60%", height: 14, borderRadius: 4, background: "#e5e7eb", animation: "flopay-interim-pulse 1.5s ease-in-out infinite" } }) }),
+      /* @__PURE__ */ jsxs4("div", { style: { display: "flex" }, children: [
+        /* @__PURE__ */ jsx6("div", { style: { flex: 1, backgroundColor: inputBg, border: `1px solid ${inputBorder}`, borderTop: "none", borderRight: "none", borderBottomLeftRadius: 8, padding: 12, height: 45 }, children: /* @__PURE__ */ jsx6("div", { style: { width: "50%", height: 14, borderRadius: 4, background: "#e5e7eb", animation: "flopay-interim-pulse 1.5s ease-in-out infinite" } }) }),
+        /* @__PURE__ */ jsx6("div", { style: { flex: 1, backgroundColor: inputBg, border: `1px solid ${inputBorder}`, borderTop: "none", borderBottomRightRadius: 8, padding: 12, height: 45 }, children: /* @__PURE__ */ jsx6("div", { style: { width: "40%", height: 14, borderRadius: 4, background: "#e5e7eb", animation: "flopay-interim-pulse 1.5s ease-in-out infinite" } }) })
       ] }),
-      /* @__PURE__ */ jsx5("div", { style: { backgroundColor: inputBg, border: `1px solid ${inputBorder}`, borderRadius: 8, marginTop: 8, padding: 12, height: 45 }, children: /* @__PURE__ */ jsx5("div", { style: { width: "45%", height: 14, borderRadius: 4, background: "#e5e7eb", animation: "flopay-interim-pulse 1.5s ease-in-out infinite" } }) }),
-      /* @__PURE__ */ jsx5("div", { style: {
+      /* @__PURE__ */ jsx6("div", { style: { backgroundColor: inputBg, border: `1px solid ${inputBorder}`, borderRadius: 8, marginTop: 8, padding: 12, height: 45 }, children: /* @__PURE__ */ jsx6("div", { style: { width: "45%", height: 14, borderRadius: 4, background: "#e5e7eb", animation: "flopay-interim-pulse 1.5s ease-in-out infinite" } }) }),
+      /* @__PURE__ */ jsx6("div", { style: {
         height: 50,
         borderRadius: 8,
         marginTop: 16,
@@ -2667,7 +3215,7 @@ function InterimButtonsView({
         ...bStyles.submitButton,
         opacity: 0.5
       } }),
-      /* @__PURE__ */ jsx5("style", { children: `
+      /* @__PURE__ */ jsx6("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); }
@@ -2677,10 +3225,10 @@ function InterimButtonsView({
         ` })
     ] });
   }
-  return /* @__PURE__ */ jsxs3("div", { style: { display: "flex", flexDirection: "column", gap: "0.5rem" }, children: [
+  return /* @__PURE__ */ jsxs4("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__ */ jsx5(
+    /* @__PURE__ */ jsx6(
       "button",
       {
         type: "button",
@@ -2720,10 +3268,10 @@ function InterimButtonsView({
         onMouseUp: (e) => {
           e.currentTarget.style.transform = "scale(1)";
         },
-        children: /* @__PURE__ */ jsx5(CardButtonContentSlot, { content: cardButtonContent })
+        children: /* @__PURE__ */ jsx6(CardButtonContentSlot, { content: cardButtonContent })
       }
     ),
-    errorMessage && /* @__PURE__ */ jsxs3("div", { style: {
+    errorMessage && /* @__PURE__ */ jsxs4("div", { style: {
       margin: "0.25rem 0",
       padding: "0.625rem 0.875rem",
       background: "#FEF2F2",
@@ -2737,21 +3285,21 @@ function InterimButtonsView({
       gap: "0.5rem",
       ...bStyles.errorBanner
     }, children: [
-      /* @__PURE__ */ jsx5("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", style: { flexShrink: 0 }, children: /* @__PURE__ */ jsx5("path", { d: "M12 9v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z", stroke: "#DC2626", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }),
+      /* @__PURE__ */ jsx6("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", style: { flexShrink: 0 }, children: /* @__PURE__ */ jsx6("path", { d: "M12 9v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z", stroke: "#DC2626", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }),
       errorMessage
     ] }),
-    /* @__PURE__ */ jsx5("style", { children: `@keyframes flopay-interim-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }` })
+    /* @__PURE__ */ jsx6("style", { children: `@keyframes flopay-interim-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }` })
   ] });
 }
 
 // src/checkout-form.tsx
-import { FloPayError as FloPayError4 } from "@flopay/shared";
+import { FloPayError as FloPayError5 } from "@flopay/shared";
 import { forwardRef as forwardRef2, useCallback as useCallback3, useEffect as useEffect5, useImperativeHandle as useImperativeHandle2, useState as useState4 } from "react";
-import { Fragment as Fragment4, jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
 var WALLET_RESUME_KEY2 = "flopay_wallet_resume";
 var CheckoutForm = forwardRef2(
   function CheckoutForm2(props, ref) {
-    return /* @__PURE__ */ jsx6(CheckoutFormInner, { ...props, innerRef: ref });
+    return /* @__PURE__ */ jsx7(CheckoutFormInner, { ...props, innerRef: ref });
   }
 );
 function CheckoutFormInner({
@@ -2826,7 +3374,8 @@ function CheckoutFormInner({
         if (response.ok) {
           onComplete?.({
             status: "succeeded",
-            paymentIntentId: tokenizedBody.threeDSecureActionResultTokenId
+            paymentIntentId: tokenizedBody.threeDSecureActionResultTokenId,
+            paymentMethodId: resolveTokenizedPaymentMethodId(tokenizedBody)
           });
           return;
         }
@@ -2853,7 +3402,8 @@ function CheckoutFormInner({
               await processPaymentInternal({
                 id: result.paymentIntentId,
                 type: "card",
-                threeDSecureActionResultTokenId: result.paymentIntentId
+                threeDSecureActionResultTokenId: result.paymentIntentId,
+                originalPaymentMethodId: resolveTokenizedPaymentMethodId(tokenizedBody)
               });
             }
           } finally {
@@ -2982,7 +3532,7 @@ function CheckoutFormInner({
           return;
         }
         if (!sessionId || !email) {
-          throw new FloPayError4("Missing sessionId or email", "validation_error");
+          throw new FloPayError5("Missing sessionId or email", "validation_error");
         }
         const intentResponse = await fetch(`${baseUrl}/v1/checkouts/payments/intents`, {
           method: "POST",
@@ -2994,10 +3544,10 @@ function CheckoutFormInner({
             isPaypal: false
           })
         });
-        if (!intentResponse.ok) throw new FloPayError4("Failed to create payment intent", "api_error");
+        if (!intentResponse.ok) throw new FloPayError5("Failed to create payment intent", "api_error");
         const intentJson = await intentResponse.json();
         const intentClientSecret = intentJson.data?.id;
-        if (!intentClientSecret) throw new FloPayError4("No client_secret in payment intent response", "api_error");
+        if (!intentClientSecret) throw new FloPayError5("No client_secret in payment intent response", "api_error");
         const confirmResult = await flopay.confirmCardPayment({
           clientSecret: intentClientSecret,
           paymentMethodId: pmResult.paymentMethodId
@@ -3011,7 +3561,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");
@@ -3025,8 +3576,8 @@ function CheckoutFormInner({
     [flopay, elements, isSubmitting, sessionId, email, baseUrl, isSelfContained, dispatchTokenizedBody, onError, updateError, emitDecline]
   );
   const isReady = flopay !== null && elements !== null;
-  return /* @__PURE__ */ jsxs4("form", { onSubmit: handleSubmit, className, style: { position: "relative" }, children: [
-    (is3DSActive || isSubmitting) && /* @__PURE__ */ jsx6("div", { "data-testid": "flopay-overlay", style: {
+  return /* @__PURE__ */ jsxs5("form", { onSubmit: handleSubmit, className, style: { position: "relative" }, children: [
+    (is3DSActive || isSubmitting) && /* @__PURE__ */ jsx7("div", { "data-testid": "flopay-overlay", style: {
       position: "absolute",
       inset: 0,
       background: "rgba(255,255,255,0.7)",
@@ -3035,12 +3586,12 @@ function CheckoutFormInner({
       justifyContent: "center",
       zIndex: 10
     }, children: is3DSActive ? "Verifying payment..." : "Processing..." }),
-    !isReady && /* @__PURE__ */ jsx6("div", { "data-testid": "flopay-loading", "aria-busy": "true", children: "Loading payment form..." }),
-    isReady && /* @__PURE__ */ jsxs4(Fragment4, { children: [
-      /* @__PURE__ */ jsx6(PaymentElement, { options: { layout } }),
-      showAddress && /* @__PURE__ */ jsx6(AddressElement, { options: { mode: showAddress === true ? "billing" : showAddress } }),
-      displayError && /* @__PURE__ */ jsx6("div", { role: "alert", "data-testid": "flopay-error", style: { color: "red", margin: "0.75rem 0" }, children: displayError }),
-      children ?? /* @__PURE__ */ jsx6(
+    !isReady && /* @__PURE__ */ jsx7("div", { "data-testid": "flopay-loading", "aria-busy": "true", children: "Loading payment form..." }),
+    isReady && /* @__PURE__ */ jsxs5(Fragment4, { children: [
+      /* @__PURE__ */ jsx7(PaymentElement, { options: { layout } }),
+      showAddress && /* @__PURE__ */ jsx7(AddressElement, { options: { mode: showAddress === true ? "billing" : showAddress } }),
+      displayError && /* @__PURE__ */ jsx7("div", { role: "alert", "data-testid": "flopay-error", style: { color: "red", margin: "0.75rem 0" }, children: displayError }),
+      children ?? /* @__PURE__ */ jsx7(
         "button",
         {
           type: "submit",
@@ -3054,9 +3605,9 @@ function CheckoutFormInner({
 }
 
 // src/paypal-button.tsx
-import { FloPayError as FloPayError5 } from "@flopay/shared";
+import { FloPayError as FloPayError6 } from "@flopay/shared";
 import { useCallback as useCallback4, useEffect as useEffect6, useRef as useRef4, useState as useState5 } from "react";
-import { Fragment as Fragment5, jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
 function PayPalButton({
   sessionId,
   billingApiUrl,
@@ -3174,7 +3725,7 @@ function PayPalButton({
       setSubmitting(true);
       onErrorChange?.(null);
       if (!sessionId || !email) {
-        throw new FloPayError5("Missing sessionId or email for PayPal payment", "validation_error");
+        throw new FloPayError6("Missing sessionId or email for PayPal payment", "validation_error");
       }
       const intentResponse = await fetch(`${baseUrl}/v1/checkouts/payments/intents`, {
         method: "POST",
@@ -3186,10 +3737,10 @@ function PayPalButton({
           isPaypal: "true"
         })
       });
-      if (!intentResponse.ok) throw new FloPayError5("Failed to create payment intent", "api_error");
+      if (!intentResponse.ok) throw new FloPayError6("Failed to create payment intent", "api_error");
       const intentJson = await intentResponse.json();
       const intentClientSecret = intentJson.data?.id;
-      if (!intentClientSecret) throw new FloPayError5("No client_secret in response", "api_error");
+      if (!intentClientSecret) throw new FloPayError6("No client_secret in response", "api_error");
       const result = await flopay.confirmPayment({
         clientSecret: intentClientSecret,
         returnUrl: window.location.href
@@ -3211,11 +3762,11 @@ function PayPalButton({
     }
   }, [flopay, elements, sessionId, email, baseUrl, dispatchTokenizedBody, onErrorChange]);
   if (!flopay || !elements) {
-    return /* @__PURE__ */ jsx7("div", { style: { height: 45, background: "#f0f0f0", borderRadius: 6, animation: "pulse 1.5s infinite" } });
+    return /* @__PURE__ */ jsx8("div", { style: { height: 45, background: "#f0f0f0", borderRadius: 6, animation: "pulse 1.5s infinite" } });
   }
-  return /* @__PURE__ */ jsxs5(Fragment5, { children: [
-    !ready && /* @__PURE__ */ jsx7("div", { style: { height: 45, background: "#f0f0f0", borderRadius: 6 } }),
-    /* @__PURE__ */ jsx7("div", { style: ready ? {} : { display: "none" }, children: /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsxs6(Fragment5, { children: [
+    !ready && /* @__PURE__ */ jsx8("div", { style: { height: 45, background: "#f0f0f0", borderRadius: 6 } }),
+    /* @__PURE__ */ jsx8("div", { style: ready ? {} : { display: "none" }, children: /* @__PURE__ */ jsx8(
       "button",
       {
         type: "button",
@@ -3237,7 +3788,7 @@ function PayPalButton({
         children: submitting ? "Processing..." : "PayPal"
       }
     ) }),
-    (submitting || isProcessing) && /* @__PURE__ */ jsx7("div", { style: {
+    (submitting || isProcessing) && /* @__PURE__ */ jsx8("div", { style: {
       position: "fixed",
       inset: 0,
       background: "rgba(0,0,0,0.4)",
@@ -3245,7 +3796,7 @@ function PayPalButton({
       alignItems: "center",
       justifyContent: "center",
       zIndex: 1e3
-    }, children: /* @__PURE__ */ jsx7("div", { style: {
+    }, children: /* @__PURE__ */ jsx8("div", { style: {
       background: "white",
       borderRadius: 8,
       padding: "1.5rem",
@@ -3255,6 +3806,649 @@ function PayPalButton({
     }, children: "Processing PayPal payment..." }) })
   ] });
 }
+
+// src/automatic-payment-button.tsx
+import { useCallback as useCallback5, useEffect as useEffect7, useMemo as useMemo4, useRef as useRef5, useState as useState6 } from "react";
+import { PaymentAPI as PaymentAPI3 } from "@flopay/js";
+import { FloPayError as FloPayError7, resolveBillingApiUrl as resolveBillingApiUrl4, resolveButtonsLayoutTheme as resolveButtonsLayoutTheme3 } from "@flopay/shared";
+import { Fragment as Fragment6, jsx as jsx9, jsxs as jsxs7 } from "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 FloPayError7) {
+    return err;
+  }
+  return new FloPayError7(
+    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 = useMemo4(
+    () => resolveBillingApiUrl4(billingApiUrl),
+    [billingApiUrl]
+  );
+  const createSessionDraft = useMemo4(
+    () => resolveCreateSessionDraft({
+      createSession,
+      clientId,
+      items,
+      subscriptions,
+      account,
+      successUrl,
+      cancelUrl,
+      couponCodes,
+      tagsData,
+      utmMetadata
+    }),
+    [
+      account,
+      cancelUrl,
+      clientId,
+      couponCodes,
+      createSession,
+      items,
+      subscriptions,
+      successUrl,
+      tagsData,
+      utmMetadata
+    ]
+  );
+  const [isProcessing, setIsProcessing] = useState6(false);
+  const [overlayStatus, setOverlayStatus] = useState6(null);
+  const [overlayError, setOverlayError] = useState6(null);
+  const [fallbackSession, setFallbackSession] = useState6(null);
+  const automaticPaymentToken = useMemo4(
+    () => paymentMethodId ? {
+      id: paymentMethodId,
+      type: "card"
+    } : void 0,
+    [paymentMethodId]
+  );
+  const isMountedRef = useRef5(true);
+  const resumeAttemptedRef = useRef5(false);
+  const fallbackSessionRef = useRef5(fallbackSession);
+  const onSuccessRef = useRef5(onSuccess);
+  const onErrorRef = useRef5(onError);
+  const onDeclineRef = useRef5(onDecline);
+  useEffect7(() => {
+    fallbackSessionRef.current = fallbackSession;
+  }, [fallbackSession]);
+  useEffect7(() => {
+    onSuccessRef.current = onSuccess;
+  }, [onSuccess]);
+  useEffect7(() => {
+    onErrorRef.current = onError;
+  }, [onError]);
+  useEffect7(() => {
+    onDeclineRef.current = onDecline;
+  }, [onDecline]);
+  useEffect7(() => {
+    isMountedRef.current = true;
+    return () => {
+      isMountedRef.current = false;
+    };
+  }, []);
+  useEffect7(() => {
+    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 = useCallback5((error, method = DEFAULT_SAVED_PAYMENT_DECLINE_METHOD) => {
+    onDeclineRef.current?.(buildDeclineEvent(method, error, {
+      code: error.code,
+      declineCode: error.declineCode
+    }));
+  }, []);
+  const showSuccess = useCallback5(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 = useCallback5(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 = useCallback5(async (apiResult, resolvedSessionId) => {
+    const session = apiResult.data.session ?? null;
+    if (!session) {
+      throw new FloPayError7("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 = useCallback5(async (event) => {
+    buttonProps.onClick?.(event);
+    if (event.defaultPrevented || disabled || isProcessing) {
+      return;
+    }
+    setFallbackSession(null);
+    if (sessionId && createSessionDraft) {
+      const error = new FloPayError7(
+        "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 FloPayError7(
+        "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 PaymentAPI3(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 FloPayError7 && 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 = useCallback5((result) => {
+    const activeFallback = fallbackSessionRef.current;
+    setFallbackSession(null);
+    onSuccessRef.current?.({
+      result,
+      session: null,
+      sessionId: activeFallback?.sessionId ?? null,
+      autoCompleted: false
+    });
+  }, []);
+  const handleFallbackError = useCallback5((error) => {
+    onErrorRef.current?.(error);
+  }, []);
+  const handleFallbackDecline = useCallback5((decline) => {
+    onDeclineRef.current?.(decline);
+  }, []);
+  useEffect7(() => {
+    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 FloPayError7("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 FloPayError7("PayPal is not available.", "api_error"),
+            { checkoutMethod: "paypal" }
+          );
+        }
+        const { paymentIntent, error } = await paypalStripe.retrievePaymentIntent(clientSecret);
+        if (error) {
+          throw Object.assign(
+            new FloPayError7(
+              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 FloPayError7("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 = useMemo4(() => {
+    const base = resolveButtonsLayoutTheme3(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__ */ jsxs7(Fragment6, { children: [
+    /* @__PURE__ */ jsx9(
+      "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__ */ jsx9(CardButtonContentSlot, { content: children })
+      }
+    ),
+    overlayStatus && /* @__PURE__ */ jsx9(
+      ProcessingOverlay,
+      {
+        status: overlayStatus,
+        errorMessage: overlayError
+      }
+    ),
+    fallbackSession && /* @__PURE__ */ jsx9(
+      "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__ */ jsx9(
+          "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__ */ jsx9(
+              FloPayCheckout,
+              {
+                sessionId: fallbackSession.sessionId,
+                checkoutMode: "full",
+                billingApiUrl: resolvedBillingUrl,
+                fallbackPublishableKey,
+                initialErrorMessage: fallbackSession.errorMessage,
+                cardTitleContent: null,
+                showSecurityFooter: false,
+                onComplete: handleFallbackComplete,
+                onError: handleFallbackError,
+                onDecline: handleFallbackDecline
+              }
+            )
+          }
+        )
+      }
+    )
+  ] });
+}
 export {
   AddressElement,
   CardCvcElement,
@@ -3262,6 +4456,7 @@ export {
   CardExpiryElement,
   CardNumberElement,
   CheckoutForm,
+  FloPayAutomaticPaymentButton,
   FloPayCheckout,
   FloPayProvider,
   PayPalButton,