@flopay/react 0.5.12 → 0.5.13

package/dist/index.cjs

@@ -39,6 +39,7 @@ __export(index_exports, {
   FloPayAutomaticPaymentButton: () => FloPayAutomaticPaymentButton,
   FloPayCheckout: () => FloPayCheckout,
   FloPayProvider: () => FloPayProvider,
+  InAppBrowserNotice: () => InAppBrowserNotice,
   PayPalButton: () => PayPalButton,
   PaymentElement: () => PaymentElement,
   SplitCardForm: () => SplitCardForm,
@@ -151,7 +152,7 @@ function FloPayProvider({
 }
 
 // src/flopay-checkout.tsx
-var import_react8 = __toESM(require("react"), 1);
+var import_react9 = __toESM(require("react"), 1);
 var import_js2 = require("@flopay/js");
 var import_shared7 = require("@flopay/shared");
 
@@ -285,7 +286,7 @@ var AddressElement = createElementComponent("address", "AddressElement");
 // src/split-card-form.tsx
 var import_react_stripe_js = require("@stripe/react-stripe-js");
 var import_shared4 = require("@flopay/shared");
-var import_react7 = require("react");
+var import_react8 = require("react");
 
 // src/hooks.ts
 var import_react5 = require("react");
@@ -658,9 +659,91 @@ function wasSessionRecentlyCompleted(sessionId) {
   }
 }
 
+// src/in-app-browser-notice.tsx
+var import_react7 = require("react");
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var DEFAULT_MESSAGE = "PayPal and some digital wallets aren't supported in this browser. Open this page in your device's browser to use them.";
+function InAppBrowserNotice({
+  message,
+  openButtonLabel = "Open in browser",
+  copiedButtonLabel = "Link copied \u2014 paste in your browser",
+  containerStyle,
+  buttonStyle,
+  onOpenInBrowser
+}) {
+  const [copied, setCopied] = (0, import_react7.useState)(false);
+  const handleClick = (0, import_react7.useCallback)(async () => {
+    if (typeof window === "undefined") return;
+    const url = window.location.href;
+    let opened = false;
+    try {
+      const win = window.open(url, "_blank");
+      opened = !!win;
+    } catch {
+      opened = false;
+    }
+    let didCopy = false;
+    if (!opened) {
+      if (typeof navigator !== "undefined" && typeof navigator.clipboard?.writeText === "function") {
+        try {
+          await navigator.clipboard.writeText(url);
+          didCopy = true;
+          setCopied(true);
+        } catch {
+          didCopy = false;
+        }
+      }
+    }
+    onOpenInBrowser?.({ opened, copied: didCopy });
+  }, [onOpenInBrowser]);
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+    "div",
+    {
+      role: "status",
+      "data-testid": "flopay-in-app-browser-notice",
+      style: {
+        padding: "0.75rem 0.875rem",
+        background: "#FFFBEB",
+        border: "1px solid #FDE68A",
+        borderRadius: 8,
+        color: "#92400E",
+        fontSize: "0.85rem",
+        lineHeight: 1.4,
+        display: "flex",
+        flexDirection: "column",
+        gap: "0.5rem",
+        ...containerStyle
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: message ?? DEFAULT_MESSAGE }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          "button",
+          {
+            type: "button",
+            onClick: handleClick,
+            style: {
+              alignSelf: "flex-start",
+              padding: "0.4rem 0.75rem",
+              background: "transparent",
+              border: "1px solid #92400E",
+              borderRadius: 6,
+              color: "#92400E",
+              fontSize: "0.85rem",
+              fontWeight: 600,
+              cursor: "pointer",
+              ...buttonStyle
+            },
+            children: copied ? copiedButtonLabel : openButtonLabel
+          }
+        )
+      ]
+    }
+  );
+}
+
 // src/split-card-form.tsx
 var import_shared5 = require("@flopay/shared");
-var import_jsx_runtime5 = require("react/jsx-runtime");
+var import_jsx_runtime6 = require("react/jsx-runtime");
 var WALLET_RESUME_KEY = "flopay_wallet_resume";
 var FLOPAY_KEYFRAMES = `
 @keyframes flopay-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }
@@ -702,7 +785,7 @@ function normalizeBeforeButtonClickError(method, err) {
   );
 }
 function FloPayKeyframes() {
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("style", { children: FLOPAY_KEYFRAMES });
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("style", { children: FLOPAY_KEYFRAMES });
 }
 function toCssSize(value) {
   if (typeof value === "number") return `${value}px`;
@@ -722,9 +805,9 @@ function ExpressCheckoutReadySwap({
   placeholderTestId,
   children
 }) {
-  if (state === "unavailable") return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: { position: "relative", minHeight: 44 }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+  if (state === "unavailable" || state === "load_error") return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { position: "relative", minHeight: 44 }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
       "div",
       {
         "data-testid": placeholderTestId,
@@ -743,7 +826,7 @@ function ExpressCheckoutReadySwap({
         }
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
       "div",
       {
         style: {
@@ -758,9 +841,9 @@ function ExpressCheckoutReadySwap({
     )
   ] });
 }
-var SplitCardForm = (0, import_react7.forwardRef)(
+var SplitCardForm = (0, import_react8.forwardRef)(
   function SplitCardForm2(props, ref) {
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SplitCardFormInner, { ...props, innerRef: ref });
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(SplitCardFormInner, { ...props, innerRef: ref });
   }
 );
 function PayPalButtonInner({
@@ -772,16 +855,24 @@ function PayPalButtonInner({
   isProcessing = false,
   onButtonClick,
   onDecline,
-  runBeforeButtonClick
+  runBeforeButtonClick,
+  onLoadStateChange
 }) {
   const stripe = (0, import_react_stripe_js.useStripe)();
   const elements = (0, import_react_stripe_js.useElements)();
-  const [loadState, setLoadState] = (0, import_react7.useState)("loading");
-  const [submitting, setSubmitting] = (0, import_react7.useState)(false);
-  const paypalResumeAttempted = (0, import_react7.useRef)(false);
-  const beforeClickRef = (0, import_react7.useRef)(null);
+  const [loadState, setLoadState] = (0, import_react8.useState)("loading");
+  const onLoadStateChangeRef = (0, import_react8.useRef)(onLoadStateChange);
+  (0, import_react8.useEffect)(() => {
+    onLoadStateChangeRef.current = onLoadStateChange;
+  }, [onLoadStateChange]);
+  (0, import_react8.useEffect)(() => {
+    onLoadStateChangeRef.current?.(loadState);
+  }, [loadState]);
+  const [submitting, setSubmitting] = (0, import_react8.useState)(false);
+  const paypalResumeAttempted = (0, import_react8.useRef)(false);
+  const beforeClickRef = (0, import_react8.useRef)(null);
   const baseUrl = billingApiUrl.replace(/\/+$/, "");
-  (0, import_react7.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     if (!stripe || paypalResumeAttempted.current) return;
     const params = new URLSearchParams(window.location.search);
     const paymentIntentId = params.get("payment_intent");
@@ -828,7 +919,7 @@ function PayPalButtonInner({
       }
     })();
   }, [stripe, onTokenizedBody, onErrorChange, onDecline]);
-  const handlePayPalClick = (0, import_react7.useCallback)(async (event) => {
+  const handlePayPalClick = (0, import_react8.useCallback)(async (event) => {
     if (isProcessing || submitting) {
       event.reject();
       return;
@@ -846,7 +937,7 @@ function PayPalButtonInner({
     onButtonClick?.("paypal");
     event.resolve();
   }, [isProcessing, onButtonClick, runBeforeButtonClick, submitting]);
-  const handlePayPalConfirm = (0, import_react7.useCallback)(async (event) => {
+  const handlePayPalConfirm = (0, import_react8.useCallback)(async (event) => {
     if (!stripe || !elements) return;
     let prepared = beforeClickRef.current;
     beforeClickRef.current = null;
@@ -938,12 +1029,12 @@ function PayPalButtonInner({
       setSubmitting(false);
     }
   }, [stripe, elements, sessionId, email, baseUrl, onTokenizedBody, onErrorChange, onDecline, runBeforeButtonClick]);
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ExpressCheckoutReadySwap, { state: loadState, placeholderTestId: "flopay-paypal-placeholder", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ExpressCheckoutReadySwap, { state: loadState, placeholderTestId: "flopay-paypal-placeholder", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
       import_react_stripe_js.ExpressCheckoutElement,
       {
         onReady: (event) => setLoadState(resolveExpressCheckoutLoadState(event, ["paypal"])),
-        onLoadError: () => setLoadState("unavailable"),
+        onLoadError: () => setLoadState("load_error"),
         onClick: handlePayPalClick,
         onConfirm: handlePayPalConfirm,
         onCancel: () => {
@@ -964,7 +1055,7 @@ function PayPalButtonInner({
         }
       }
     ) }),
-    submitting && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ProcessingOverlay, { status: "processing" })
+    submitting && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ProcessingOverlay, { status: "processing" })
   ] });
 }
 function WalletButtonInner({
@@ -977,16 +1068,24 @@ function WalletButtonInner({
   onErrorChange,
   onButtonClick,
   onDecline,
-  runBeforeButtonClick
+  runBeforeButtonClick,
+  onLoadStateChange
 }) {
   const stripe = (0, import_react_stripe_js.useStripe)();
   const elements = (0, import_react_stripe_js.useElements)();
-  const [loadState, setLoadState] = (0, import_react7.useState)("loading");
-  const [submitting, setSubmitting] = (0, import_react7.useState)(false);
+  const [loadState, setLoadState] = (0, import_react8.useState)("loading");
+  const onLoadStateChangeRef = (0, import_react8.useRef)(onLoadStateChange);
+  (0, import_react8.useEffect)(() => {
+    onLoadStateChangeRef.current = onLoadStateChange;
+  }, [onLoadStateChange]);
+  (0, import_react8.useEffect)(() => {
+    onLoadStateChangeRef.current?.(loadState);
+  }, [loadState]);
+  const [submitting, setSubmitting] = (0, import_react8.useState)(false);
   const baseUrl = billingApiUrl.replace(/\/+$/, "");
-  const lastWalletMethodRef = (0, import_react7.useRef)("card");
-  const beforeClickRef = (0, import_react7.useRef)(null);
-  const handleWalletConfirm = (0, import_react7.useCallback)(
+  const lastWalletMethodRef = (0, import_react8.useRef)("card");
+  const beforeClickRef = (0, import_react8.useRef)(null);
+  const handleWalletConfirm = (0, import_react8.useCallback)(
     async (event) => {
       if (!stripe || !elements) return;
       const walletType = event.expressPaymentType;
@@ -1075,12 +1174,12 @@ function WalletButtonInner({
     },
     [stripe, elements, sessionId, email, baseUrl, onTokenizedBody, onErrorChange, onDecline, runBeforeButtonClick]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ExpressCheckoutReadySwap, { state: loadState, placeholderTestId: "flopay-wallet-placeholder", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ExpressCheckoutReadySwap, { state: loadState, placeholderTestId: "flopay-wallet-placeholder", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
       import_react_stripe_js.ExpressCheckoutElement,
       {
         onReady: (event) => setLoadState(resolveExpressCheckoutLoadState(event, ["applePay", "googlePay"])),
-        onLoadError: () => setLoadState("unavailable"),
+        onLoadError: () => setLoadState("load_error"),
         onClick: async (event) => {
           lastWalletMethodRef.current = event.expressPaymentType === "apple_pay" ? "apple_pay" : "google_pay";
           const beforeClick = runBeforeButtonClick ? await runBeforeButtonClick(lastWalletMethodRef.current) : { proceed: true };
@@ -1115,7 +1214,7 @@ function WalletButtonInner({
         }
       }
     ) }),
-    submitting && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ProcessingOverlay, { status: "processing" })
+    submitting && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ProcessingOverlay, { status: "processing" })
   ] });
 }
 function SplitCardFormInner({
@@ -1172,49 +1271,49 @@ function SplitCardFormInner({
   const flopay = useFloPay();
   const paypalFlopay = usePayPalFloPay();
   const elements = useElements();
-  const checkout = (0, import_react7.useContext)(CheckoutContext);
+  const checkout = (0, import_react8.useContext)(CheckoutContext);
   const contextBillingUrl = useBillingApiUrl();
-  const [processing, setProcessing] = (0, import_react7.useState)(false);
-  const [error, setError] = (0, import_react7.useState)(null);
-  const [is3DSActive, setIs3DSActive] = (0, import_react7.useState)(false);
-  const [selectedCountry, setSelectedCountry] = (0, import_react7.useState)(countryProp ?? "US");
-  const [zipCode, setZipCode] = (0, import_react7.useState)(zipProp ?? "");
-  const [addressLine1, setAddressLine1] = (0, import_react7.useState)(addressLine1Prop ?? "");
-  const [addressLine2, setAddressLine2] = (0, import_react7.useState)(addressLine2Prop ?? "");
-  const [city, setCity] = (0, import_react7.useState)(cityProp ?? "");
-  const [stateValue, setStateValue] = (0, import_react7.useState)(stateProp ?? "");
-  const [accountPatch, setAccountPatch] = (0, import_react7.useState)({});
-  const zipCodeRef = (0, import_react7.useRef)(zipProp ?? "");
-  const selectedCountryRef = (0, import_react7.useRef)(countryProp ?? "US");
-  const addressLine1Ref = (0, import_react7.useRef)(addressLine1Prop ?? "");
-  const addressLine2Ref = (0, import_react7.useRef)(addressLine2Prop ?? "");
-  const cityRef = (0, import_react7.useRef)(cityProp ?? "");
-  const stateRef = (0, import_react7.useRef)(stateProp ?? "");
-  const avsConfig = (0, import_react7.useMemo)(() => (0, import_shared4.resolveAVSConfig)(enableAVSProp), [enableAVSProp]);
+  const [processing, setProcessing] = (0, import_react8.useState)(false);
+  const [error, setError] = (0, import_react8.useState)(null);
+  const [is3DSActive, setIs3DSActive] = (0, import_react8.useState)(false);
+  const [selectedCountry, setSelectedCountry] = (0, import_react8.useState)(countryProp ?? "US");
+  const [zipCode, setZipCode] = (0, import_react8.useState)(zipProp ?? "");
+  const [addressLine1, setAddressLine1] = (0, import_react8.useState)(addressLine1Prop ?? "");
+  const [addressLine2, setAddressLine2] = (0, import_react8.useState)(addressLine2Prop ?? "");
+  const [city, setCity] = (0, import_react8.useState)(cityProp ?? "");
+  const [stateValue, setStateValue] = (0, import_react8.useState)(stateProp ?? "");
+  const [accountPatch, setAccountPatch] = (0, import_react8.useState)({});
+  const zipCodeRef = (0, import_react8.useRef)(zipProp ?? "");
+  const selectedCountryRef = (0, import_react8.useRef)(countryProp ?? "US");
+  const addressLine1Ref = (0, import_react8.useRef)(addressLine1Prop ?? "");
+  const addressLine2Ref = (0, import_react8.useRef)(addressLine2Prop ?? "");
+  const cityRef = (0, import_react8.useRef)(cityProp ?? "");
+  const stateRef = (0, import_react8.useRef)(stateProp ?? "");
+  const avsConfig = (0, import_react8.useMemo)(() => (0, import_shared4.resolveAVSConfig)(enableAVSProp), [enableAVSProp]);
   const enableAVS = avsConfig !== null;
-  const [viewState, setViewState] = (0, import_react7.useState)(initialCardOpen ? "card" : "buttons");
+  const [viewState, setViewState] = (0, import_react8.useState)(initialCardOpen ? "card" : "buttons");
   const showCardForm = viewState === "expanding" || viewState === "card";
   const TRANSITION_MS = 280;
-  const expandToCard = (0, import_react7.useCallback)(() => {
+  const expandToCard = (0, import_react8.useCallback)(() => {
     setViewState("expanding");
     setTimeout(() => setViewState("card"), TRANSITION_MS);
   }, []);
-  const collapseToButtons = (0, import_react7.useCallback)(() => {
+  const collapseToButtons = (0, import_react8.useCallback)(() => {
     setViewState("collapsing");
     setTimeout(() => setViewState("buttons"), TRANSITION_MS);
   }, []);
-  (0, import_react7.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     if (layout === "buttons" && initialCardOpen) {
       setViewState("card");
     }
   }, [layout, initialCardOpen]);
-  const [fullName, setFullName] = (0, import_react7.useState)("");
-  const [formReady, setFormReady] = (0, import_react7.useState)(false);
-  const [overlayStatus, setOverlayStatus] = (0, import_react7.useState)(null);
-  const processingRef = (0, import_react7.useRef)(false);
+  const [fullName, setFullName] = (0, import_react8.useState)("");
+  const [formReady, setFormReady] = (0, import_react8.useState)(false);
+  const [overlayStatus, setOverlayStatus] = (0, import_react8.useState)(null);
+  const processingRef = (0, import_react8.useRef)(false);
   const resolvedBillingApiUrl = billingApiUrl || contextBillingUrl;
   const displayError = externalError ?? error;
-  const bStyles = (0, import_react7.useMemo)(() => {
+  const bStyles = (0, import_react8.useMemo)(() => {
     const base = (0, import_shared4.resolveButtonsLayoutTheme)(buttonsTheme);
     if (!buttonsStylesOverride) return base;
     return {
@@ -1232,7 +1331,7 @@ function SplitCardFormInner({
   const isSubmitting = (externalProcessing ?? processing) || isInlineSessionPatchProcessing;
   const isSelfContained = !onTokenizedBody;
   const baseUrl = resolvedBillingApiUrl.replace(/\/+$/, "");
-  const resolvedAccount = (0, import_react7.useMemo)(() => mergeAccountPatch({
+  const resolvedAccount = (0, import_react8.useMemo)(() => mergeAccountPatch({
     userId,
     email,
     firstName,
@@ -1240,51 +1339,58 @@ function SplitCardFormInner({
     country: countryProp,
     zip: zipProp
   }, accountPatch), [userId, email, firstName, lastName, countryProp, zipProp, accountPatch]);
-  const stripeInstance = (0, import_react7.useMemo)(() => {
+  const stripeInstance = (0, import_react8.useMemo)(() => {
     if (!flopay) return null;
     return flopay.getRawProvider();
   }, [flopay]);
-  const paypalStripeInstance = (0, import_react7.useMemo)(() => {
+  const paypalStripeInstance = (0, import_react8.useMemo)(() => {
     if (!paypalFlopay) return null;
     return paypalFlopay.getRawProvider();
   }, [paypalFlopay]);
   const amountInCents = totalAmount || 100;
-  const walletOptions = (0, import_react7.useMemo)(() => ({
+  const walletOptions = (0, import_react8.useMemo)(() => ({
     mode: "payment",
     amount: amountInCents,
     currency: currency.toLowerCase(),
     paymentMethodCreation: "manual",
     captureMethod: "manual"
   }), [amountInCents, currency]);
-  const paypalOptions = (0, import_react7.useMemo)(() => ({
+  const paypalOptions = (0, import_react8.useMemo)(() => ({
     mode: "payment",
     amount: amountInCents,
     currency: currency.toLowerCase(),
     captureMethod: "manual",
     setupFutureUsage: "off_session"
   }), [amountInCents, currency]);
-  const updateError = (0, import_react7.useCallback)(
+  const updateError = (0, import_react8.useCallback)(
     (err) => {
       setError(err);
       onErrorChange?.(err);
     },
     [onErrorChange]
   );
-  const emitDecline = (0, import_react7.useCallback)(
+  const emitDecline = (0, import_react8.useCallback)(
     (method, input, overrides) => {
       onDecline?.(buildDeclineEvent(method, input, overrides));
     },
     [onDecline]
   );
   const showWallets = showApplePay || showGooglePay;
-  const handleNameChange = (0, import_react7.useCallback)((value) => {
+  const [paypalLoadState, setPaypalLoadState] = (0, import_react8.useState)("loading");
+  const [walletLoadState, setWalletLoadState] = (0, import_react8.useState)("loading");
+  const expectedPayPal = showPayPal && !!paypalStripeInstance;
+  const expectedWallets = showWallets && !!stripeInstance;
+  const paypalLoadFailed = expectedPayPal && paypalLoadState === "load_error";
+  const walletsLoadFailed = expectedWallets && walletLoadState === "load_error";
+  const showInAppBrowserNotice = (expectedPayPal || expectedWallets) && (!expectedPayPal || paypalLoadFailed) && (!expectedWallets || walletsLoadFailed) && (paypalLoadFailed || walletsLoadFailed);
+  const handleNameChange = (0, import_react8.useCallback)((value) => {
     setFullName(value);
     onFullNameChange?.(value);
     const parts = value.trim().split(/\s+/);
     onFirstNameChange?.(parts[0] ?? "");
     onLastNameChange?.(parts.length > 1 ? parts.slice(1).join(" ") : "");
   }, [onFullNameChange, onFirstNameChange, onLastNameChange]);
-  const applyInlineSessionPatch = (0, import_react7.useCallback)(
+  const applyInlineSessionPatch = (0, import_react8.useCallback)(
     (patch, method) => {
       if (!checkout.applyInlineSessionPatch) {
         return Promise.resolve({ error: null, sessionId });
@@ -1301,7 +1407,7 @@ function SplitCardFormInner({
     },
     [checkout.applyInlineSessionPatch, onError, sessionId, updateError]
   );
-  const runBeforeButtonClick = (0, import_react7.useCallback)(async (method) => {
+  const runBeforeButtonClick = (0, import_react8.useCallback)(async (method) => {
     if (!onBeforeButtonClick) return { proceed: true };
     try {
       const result = await onBeforeButtonClick({
@@ -1337,7 +1443,7 @@ function SplitCardFormInner({
       return { proceed: false };
     }
   }, [applyInlineSessionPatch, checkout.inlineSessionDraft, onBeforeButtonClick, onError, sessionId, updateError]);
-  const processPaymentInternal = (0, import_react7.useCallback)(
+  const processPaymentInternal = (0, import_react8.useCallback)(
     async (tokenizedBody, overrides) => {
       if (processingRef.current) return;
       processingRef.current = true;
@@ -1527,7 +1633,7 @@ function SplitCardFormInner({
     },
     [baseUrl, sessionId, resolvedAccount, fullName, chv, flopay, paypalFlopay, onComplete, onError, updateError, emitDecline]
   );
-  const dispatchTokenizedBody = (0, import_react7.useCallback)(
+  const dispatchTokenizedBody = (0, import_react8.useCallback)(
     (tokenizedBody, overrides) => {
       if (onTokenizedBody) {
         onTokenizedBody(tokenizedBody);
@@ -1537,7 +1643,7 @@ function SplitCardFormInner({
     },
     [onTokenizedBody, processPaymentInternal]
   );
-  (0, import_react7.useImperativeHandle)(innerRef, () => ({
+  (0, import_react8.useImperativeHandle)(innerRef, () => ({
     async handleNextAction(secret) {
       if (!flopay) return;
       setIs3DSActive(true);
@@ -1564,7 +1670,7 @@ function SplitCardFormInner({
       }
     }
   }), [flopay, dispatchTokenizedBody, onError, updateError, emitDecline]);
-  (0, import_react7.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     if (typeof window === "undefined") return;
     const stored = localStorage.getItem(WALLET_RESUME_KEY);
     if (!stored) return;
@@ -1582,7 +1688,7 @@ function SplitCardFormInner({
       localStorage.removeItem(WALLET_RESUME_KEY);
     }
   }, [sessionId, dispatchTokenizedBody]);
-  const handleSubmit = (0, import_react7.useCallback)(
+  const handleSubmit = (0, import_react8.useCallback)(
     async (e) => {
       e.preventDefault();
       if (!flopay || !elements || isSubmitting || processingRef.current) return;
@@ -1724,7 +1830,7 @@ function SplitCardFormInner({
   );
   const isReady = flopay !== null && elements !== null;
   if (!isReady) {
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { "data-testid": "flopay-loading", "aria-busy": "true", children: "Loading payment form..." });
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { "data-testid": "flopay-loading", "aria-busy": "true", children: "Loading payment form..." });
   }
   const isButtons = layout === "buttons";
   const resolvedBorder = isButtons ? bStyles.cardInputBorder ?? "#e5e7eb" : "#A4A4FF";
@@ -1767,7 +1873,7 @@ function SplitCardFormInner({
       invalid: { color: "#ef4444" }
     }
   };
-  const cardFormBlock = /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: {
+  const cardFormBlock = /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: {
     backgroundColor: cardBg,
     borderRadius: "8px",
     padding: isButtons ? "0" : "1rem",
@@ -1775,7 +1881,7 @@ function SplitCardFormInner({
     ...isButtons ? { padding: bStyles.cardFormContainer?.padding ?? "0" } : {},
     ...sharedInputPlaceholderVars
   }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("style", { children: `
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("style", { children: `
         .flopay-shared-input::placeholder {
           color: var(--flopay-input-placeholder-color);
           opacity: 1;
@@ -1784,12 +1890,12 @@ function SplitCardFormInner({
           font-weight: var(--flopay-input-font-weight);
         }
       ` }),
-    isButtons && showCardForm && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: {
+    isButtons && showCardForm && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: {
       display: "flex",
       alignItems: "center",
       padding: "0.75rem 0 0.625rem"
     }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
         "button",
         {
           type: "button",
@@ -1811,7 +1917,7 @@ function SplitCardFormInner({
           },
           "aria-label": "Back to payment methods",
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { style: {
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { style: {
               display: "inline-flex",
               alignItems: "center",
               justifyContent: "center",
@@ -1821,12 +1927,12 @@ function SplitCardFormInner({
               backgroundColor: "#f3f4f6",
               transition: "background-color 0.15s",
               ...bStyles.backButtonIcon
-            }, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M15 18l-6-6 6-6" }) }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(BackButtonContentSlot, { content: cardBackButtonContent })
+            }, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { d: "M15 18l-6-6 6-6" }) }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(BackButtonContentSlot, { content: cardBackButtonContent })
           ]
         }
       ),
-      hideTitle ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: { flex: 1 } }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: {
+      hideTitle ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { flex: 1 } }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: {
         flex: 1,
         textAlign: "center",
         fontWeight: 600,
@@ -1834,18 +1940,18 @@ function SplitCardFormInner({
         color: "#262833",
         paddingRight: 80,
         ...bStyles.title
-      }, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(TitleContentSlot, { content: cardTitleContent }) })
+      }, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(TitleContentSlot, { content: cardTitleContent }) })
     ] }),
-    !isButtons && !hideTitle && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: { textAlign: "center", fontWeight: 600, fontSize: "1.1rem", padding: "0.5rem 0", color: "#262833" }, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(TitleContentSlot, { content: cardTitleContent }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: {
+    !isButtons && !hideTitle && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { textAlign: "center", fontWeight: 600, fontSize: "1.1rem", padding: "0.5rem 0", color: "#262833" }, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(TitleContentSlot, { content: cardTitleContent }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: {
       backgroundColor: cardInputBg,
       border: `1px solid ${resolvedBorder}`,
       borderTopLeftRadius: "8px",
       borderTopRightRadius: "8px",
       padding: "10px"
-    }, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(CardNumberElement, { onReady: () => setFormReady(true), options: stripeElementStyle }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: { display: "flex" }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: {
+    }, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(CardNumberElement, { onReady: () => setFormReady(true), options: stripeElementStyle }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { display: "flex" }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: {
         flex: 1,
         backgroundColor: cardInputBg,
         border: `1px solid ${resolvedBorder}`,
@@ -1853,23 +1959,23 @@ function SplitCardFormInner({
         borderRight: "none",
         borderBottomLeftRadius: "8px",
         padding: "10px"
-      }, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(CardExpiryElement, { options: stripeElementStyle }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: {
+      }, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(CardExpiryElement, { options: stripeElementStyle }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: {
         flex: 1,
         backgroundColor: cardInputBg,
         border: `1px solid ${resolvedBorder}`,
         borderTop: "none",
         borderBottomRightRadius: "8px",
         padding: "10px"
-      }, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(CardCvcElement, { options: stripeElementStyle }) })
+      }, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(CardCvcElement, { options: stripeElementStyle }) })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: {
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: {
       backgroundColor: cardInputBg,
       border: `1px solid ${resolvedBorder}`,
       borderRadius: "8px",
       marginTop: "0.5rem",
       padding: "10px"
-    }, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    }, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
       "input",
       {
         className: "flopay-shared-input",
@@ -1908,8 +2014,8 @@ function SplitCardFormInner({
         ...isButtons && bStyles.nameInput ? bStyles.nameInput : {}
       });
       const stateOpts = (0, import_shared4.getStateOptions)(cc);
-      return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
-        (0, import_shared4.isAVSFieldVisible)(avsConfig.address_line_1, cc) && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: inputWrapStyle(bStyles.addressLine1Input), children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
+        (0, import_shared4.isAVSFieldVisible)(avsConfig.address_line_1, cc) && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: inputWrapStyle(bStyles.addressLine1Input), children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
           "input",
           {
             className: "flopay-shared-input",
@@ -1926,7 +2032,7 @@ function SplitCardFormInner({
             style: inputFieldStyle()
           }
         ) }),
-        (0, import_shared4.isAVSFieldVisible)(avsConfig.address_line_2, cc) && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: inputWrapStyle(bStyles.addressLine2Input), children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        (0, import_shared4.isAVSFieldVisible)(avsConfig.address_line_2, cc) && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: inputWrapStyle(bStyles.addressLine2Input), children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
           "input",
           {
             className: "flopay-shared-input",
@@ -1942,12 +2048,12 @@ function SplitCardFormInner({
             style: inputFieldStyle()
           }
         ) }),
-        ((0, import_shared4.isAVSFieldVisible)(avsConfig.city, cc) || (0, import_shared4.isAVSFieldVisible)(avsConfig.state, cc)) && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: {
+        ((0, import_shared4.isAVSFieldVisible)(avsConfig.city, cc) || (0, import_shared4.isAVSFieldVisible)(avsConfig.state, cc)) && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: {
           display: "flex",
           gap: "0",
           marginTop: "0.5rem"
         }, children: [
-          (0, import_shared4.isAVSFieldVisible)(avsConfig.city, cc) && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: {
+          (0, import_shared4.isAVSFieldVisible)(avsConfig.city, cc) && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: {
             flex: 1,
             backgroundColor: cardInputBg,
             border: `1px solid ${resolvedBorder}`,
@@ -1956,7 +2062,7 @@ function SplitCardFormInner({
             borderBottomLeftRadius: "8px",
             ...(0, import_shared4.isAVSFieldVisible)(avsConfig.state, cc) ? { borderRight: "none", borderTopRightRadius: 0, borderBottomRightRadius: 0 } : { borderRadius: "8px" },
             ...isButtons && bStyles.cityInput ? bStyles.cityInput : {}
-          }, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          }, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
             "input",
             {
               className: "flopay-shared-input",
@@ -1973,7 +2079,7 @@ function SplitCardFormInner({
               style: inputFieldStyle()
             }
           ) }),
-          (0, import_shared4.isAVSFieldVisible)(avsConfig.state, cc) && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: {
+          (0, import_shared4.isAVSFieldVisible)(avsConfig.state, cc) && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: {
             flex: 1,
             backgroundColor: cardInputBg,
             border: `1px solid ${resolvedBorder}`,
@@ -1982,7 +2088,7 @@ function SplitCardFormInner({
             borderBottomRightRadius: "8px",
             ...(0, import_shared4.isAVSFieldVisible)(avsConfig.city, cc) ? { borderTopLeftRadius: 0, borderBottomLeftRadius: 0 } : { borderRadius: "8px" },
             ...isButtons && bStyles.stateInput ? bStyles.stateInput : {}
-          }, children: stateOpts ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+          }, children: stateOpts ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
             "select",
             {
               value: stateValue,
@@ -1996,11 +2102,11 @@ function SplitCardFormInner({
               "data-testid": "flopay-state",
               style: { ...inputFieldStyle(), cursor: "pointer" },
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("option", { value: "", children: (0, import_shared4.getStateLabel)(cc) }),
-                stateOpts.map((s) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("option", { value: s.code, children: s.name }, s.code))
+                /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("option", { value: "", children: (0, import_shared4.getStateLabel)(cc) }),
+                stateOpts.map((s) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("option", { value: s.code, children: s.name }, s.code))
               ]
             }
-          ) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          ) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
             "input",
             {
               className: "flopay-shared-input",
@@ -2018,20 +2124,20 @@ function SplitCardFormInner({
             }
           ) })
         ] }),
-        ((0, import_shared4.isAVSFieldVisible)(avsConfig.country, cc) || (0, import_shared4.isAVSFieldVisible)(avsConfig.postal_code, cc)) && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: {
+        ((0, import_shared4.isAVSFieldVisible)(avsConfig.country, cc) || (0, import_shared4.isAVSFieldVisible)(avsConfig.postal_code, cc)) && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: {
           display: "flex",
           flexDirection: avsLayoutProp === "column" ? "column" : "row",
           gap: avsLayoutProp === "column" ? "0.5rem" : "0",
           marginTop: "0.5rem"
         }, children: [
-          (0, import_shared4.isAVSFieldVisible)(avsConfig.country, cc) && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: {
+          (0, import_shared4.isAVSFieldVisible)(avsConfig.country, cc) && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: {
             flex: avsLayoutProp === "row" ? 1 : void 0,
             backgroundColor: cardInputBg,
             border: `1px solid ${resolvedBorder}`,
             padding: "10px",
             ...avsLayoutProp === "row" && (0, import_shared4.isAVSFieldVisible)(avsConfig.postal_code, cc) ? { borderRadius: "0", borderTopLeftRadius: "8px", borderBottomLeftRadius: "8px", borderRight: "none" } : { borderRadius: "8px" },
             ...isButtons && bStyles.countrySelect ? bStyles.countrySelect : {}
-          }, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          }, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
             "select",
             {
               value: selectedCountry,
@@ -2046,21 +2152,21 @@ function SplitCardFormInner({
               autoComplete: "country",
               "data-testid": "flopay-country",
               style: { ...inputFieldStyle(), cursor: "pointer" },
-              children: import_shared4.COUNTRY_OPTIONS.map((c) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("option", { value: c.code, children: [
+              children: import_shared4.COUNTRY_OPTIONS.map((c) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("option", { value: c.code, children: [
                 c.flag,
                 " ",
                 c.name
               ] }, c.code))
             }
           ) }),
-          (0, import_shared4.isAVSFieldVisible)(avsConfig.postal_code, cc) && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: {
+          (0, import_shared4.isAVSFieldVisible)(avsConfig.postal_code, cc) && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: {
             flex: avsLayoutProp === "row" ? 1 : void 0,
             backgroundColor: cardInputBg,
             border: `1px solid ${resolvedBorder}`,
             padding: "10px",
             ...avsLayoutProp === "row" && (0, import_shared4.isAVSFieldVisible)(avsConfig.country, cc) ? { borderRadius: "0", borderTopRightRadius: "8px", borderBottomRightRadius: "8px" } : { borderRadius: "8px" },
             ...isButtons && bStyles.zipInput ? bStyles.zipInput : {}
-          }, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          }, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
             "input",
             {
               className: "flopay-shared-input",
@@ -2081,7 +2187,7 @@ function SplitCardFormInner({
         ] })
       ] });
     })(),
-    displayError && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { role: "alert", "data-testid": "flopay-error", style: {
+    displayError && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { role: "alert", "data-testid": "flopay-error", style: {
       margin: "0.75rem 0",
       padding: "0.625rem 0.875rem",
       background: "#FEF2F2",
@@ -2095,10 +2201,10 @@ function SplitCardFormInner({
       gap: "0.5rem",
       ...isButtons && bStyles.errorBanner ? bStyles.errorBanner : {}
     }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", style: { flexShrink: 0 }, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M12 9v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z", stroke: "#DC2626", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", style: { flexShrink: 0 }, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { d: "M12 9v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z", stroke: "#DC2626", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }),
       displayError
     ] }),
-    children ?? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    children ?? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
       "button",
       {
         type: "submit",
@@ -2121,7 +2227,7 @@ function SplitCardFormInner({
         children: isSubmitting ? "PROCESSING..." : submitLabel
       }
     ),
-    !isButtons && showSecurityFooter && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: {
+    !isButtons && showSecurityFooter && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: {
       backgroundColor: "#EFF9F0",
       borderRadius: "8px",
       padding: "0.75rem",
@@ -2138,11 +2244,11 @@ function SplitCardFormInner({
     const cardButtonSizing = cardButtonContent === void 0 ? { boxSizing: "border-box", height: DEFAULT_BUTTONS_LAYOUT_BUTTON_HEIGHT, padding: "0 1rem" } : { padding: "0.9rem 1rem" };
     const buttonsAnim = viewState === "expanding" ? `flopay-buttons-exit ${TRANSITION_MS}ms cubic-bezier(0.4, 0, 0.2, 1) both` : viewState === "collapsing" ? `flopay-buttons-enter ${TRANSITION_MS}ms cubic-bezier(0, 0, 0.2, 1) both` : void 0;
     const cardAnim = viewState === "expanding" ? `flopay-card-enter ${TRANSITION_MS}ms cubic-bezier(0, 0, 0.2, 1) both` : viewState === "collapsing" ? `flopay-card-exit ${TRANSITION_MS}ms cubic-bezier(0.4, 0, 0.2, 1) both` : void 0;
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("form", { onSubmit: handleSubmit, className, style: { position: "relative" }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(FloPayKeyframes, {}),
-      overlayStatus && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ProcessingOverlay, { status: overlayStatus, errorMessage: displayError }),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: { display: "grid" }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: {
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("form", { onSubmit: handleSubmit, className, style: { position: "relative" }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(FloPayKeyframes, {}),
+      overlayStatus && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ProcessingOverlay, { status: overlayStatus, errorMessage: displayError }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { display: "grid" }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: {
           gridArea: "1 / 1",
           display: "flex",
           flexDirection: "column",
@@ -2151,7 +2257,7 @@ function SplitCardFormInner({
           ...!isButtonsView && !buttonsAnim ? { visibility: "hidden", position: "absolute", pointerEvents: "none", width: "100%" } : {},
           ...buttonsAnim ? { animation: buttonsAnim, pointerEvents: "none" } : {}
         }, children: [
-          showPayPal && paypalStripeInstance && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_stripe_js.Elements, { stripe: paypalStripeInstance, options: paypalOptions, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          showPayPal && paypalStripeInstance && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_stripe_js.Elements, { stripe: paypalStripeInstance, options: paypalOptions, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
             PayPalButtonInner,
             {
               sessionId,
@@ -2162,10 +2268,11 @@ function SplitCardFormInner({
               isProcessing: isSubmitting,
               onButtonClick,
               onDecline,
-              runBeforeButtonClick
+              runBeforeButtonClick,
+              onLoadStateChange: setPaypalLoadState
             }
           ) }),
-          showWallets && stripeInstance ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_stripe_js.Elements, { stripe: stripeInstance, options: walletOptions, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          showWallets && stripeInstance ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_stripe_js.Elements, { stripe: stripeInstance, options: walletOptions, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
             WalletButtonInner,
             {
               sessionId,
@@ -2177,10 +2284,12 @@ function SplitCardFormInner({
               onErrorChange: updateError,
               onButtonClick,
               onDecline,
-              runBeforeButtonClick
+              runBeforeButtonClick,
+              onLoadStateChange: setWalletLoadState
             }
-          ) }) : showWallets ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: { height: DEFAULT_BUTTONS_LAYOUT_BUTTON_HEIGHT, borderRadius: 8, background: "#e5e7eb", animation: "flopay-pulse 1.5s ease-in-out infinite" } }) : null,
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          ) }) : showWallets ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { height: DEFAULT_BUTTONS_LAYOUT_BUTTON_HEIGHT, borderRadius: 8, background: "#e5e7eb", animation: "flopay-pulse 1.5s ease-in-out infinite" } }) : null,
+          showInAppBrowserNotice && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(InAppBrowserNotice, {}),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
             "button",
             {
               type: "button",
@@ -2218,10 +2327,10 @@ function SplitCardFormInner({
               onMouseUp: (e) => {
                 e.currentTarget.style.transform = "scale(1)";
               },
-              children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(CardButtonContentSlot, { content: cardButtonContent })
+              children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(CardButtonContentSlot, { content: cardButtonContent })
             }
           ),
-          displayError && viewState === "buttons" && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { role: "alert", "data-testid": "flopay-error", style: {
+          displayError && viewState === "buttons" && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { role: "alert", "data-testid": "flopay-error", style: {
             margin: "0.25rem 0",
             padding: "0.625rem 0.875rem",
             background: "#FEF2F2",
@@ -2235,11 +2344,11 @@ function SplitCardFormInner({
             gap: "0.5rem",
             ...bStyles.errorBanner ? bStyles.errorBanner : {}
           }, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", style: { flexShrink: 0 }, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M12 9v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z", stroke: "#DC2626", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", style: { flexShrink: 0 }, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { d: "M12 9v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z", stroke: "#DC2626", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }),
             displayError
           ] })
         ] }),
-        isCardView && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: {
+        isCardView && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: {
           gridArea: "1 / 1",
           ...cardAnim ? { animation: cardAnim } : {},
           ...viewState === "collapsing" ? { pointerEvents: "none" } : {}
@@ -2247,10 +2356,10 @@ function SplitCardFormInner({
       ] })
     ] });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("form", { onSubmit: handleSubmit, className, style: { position: "relative" }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(FloPayKeyframes, {}),
-    overlayStatus && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ProcessingOverlay, { status: overlayStatus, errorMessage: displayError }),
-    showWallets && stripeInstance && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_stripe_js.Elements, { stripe: stripeInstance, options: walletOptions, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("form", { onSubmit: handleSubmit, className, style: { position: "relative" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(FloPayKeyframes, {}),
+    overlayStatus && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ProcessingOverlay, { status: overlayStatus, errorMessage: displayError }),
+    showWallets && stripeInstance && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_stripe_js.Elements, { stripe: stripeInstance, options: walletOptions, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
       WalletButtonInner,
       {
         sessionId,
@@ -2260,10 +2369,11 @@ function SplitCardFormInner({
         showGooglePay,
         onTokenizedBody: dispatchTokenizedBody,
         onErrorChange: updateError,
-        onDecline
+        onDecline,
+        onLoadStateChange: setWalletLoadState
       }
     ) }),
-    showPayPal && paypalStripeInstance && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_stripe_js.Elements, { stripe: paypalStripeInstance, options: paypalOptions, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    showPayPal && paypalStripeInstance && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_stripe_js.Elements, { stripe: paypalStripeInstance, options: paypalOptions, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
       PayPalButtonInner,
       {
         sessionId,
@@ -2272,10 +2382,12 @@ function SplitCardFormInner({
         onTokenizedBody: dispatchTokenizedBody,
         onErrorChange: updateError,
         isProcessing: isSubmitting,
-        onDecline
+        onDecline,
+        onLoadStateChange: setPaypalLoadState
       }
     ) }),
-    (showWallets && stripeInstance || showPayPal && paypalStripeInstance) && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: {
+    showInAppBrowserNotice && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(InAppBrowserNotice, {}),
+    (showWallets && stripeInstance || showPayPal && paypalStripeInstance) && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: {
       display: "flex",
       alignItems: "center",
       gap: "0.75rem",
@@ -2283,9 +2395,9 @@ function SplitCardFormInner({
       color: "#999",
       fontSize: "0.85rem"
     }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: { flex: 1, height: 1, backgroundColor: "#ddd" } }),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: "or pay with card" }),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: { flex: 1, height: 1, backgroundColor: "#ddd" } })
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { flex: 1, height: 1, backgroundColor: "#ddd" } }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { children: "or pay with card" }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { flex: 1, height: 1, backgroundColor: "#ddd" } })
     ] }),
     cardFormBlock
   ] });
@@ -2726,15 +2838,31 @@ async function handleSavedPaymentRedirectResult(redirectResult, {
         { checkoutMethod: "paypal" }
       );
     }
-    const confirmParams = {
-      return_url: returnUrl ?? resolveSavedPaymentReturnUrl(session) ?? window.location.href
-    };
     if (redirectResult.paymentMethodId) {
-      confirmParams["payment_method"] = redirectResult.paymentMethodId;
+      const { error: error2 } = await paypalStripe.handleNextAction({
+        clientSecret: redirectResult.threeDSecureToken
+      });
+      if (error2) {
+        throw Object.assign(
+          new import_shared6.FloPayError(
+            error2.message ?? "PayPal authorization failed.",
+            "api_error",
+            { code: error2.code }
+          ),
+          { checkoutMethod: "paypal" }
+        );
+      }
+      return {
+        status: "succeeded",
+        checkoutMethod: "paypal"
+      };
     }
     const { error } = await paypalStripe.confirmPayment({
       clientSecret: redirectResult.threeDSecureToken,
-      confirmParams,
+      confirmParams: {
+        return_url: returnUrl ?? resolveSavedPaymentReturnUrl(session) ?? window.location.href,
+        payment_method_data: { type: "paypal" }
+      },
       redirect: "if_required"
     });
     if (error) {
@@ -2808,7 +2936,7 @@ async function loadSavedPaymentProviders({
 }
 
 // src/flopay-checkout.tsx
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_jsx_runtime7 = require("react/jsx-runtime");
 var DEFAULT_BUTTONS_LAYOUT_BUTTON_HEIGHT2 = 44;
 var PAYPAL_RESUME_STORAGE_KEY = "flopay_checkout_saved_payment_resume";
 var sessionInflightMap = /* @__PURE__ */ new Map();
@@ -2911,37 +3039,37 @@ function FloPayCheckout({
   const resolvedBillingUrl = (0, import_shared7.resolveBillingApiUrl)(billingApiUrl);
   const checkoutType = createSessionParams ? "embedded_checkout" : "standard_checkout";
   const checkoutLayout = children ? "custom_layout" : layout === "buttons" ? "buttons_layout" : "default_layout";
-  const [unified, setUnified] = (0, import_react8.useState)(null);
-  const [flopay, setFloPay] = (0, import_react8.useState)(null);
-  const flopayRef = (0, import_react8.useRef)(null);
-  const [paypalFlopay, setPaypalFloPay] = (0, import_react8.useState)(null);
-  const paypalFlopayRef = (0, import_react8.useRef)(null);
-  const [session, setSession] = (0, import_react8.useState)(null);
-  const [resolvedSessionId, setResolvedSessionId] = (0, import_react8.useState)(sessionIdProp ?? "");
+  const [unified, setUnified] = (0, import_react9.useState)(null);
+  const [flopay, setFloPay] = (0, import_react9.useState)(null);
+  const flopayRef = (0, import_react9.useRef)(null);
+  const [paypalFlopay, setPaypalFloPay] = (0, import_react9.useState)(null);
+  const paypalFlopayRef = (0, import_react9.useRef)(null);
+  const [session, setSession] = (0, import_react9.useState)(null);
+  const [resolvedSessionId, setResolvedSessionId] = (0, import_react9.useState)(sessionIdProp ?? "");
   const activeSessionId = sessionIdProp ?? resolvedSessionId;
   const initSessionDependency = createSessionParams ? "" : activeSessionId;
-  const [isLoading, setIsLoading] = (0, import_react8.useState)(true);
-  const [loadError, setLoadError] = (0, import_react8.useState)(null);
-  const [currentMode, setCurrentMode] = (0, import_react8.useState)("full");
-  const [confirmProcessing, setConfirmProcessing] = (0, import_react8.useState)(false);
-  const [modeError, setModeError] = (0, import_react8.useState)(initialErrorMessage);
-  const [modeOverlayStatus, setModeOverlayStatus] = (0, import_react8.useState)(null);
-  const [modeOverlayError, setModeOverlayError] = (0, import_react8.useState)(null);
-  const [createSessionPatch, setCreateSessionPatch] = (0, import_react8.useState)(void 0);
-  const [createSessionPatchBaseHash, setCreateSessionPatchBaseHash] = (0, import_react8.useState)("");
-  const [cardBootstrapPending, setCardBootstrapPending] = (0, import_react8.useState)(false);
-  const autoCheckoutAttempted = (0, import_react8.useRef)(false);
-  const paypalResumeAttempted = (0, import_react8.useRef)(false);
-  const savedPaymentKeysRef = (0, import_react8.useRef)(null);
-  const onCompleteRef = (0, import_react8.useRef)(onComplete);
+  const [isLoading, setIsLoading] = (0, import_react9.useState)(true);
+  const [loadError, setLoadError] = (0, import_react9.useState)(null);
+  const [currentMode, setCurrentMode] = (0, import_react9.useState)("full");
+  const [confirmProcessing, setConfirmProcessing] = (0, import_react9.useState)(false);
+  const [modeError, setModeError] = (0, import_react9.useState)(initialErrorMessage);
+  const [modeOverlayStatus, setModeOverlayStatus] = (0, import_react9.useState)(null);
+  const [modeOverlayError, setModeOverlayError] = (0, import_react9.useState)(null);
+  const [createSessionPatch, setCreateSessionPatch] = (0, import_react9.useState)(void 0);
+  const [createSessionPatchBaseHash, setCreateSessionPatchBaseHash] = (0, import_react9.useState)("");
+  const [cardBootstrapPending, setCardBootstrapPending] = (0, import_react9.useState)(false);
+  const autoCheckoutAttempted = (0, import_react9.useRef)(false);
+  const paypalResumeAttempted = (0, import_react9.useRef)(false);
+  const savedPaymentKeysRef = (0, import_react9.useRef)(null);
+  const onCompleteRef = (0, import_react9.useRef)(onComplete);
   onCompleteRef.current = onComplete;
-  const onErrorRef = (0, import_react8.useRef)(onError);
+  const onErrorRef = (0, import_react9.useRef)(onError);
   onErrorRef.current = onError;
-  const onDeclineRef = (0, import_react8.useRef)(onDecline);
+  const onDeclineRef = (0, import_react9.useRef)(onDecline);
   onDeclineRef.current = onDecline;
-  const onSessionCompletedRef = (0, import_react8.useRef)(onSessionCompleted);
+  const onSessionCompletedRef = (0, import_react9.useRef)(onSessionCompleted);
   onSessionCompletedRef.current = onSessionCompleted;
-  (0, import_react8.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     console.info("[FloPay] Checkout initialized", {
       sdk_version: import_shared7.SDK_VERSION,
       checkout_type: checkoutType,
@@ -2949,40 +3077,40 @@ function FloPayCheckout({
       billing_api_url: resolvedBillingUrl
     });
   }, [checkoutLayout, checkoutType, resolvedBillingUrl]);
-  const baseCreateSessionHash = (0, import_react8.useMemo)(
+  const baseCreateSessionHash = (0, import_react9.useMemo)(
     () => createSessionParams ? hashCreateParams(createSessionParams) : "",
     [createSessionParams]
   );
-  const activeCreateSessionPatch = (0, import_react8.useMemo)(
+  const activeCreateSessionPatch = (0, import_react9.useMemo)(
     () => createSessionPatchBaseHash === baseCreateSessionHash ? createSessionPatch : void 0,
     [createSessionPatch, createSessionPatchBaseHash, baseCreateSessionHash]
   );
-  const effectiveCreateSessionBase = (0, import_react8.useMemo)(
+  const effectiveCreateSessionBase = (0, import_react9.useMemo)(
     () => createSessionParams ? mergeInlineSessionPatch(createSessionParams, activeCreateSessionPatch) : void 0,
     [createSessionParams, activeCreateSessionPatch]
   );
   const effectiveCreateSessionMode = checkoutModeProp ?? effectiveCreateSessionBase?.checkoutMode ?? "full";
-  const effectiveCreateSession = (0, import_react8.useMemo)(
+  const effectiveCreateSession = (0, import_react9.useMemo)(
     () => effectiveCreateSessionBase ? {
       ...effectiveCreateSessionBase,
       checkoutMode: effectiveCreateSessionMode
     } : void 0,
     [effectiveCreateSessionBase, effectiveCreateSessionMode]
   );
-  (0, import_react8.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     setCreateSessionPatch(void 0);
     setCreateSessionPatchBaseHash(baseCreateSessionHash);
   }, [baseCreateSessionHash]);
-  (0, import_react8.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     setModeError(initialErrorMessage);
   }, [initialErrorMessage]);
-  const emitDecline = (0, import_react8.useCallback)(
+  const emitDecline = (0, import_react9.useCallback)(
     (method, input, overrides) => {
       onDeclineRef.current?.(buildDeclineEvent(method, input, overrides));
     },
     []
   );
-  const runSavedPaymentFlow = (0, import_react8.useCallback)(
+  const runSavedPaymentFlow = (0, import_react9.useCallback)(
     async (sess, options) => {
       setModeError(null);
       setModeOverlayError(null);
@@ -3089,7 +3217,7 @@ function FloPayCheckout({
       resolvedBillingUrl
     ]
   );
-  (0, import_react8.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     if (typeof window === "undefined" || paypalResumeAttempted.current) {
       return;
     }
@@ -3206,7 +3334,7 @@ function FloPayCheckout({
       }
     })();
   }, [emitDecline, locale, normalizeSavedPaymentError, resolvedBillingUrl]);
-  const initializedHashRef = (0, import_react8.useRef)(null);
+  const initializedHashRef = (0, import_react9.useRef)(null);
   function hashCreateParams(params) {
     const key = JSON.stringify({
       c: params?.clientId,
@@ -3230,16 +3358,16 @@ function FloPayCheckout({
     }
     return `flopay_session_${Math.abs(h).toString(36)}`;
   }
-  const createSessionHash = (0, import_react8.useMemo)(
+  const createSessionHash = (0, import_react9.useMemo)(
     () => effectiveCreateSession ? hashCreateParams(effectiveCreateSession) : "",
     [effectiveCreateSession]
   );
-  const createSessionParamsRef = (0, import_react8.useRef)(effectiveCreateSession);
+  const createSessionParamsRef = (0, import_react9.useRef)(effectiveCreateSession);
   createSessionParamsRef.current = effectiveCreateSession;
-  (0, import_react8.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     setResolvedSessionId(sessionIdProp ?? "");
   }, [sessionIdProp]);
-  (0, import_react8.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     autoCheckoutAttempted.current = false;
     setModeError(initialErrorMessage);
     setModeOverlayError(null);
@@ -3282,7 +3410,7 @@ function FloPayCheckout({
     }
     return { sid: sid ?? "", result: realResult };
   }
-  const bootstrapInlineSession = (0, import_react8.useCallback)(
+  const bootstrapInlineSession = (0, import_react9.useCallback)(
     async (patch) => {
       const baseParams = createSessionParamsRef.current;
       if (!baseParams) {
@@ -3343,7 +3471,7 @@ function FloPayCheckout({
     },
     [locale, resolvedBillingUrl]
   );
-  const handleInlineSessionPatch = (0, import_react8.useCallback)(async (patch) => {
+  const handleInlineSessionPatch = (0, import_react9.useCallback)(async (patch) => {
     if (!hasInlineSessionPatchData(patch) || cardBootstrapPending) {
       return {
         sessionId: resolvedSessionId,
@@ -3366,7 +3494,7 @@ function FloPayCheckout({
     resolvedSessionId,
     session
   ]);
-  (0, import_react8.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     let cancelled = false;
     setLoadError(null);
     if (createSessionHash) {
@@ -3520,7 +3648,7 @@ function FloPayCheckout({
     initSessionDependency,
     runSavedPaymentFlow
   ]);
-  const handleConfirmCheckout = (0, import_react8.useCallback)(async () => {
+  const handleConfirmCheckout = (0, import_react9.useCallback)(async () => {
     if (confirmProcessing || !session) return;
     setConfirmProcessing(true);
     setModeError(null);
@@ -3533,7 +3661,7 @@ function FloPayCheckout({
       setConfirmProcessing(false);
     }
   }, [activeSessionId, confirmProcessing, runSavedPaymentFlow, session]);
-  const providerOptions = (0, import_react8.useMemo)(() => {
+  const providerOptions = (0, import_react9.useMemo)(() => {
     if (!unified || !session) return void 0;
     const opts = {
       appearance,
@@ -3552,7 +3680,7 @@ function FloPayCheckout({
   const shouldHandleInlineSessionPatch = Boolean(
     createSessionParams && !children && layout === "buttons" && onBeforeButtonClick && effectiveCreateSessionMode === "full"
   );
-  const checkoutValue = (0, import_react8.useMemo)(
+  const checkoutValue = (0, import_react9.useMemo)(
     () => ({
       session,
       loading: isLoading,
@@ -3574,7 +3702,7 @@ function FloPayCheckout({
     ]
   );
   const shouldShowInterimButtons = Boolean(createSessionParams) && layout === "buttons" && (!flopay || !providerOptions);
-  const modeOverlay = modeOverlayStatus ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  const modeOverlay = modeOverlayStatus ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
     ProcessingOverlay,
     {
       status: modeOverlayStatus,
@@ -3583,31 +3711,31 @@ function FloPayCheckout({
   ) : null;
   if (isLoading) {
     if (loadingNode) {
-      return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
+      return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
         loadingNode,
         modeOverlay
       ] });
     }
     if (layout === "buttons") {
-      const skeletonBar = (h) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: {
+      const skeletonBar = (h) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: {
         height: h,
         borderRadius: 8,
         background: "#e5e7eb",
         animation: "flopay-loading-pulse 1.5s ease-in-out infinite"
       } });
-      return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: "0.5rem" }, children: [
+      return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: "0.5rem" }, children: [
           showPayPal && skeletonBar(DEFAULT_BUTTONS_LAYOUT_BUTTON_HEIGHT2),
           (showApplePay || showGooglePay) && skeletonBar(DEFAULT_BUTTONS_LAYOUT_BUTTON_HEIGHT2),
           skeletonBar(DEFAULT_BUTTONS_LAYOUT_BUTTON_HEIGHT2),
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("style", { children: `@keyframes flopay-loading-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }` })
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("style", { children: `@keyframes flopay-loading-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }` })
         ] }),
         modeOverlay
       ] });
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { display: "flex", justifyContent: "center", padding: 32 }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: {
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: { display: "flex", justifyContent: "center", padding: 32 }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: {
           width: 24,
           height: 24,
           border: "2px solid #e5e7eb",
@@ -3615,14 +3743,14 @@ function FloPayCheckout({
           borderRadius: "50%",
           animation: "spin 0.6s linear infinite"
         } }),
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("style", { children: `@keyframes spin { to { transform: rotate(360deg); } }` })
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("style", { children: `@keyframes spin { to { transform: rotate(360deg); } }` })
       ] }),
       modeOverlay
     ] });
   }
   if (loadError) {
-    if (errorNode) return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_jsx_runtime6.Fragment, { children: errorNode(loadError) });
-    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    if (errorNode) return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_jsx_runtime7.Fragment, { children: errorNode(loadError) });
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
       "div",
       {
         style: {
@@ -3636,8 +3764,8 @@ function FloPayCheckout({
     );
   }
   if (shouldShowInterimButtons) {
-    return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(CheckoutContext.Provider, { value: checkoutValue, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CheckoutContext.Provider, { value: checkoutValue, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
         InterimButtonsView,
         {
           onButtonClick,
@@ -3655,12 +3783,12 @@ function FloPayCheckout({
     ] });
   }
   if (!flopay || !providerOptions) {
-    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_jsx_runtime6.Fragment, { children: modeOverlay });
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_jsx_runtime7.Fragment, { children: modeOverlay });
   }
   if (currentMode === "confirm") {
-    return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(CheckoutContext.Provider, { value: checkoutValue, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(FloPayProvider, { flopay, paypalFlopay, options: providerOptions, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className, children: [
-        modeError && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CheckoutContext.Provider, { value: checkoutValue, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(FloPayProvider, { flopay, paypalFlopay, options: providerOptions, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className, children: [
+        modeError && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
           "div",
           {
             style: {
@@ -3675,7 +3803,7 @@ function FloPayCheckout({
         renderConfirmButton ? renderConfirmButton({
           onConfirm: handleConfirmCheckout,
           isProcessing: confirmProcessing
-        }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
           "button",
           {
             type: "button",
@@ -3700,9 +3828,9 @@ function FloPayCheckout({
       modeOverlay
     ] });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(CheckoutContext.Provider, { value: checkoutValue, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(FloPayProvider, { flopay, paypalFlopay, options: providerOptions, children: children ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
-      modeError && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CheckoutContext.Provider, { value: checkoutValue, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(FloPayProvider, { flopay, paypalFlopay, options: providerOptions, children: children ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
+      modeError && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
         "div",
         {
           style: {
@@ -3717,7 +3845,7 @@ function FloPayCheckout({
           children: modeError
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
         SessionInjector,
         {
           sessionId: activeSessionId,
@@ -3726,7 +3854,7 @@ function FloPayCheckout({
           children
         }
       )
-    ] }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    ] }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
       SplitCardForm,
       {
         sessionId: activeSessionId,
@@ -3777,8 +3905,8 @@ function SessionInjector({
   session,
   children
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_jsx_runtime6.Fragment, { children: import_react8.default.Children.map(children, (child) => {
-    if (!import_react8.default.isValidElement(child)) return child;
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_jsx_runtime7.Fragment, { children: import_react9.default.Children.map(children, (child) => {
+    if (!import_react9.default.isValidElement(child)) return child;
     const existing = child.props;
     const injected = {};
     if (!existing.sessionId) injected.sessionId = sessionId;
@@ -3792,7 +3920,7 @@ function SessionInjector({
         injected.lastName = session.customer.lastName;
     }
     if (Object.keys(injected).length === 0) return child;
-    return import_react8.default.cloneElement(child, injected);
+    return import_react9.default.cloneElement(child, injected);
   }) });
 }
 function InterimButtonsView({
@@ -3810,14 +3938,14 @@ function InterimButtonsView({
   cardBackButtonContent,
   cardTitleContent
 }) {
-  const [showCardForm, setShowCardForm] = (0, import_react8.useState)(false);
+  const [showCardForm, setShowCardForm] = (0, import_react9.useState)(false);
   const isCardOpenControlled = typeof cardOpen === "boolean";
-  (0, import_react8.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     if (isCardOpenControlled) {
       setShowCardForm(cardOpen);
     }
   }, [cardOpen, isCardOpenControlled]);
-  const bStyles = (0, import_react8.useMemo)(() => {
+  const bStyles = (0, import_react9.useMemo)(() => {
     const base = (0, import_shared7.resolveButtonsLayoutTheme)(buttonsTheme);
     if (!stylesOverride) return base;
     return {
@@ -3831,7 +3959,7 @@ function InterimButtonsView({
       title: { ...base.title, ...stylesOverride.title }
     };
   }, [buttonsTheme, stylesOverride]);
-  const skeleton = (h) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: {
+  const skeleton = (h) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: {
     height: h,
     borderRadius: 8,
     background: "#e5e7eb",
@@ -3843,15 +3971,15 @@ function InterimButtonsView({
     const inputBg = bStyles.cardInputBackground ?? "white";
     const hideBackButtonLabel = isEmptySlotContent(cardBackButtonContent);
     const hideTitle = isEmptySlotContent(cardTitleContent);
-    return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: {
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: {
       backgroundColor: bStyles.cardFormContainer?.backgroundColor ?? "white",
       borderRadius: "8px",
       animation: "flopay-interim-expand 0.35s cubic-bezier(0.4, 0, 0.2, 1) both",
       overflow: "hidden",
       ...bStyles.cardFormContainer
     }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { display: "flex", alignItems: "center", padding: "0.75rem 0 0.625rem" }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: { display: "flex", alignItems: "center", padding: "0.75rem 0 0.625rem" }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
           "button",
           {
             type: "button",
@@ -3878,7 +4006,7 @@ function InterimButtonsView({
               ...bStyles.backButton
             },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { style: {
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { style: {
                 display: "inline-flex",
                 alignItems: "center",
                 justifyContent: "center",
@@ -3887,12 +4015,12 @@ function InterimButtonsView({
                 borderRadius: "50%",
                 backgroundColor: "#f3f4f6",
                 ...bStyles.backButtonIcon
-              }, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { d: "M15 18l-6-6 6-6" }) }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(BackButtonContentSlot, { content: cardBackButtonContent })
+              }, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: "M15 18l-6-6 6-6" }) }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(BackButtonContentSlot, { content: cardBackButtonContent })
             ]
           }
         ),
-        hideTitle ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { flex: 1 } }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: {
+        hideTitle ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: { flex: 1 } }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: {
           flex: 1,
           textAlign: "center",
           fontWeight: 600,
@@ -3900,15 +4028,15 @@ function InterimButtonsView({
           color: "#262833",
           paddingRight: 80,
           ...bStyles.title
-        }, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(TitleContentSlot, { content: cardTitleContent }) })
+        }, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(TitleContentSlot, { content: cardTitleContent }) })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { backgroundColor: inputBg, border: `1px solid ${inputBorder}`, borderTopLeftRadius: 8, borderTopRightRadius: 8, padding: 12, height: 45 }, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { width: "60%", height: 14, borderRadius: 4, background: "#e5e7eb", animation: "flopay-interim-pulse 1.5s ease-in-out infinite" } }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { display: "flex" }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { flex: 1, backgroundColor: inputBg, border: `1px solid ${inputBorder}`, borderTop: "none", borderRight: "none", borderBottomLeftRadius: 8, padding: 12, height: 45 }, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { width: "50%", height: 14, borderRadius: 4, background: "#e5e7eb", animation: "flopay-interim-pulse 1.5s ease-in-out infinite" } }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { flex: 1, backgroundColor: inputBg, border: `1px solid ${inputBorder}`, borderTop: "none", borderBottomRightRadius: 8, padding: 12, height: 45 }, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { width: "40%", height: 14, borderRadius: 4, background: "#e5e7eb", animation: "flopay-interim-pulse 1.5s ease-in-out infinite" } }) })
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: { backgroundColor: inputBg, border: `1px solid ${inputBorder}`, borderTopLeftRadius: 8, borderTopRightRadius: 8, padding: 12, height: 45 }, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: { width: "60%", height: 14, borderRadius: 4, background: "#e5e7eb", animation: "flopay-interim-pulse 1.5s ease-in-out infinite" } }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: { display: "flex" }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: { flex: 1, backgroundColor: inputBg, border: `1px solid ${inputBorder}`, borderTop: "none", borderRight: "none", borderBottomLeftRadius: 8, padding: 12, height: 45 }, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: { width: "50%", height: 14, borderRadius: 4, background: "#e5e7eb", animation: "flopay-interim-pulse 1.5s ease-in-out infinite" } }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: { flex: 1, backgroundColor: inputBg, border: `1px solid ${inputBorder}`, borderTop: "none", borderBottomRightRadius: 8, padding: 12, height: 45 }, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: { width: "40%", height: 14, borderRadius: 4, background: "#e5e7eb", animation: "flopay-interim-pulse 1.5s ease-in-out infinite" } }) })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { backgroundColor: inputBg, border: `1px solid ${inputBorder}`, borderRadius: 8, marginTop: 8, padding: 12, height: 45 }, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { width: "45%", height: 14, borderRadius: 4, background: "#e5e7eb", animation: "flopay-interim-pulse 1.5s ease-in-out infinite" } }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: {
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: { backgroundColor: inputBg, border: `1px solid ${inputBorder}`, borderRadius: 8, marginTop: 8, padding: 12, height: 45 }, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: { width: "45%", height: 14, borderRadius: 4, background: "#e5e7eb", animation: "flopay-interim-pulse 1.5s ease-in-out infinite" } }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: {
         height: 50,
         borderRadius: 8,
         marginTop: 16,
@@ -3917,7 +4045,7 @@ function InterimButtonsView({
         ...bStyles.submitButton,
         opacity: 0.5
       } }),
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("style", { children: `
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("style", { children: `
           @keyframes flopay-interim-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }
           @keyframes flopay-interim-expand {
             0% { opacity: 0; max-height: 0; transform: translateY(-12px); }
@@ -3927,10 +4055,10 @@ function InterimButtonsView({
         ` })
     ] });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: "0.5rem" }, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: "0.5rem" }, children: [
     showPayPal && skeleton(DEFAULT_BUTTONS_LAYOUT_BUTTON_HEIGHT2),
     (showApplePay || showGooglePay) && skeleton(DEFAULT_BUTTONS_LAYOUT_BUTTON_HEIGHT2),
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
       "button",
       {
         type: "button",
@@ -3970,10 +4098,10 @@ function InterimButtonsView({
         onMouseUp: (e) => {
           e.currentTarget.style.transform = "scale(1)";
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(CardButtonContentSlot, { content: cardButtonContent })
+        children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CardButtonContentSlot, { content: cardButtonContent })
       }
     ),
-    errorMessage && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: {
+    errorMessage && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: {
       margin: "0.25rem 0",
       padding: "0.625rem 0.875rem",
       background: "#FEF2F2",
@@ -3987,21 +4115,21 @@ function InterimButtonsView({
       gap: "0.5rem",
       ...bStyles.errorBanner
     }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", style: { flexShrink: 0 }, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { d: "M12 9v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z", stroke: "#DC2626", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", style: { flexShrink: 0 }, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: "M12 9v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z", stroke: "#DC2626", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }),
       errorMessage
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("style", { children: `@keyframes flopay-interim-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }` })
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("style", { children: `@keyframes flopay-interim-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }` })
   ] });
 }
 
 // src/checkout-form.tsx
 var import_shared8 = require("@flopay/shared");
-var import_react9 = require("react");
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_react10 = require("react");
+var import_jsx_runtime8 = require("react/jsx-runtime");
 var WALLET_RESUME_KEY2 = "flopay_wallet_resume";
-var CheckoutForm = (0, import_react9.forwardRef)(
+var CheckoutForm = (0, import_react10.forwardRef)(
   function CheckoutForm2(props, ref) {
-    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CheckoutFormInner, { ...props, innerRef: ref });
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(CheckoutFormInner, { ...props, innerRef: ref });
   }
 );
 function CheckoutFormInner({
@@ -4030,27 +4158,27 @@ function CheckoutFormInner({
   const paypalFlopay = usePayPalFloPay();
   const elements = useElements();
   const contextBillingUrl = useBillingApiUrl();
-  const [processing, setProcessing] = (0, import_react9.useState)(false);
-  const [error, setError] = (0, import_react9.useState)(null);
-  const [is3DSActive, setIs3DSActive] = (0, import_react9.useState)(false);
+  const [processing, setProcessing] = (0, import_react10.useState)(false);
+  const [error, setError] = (0, import_react10.useState)(null);
+  const [is3DSActive, setIs3DSActive] = (0, import_react10.useState)(false);
   const displayError = externalError ?? error;
   const isSubmitting = externalProcessing ?? processing;
   const isSelfContained = !onTokenizedBody;
   const baseUrl = (billingApiUrl || contextBillingUrl).replace(/\/+$/, "");
-  const updateError = (0, import_react9.useCallback)(
+  const updateError = (0, import_react10.useCallback)(
     (err) => {
       setError(err);
       onErrorChange?.(err);
     },
     [onErrorChange]
   );
-  const emitDecline = (0, import_react9.useCallback)(
+  const emitDecline = (0, import_react10.useCallback)(
     (input, overrides) => {
       onDecline?.(buildDeclineEvent("card", input, overrides));
     },
     [onDecline]
   );
-  const processPaymentInternal = (0, import_react9.useCallback)(
+  const processPaymentInternal = (0, import_react10.useCallback)(
     async (tokenizedBody, completionPaymentMethodId) => {
       setProcessing(true);
       updateError(null);
@@ -4167,7 +4295,7 @@ function CheckoutFormInner({
     },
     [baseUrl, sessionId, userId, email, firstName, lastName, chv, flopay, paypalFlopay, onComplete, onError, onDecline, updateError, emitDecline]
   );
-  const dispatchTokenizedBody = (0, import_react9.useCallback)(
+  const dispatchTokenizedBody = (0, import_react10.useCallback)(
     (tokenizedBody) => {
       if (onTokenizedBody) {
         onTokenizedBody(tokenizedBody);
@@ -4177,7 +4305,7 @@ function CheckoutFormInner({
     },
     [onTokenizedBody, processPaymentInternal]
   );
-  (0, import_react9.useImperativeHandle)(innerRef, () => ({
+  (0, import_react10.useImperativeHandle)(innerRef, () => ({
     async handleNextAction(secret) {
       if (!flopay) return;
       setIs3DSActive(true);
@@ -4204,7 +4332,7 @@ function CheckoutFormInner({
       }
     }
   }), [flopay, dispatchTokenizedBody, onError, updateError, emitDecline]);
-  (0, import_react9.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     if (typeof window === "undefined") return;
     const stored = localStorage.getItem(WALLET_RESUME_KEY2);
     if (!stored) return;
@@ -4222,7 +4350,7 @@ function CheckoutFormInner({
       localStorage.removeItem(WALLET_RESUME_KEY2);
     }
   }, [sessionId, dispatchTokenizedBody]);
-  const handleSubmit = (0, import_react9.useCallback)(
+  const handleSubmit = (0, import_react10.useCallback)(
     async (e) => {
       e.preventDefault();
       if (!flopay || !elements || isSubmitting) return;
@@ -4312,8 +4440,8 @@ function CheckoutFormInner({
     [flopay, elements, isSubmitting, sessionId, email, baseUrl, isSelfContained, dispatchTokenizedBody, onError, updateError, emitDecline]
   );
   const isReady = flopay !== null && elements !== null;
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("form", { onSubmit: handleSubmit, className, style: { position: "relative" }, children: [
-    (is3DSActive || isSubmitting) && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { "data-testid": "flopay-overlay", style: {
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("form", { onSubmit: handleSubmit, className, style: { position: "relative" }, children: [
+    (is3DSActive || isSubmitting) && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { "data-testid": "flopay-overlay", style: {
       position: "absolute",
       inset: 0,
       background: "rgba(255,255,255,0.7)",
@@ -4322,12 +4450,12 @@ function CheckoutFormInner({
       justifyContent: "center",
       zIndex: 10
     }, children: is3DSActive ? "Verifying payment..." : "Processing..." }),
-    !isReady && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { "data-testid": "flopay-loading", "aria-busy": "true", children: "Loading payment form..." }),
-    isReady && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(PaymentElement, { options: { layout } }),
-      showAddress && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(AddressElement, { options: { mode: showAddress === true ? "billing" : showAddress } }),
-      displayError && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { role: "alert", "data-testid": "flopay-error", style: { color: "red", margin: "0.75rem 0" }, children: displayError }),
-      children ?? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    !isReady && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { "data-testid": "flopay-loading", "aria-busy": "true", children: "Loading payment form..." }),
+    isReady && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(PaymentElement, { options: { layout } }),
+      showAddress && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(AddressElement, { options: { mode: showAddress === true ? "billing" : showAddress } }),
+      displayError && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { role: "alert", "data-testid": "flopay-error", style: { color: "red", margin: "0.75rem 0" }, children: displayError }),
+      children ?? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
         "button",
         {
           type: "submit",
@@ -4342,8 +4470,8 @@ function CheckoutFormInner({
 
 // src/paypal-button.tsx
 var import_shared9 = require("@flopay/shared");
-var import_react10 = require("react");
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_react11 = require("react");
+var import_jsx_runtime9 = require("react/jsx-runtime");
 function PayPalButton({
   sessionId,
   billingApiUrl,
@@ -4360,11 +4488,11 @@ function PayPalButton({
   const flopay = useFloPay();
   const elements = useElements();
   const contextBillingUrl = useBillingApiUrl();
-  const [ready, setReady] = (0, import_react10.useState)(false);
-  const [submitting, setSubmitting] = (0, import_react10.useState)(false);
-  const paypalResumeAttempted = (0, import_react10.useRef)(false);
+  const [ready, setReady] = (0, import_react11.useState)(false);
+  const [submitting, setSubmitting] = (0, import_react11.useState)(false);
+  const paypalResumeAttempted = (0, import_react11.useRef)(false);
   const baseUrl = (billingApiUrl || contextBillingUrl).replace(/\/+$/, "");
-  const processPaymentInternal = (0, import_react10.useCallback)(
+  const processPaymentInternal = (0, import_react11.useCallback)(
     async (tokenizedBody) => {
       try {
         const response = await fetch(`${baseUrl}/v1/checkouts/sessions/process`, {
@@ -4397,7 +4525,7 @@ function PayPalButton({
     },
     [baseUrl, sessionId, userId, email, firstName, lastName, chv, onComplete, onErrorChange]
   );
-  const dispatchTokenizedBody = (0, import_react10.useCallback)(
+  const dispatchTokenizedBody = (0, import_react11.useCallback)(
     (body) => {
       if (onTokenizedBody) {
         onTokenizedBody(body);
@@ -4407,7 +4535,7 @@ function PayPalButton({
     },
     [onTokenizedBody, processPaymentInternal]
   );
-  (0, import_react10.useEffect)(() => {
+  (0, import_react11.useEffect)(() => {
     if (!flopay || paypalResumeAttempted.current) return;
     const params = new URLSearchParams(window.location.search);
     const paymentIntentId = params.get("payment_intent");
@@ -4455,7 +4583,7 @@ function PayPalButton({
       }
     })();
   }, [flopay, dispatchTokenizedBody, onErrorChange]);
-  const handlePayPalConfirm = (0, import_react10.useCallback)(async () => {
+  const handlePayPalConfirm = (0, import_react11.useCallback)(async () => {
     if (!flopay || !elements) return;
     try {
       setSubmitting(true);
@@ -4488,11 +4616,11 @@ function PayPalButton({
     }
   }, [flopay, elements, sessionId, email, baseUrl, dispatchTokenizedBody, onErrorChange]);
   if (!flopay || !elements) {
-    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: { height: 45, background: "#f0f0f0", borderRadius: 6, animation: "pulse 1.5s infinite" } });
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: { height: 45, background: "#f0f0f0", borderRadius: 6, animation: "pulse 1.5s infinite" } });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
-    !ready && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: { height: 45, background: "#f0f0f0", borderRadius: 6 } }),
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: ready ? {} : { display: "none" }, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
+    !ready && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: { height: 45, background: "#f0f0f0", borderRadius: 6 } }),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: ready ? {} : { display: "none" }, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
       "button",
       {
         type: "button",
@@ -4514,7 +4642,7 @@ function PayPalButton({
         children: submitting ? "Processing..." : "PayPal"
       }
     ) }),
-    (submitting || isProcessing) && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: {
+    (submitting || isProcessing) && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: {
       position: "fixed",
       inset: 0,
       background: "rgba(0,0,0,0.4)",
@@ -4522,7 +4650,7 @@ function PayPalButton({
       alignItems: "center",
       justifyContent: "center",
       zIndex: 1e3
-    }, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: {
+    }, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: {
       background: "white",
       borderRadius: 8,
       padding: "1.5rem",
@@ -4534,10 +4662,10 @@ function PayPalButton({
 }
 
 // src/automatic-payment-button.tsx
-var import_react11 = require("react");
+var import_react12 = require("react");
 var import_js3 = require("@flopay/js");
 var import_shared10 = require("@flopay/shared");
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_jsx_runtime10 = require("react/jsx-runtime");
 var DEFAULT_BUTTONS_LAYOUT_BUTTON_HEIGHT3 = 44;
 var PAYPAL_RESUME_STORAGE_KEY2 = "flopay_automatic_payment_button_resume";
 function sleep2(ms) {
@@ -4654,11 +4782,11 @@ function FloPayAutomaticPaymentButton({
   style,
   ...buttonProps
 }) {
-  const resolvedBillingUrl = (0, import_react11.useMemo)(
+  const resolvedBillingUrl = (0, import_react12.useMemo)(
     () => (0, import_shared10.resolveBillingApiUrl)(billingApiUrl),
     [billingApiUrl]
   );
-  const createSessionDraft = (0, import_react11.useMemo)(
+  const createSessionDraft = (0, import_react12.useMemo)(
     () => resolveCreateSessionDraft({
       createSession,
       clientId,
@@ -4684,11 +4812,11 @@ function FloPayAutomaticPaymentButton({
       utmMetadata
     ]
   );
-  const [isProcessing, setIsProcessing] = (0, import_react11.useState)(false);
-  const [overlayStatus, setOverlayStatus] = (0, import_react11.useState)(null);
-  const [overlayError, setOverlayError] = (0, import_react11.useState)(null);
-  const [fallbackSession, setFallbackSession] = (0, import_react11.useState)(null);
-  const automaticPaymentToken = (0, import_react11.useMemo)(
+  const [isProcessing, setIsProcessing] = (0, import_react12.useState)(false);
+  const [overlayStatus, setOverlayStatus] = (0, import_react12.useState)(null);
+  const [overlayError, setOverlayError] = (0, import_react12.useState)(null);
+  const [fallbackSession, setFallbackSession] = (0, import_react12.useState)(null);
+  const automaticPaymentToken = (0, import_react12.useMemo)(
     () => paymentMethodId ? {
       id: paymentMethodId,
       type: "card",
@@ -4696,31 +4824,31 @@ function FloPayAutomaticPaymentButton({
     } : void 0,
     [checkoutMethod, paymentMethodId]
   );
-  const isMountedRef = (0, import_react11.useRef)(true);
-  const resumeAttemptedRef = (0, import_react11.useRef)(false);
-  const fallbackSessionRef = (0, import_react11.useRef)(fallbackSession);
-  const onSuccessRef = (0, import_react11.useRef)(onSuccess);
-  const onErrorRef = (0, import_react11.useRef)(onError);
-  const onDeclineRef = (0, import_react11.useRef)(onDecline);
-  (0, import_react11.useEffect)(() => {
+  const isMountedRef = (0, import_react12.useRef)(true);
+  const resumeAttemptedRef = (0, import_react12.useRef)(false);
+  const fallbackSessionRef = (0, import_react12.useRef)(fallbackSession);
+  const onSuccessRef = (0, import_react12.useRef)(onSuccess);
+  const onErrorRef = (0, import_react12.useRef)(onError);
+  const onDeclineRef = (0, import_react12.useRef)(onDecline);
+  (0, import_react12.useEffect)(() => {
     fallbackSessionRef.current = fallbackSession;
   }, [fallbackSession]);
-  (0, import_react11.useEffect)(() => {
+  (0, import_react12.useEffect)(() => {
     onSuccessRef.current = onSuccess;
   }, [onSuccess]);
-  (0, import_react11.useEffect)(() => {
+  (0, import_react12.useEffect)(() => {
     onErrorRef.current = onError;
   }, [onError]);
-  (0, import_react11.useEffect)(() => {
+  (0, import_react12.useEffect)(() => {
     onDeclineRef.current = onDecline;
   }, [onDecline]);
-  (0, import_react11.useEffect)(() => {
+  (0, import_react12.useEffect)(() => {
     isMountedRef.current = true;
     return () => {
       isMountedRef.current = false;
     };
   }, []);
-  (0, import_react11.useEffect)(() => {
+  (0, import_react12.useEffect)(() => {
     if (!fallbackSession || typeof window === "undefined") {
       return;
     }
@@ -4734,13 +4862,13 @@ function FloPayAutomaticPaymentButton({
       window.removeEventListener("keydown", handleKeyDown);
     };
   }, [fallbackSession]);
-  const emitDecline = (0, import_react11.useCallback)((error, method = DEFAULT_SAVED_PAYMENT_DECLINE_METHOD) => {
+  const emitDecline = (0, import_react12.useCallback)((error, method = DEFAULT_SAVED_PAYMENT_DECLINE_METHOD) => {
     onDeclineRef.current?.(buildDeclineEvent(method, error, {
       code: error.code,
       declineCode: error.declineCode
     }));
   }, []);
-  const showSuccess = (0, import_react11.useCallback)(async (event) => {
+  const showSuccess = (0, import_react12.useCallback)(async (event) => {
     if (!isMountedRef.current) return;
     setOverlayError(null);
     setOverlayStatus("success");
@@ -4748,7 +4876,7 @@ function FloPayAutomaticPaymentButton({
     if (!isMountedRef.current) return;
     onSuccessRef.current?.(event);
   }, []);
-  const showError = (0, import_react11.useCallback)(async (error, options) => {
+  const showError = (0, import_react12.useCallback)(async (error, options) => {
     if (!isMountedRef.current) return;
     onErrorRef.current?.(error);
     if (options?.emitDecline) {
@@ -4758,7 +4886,7 @@ function FloPayAutomaticPaymentButton({
     setOverlayStatus("error");
     await sleep2(PROCESSING_OVERLAY_ERROR_DELAY_MS);
   }, [emitDecline]);
-  const processResolvedSession = (0, import_react11.useCallback)(async (apiResult, resolvedSessionId, options) => {
+  const processResolvedSession = (0, import_react12.useCallback)(async (apiResult, resolvedSessionId, options) => {
     const session = apiResult.data.session ?? null;
     if (!session) {
       throw new import_shared10.FloPayError("No session data returned", "api_error");
@@ -4925,6 +5053,14 @@ function FloPayAutomaticPaymentButton({
       if (floPayErr.code === "payment_intent_unexpected_state" && inResumeWindow) {
         return;
       }
+      const isSilentFallbackCase = (floPayErr.code === "paypal_requires_user_interaction" || floPayErr.code === "payment_intent_unexpected_state") && shouldShowFallbackCheckout(floPayErr, fallbackSessionId) && !!fallbackSessionId && isMountedRef.current;
+      if (isSilentFallbackCase) {
+        setFallbackSession({
+          sessionId: fallbackSessionId,
+          errorMessage: ""
+        });
+        return;
+      }
       await showError(floPayErr, {
         emitDecline: true,
         method: floPayErr.checkoutMethod ?? DEFAULT_SAVED_PAYMENT_DECLINE_METHOD
@@ -4945,7 +5081,7 @@ function FloPayAutomaticPaymentButton({
     showError,
     showSuccess
   ]);
-  const handleButtonClick = (0, import_react11.useCallback)(async (event) => {
+  const handleButtonClick = (0, import_react12.useCallback)(async (event) => {
     buttonProps.onClick?.(event);
     if (event.defaultPrevented || disabled || isProcessing) {
       return;
@@ -5027,7 +5163,7 @@ function FloPayAutomaticPaymentButton({
     showError,
     showSuccess
   ]);
-  const handleFallbackComplete = (0, import_react11.useCallback)((result) => {
+  const handleFallbackComplete = (0, import_react12.useCallback)((result) => {
     const activeFallback = fallbackSessionRef.current;
     setFallbackSession(null);
     onSuccessRef.current?.({
@@ -5037,13 +5173,13 @@ function FloPayAutomaticPaymentButton({
       autoCompleted: false
     });
   }, []);
-  const handleFallbackError = (0, import_react11.useCallback)((error) => {
+  const handleFallbackError = (0, import_react12.useCallback)((error) => {
     onErrorRef.current?.(error);
   }, []);
-  const handleFallbackDecline = (0, import_react11.useCallback)((decline) => {
+  const handleFallbackDecline = (0, import_react12.useCallback)((decline) => {
     onDeclineRef.current?.(decline);
   }, []);
-  (0, import_react11.useEffect)(() => {
+  (0, import_react12.useEffect)(() => {
     if (typeof window === "undefined" || resumeAttemptedRef.current) {
       return;
     }
@@ -5174,7 +5310,7 @@ function FloPayAutomaticPaymentButton({
       }
     })();
   }, [locale, resolvedBillingUrl, showError, showSuccess]);
-  const bStyles = (0, import_react11.useMemo)(() => {
+  const bStyles = (0, import_react12.useMemo)(() => {
     const base = (0, import_shared10.resolveButtonsLayoutTheme)(buttonsTheme);
     if (!stylesOverride) return base;
     return {
@@ -5184,8 +5320,8 @@ function FloPayAutomaticPaymentButton({
     };
   }, [buttonsTheme, stylesOverride]);
   const cardButtonSizing = children === void 0 ? { boxSizing: "border-box", height: DEFAULT_BUTTONS_LAYOUT_BUTTON_HEIGHT3, padding: "0 1rem" } : { padding: "0.9rem 1rem" };
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
       "button",
       {
         ...buttonProps,
@@ -5226,17 +5362,17 @@ function FloPayAutomaticPaymentButton({
             e.currentTarget.style.transform = "scale(1)";
           }
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(CardButtonContentSlot, { content: children })
+        children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(CardButtonContentSlot, { content: children })
       }
     ),
-    overlayStatus && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    overlayStatus && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
       ProcessingOverlay,
       {
         status: overlayStatus,
         errorMessage: overlayError
       }
     ),
-    fallbackSession && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    fallbackSession && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
       "div",
       {
         "data-testid": "flopay-automatic-payment-fallback",
@@ -5257,7 +5393,7 @@ function FloPayAutomaticPaymentButton({
           padding: "1.5rem",
           zIndex: 1100
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
           "div",
           {
             style: {
@@ -5273,7 +5409,7 @@ function FloPayAutomaticPaymentButton({
               flexDirection: "column",
               gap: "1rem"
             },
-            children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
               FloPayCheckout,
               {
                 sessionId: fallbackSession.sessionId,
@@ -5304,6 +5440,7 @@ function FloPayAutomaticPaymentButton({
   FloPayAutomaticPaymentButton,
   FloPayCheckout,
   FloPayProvider,
+  InAppBrowserNotice,
   PayPalButton,
   PaymentElement,
   SplitCardForm,