@flopay/react 0.5.17 → 0.5.19

package/dist/index.mjs

@@ -100,8 +100,8 @@ function FloPayProvider({
 }
 
 // src/flopay-checkout.tsx
-import React7, { useCallback as useCallback3, useEffect as useEffect5, useMemo as useMemo3, useRef as useRef3, useState as useState4 } from "react";
-import { PaymentAPI as PaymentAPI2 } from "@flopay/js";
+import React6, { useCallback as useCallback2, useEffect as useEffect4, useMemo as useMemo3, useRef as useRef3, useState as useState3 } from "react";
+import { PaymentAPI as PaymentAPI3 } from "@flopay/js";
 import { SDK_VERSION, FloPayError as FloPayError4, resolveBillingApiUrl as resolveBillingApiUrl3, buildCheckoutDisplayData, resolveButtonsLayoutTheme as resolveButtonsLayoutTheme2 } from "@flopay/shared";
 
 // src/card-button-content.tsx
@@ -248,7 +248,8 @@ import {
   isAVSFieldVisible,
   getStateFromPostalCode
 } from "@flopay/shared";
-import { forwardRef, useCallback as useCallback2, useContext as useContext3, useEffect as useEffect4, useImperativeHandle, useMemo as useMemo2, useRef as useRef2, useState as useState3 } from "react";
+import { PaymentAPI } from "@flopay/js";
+import { forwardRef, useCallback, useContext as useContext3, useEffect as useEffect3, useImperativeHandle, useMemo as useMemo2, useRef as useRef2, useState as useState2 } from "react";
 
 // src/hooks.ts
 import { useContext as useContext2 } from "react";
@@ -621,9 +622,6 @@ function wasSessionRecentlyCompleted(sessionId) {
   }
 }
 
-// src/in-app-browser-notice.tsx
-import { useCallback, useEffect as useEffect3, useState as useState2 } from "react";
-
 // src/in-app-browser.ts
 function isInAppBrowser(userAgent) {
   const ua = userAgent ?? (typeof navigator !== "undefined" ? navigator.userAgent : "");
@@ -639,101 +637,9 @@ function isInAppBrowser(userAgent) {
   return false;
 }
 
-// src/in-app-browser-notice.tsx
-import { jsx as jsx5, jsxs as jsxs3 } from "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,
-  copiedButtonLabel,
-  containerStyle,
-  buttonStyle,
-  onOpenInBrowser
-}) {
-  const [copied, setCopied] = useState2(false);
-  const [inAppBrowser, setInAppBrowser] = useState2(false);
-  useEffect3(() => {
-    setInAppBrowser(isInAppBrowser());
-  }, []);
-  const defaultOpenLabel = inAppBrowser ? "Copy link" : "Open in browser";
-  const defaultCopiedLabel = inAppBrowser ? "Link copied \u2014 open Safari/Chrome and paste" : "Link copied \u2014 paste in your browser";
-  const effectiveOpenLabel = openButtonLabel ?? defaultOpenLabel;
-  const effectiveCopiedLabel = copiedButtonLabel ?? defaultCopiedLabel;
-  const handleClick = useCallback(async () => {
-    if (typeof window === "undefined") return;
-    const url = window.location.href;
-    let opened = false;
-    if (!inAppBrowser) {
-      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 });
-  }, [inAppBrowser, onOpenInBrowser]);
-  return /* @__PURE__ */ jsxs3(
-    "div",
-    {
-      role: "status",
-      "data-testid": "flopay-in-app-browser-notice",
-      style: {
-        marginTop: "0.75rem",
-        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__ */ jsx5("span", { children: message ?? DEFAULT_MESSAGE }),
-        /* @__PURE__ */ jsx5(
-          "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 ? effectiveCopiedLabel : effectiveOpenLabel
-          }
-        )
-      ]
-    }
-  );
-}
-
 // src/split-card-form.tsx
 import { FloPayError as FloPayError2 } from "@flopay/shared";
-import { Fragment as Fragment2, jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
 var WALLET_RESUME_KEY = "flopay_wallet_resume";
 var FLOPAY_KEYFRAMES = `
 @keyframes flopay-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }
@@ -775,7 +681,7 @@ function normalizeBeforeButtonClickError(method, err) {
   );
 }
 function FloPayKeyframes() {
-  return /* @__PURE__ */ jsx6("style", { children: FLOPAY_KEYFRAMES });
+  return /* @__PURE__ */ jsx5("style", { children: FLOPAY_KEYFRAMES });
 }
 function toCssSize(value) {
   if (typeof value === "number") return `${value}px`;
@@ -796,8 +702,8 @@ function ExpressCheckoutReadySwap({
   children
 }) {
   if (state === "unavailable" || state === "load_error") return null;
-  return /* @__PURE__ */ jsxs4("div", { style: { position: "relative", minHeight: 44 }, children: [
-    /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsxs3("div", { style: { position: "relative", minHeight: 44 }, children: [
+    /* @__PURE__ */ jsx5(
       "div",
       {
         "data-testid": placeholderTestId,
@@ -816,7 +722,7 @@ function ExpressCheckoutReadySwap({
         }
       }
     ),
-    /* @__PURE__ */ jsx6(
+    /* @__PURE__ */ jsx5(
       "div",
       {
         style: {
@@ -831,9 +737,12 @@ function ExpressCheckoutReadySwap({
     )
   ] });
 }
+function isExpressCheckoutRowVisible(state) {
+  return state !== "unavailable" && state !== "load_error";
+}
 var SplitCardForm = forwardRef(
   function SplitCardForm2(props, ref) {
-    return /* @__PURE__ */ jsx6(SplitCardFormInner, { ...props, innerRef: ref });
+    return /* @__PURE__ */ jsx5(SplitCardFormInner, { ...props, innerRef: ref });
   }
 );
 function PayPalButtonInner({
@@ -850,19 +759,15 @@ function PayPalButtonInner({
 }) {
   const stripe = useStripeRaw();
   const elements = useStripeElements();
-  const [loadState, setLoadState] = useState3("loading");
-  const onLoadStateChangeRef = useRef2(onLoadStateChange);
-  useEffect4(() => {
-    onLoadStateChangeRef.current = onLoadStateChange;
-  }, [onLoadStateChange]);
-  useEffect4(() => {
-    onLoadStateChangeRef.current?.(loadState);
-  }, [loadState]);
-  const [submitting, setSubmitting] = useState3(false);
+  const [loadState, setLoadState] = useState2("loading");
+  useEffect3(() => {
+    onLoadStateChange?.(loadState);
+  }, [loadState, onLoadStateChange]);
+  const [submitting, setSubmitting] = useState2(false);
   const paypalResumeAttempted = useRef2(false);
   const beforeClickRef = useRef2(null);
   const baseUrl = billingApiUrl.replace(/\/+$/, "");
-  useEffect4(() => {
+  useEffect3(() => {
     if (!stripe || paypalResumeAttempted.current) return;
     const params = new URLSearchParams(window.location.search);
     const paymentIntentId = params.get("payment_intent");
@@ -909,7 +814,7 @@ function PayPalButtonInner({
       }
     })();
   }, [stripe, onTokenizedBody, onErrorChange, onDecline]);
-  const handlePayPalClick = useCallback2(async (event) => {
+  const handlePayPalClick = useCallback(async (event) => {
     if (isProcessing || submitting) {
       event.reject();
       return;
@@ -927,7 +832,7 @@ function PayPalButtonInner({
     onButtonClick?.("paypal");
     event.resolve();
   }, [isProcessing, onButtonClick, runBeforeButtonClick, submitting]);
-  const handlePayPalConfirm = useCallback2(async (event) => {
+  const handlePayPalConfirm = useCallback(async (event) => {
     if (!stripe || !elements) return;
     let prepared = beforeClickRef.current;
     beforeClickRef.current = null;
@@ -1019,8 +924,8 @@ function PayPalButtonInner({
       setSubmitting(false);
     }
   }, [stripe, elements, sessionId, email, baseUrl, onTokenizedBody, onErrorChange, onDecline, runBeforeButtonClick]);
-  return /* @__PURE__ */ jsxs4(Fragment2, { children: [
-    /* @__PURE__ */ jsx6(ExpressCheckoutReadySwap, { state: loadState, placeholderTestId: "flopay-paypal-placeholder", children: /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsxs3(Fragment2, { children: [
+    /* @__PURE__ */ jsx5(ExpressCheckoutReadySwap, { state: loadState, placeholderTestId: "flopay-paypal-placeholder", children: /* @__PURE__ */ jsx5(
       ExpressCheckoutElement,
       {
         onReady: (event) => setLoadState(resolveExpressCheckoutLoadState(event, ["paypal"])),
@@ -1045,7 +950,7 @@ function PayPalButtonInner({
         }
       }
     ) }),
-    submitting && /* @__PURE__ */ jsx6(ProcessingOverlay, { status: "processing" })
+    submitting && /* @__PURE__ */ jsx5(ProcessingOverlay, { status: "processing" })
   ] });
 }
 function WalletButtonInner({
@@ -1063,19 +968,15 @@ function WalletButtonInner({
 }) {
   const stripe = useStripeRaw();
   const elements = useStripeElements();
-  const [loadState, setLoadState] = useState3("loading");
-  const onLoadStateChangeRef = useRef2(onLoadStateChange);
-  useEffect4(() => {
-    onLoadStateChangeRef.current = onLoadStateChange;
-  }, [onLoadStateChange]);
-  useEffect4(() => {
-    onLoadStateChangeRef.current?.(loadState);
-  }, [loadState]);
-  const [submitting, setSubmitting] = useState3(false);
+  const [loadState, setLoadState] = useState2("loading");
+  useEffect3(() => {
+    onLoadStateChange?.(loadState);
+  }, [loadState, onLoadStateChange]);
+  const [submitting, setSubmitting] = useState2(false);
   const baseUrl = billingApiUrl.replace(/\/+$/, "");
   const lastWalletMethodRef = useRef2("card");
   const beforeClickRef = useRef2(null);
-  const handleWalletConfirm = useCallback2(
+  const handleWalletConfirm = useCallback(
     async (event) => {
       if (!stripe || !elements) return;
       const walletType = event.expressPaymentType;
@@ -1164,8 +1065,8 @@ function WalletButtonInner({
     },
     [stripe, elements, sessionId, email, baseUrl, onTokenizedBody, onErrorChange, onDecline, runBeforeButtonClick]
   );
-  return /* @__PURE__ */ jsxs4(Fragment2, { children: [
-    /* @__PURE__ */ jsx6(ExpressCheckoutReadySwap, { state: loadState, placeholderTestId: "flopay-wallet-placeholder", children: /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsxs3(Fragment2, { children: [
+    /* @__PURE__ */ jsx5(ExpressCheckoutReadySwap, { state: loadState, placeholderTestId: "flopay-wallet-placeholder", children: /* @__PURE__ */ jsx5(
       ExpressCheckoutElement,
       {
         onReady: (event) => setLoadState(resolveExpressCheckoutLoadState(event, ["applePay", "googlePay"])),
@@ -1204,7 +1105,7 @@ function WalletButtonInner({
         }
       }
     ) }),
-    submitting && /* @__PURE__ */ jsx6(ProcessingOverlay, { status: "processing" })
+    submitting && /* @__PURE__ */ jsx5(ProcessingOverlay, { status: "processing" })
   ] });
 }
 function SplitCardFormInner({
@@ -1263,16 +1164,16 @@ function SplitCardFormInner({
   const elements = useElements();
   const checkout = useContext3(CheckoutContext);
   const contextBillingUrl = useBillingApiUrl();
-  const [processing, setProcessing] = useState3(false);
-  const [error, setError] = useState3(null);
-  const [is3DSActive, setIs3DSActive] = useState3(false);
-  const [selectedCountry, setSelectedCountry] = useState3(countryProp ?? "US");
-  const [zipCode, setZipCode] = useState3(zipProp ?? "");
-  const [addressLine1, setAddressLine1] = useState3(addressLine1Prop ?? "");
-  const [addressLine2, setAddressLine2] = useState3(addressLine2Prop ?? "");
-  const [city, setCity] = useState3(cityProp ?? "");
-  const [stateValue, setStateValue] = useState3(stateProp ?? "");
-  const [accountPatch, setAccountPatch] = useState3({});
+  const [processing, setProcessing] = useState2(false);
+  const [error, setError] = useState2(null);
+  const [is3DSActive, setIs3DSActive] = useState2(false);
+  const [selectedCountry, setSelectedCountry] = useState2(countryProp ?? "US");
+  const [zipCode, setZipCode] = useState2(zipProp ?? "");
+  const [addressLine1, setAddressLine1] = useState2(addressLine1Prop ?? "");
+  const [addressLine2, setAddressLine2] = useState2(addressLine2Prop ?? "");
+  const [city, setCity] = useState2(cityProp ?? "");
+  const [stateValue, setStateValue] = useState2(stateProp ?? "");
+  const [accountPatch, setAccountPatch] = useState2({});
   const zipCodeRef = useRef2(zipProp ?? "");
   const selectedCountryRef = useRef2(countryProp ?? "US");
   const addressLine1Ref = useRef2(addressLine1Prop ?? "");
@@ -1281,25 +1182,25 @@ function SplitCardFormInner({
   const stateRef = useRef2(stateProp ?? "");
   const avsConfig = useMemo2(() => resolveAVSConfig(enableAVSProp), [enableAVSProp]);
   const enableAVS = avsConfig !== null;
-  const [viewState, setViewState] = useState3(initialCardOpen ? "card" : "buttons");
+  const [viewState, setViewState] = useState2(initialCardOpen ? "card" : "buttons");
   const showCardForm = viewState === "expanding" || viewState === "card";
   const TRANSITION_MS = 280;
-  const expandToCard = useCallback2(() => {
+  const expandToCard = useCallback(() => {
     setViewState("expanding");
     setTimeout(() => setViewState("card"), TRANSITION_MS);
   }, []);
-  const collapseToButtons = useCallback2(() => {
+  const collapseToButtons = useCallback(() => {
     setViewState("collapsing");
     setTimeout(() => setViewState("buttons"), TRANSITION_MS);
   }, []);
-  useEffect4(() => {
+  useEffect3(() => {
     if (layout === "buttons" && initialCardOpen) {
       setViewState("card");
     }
   }, [layout, initialCardOpen]);
-  const [fullName, setFullName] = useState3("");
-  const [formReady, setFormReady] = useState3(false);
-  const [overlayStatus, setOverlayStatus] = useState3(null);
+  const [fullName, setFullName] = useState2("");
+  const [formReady, setFormReady] = useState2(false);
+  const [overlayStatus, setOverlayStatus] = useState2(null);
   const processingRef = useRef2(false);
   const resolvedBillingApiUrl = billingApiUrl || contextBillingUrl;
   const displayError = externalError ?? error;
@@ -1352,39 +1253,40 @@ function SplitCardFormInner({
     captureMethod: "manual",
     setupFutureUsage: "off_session"
   }), [amountInCents, currency]);
-  const updateError = useCallback2(
+  const updateError = useCallback(
     (err) => {
       setError(err);
       onErrorChange?.(err);
     },
     [onErrorChange]
   );
-  const emitDecline = useCallback2(
+  const emitDecline = useCallback(
     (method, input, overrides) => {
       onDecline?.(buildDeclineEvent(method, input, overrides));
     },
     [onDecline]
   );
   const showWallets = showApplePay || showGooglePay;
-  const [paypalLoadState, setPaypalLoadState] = useState3("loading");
-  const [walletLoadState, setWalletLoadState] = useState3("loading");
-  const [inAppBrowserDetected, setInAppBrowserDetected] = useState3(false);
-  useEffect4(() => {
+  const [paypalLoadState, setPaypalLoadState] = useState2("loading");
+  const [walletLoadState, setWalletLoadState] = useState2("loading");
+  const [inAppBrowserDetected, setInAppBrowserDetected] = useState2();
+  useEffect3(() => {
     setInAppBrowserDetected(isInAppBrowser());
   }, []);
-  const expectedPayPal = showPayPal && !!paypalStripeInstance;
-  const expectedWallets = showWallets && !!stripeInstance;
-  const paypalLoadFailed = expectedPayPal && (paypalLoadState === "load_error" || paypalLoadState === "unavailable");
-  const walletsLoadFailed = expectedWallets && walletLoadState === "load_error";
-  const showInAppBrowserNotice = (expectedPayPal || expectedWallets) && (inAppBrowserDetected || paypalLoadFailed || walletsLoadFailed);
-  const handleNameChange = useCallback2((value) => {
+  const shouldShowPayPal = showPayPal && inAppBrowserDetected === false;
+  const shouldShowWallets = showWallets && inAppBrowserDetected === false;
+  const shouldRenderPayPal = shouldShowPayPal && !!paypalStripeInstance;
+  const shouldRenderWallets = shouldShowWallets && !!stripeInstance;
+  const shouldDisplayPayPalRow = shouldRenderPayPal && isExpressCheckoutRowVisible(paypalLoadState);
+  const shouldDisplayWalletRow = shouldRenderWallets && isExpressCheckoutRowVisible(walletLoadState);
+  const handleNameChange = 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 = useCallback2(
+  const applyInlineSessionPatch = useCallback(
     (patch, method) => {
       if (!checkout.applyInlineSessionPatch) {
         return Promise.resolve({ error: null, sessionId });
@@ -1401,7 +1303,7 @@ function SplitCardFormInner({
     },
     [checkout.applyInlineSessionPatch, onError, sessionId, updateError]
   );
-  const runBeforeButtonClick = useCallback2(async (method) => {
+  const runBeforeButtonClick = useCallback(async (method) => {
     if (!onBeforeButtonClick) return { proceed: true };
     try {
       const result = await onBeforeButtonClick({
@@ -1437,7 +1339,7 @@ function SplitCardFormInner({
       return { proceed: false };
     }
   }, [applyInlineSessionPatch, checkout.inlineSessionDraft, onBeforeButtonClick, onError, sessionId, updateError]);
-  const processPaymentInternal = useCallback2(
+  const processPaymentInternal = useCallback(
     async (tokenizedBody, overrides) => {
       if (processingRef.current) return;
       processingRef.current = true;
@@ -1449,53 +1351,47 @@ function SplitCardFormInner({
       const resolvedCompletionPaymentMethodId = overrides?.completionPaymentMethodId ?? resolveTokenizedPaymentMethodId(tokenizedBody);
       const requestTokenizedBody = tokenizedBody.originalPaymentMethodId ? { ...tokenizedBody, originalPaymentMethodId: void 0 } : tokenizedBody;
       try {
-        const response = await fetch(`${baseUrl}/v1/checkouts/sessions/process`, {
-          method: "POST",
-          headers: {
-            "Content-Type": "application/json",
-            "x-user-id": effectiveAccount.userId ?? ""
+        const api = new PaymentAPI(baseUrl);
+        const response = await api.processPayment(effectiveAccount.userId ?? "", {
+          sessionId: effectiveSessionId,
+          tokenizedData: requestTokenizedBody,
+          accountData: {
+            userId: effectiveAccount.userId ?? "",
+            email: effectiveAccount.email ?? "",
+            firstName: effectiveAccount.firstName ?? fullName.trim().split(/\s+/)[0] ?? "",
+            lastName: effectiveAccount.lastName ?? fullName.trim().split(/\s+/).slice(1).join(" ") ?? "",
+            ...avsConfig ? (() => {
+              const c = selectedCountryRef.current;
+              const stateVisible = isAVSFieldVisible(avsConfig.state, c);
+              const line1Visible = isAVSFieldVisible(avsConfig.address_line_1, c);
+              const zipVisible = isAVSFieldVisible(avsConfig.postal_code, c);
+              const derivedState = line1Visible && !stateVisible && zipVisible ? getStateFromPostalCode(c, zipCodeRef.current ?? "") : null;
+              const stateValue2 = stateVisible ? stateRef.current : derivedState;
+              return {
+                country: c,
+                ...zipVisible && zipCodeRef.current ? { zip: zipCodeRef.current } : {},
+                ...isAVSFieldVisible(avsConfig.city, c) && cityRef.current ? { city: cityRef.current } : {},
+                ...stateValue2 ? { state: stateValue2 } : {},
+                ...line1Visible && addressLine1Ref.current ? { addressLine1: addressLine1Ref.current } : {},
+                ...isAVSFieldVisible(avsConfig.address_line_2, c) && addressLine2Ref.current ? { addressLine2: addressLine2Ref.current } : {}
+              };
+            })() : {}
           },
-          body: JSON.stringify({
-            sessionId: effectiveSessionId,
-            tokenizedData: requestTokenizedBody,
-            accountData: {
-              userId: effectiveAccount.userId ?? "",
-              email: effectiveAccount.email ?? "",
-              firstName: effectiveAccount.firstName ?? fullName.trim().split(/\s+/)[0] ?? "",
-              lastName: effectiveAccount.lastName ?? fullName.trim().split(/\s+/).slice(1).join(" ") ?? "",
-              ...avsConfig ? (() => {
-                const c = selectedCountryRef.current;
-                const stateVisible = isAVSFieldVisible(avsConfig.state, c);
-                const line1Visible = isAVSFieldVisible(avsConfig.address_line_1, c);
-                const zipVisible = isAVSFieldVisible(avsConfig.postal_code, c);
-                const derivedState = line1Visible && !stateVisible && zipVisible ? getStateFromPostalCode(c, zipCodeRef.current ?? "") : null;
-                const stateValue2 = stateVisible ? stateRef.current : derivedState;
-                return {
-                  country: c,
-                  ...zipVisible && zipCodeRef.current ? { zip: zipCodeRef.current } : {},
-                  ...isAVSFieldVisible(avsConfig.city, c) && cityRef.current ? { city: cityRef.current } : {},
-                  ...stateValue2 ? { state: stateValue2 } : {},
-                  ...line1Visible && addressLine1Ref.current ? { addressLine1: addressLine1Ref.current } : {},
-                  ...isAVSFieldVisible(avsConfig.address_line_2, c) && addressLine2Ref.current ? { addressLine2: addressLine2Ref.current } : {}
-                };
-              })() : {}
-            },
-            chv,
-            // Checkout analytics metadata
-            avsCheck: avsCheckProp ?? false,
-            checkoutType: checkoutTypeProp,
-            checkoutLayout: checkoutLayoutProp,
-            // Resolved exposure: which fields were actually shown for the active country.
-            // Country-scoped rules (e.g. ['US', 'CA']) are flattened to booleans here.
-            avsConfig: avsConfig ? {
-              country: isAVSFieldVisible(avsConfig.country, selectedCountryRef.current),
-              postal_code: isAVSFieldVisible(avsConfig.postal_code, selectedCountryRef.current),
-              address_line_1: isAVSFieldVisible(avsConfig.address_line_1, selectedCountryRef.current),
-              address_line_2: isAVSFieldVisible(avsConfig.address_line_2, selectedCountryRef.current),
-              city: isAVSFieldVisible(avsConfig.city, selectedCountryRef.current),
-              state: isAVSFieldVisible(avsConfig.state, selectedCountryRef.current)
-            } : void 0
-          })
+          chv,
+          // Checkout analytics metadata
+          avsCheck: avsCheckProp ?? false,
+          checkoutType: checkoutTypeProp,
+          checkoutLayout: checkoutLayoutProp,
+          // Resolved exposure: which fields were actually shown for the active country.
+          // Country-scoped rules (e.g. ['US', 'CA']) are flattened to booleans here.
+          avsConfig: avsConfig ? {
+            country: isAVSFieldVisible(avsConfig.country, selectedCountryRef.current),
+            postal_code: isAVSFieldVisible(avsConfig.postal_code, selectedCountryRef.current),
+            address_line_1: isAVSFieldVisible(avsConfig.address_line_1, selectedCountryRef.current),
+            address_line_2: isAVSFieldVisible(avsConfig.address_line_2, selectedCountryRef.current),
+            city: isAVSFieldVisible(avsConfig.city, selectedCountryRef.current),
+            state: isAVSFieldVisible(avsConfig.state, selectedCountryRef.current)
+          } : void 0
         });
         if (response.ok) {
           markSessionRecentlyCompleted(effectiveSessionId);
@@ -1627,7 +1523,7 @@ function SplitCardFormInner({
     },
     [baseUrl, sessionId, resolvedAccount, fullName, chv, flopay, paypalFlopay, onComplete, onError, updateError, emitDecline]
   );
-  const dispatchTokenizedBody = useCallback2(
+  const dispatchTokenizedBody = useCallback(
     (tokenizedBody, overrides) => {
       if (onTokenizedBody) {
         onTokenizedBody(tokenizedBody);
@@ -1664,7 +1560,7 @@ function SplitCardFormInner({
       }
     }
   }), [flopay, dispatchTokenizedBody, onError, updateError, emitDecline]);
-  useEffect4(() => {
+  useEffect3(() => {
     if (typeof window === "undefined") return;
     const stored = localStorage.getItem(WALLET_RESUME_KEY);
     if (!stored) return;
@@ -1682,7 +1578,7 @@ function SplitCardFormInner({
       localStorage.removeItem(WALLET_RESUME_KEY);
     }
   }, [sessionId, dispatchTokenizedBody]);
-  const handleSubmit = useCallback2(
+  const handleSubmit = useCallback(
     async (e) => {
       e.preventDefault();
       if (!flopay || !elements || isSubmitting || processingRef.current) return;
@@ -1824,7 +1720,7 @@ function SplitCardFormInner({
   );
   const isReady = flopay !== null && elements !== null;
   if (!isReady) {
-    return /* @__PURE__ */ jsx6("div", { "data-testid": "flopay-loading", "aria-busy": "true", children: "Loading payment form..." });
+    return /* @__PURE__ */ jsx5("div", { "data-testid": "flopay-loading", "aria-busy": "true", children: "Loading payment form..." });
   }
   const isButtons = layout === "buttons";
   const resolvedBorder = isButtons ? bStyles.cardInputBorder ?? "#e5e7eb" : "#A4A4FF";
@@ -1867,7 +1763,7 @@ function SplitCardFormInner({
       invalid: { color: "#ef4444" }
     }
   };
-  const cardFormBlock = /* @__PURE__ */ jsxs4("div", { style: {
+  const cardFormBlock = /* @__PURE__ */ jsxs3("div", { style: {
     backgroundColor: cardBg,
     borderRadius: "8px",
     padding: isButtons ? "0" : "1rem",
@@ -1875,7 +1771,7 @@ function SplitCardFormInner({
     ...isButtons ? { padding: bStyles.cardFormContainer?.padding ?? "0" } : {},
     ...sharedInputPlaceholderVars
   }, children: [
-    /* @__PURE__ */ jsx6("style", { children: `
+    /* @__PURE__ */ jsx5("style", { children: `
         .flopay-shared-input::placeholder {
           color: var(--flopay-input-placeholder-color);
           opacity: 1;
@@ -1884,12 +1780,12 @@ function SplitCardFormInner({
           font-weight: var(--flopay-input-font-weight);
         }
       ` }),
-    isButtons && showCardForm && /* @__PURE__ */ jsxs4("div", { style: {
+    isButtons && showCardForm && /* @__PURE__ */ jsxs3("div", { style: {
       display: "flex",
       alignItems: "center",
       padding: "0.75rem 0 0.625rem"
     }, children: [
-      /* @__PURE__ */ jsxs4(
+      /* @__PURE__ */ jsxs3(
         "button",
         {
           type: "button",
@@ -1911,7 +1807,7 @@ function SplitCardFormInner({
           },
           "aria-label": "Back to payment methods",
           children: [
-            /* @__PURE__ */ jsx6("span", { style: {
+            /* @__PURE__ */ jsx5("span", { style: {
               display: "inline-flex",
               alignItems: "center",
               justifyContent: "center",
@@ -1921,12 +1817,12 @@ function SplitCardFormInner({
               backgroundColor: "#f3f4f6",
               transition: "background-color 0.15s",
               ...bStyles.backButtonIcon
-            }, children: /* @__PURE__ */ jsx6("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx6("path", { d: "M15 18l-6-6 6-6" }) }) }),
-            /* @__PURE__ */ jsx6(BackButtonContentSlot, { content: cardBackButtonContent })
+            }, children: /* @__PURE__ */ jsx5("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx5("path", { d: "M15 18l-6-6 6-6" }) }) }),
+            /* @__PURE__ */ jsx5(BackButtonContentSlot, { content: cardBackButtonContent })
           ]
         }
       ),
-      hideTitle ? /* @__PURE__ */ jsx6("div", { style: { flex: 1 } }) : /* @__PURE__ */ jsx6("div", { style: {
+      hideTitle ? /* @__PURE__ */ jsx5("div", { style: { flex: 1 } }) : /* @__PURE__ */ jsx5("div", { style: {
         flex: 1,
         textAlign: "center",
         fontWeight: 600,
@@ -1934,18 +1830,18 @@ function SplitCardFormInner({
         color: "#262833",
         paddingRight: 80,
         ...bStyles.title
-      }, children: /* @__PURE__ */ jsx6(TitleContentSlot, { content: cardTitleContent }) })
+      }, children: /* @__PURE__ */ jsx5(TitleContentSlot, { content: cardTitleContent }) })
     ] }),
-    !isButtons && !hideTitle && /* @__PURE__ */ jsx6("div", { style: { textAlign: "center", fontWeight: 600, fontSize: "1.1rem", padding: "0.5rem 0", color: "#262833" }, children: /* @__PURE__ */ jsx6(TitleContentSlot, { content: cardTitleContent }) }),
-    /* @__PURE__ */ jsx6("div", { style: {
+    !isButtons && !hideTitle && /* @__PURE__ */ jsx5("div", { style: { textAlign: "center", fontWeight: 600, fontSize: "1.1rem", padding: "0.5rem 0", color: "#262833" }, children: /* @__PURE__ */ jsx5(TitleContentSlot, { content: cardTitleContent }) }),
+    /* @__PURE__ */ jsx5("div", { style: {
       backgroundColor: cardInputBg,
       border: `1px solid ${resolvedBorder}`,
       borderTopLeftRadius: "8px",
       borderTopRightRadius: "8px",
       padding: "10px"
-    }, children: /* @__PURE__ */ jsx6(CardNumberElement, { onReady: () => setFormReady(true), options: stripeElementStyle }) }),
-    /* @__PURE__ */ jsxs4("div", { style: { display: "flex" }, children: [
-      /* @__PURE__ */ jsx6("div", { style: {
+    }, children: /* @__PURE__ */ jsx5(CardNumberElement, { onReady: () => setFormReady(true), options: stripeElementStyle }) }),
+    /* @__PURE__ */ jsxs3("div", { style: { display: "flex" }, children: [
+      /* @__PURE__ */ jsx5("div", { style: {
         flex: 1,
         backgroundColor: cardInputBg,
         border: `1px solid ${resolvedBorder}`,
@@ -1953,23 +1849,23 @@ function SplitCardFormInner({
         borderRight: "none",
         borderBottomLeftRadius: "8px",
         padding: "10px"
-      }, children: /* @__PURE__ */ jsx6(CardExpiryElement, { options: stripeElementStyle }) }),
-      /* @__PURE__ */ jsx6("div", { style: {
+      }, children: /* @__PURE__ */ jsx5(CardExpiryElement, { options: stripeElementStyle }) }),
+      /* @__PURE__ */ jsx5("div", { style: {
         flex: 1,
         backgroundColor: cardInputBg,
         border: `1px solid ${resolvedBorder}`,
         borderTop: "none",
         borderBottomRightRadius: "8px",
         padding: "10px"
-      }, children: /* @__PURE__ */ jsx6(CardCvcElement, { options: stripeElementStyle }) })
+      }, children: /* @__PURE__ */ jsx5(CardCvcElement, { options: stripeElementStyle }) })
     ] }),
-    /* @__PURE__ */ jsx6("div", { style: {
+    /* @__PURE__ */ jsx5("div", { style: {
       backgroundColor: cardInputBg,
       border: `1px solid ${resolvedBorder}`,
       borderRadius: "8px",
       marginTop: "0.5rem",
       padding: "10px"
-    }, children: /* @__PURE__ */ jsx6(
+    }, children: /* @__PURE__ */ jsx5(
       "input",
       {
         className: "flopay-shared-input",
@@ -2008,8 +1904,8 @@ function SplitCardFormInner({
         ...isButtons && bStyles.nameInput ? bStyles.nameInput : {}
       });
       const stateOpts = getStateOptions(cc);
-      return /* @__PURE__ */ jsxs4(Fragment2, { children: [
-        isAVSFieldVisible(avsConfig.address_line_1, cc) && /* @__PURE__ */ jsx6("div", { style: inputWrapStyle(bStyles.addressLine1Input), children: /* @__PURE__ */ jsx6(
+      return /* @__PURE__ */ jsxs3(Fragment2, { children: [
+        isAVSFieldVisible(avsConfig.address_line_1, cc) && /* @__PURE__ */ jsx5("div", { style: inputWrapStyle(bStyles.addressLine1Input), children: /* @__PURE__ */ jsx5(
           "input",
           {
             className: "flopay-shared-input",
@@ -2026,7 +1922,7 @@ function SplitCardFormInner({
             style: inputFieldStyle()
           }
         ) }),
-        isAVSFieldVisible(avsConfig.address_line_2, cc) && /* @__PURE__ */ jsx6("div", { style: inputWrapStyle(bStyles.addressLine2Input), children: /* @__PURE__ */ jsx6(
+        isAVSFieldVisible(avsConfig.address_line_2, cc) && /* @__PURE__ */ jsx5("div", { style: inputWrapStyle(bStyles.addressLine2Input), children: /* @__PURE__ */ jsx5(
           "input",
           {
             className: "flopay-shared-input",
@@ -2042,12 +1938,12 @@ function SplitCardFormInner({
             style: inputFieldStyle()
           }
         ) }),
-        (isAVSFieldVisible(avsConfig.city, cc) || isAVSFieldVisible(avsConfig.state, cc)) && /* @__PURE__ */ jsxs4("div", { style: {
+        (isAVSFieldVisible(avsConfig.city, cc) || isAVSFieldVisible(avsConfig.state, cc)) && /* @__PURE__ */ jsxs3("div", { style: {
           display: "flex",
           gap: "0",
           marginTop: "0.5rem"
         }, children: [
-          isAVSFieldVisible(avsConfig.city, cc) && /* @__PURE__ */ jsx6("div", { style: {
+          isAVSFieldVisible(avsConfig.city, cc) && /* @__PURE__ */ jsx5("div", { style: {
             flex: 1,
             backgroundColor: cardInputBg,
             border: `1px solid ${resolvedBorder}`,
@@ -2056,7 +1952,7 @@ function SplitCardFormInner({
             borderBottomLeftRadius: "8px",
             ...isAVSFieldVisible(avsConfig.state, cc) ? { borderRight: "none", borderTopRightRadius: 0, borderBottomRightRadius: 0 } : { borderRadius: "8px" },
             ...isButtons && bStyles.cityInput ? bStyles.cityInput : {}
-          }, children: /* @__PURE__ */ jsx6(
+          }, children: /* @__PURE__ */ jsx5(
             "input",
             {
               className: "flopay-shared-input",
@@ -2073,7 +1969,7 @@ function SplitCardFormInner({
               style: inputFieldStyle()
             }
           ) }),
-          isAVSFieldVisible(avsConfig.state, cc) && /* @__PURE__ */ jsx6("div", { style: {
+          isAVSFieldVisible(avsConfig.state, cc) && /* @__PURE__ */ jsx5("div", { style: {
             flex: 1,
             backgroundColor: cardInputBg,
             border: `1px solid ${resolvedBorder}`,
@@ -2082,7 +1978,7 @@ function SplitCardFormInner({
             borderBottomRightRadius: "8px",
             ...isAVSFieldVisible(avsConfig.city, cc) ? { borderTopLeftRadius: 0, borderBottomLeftRadius: 0 } : { borderRadius: "8px" },
             ...isButtons && bStyles.stateInput ? bStyles.stateInput : {}
-          }, children: stateOpts ? /* @__PURE__ */ jsxs4(
+          }, children: stateOpts ? /* @__PURE__ */ jsxs3(
             "select",
             {
               value: stateValue,
@@ -2096,11 +1992,11 @@ function SplitCardFormInner({
               "data-testid": "flopay-state",
               style: { ...inputFieldStyle(), cursor: "pointer" },
               children: [
-                /* @__PURE__ */ jsx6("option", { value: "", children: getStateLabel(cc) }),
-                stateOpts.map((s) => /* @__PURE__ */ jsx6("option", { value: s.code, children: s.name }, s.code))
+                /* @__PURE__ */ jsx5("option", { value: "", children: getStateLabel(cc) }),
+                stateOpts.map((s) => /* @__PURE__ */ jsx5("option", { value: s.code, children: s.name }, s.code))
               ]
             }
-          ) : /* @__PURE__ */ jsx6(
+          ) : /* @__PURE__ */ jsx5(
             "input",
             {
               className: "flopay-shared-input",
@@ -2118,20 +2014,20 @@ function SplitCardFormInner({
             }
           ) })
         ] }),
-        (isAVSFieldVisible(avsConfig.country, cc) || isAVSFieldVisible(avsConfig.postal_code, cc)) && /* @__PURE__ */ jsxs4("div", { style: {
+        (isAVSFieldVisible(avsConfig.country, cc) || isAVSFieldVisible(avsConfig.postal_code, cc)) && /* @__PURE__ */ jsxs3("div", { style: {
           display: "flex",
           flexDirection: avsLayoutProp === "column" ? "column" : "row",
           gap: avsLayoutProp === "column" ? "0.5rem" : "0",
           marginTop: "0.5rem"
         }, children: [
-          isAVSFieldVisible(avsConfig.country, cc) && /* @__PURE__ */ jsx6("div", { style: {
+          isAVSFieldVisible(avsConfig.country, cc) && /* @__PURE__ */ jsx5("div", { style: {
             flex: avsLayoutProp === "row" ? 1 : void 0,
             backgroundColor: cardInputBg,
             border: `1px solid ${resolvedBorder}`,
             padding: "10px",
             ...avsLayoutProp === "row" && isAVSFieldVisible(avsConfig.postal_code, cc) ? { borderRadius: "0", borderTopLeftRadius: "8px", borderBottomLeftRadius: "8px", borderRight: "none" } : { borderRadius: "8px" },
             ...isButtons && bStyles.countrySelect ? bStyles.countrySelect : {}
-          }, children: /* @__PURE__ */ jsx6(
+          }, children: /* @__PURE__ */ jsx5(
             "select",
             {
               value: selectedCountry,
@@ -2146,21 +2042,21 @@ function SplitCardFormInner({
               autoComplete: "country",
               "data-testid": "flopay-country",
               style: { ...inputFieldStyle(), cursor: "pointer" },
-              children: COUNTRY_OPTIONS.map((c) => /* @__PURE__ */ jsxs4("option", { value: c.code, children: [
+              children: COUNTRY_OPTIONS.map((c) => /* @__PURE__ */ jsxs3("option", { value: c.code, children: [
                 c.flag,
                 " ",
                 c.name
               ] }, c.code))
             }
           ) }),
-          isAVSFieldVisible(avsConfig.postal_code, cc) && /* @__PURE__ */ jsx6("div", { style: {
+          isAVSFieldVisible(avsConfig.postal_code, cc) && /* @__PURE__ */ jsx5("div", { style: {
             flex: avsLayoutProp === "row" ? 1 : void 0,
             backgroundColor: cardInputBg,
             border: `1px solid ${resolvedBorder}`,
             padding: "10px",
             ...avsLayoutProp === "row" && isAVSFieldVisible(avsConfig.country, cc) ? { borderRadius: "0", borderTopRightRadius: "8px", borderBottomRightRadius: "8px" } : { borderRadius: "8px" },
             ...isButtons && bStyles.zipInput ? bStyles.zipInput : {}
-          }, children: /* @__PURE__ */ jsx6(
+          }, children: /* @__PURE__ */ jsx5(
             "input",
             {
               className: "flopay-shared-input",
@@ -2181,7 +2077,7 @@ function SplitCardFormInner({
         ] })
       ] });
     })(),
-    displayError && /* @__PURE__ */ jsxs4("div", { role: "alert", "data-testid": "flopay-error", style: {
+    displayError && /* @__PURE__ */ jsxs3("div", { role: "alert", "data-testid": "flopay-error", style: {
       margin: "0.75rem 0",
       padding: "0.625rem 0.875rem",
       background: "#FEF2F2",
@@ -2195,10 +2091,10 @@ function SplitCardFormInner({
       gap: "0.5rem",
       ...isButtons && bStyles.errorBanner ? bStyles.errorBanner : {}
     }, children: [
-      /* @__PURE__ */ jsx6("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", style: { flexShrink: 0 }, children: /* @__PURE__ */ jsx6("path", { d: "M12 9v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z", stroke: "#DC2626", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }),
+      /* @__PURE__ */ jsx5("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", style: { flexShrink: 0 }, children: /* @__PURE__ */ jsx5("path", { d: "M12 9v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z", stroke: "#DC2626", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }),
       displayError
     ] }),
-    children ?? /* @__PURE__ */ jsx6(
+    children ?? /* @__PURE__ */ jsx5(
       "button",
       {
         type: "submit",
@@ -2221,7 +2117,7 @@ function SplitCardFormInner({
         children: isSubmitting ? "PROCESSING..." : submitLabel
       }
     ),
-    !isButtons && showSecurityFooter && /* @__PURE__ */ jsx6("div", { style: {
+    !isButtons && showSecurityFooter && /* @__PURE__ */ jsx5("div", { style: {
       backgroundColor: "#EFF9F0",
       borderRadius: "8px",
       padding: "0.75rem",
@@ -2238,11 +2134,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__ */ jsxs4("form", { onSubmit: handleSubmit, className, style: { position: "relative" }, children: [
-      /* @__PURE__ */ jsx6(FloPayKeyframes, {}),
-      overlayStatus && /* @__PURE__ */ jsx6(ProcessingOverlay, { status: overlayStatus, errorMessage: displayError }),
-      /* @__PURE__ */ jsxs4("div", { style: { display: "grid" }, children: [
-        /* @__PURE__ */ jsxs4("div", { style: {
+    return /* @__PURE__ */ jsxs3("form", { onSubmit: handleSubmit, className, style: { position: "relative" }, children: [
+      /* @__PURE__ */ jsx5(FloPayKeyframes, {}),
+      overlayStatus && /* @__PURE__ */ jsx5(ProcessingOverlay, { status: overlayStatus, errorMessage: displayError }),
+      /* @__PURE__ */ jsxs3("div", { style: { display: "grid" }, children: [
+        /* @__PURE__ */ jsxs3("div", { style: {
           gridArea: "1 / 1",
           display: "flex",
           flexDirection: "column",
@@ -2251,7 +2147,7 @@ function SplitCardFormInner({
           ...!isButtonsView && !buttonsAnim ? { visibility: "hidden", position: "absolute", pointerEvents: "none", width: "100%" } : {},
           ...buttonsAnim ? { animation: buttonsAnim, pointerEvents: "none" } : {}
         }, children: [
-          showPayPal && paypalStripeInstance && /* @__PURE__ */ jsx6(StripeElements, { stripe: paypalStripeInstance, options: paypalOptions, children: /* @__PURE__ */ jsx6(
+          shouldRenderPayPal && /* @__PURE__ */ jsx5(StripeElements, { stripe: paypalStripeInstance, options: paypalOptions, children: /* @__PURE__ */ jsx5(
             PayPalButtonInner,
             {
               sessionId,
@@ -2266,7 +2162,7 @@ function SplitCardFormInner({
               onLoadStateChange: setPaypalLoadState
             }
           ) }),
-          showWallets && stripeInstance ? /* @__PURE__ */ jsx6(StripeElements, { stripe: stripeInstance, options: walletOptions, children: /* @__PURE__ */ jsx6(
+          shouldRenderWallets ? /* @__PURE__ */ jsx5(StripeElements, { stripe: stripeInstance, options: walletOptions, children: /* @__PURE__ */ jsx5(
             WalletButtonInner,
             {
               sessionId,
@@ -2281,9 +2177,8 @@ function SplitCardFormInner({
               runBeforeButtonClick,
               onLoadStateChange: setWalletLoadState
             }
-          ) }) : showWallets ? /* @__PURE__ */ jsx6("div", { style: { height: DEFAULT_BUTTONS_LAYOUT_BUTTON_HEIGHT, borderRadius: 8, background: "#e5e7eb", animation: "flopay-pulse 1.5s ease-in-out infinite" } }) : null,
-          showInAppBrowserNotice && /* @__PURE__ */ jsx6(InAppBrowserNotice, {}),
-          /* @__PURE__ */ jsx6(
+          ) }) : shouldShowWallets ? /* @__PURE__ */ jsx5("div", { style: { height: DEFAULT_BUTTONS_LAYOUT_BUTTON_HEIGHT, borderRadius: 8, background: "#e5e7eb", animation: "flopay-pulse 1.5s ease-in-out infinite" } }) : null,
+          /* @__PURE__ */ jsx5(
             "button",
             {
               type: "button",
@@ -2321,10 +2216,10 @@ function SplitCardFormInner({
               onMouseUp: (e) => {
                 e.currentTarget.style.transform = "scale(1)";
               },
-              children: /* @__PURE__ */ jsx6(CardButtonContentSlot, { content: cardButtonContent })
+              children: /* @__PURE__ */ jsx5(CardButtonContentSlot, { content: cardButtonContent })
             }
           ),
-          displayError && viewState === "buttons" && /* @__PURE__ */ jsxs4("div", { role: "alert", "data-testid": "flopay-error", style: {
+          displayError && viewState === "buttons" && /* @__PURE__ */ jsxs3("div", { role: "alert", "data-testid": "flopay-error", style: {
             margin: "0.25rem 0",
             padding: "0.625rem 0.875rem",
             background: "#FEF2F2",
@@ -2338,11 +2233,11 @@ function SplitCardFormInner({
             gap: "0.5rem",
             ...bStyles.errorBanner ? bStyles.errorBanner : {}
           }, children: [
-            /* @__PURE__ */ jsx6("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", style: { flexShrink: 0 }, children: /* @__PURE__ */ jsx6("path", { d: "M12 9v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z", stroke: "#DC2626", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }),
+            /* @__PURE__ */ jsx5("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", style: { flexShrink: 0 }, children: /* @__PURE__ */ jsx5("path", { d: "M12 9v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z", stroke: "#DC2626", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }),
             displayError
           ] })
         ] }),
-        isCardView && /* @__PURE__ */ jsx6("div", { style: {
+        isCardView && /* @__PURE__ */ jsx5("div", { style: {
           gridArea: "1 / 1",
           ...cardAnim ? { animation: cardAnim } : {},
           ...viewState === "collapsing" ? { pointerEvents: "none" } : {}
@@ -2350,10 +2245,10 @@ function SplitCardFormInner({
       ] })
     ] });
   }
-  return /* @__PURE__ */ jsxs4("form", { onSubmit: handleSubmit, className, style: { position: "relative" }, children: [
-    /* @__PURE__ */ jsx6(FloPayKeyframes, {}),
-    overlayStatus && /* @__PURE__ */ jsx6(ProcessingOverlay, { status: overlayStatus, errorMessage: displayError }),
-    showWallets && stripeInstance && /* @__PURE__ */ jsx6(StripeElements, { stripe: stripeInstance, options: walletOptions, children: /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsxs3("form", { onSubmit: handleSubmit, className, style: { position: "relative" }, children: [
+    /* @__PURE__ */ jsx5(FloPayKeyframes, {}),
+    overlayStatus && /* @__PURE__ */ jsx5(ProcessingOverlay, { status: overlayStatus, errorMessage: displayError }),
+    shouldRenderWallets && /* @__PURE__ */ jsx5(StripeElements, { stripe: stripeInstance, options: walletOptions, children: /* @__PURE__ */ jsx5(
       WalletButtonInner,
       {
         sessionId,
@@ -2367,7 +2262,7 @@ function SplitCardFormInner({
         onLoadStateChange: setWalletLoadState
       }
     ) }),
-    showPayPal && paypalStripeInstance && /* @__PURE__ */ jsx6(StripeElements, { stripe: paypalStripeInstance, options: paypalOptions, children: /* @__PURE__ */ jsx6(
+    shouldRenderPayPal && /* @__PURE__ */ jsx5(StripeElements, { stripe: paypalStripeInstance, options: paypalOptions, children: /* @__PURE__ */ jsx5(
       PayPalButtonInner,
       {
         sessionId,
@@ -2380,8 +2275,7 @@ function SplitCardFormInner({
         onLoadStateChange: setPaypalLoadState
       }
     ) }),
-    showInAppBrowserNotice && /* @__PURE__ */ jsx6(InAppBrowserNotice, {}),
-    (showWallets && stripeInstance || showPayPal && paypalStripeInstance) && /* @__PURE__ */ jsxs4("div", { style: {
+    (shouldDisplayWalletRow || shouldDisplayPayPalRow) && /* @__PURE__ */ jsxs3("div", { style: {
       display: "flex",
       alignItems: "center",
       gap: "0.75rem",
@@ -2389,16 +2283,16 @@ function SplitCardFormInner({
       color: "#999",
       fontSize: "0.85rem"
     }, children: [
-      /* @__PURE__ */ jsx6("div", { style: { flex: 1, height: 1, backgroundColor: "#ddd" } }),
-      /* @__PURE__ */ jsx6("span", { children: "or pay with card" }),
-      /* @__PURE__ */ jsx6("div", { style: { flex: 1, height: 1, backgroundColor: "#ddd" } })
+      /* @__PURE__ */ jsx5("div", { style: { flex: 1, height: 1, backgroundColor: "#ddd" } }),
+      /* @__PURE__ */ jsx5("span", { children: "or pay with card" }),
+      /* @__PURE__ */ jsx5("div", { style: { flex: 1, height: 1, backgroundColor: "#ddd" } })
     ] }),
     cardFormBlock
   ] });
 }
 
 // src/saved-payment-flow.ts
-import { loadFloPay, PaymentAPI } from "@flopay/js";
+import { loadFloPay, PaymentAPI as PaymentAPI2 } from "@flopay/js";
 import { FloPayError as FloPayError3 } from "@flopay/shared";
 var DEFAULT_SAVED_PAYMENT_DECLINE_METHOD = "card";
 function getRedirectResultFromCheckoutProcessError(error) {
@@ -2506,7 +2400,7 @@ async function recover3DSRedirectResult({
     return null;
   }
   try {
-    const api = new PaymentAPI(billingApiUrl);
+    const api = new PaymentAPI2(billingApiUrl);
     const unified = await api.getUnifiedCheckoutSession(sessionId);
     const refreshedToken = unified.provider === "stripe" ? unified.data.stripe?.clientSecret : void 0;
     if (isStripePaymentIntentClientSecret(refreshedToken)) {
@@ -2534,25 +2428,19 @@ async function processSavedPaymentForMode({
   const lastName = session.customer?.lastName ?? session.accountData?.lastName ?? "";
   const country = session.customer?.country ?? session.accountData?.country ?? void 0;
   const zip = session.customer?.zip ?? session.accountData?.zip ?? void 0;
-  const response = await retryOnceOnFetchFailure(() => fetch(`${baseUrl}/v1/checkouts/sessions/process`, {
-    method: "POST",
-    headers: {
-      "Content-Type": "application/json",
-      "x-user-id": customerId
+  const api = new PaymentAPI2(baseUrl);
+  const response = await retryOnceOnFetchFailure(() => api.processPayment(customerId, {
+    sessionId: resolvedSessionId,
+    tokenizedData,
+    accountData: {
+      userId: customerId,
+      email: customerEmail,
+      firstName,
+      lastName,
+      country,
+      zip
     },
-    body: JSON.stringify({
-      sessionId: resolvedSessionId,
-      tokenizedData,
-      accountData: {
-        userId: customerId,
-        email: customerEmail,
-        firstName,
-        lastName,
-        country,
-        zip
-      },
-      returnUrl: returnUrl ?? resolveSavedPaymentReturnUrl(session)
-    })
+    returnUrl: returnUrl ?? resolveSavedPaymentReturnUrl(session)
   }));
   if (response.ok) {
     return {
@@ -2625,7 +2513,7 @@ async function processSavedPaymentWithIntent({
       { checkoutMethod: "card" }
     );
   }
-  const api = new PaymentAPI(billingApiUrl);
+  const api = new PaymentAPI2(billingApiUrl);
   const intentResponse = await retryOnceOnFetchFailure(() => api.createPaymentIntent(
     sessionId,
     customerEmail,
@@ -2930,7 +2818,7 @@ async function loadSavedPaymentProviders({
 }
 
 // src/flopay-checkout.tsx
-import { Fragment as Fragment3, jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
 var DEFAULT_BUTTONS_LAYOUT_BUTTON_HEIGHT2 = 44;
 var PAYPAL_RESUME_STORAGE_KEY = "flopay_checkout_saved_payment_resume";
 var sessionInflightMap = /* @__PURE__ */ new Map();
@@ -3033,25 +2921,25 @@ function FloPayCheckout({
   const resolvedBillingUrl = resolveBillingApiUrl3(billingApiUrl);
   const checkoutType = createSessionParams ? "embedded_checkout" : "standard_checkout";
   const checkoutLayout = children ? "custom_layout" : layout === "buttons" ? "buttons_layout" : "default_layout";
-  const [unified, setUnified] = useState4(null);
-  const [flopay, setFloPay] = useState4(null);
+  const [unified, setUnified] = useState3(null);
+  const [flopay, setFloPay] = useState3(null);
   const flopayRef = useRef3(null);
-  const [paypalFlopay, setPaypalFloPay] = useState4(null);
+  const [paypalFlopay, setPaypalFloPay] = useState3(null);
   const paypalFlopayRef = useRef3(null);
-  const [session, setSession] = useState4(null);
-  const [resolvedSessionId, setResolvedSessionId] = useState4(sessionIdProp ?? "");
+  const [session, setSession] = useState3(null);
+  const [resolvedSessionId, setResolvedSessionId] = useState3(sessionIdProp ?? "");
   const activeSessionId = sessionIdProp ?? resolvedSessionId;
   const initSessionDependency = createSessionParams ? "" : activeSessionId;
-  const [isLoading, setIsLoading] = useState4(true);
-  const [loadError, setLoadError] = useState4(null);
-  const [currentMode, setCurrentMode] = useState4("full");
-  const [confirmProcessing, setConfirmProcessing] = useState4(false);
-  const [modeError, setModeError] = useState4(initialErrorMessage);
-  const [modeOverlayStatus, setModeOverlayStatus] = useState4(null);
-  const [modeOverlayError, setModeOverlayError] = useState4(null);
-  const [createSessionPatch, setCreateSessionPatch] = useState4(void 0);
-  const [createSessionPatchBaseHash, setCreateSessionPatchBaseHash] = useState4("");
-  const [cardBootstrapPending, setCardBootstrapPending] = useState4(false);
+  const [isLoading, setIsLoading] = useState3(true);
+  const [loadError, setLoadError] = useState3(null);
+  const [currentMode, setCurrentMode] = useState3("full");
+  const [confirmProcessing, setConfirmProcessing] = useState3(false);
+  const [modeError, setModeError] = useState3(initialErrorMessage);
+  const [modeOverlayStatus, setModeOverlayStatus] = useState3(null);
+  const [modeOverlayError, setModeOverlayError] = useState3(null);
+  const [createSessionPatch, setCreateSessionPatch] = useState3(void 0);
+  const [createSessionPatchBaseHash, setCreateSessionPatchBaseHash] = useState3("");
+  const [cardBootstrapPending, setCardBootstrapPending] = useState3(false);
   const autoCheckoutAttempted = useRef3(false);
   const paypalResumeAttempted = useRef3(false);
   const savedPaymentKeysRef = useRef3(null);
@@ -3063,7 +2951,7 @@ function FloPayCheckout({
   onDeclineRef.current = onDecline;
   const onSessionCompletedRef = useRef3(onSessionCompleted);
   onSessionCompletedRef.current = onSessionCompleted;
-  useEffect5(() => {
+  useEffect4(() => {
     console.info("[FloPay] Checkout initialized", {
       sdk_version: SDK_VERSION,
       checkout_type: checkoutType,
@@ -3091,20 +2979,20 @@ function FloPayCheckout({
     } : void 0,
     [effectiveCreateSessionBase, effectiveCreateSessionMode]
   );
-  useEffect5(() => {
+  useEffect4(() => {
     setCreateSessionPatch(void 0);
     setCreateSessionPatchBaseHash(baseCreateSessionHash);
   }, [baseCreateSessionHash]);
-  useEffect5(() => {
+  useEffect4(() => {
     setModeError(initialErrorMessage);
   }, [initialErrorMessage]);
-  const emitDecline = useCallback3(
+  const emitDecline = useCallback2(
     (method, input, overrides) => {
       onDeclineRef.current?.(buildDeclineEvent(method, input, overrides));
     },
     []
   );
-  const runSavedPaymentFlow = useCallback3(
+  const runSavedPaymentFlow = useCallback2(
     async (sess, options) => {
       setModeError(null);
       setModeOverlayError(null);
@@ -3132,6 +3020,17 @@ function FloPayCheckout({
           if (redirectResult.type === "paypal_redirect_required") {
             clearPayPalResumeState();
           }
+        } else if (options?.initialAutoProcessingPending) {
+          const api = new PaymentAPI3(resolvedBillingUrl);
+          const completed = await api.waitForCheckoutSessionCompletion(options.initialAutoProcessingPending.sessionId, {
+            initialDelayMs: options.initialAutoProcessingPending.retryAfterMs
+          });
+          if (completed.data.session?.status !== "complete") {
+            throw new FloPayError4("Automatic payment failed. Please try again.", "api_error", {
+              code: completed.data.session?.status === "expired" ? "checkout_session_expired" : "checkout_processing_timeout"
+            });
+          }
+          paymentResult = { status: "succeeded" };
         } else if (options?.initialAutoProcessingError) {
           throw checkoutProcessErrorToFloPayError(
             options.initialAutoProcessingError,
@@ -3211,7 +3110,7 @@ function FloPayCheckout({
       resolvedBillingUrl
     ]
   );
-  useEffect5(() => {
+  useEffect4(() => {
     if (typeof window === "undefined" || paypalResumeAttempted.current) {
       return;
     }
@@ -3274,7 +3173,7 @@ function FloPayCheckout({
         const paymentMethodId = typeof paymentIntent.payment_method === "string" ? paymentIntent.payment_method : paymentIntent.payment_method?.id;
         let finalResultStatus = resultStatus;
         if (resumeState.sessionId) {
-          const resumeApi = new PaymentAPI2(resolvedBillingUrl);
+          const resumeApi = new PaymentAPI3(resolvedBillingUrl);
           const resumeSessionResult = await resumeApi.getUnifiedCheckoutSession(resumeState.sessionId);
           const resumeSession = resumeSessionResult.data.session;
           if (resumeSession && resumeSession.status !== "complete") {
@@ -3358,17 +3257,17 @@ function FloPayCheckout({
   );
   const createSessionParamsRef = useRef3(effectiveCreateSession);
   createSessionParamsRef.current = effectiveCreateSession;
-  useEffect5(() => {
+  useEffect4(() => {
     setResolvedSessionId(sessionIdProp ?? "");
   }, [sessionIdProp]);
-  useEffect5(() => {
+  useEffect4(() => {
     autoCheckoutAttempted.current = false;
     setModeError(initialErrorMessage);
     setModeOverlayError(null);
     setModeOverlayStatus(null);
   }, [createSessionHash, initialErrorMessage, sessionIdProp]);
   async function resolveInlineSession(params, cacheKey) {
-    const api = new PaymentAPI2(resolvedBillingUrl);
+    const api = new PaymentAPI3(resolvedBillingUrl);
     let sid = typeof window !== "undefined" ? window.sessionStorage.getItem(cacheKey) : null;
     let realResult = null;
     if (sid) {
@@ -3404,7 +3303,7 @@ function FloPayCheckout({
     }
     return { sid: sid ?? "", result: realResult };
   }
-  const bootstrapInlineSession = useCallback3(
+  const bootstrapInlineSession = useCallback2(
     async (patch) => {
       const baseParams = createSessionParamsRef.current;
       if (!baseParams) {
@@ -3465,7 +3364,7 @@ function FloPayCheckout({
     },
     [locale, resolvedBillingUrl]
   );
-  const handleInlineSessionPatch = useCallback3(async (patch) => {
+  const handleInlineSessionPatch = useCallback2(async (patch) => {
     if (!hasInlineSessionPatchData(patch) || cardBootstrapPending) {
       return {
         sessionId: resolvedSessionId,
@@ -3488,7 +3387,7 @@ function FloPayCheckout({
     resolvedSessionId,
     session
   ]);
-  useEffect5(() => {
+  useEffect4(() => {
     let cancelled = false;
     setLoadError(null);
     if (createSessionHash) {
@@ -3520,6 +3419,7 @@ function FloPayCheckout({
               fallbackToFull: true,
               fromCreateSession: true,
               initialAutoProcessingError: resolved.result.autoProcessingError,
+              initialAutoProcessingPending: resolved.result.autoProcessingPending,
               autoProcessingAttempted: resolved.result.autoProcessingAttempted,
               sessionId: resolved.sid || resolvedSession.id
             });
@@ -3558,7 +3458,7 @@ function FloPayCheckout({
     setIsLoading(true);
     async function init() {
       try {
-        const api = new PaymentAPI2(resolvedBillingUrl);
+        const api = new PaymentAPI3(resolvedBillingUrl);
         const result = await api.getUnifiedCheckoutSession(activeSessionId);
         if (cancelled) return;
         setUnified(result);
@@ -3647,7 +3547,7 @@ function FloPayCheckout({
     initSessionDependency,
     runSavedPaymentFlow
   ]);
-  const handleConfirmCheckout = useCallback3(async () => {
+  const handleConfirmCheckout = useCallback2(async () => {
     if (confirmProcessing || !session) return;
     setConfirmProcessing(true);
     setModeError(null);
@@ -3701,7 +3601,7 @@ function FloPayCheckout({
     ]
   );
   const shouldShowInterimButtons = Boolean(createSessionParams) && layout === "buttons" && (!flopay || !providerOptions);
-  const modeOverlay = modeOverlayStatus ? /* @__PURE__ */ jsx7(
+  const modeOverlay = modeOverlayStatus ? /* @__PURE__ */ jsx6(
     ProcessingOverlay,
     {
       status: modeOverlayStatus,
@@ -3710,31 +3610,31 @@ function FloPayCheckout({
   ) : null;
   if (isLoading) {
     if (loadingNode) {
-      return /* @__PURE__ */ jsxs5(Fragment3, { children: [
+      return /* @__PURE__ */ jsxs4(Fragment3, { children: [
         loadingNode,
         modeOverlay
       ] });
     }
     if (layout === "buttons") {
-      const skeletonBar = (h) => /* @__PURE__ */ jsx7("div", { style: {
+      const skeletonBar = (h) => /* @__PURE__ */ jsx6("div", { style: {
         height: h,
         borderRadius: 8,
         background: "#e5e7eb",
         animation: "flopay-loading-pulse 1.5s ease-in-out infinite"
       } });
-      return /* @__PURE__ */ jsxs5(Fragment3, { children: [
-        /* @__PURE__ */ jsxs5("div", { style: { display: "flex", flexDirection: "column", gap: "0.5rem" }, children: [
+      return /* @__PURE__ */ jsxs4(Fragment3, { children: [
+        /* @__PURE__ */ jsxs4("div", { style: { display: "flex", flexDirection: "column", gap: "0.5rem" }, children: [
           showPayPal && skeletonBar(DEFAULT_BUTTONS_LAYOUT_BUTTON_HEIGHT2),
           (showApplePay || showGooglePay) && skeletonBar(DEFAULT_BUTTONS_LAYOUT_BUTTON_HEIGHT2),
           skeletonBar(DEFAULT_BUTTONS_LAYOUT_BUTTON_HEIGHT2),
-          /* @__PURE__ */ jsx7("style", { children: `@keyframes flopay-loading-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }` })
+          /* @__PURE__ */ jsx6("style", { children: `@keyframes flopay-loading-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }` })
         ] }),
         modeOverlay
       ] });
     }
-    return /* @__PURE__ */ jsxs5(Fragment3, { children: [
-      /* @__PURE__ */ jsxs5("div", { style: { display: "flex", justifyContent: "center", padding: 32 }, children: [
-        /* @__PURE__ */ jsx7("div", { style: {
+    return /* @__PURE__ */ jsxs4(Fragment3, { children: [
+      /* @__PURE__ */ jsxs4("div", { style: { display: "flex", justifyContent: "center", padding: 32 }, children: [
+        /* @__PURE__ */ jsx6("div", { style: {
           width: 24,
           height: 24,
           border: "2px solid #e5e7eb",
@@ -3742,16 +3642,16 @@ function FloPayCheckout({
           borderRadius: "50%",
           animation: "spin 0.6s linear infinite"
         } }),
-        /* @__PURE__ */ jsx7("style", { children: `@keyframes spin { to { transform: rotate(360deg); } }` })
+        /* @__PURE__ */ jsx6("style", { children: `@keyframes spin { to { transform: rotate(360deg); } }` })
       ] }),
       modeOverlay
     ] });
   }
   if (loadError) {
     if (errorNode) {
-      return /* @__PURE__ */ jsx7(CheckoutContext.Provider, { value: checkoutValue, children: errorNode(loadError) });
+      return /* @__PURE__ */ jsx6(CheckoutContext.Provider, { value: checkoutValue, children: errorNode(loadError) });
     }
-    return /* @__PURE__ */ jsx7(CheckoutContext.Provider, { value: checkoutValue, children: /* @__PURE__ */ jsx7(
+    return /* @__PURE__ */ jsx6(CheckoutContext.Provider, { value: checkoutValue, children: /* @__PURE__ */ jsx6(
       "div",
       {
         style: {
@@ -3765,8 +3665,8 @@ function FloPayCheckout({
     ) });
   }
   if (shouldShowInterimButtons) {
-    return /* @__PURE__ */ jsxs5(Fragment3, { children: [
-      /* @__PURE__ */ jsx7(CheckoutContext.Provider, { value: checkoutValue, children: /* @__PURE__ */ jsx7(
+    return /* @__PURE__ */ jsxs4(Fragment3, { children: [
+      /* @__PURE__ */ jsx6(CheckoutContext.Provider, { value: checkoutValue, children: /* @__PURE__ */ jsx6(
         InterimButtonsView,
         {
           onButtonClick,
@@ -3784,12 +3684,12 @@ function FloPayCheckout({
     ] });
   }
   if (!flopay || !providerOptions) {
-    return /* @__PURE__ */ jsx7(Fragment3, { children: modeOverlay });
+    return /* @__PURE__ */ jsx6(Fragment3, { children: modeOverlay });
   }
   if (currentMode === "confirm") {
-    return /* @__PURE__ */ jsxs5(Fragment3, { children: [
-      /* @__PURE__ */ jsx7(CheckoutContext.Provider, { value: checkoutValue, children: /* @__PURE__ */ jsx7(FloPayProvider, { flopay, paypalFlopay, options: providerOptions, children: /* @__PURE__ */ jsxs5("div", { className, children: [
-        modeError && /* @__PURE__ */ jsx7(
+    return /* @__PURE__ */ jsxs4(Fragment3, { children: [
+      /* @__PURE__ */ jsx6(CheckoutContext.Provider, { value: checkoutValue, children: /* @__PURE__ */ jsx6(FloPayProvider, { flopay, paypalFlopay, options: providerOptions, children: /* @__PURE__ */ jsxs4("div", { className, children: [
+        modeError && /* @__PURE__ */ jsx6(
           "div",
           {
             style: {
@@ -3804,7 +3704,7 @@ function FloPayCheckout({
         renderConfirmButton ? renderConfirmButton({
           onConfirm: handleConfirmCheckout,
           isProcessing: confirmProcessing
-        }) : /* @__PURE__ */ jsx7(
+        }) : /* @__PURE__ */ jsx6(
           "button",
           {
             type: "button",
@@ -3829,9 +3729,9 @@ function FloPayCheckout({
       modeOverlay
     ] });
   }
-  return /* @__PURE__ */ jsxs5(Fragment3, { children: [
-    /* @__PURE__ */ jsx7(CheckoutContext.Provider, { value: checkoutValue, children: /* @__PURE__ */ jsx7(FloPayProvider, { flopay, paypalFlopay, options: providerOptions, children: children ? /* @__PURE__ */ jsxs5(Fragment3, { children: [
-      modeError && /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsxs4(Fragment3, { children: [
+    /* @__PURE__ */ jsx6(CheckoutContext.Provider, { value: checkoutValue, children: /* @__PURE__ */ jsx6(FloPayProvider, { flopay, paypalFlopay, options: providerOptions, children: children ? /* @__PURE__ */ jsxs4(Fragment3, { children: [
+      modeError && /* @__PURE__ */ jsx6(
         "div",
         {
           style: {
@@ -3846,7 +3746,7 @@ function FloPayCheckout({
           children: modeError
         }
       ),
-      /* @__PURE__ */ jsx7(
+      /* @__PURE__ */ jsx6(
         SessionInjector,
         {
           sessionId: activeSessionId,
@@ -3855,7 +3755,7 @@ function FloPayCheckout({
           children
         }
       )
-    ] }) : /* @__PURE__ */ jsx7(
+    ] }) : /* @__PURE__ */ jsx6(
       SplitCardForm,
       {
         sessionId: activeSessionId,
@@ -3906,8 +3806,8 @@ function SessionInjector({
   session,
   children
 }) {
-  return /* @__PURE__ */ jsx7(Fragment3, { children: React7.Children.map(children, (child) => {
-    if (!React7.isValidElement(child)) return child;
+  return /* @__PURE__ */ jsx6(Fragment3, { children: React6.Children.map(children, (child) => {
+    if (!React6.isValidElement(child)) return child;
     const existing = child.props;
     const injected = {};
     if (!existing.sessionId) injected.sessionId = sessionId;
@@ -3921,7 +3821,7 @@ function SessionInjector({
         injected.lastName = session.customer.lastName;
     }
     if (Object.keys(injected).length === 0) return child;
-    return React7.cloneElement(child, injected);
+    return React6.cloneElement(child, injected);
   }) });
 }
 function InterimButtonsView({
@@ -3939,9 +3839,9 @@ function InterimButtonsView({
   cardBackButtonContent,
   cardTitleContent
 }) {
-  const [showCardForm, setShowCardForm] = useState4(false);
+  const [showCardForm, setShowCardForm] = useState3(false);
   const isCardOpenControlled = typeof cardOpen === "boolean";
-  useEffect5(() => {
+  useEffect4(() => {
     if (isCardOpenControlled) {
       setShowCardForm(cardOpen);
     }
@@ -3960,7 +3860,7 @@ function InterimButtonsView({
       title: { ...base.title, ...stylesOverride.title }
     };
   }, [buttonsTheme, stylesOverride]);
-  const skeleton = (h) => /* @__PURE__ */ jsx7("div", { style: {
+  const skeleton = (h) => /* @__PURE__ */ jsx6("div", { style: {
     height: h,
     borderRadius: 8,
     background: "#e5e7eb",
@@ -3972,15 +3872,15 @@ function InterimButtonsView({
     const inputBg = bStyles.cardInputBackground ?? "white";
     const hideBackButtonLabel = isEmptySlotContent(cardBackButtonContent);
     const hideTitle = isEmptySlotContent(cardTitleContent);
-    return /* @__PURE__ */ jsxs5("div", { style: {
+    return /* @__PURE__ */ jsxs4("div", { style: {
       backgroundColor: bStyles.cardFormContainer?.backgroundColor ?? "white",
       borderRadius: "8px",
       animation: "flopay-interim-expand 0.35s cubic-bezier(0.4, 0, 0.2, 1) both",
       overflow: "hidden",
       ...bStyles.cardFormContainer
     }, children: [
-      /* @__PURE__ */ jsxs5("div", { style: { display: "flex", alignItems: "center", padding: "0.75rem 0 0.625rem" }, children: [
-        /* @__PURE__ */ jsxs5(
+      /* @__PURE__ */ jsxs4("div", { style: { display: "flex", alignItems: "center", padding: "0.75rem 0 0.625rem" }, children: [
+        /* @__PURE__ */ jsxs4(
           "button",
           {
             type: "button",
@@ -4007,7 +3907,7 @@ function InterimButtonsView({
               ...bStyles.backButton
             },
             children: [
-              /* @__PURE__ */ jsx7("span", { style: {
+              /* @__PURE__ */ jsx6("span", { style: {
                 display: "inline-flex",
                 alignItems: "center",
                 justifyContent: "center",
@@ -4016,12 +3916,12 @@ function InterimButtonsView({
                 borderRadius: "50%",
                 backgroundColor: "#f3f4f6",
                 ...bStyles.backButtonIcon
-              }, children: /* @__PURE__ */ jsx7("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx7("path", { d: "M15 18l-6-6 6-6" }) }) }),
-              /* @__PURE__ */ jsx7(BackButtonContentSlot, { content: cardBackButtonContent })
+              }, children: /* @__PURE__ */ jsx6("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx6("path", { d: "M15 18l-6-6 6-6" }) }) }),
+              /* @__PURE__ */ jsx6(BackButtonContentSlot, { content: cardBackButtonContent })
             ]
           }
         ),
-        hideTitle ? /* @__PURE__ */ jsx7("div", { style: { flex: 1 } }) : /* @__PURE__ */ jsx7("div", { style: {
+        hideTitle ? /* @__PURE__ */ jsx6("div", { style: { flex: 1 } }) : /* @__PURE__ */ jsx6("div", { style: {
           flex: 1,
           textAlign: "center",
           fontWeight: 600,
@@ -4029,15 +3929,15 @@ function InterimButtonsView({
           color: "#262833",
           paddingRight: 80,
           ...bStyles.title
-        }, children: /* @__PURE__ */ jsx7(TitleContentSlot, { content: cardTitleContent }) })
+        }, children: /* @__PURE__ */ jsx6(TitleContentSlot, { content: cardTitleContent }) })
       ] }),
-      /* @__PURE__ */ jsx7("div", { style: { backgroundColor: inputBg, border: `1px solid ${inputBorder}`, borderTopLeftRadius: 8, borderTopRightRadius: 8, padding: 12, height: 45 }, children: /* @__PURE__ */ jsx7("div", { style: { width: "60%", height: 14, borderRadius: 4, background: "#e5e7eb", animation: "flopay-interim-pulse 1.5s ease-in-out infinite" } }) }),
-      /* @__PURE__ */ jsxs5("div", { style: { display: "flex" }, children: [
-        /* @__PURE__ */ jsx7("div", { style: { flex: 1, backgroundColor: inputBg, border: `1px solid ${inputBorder}`, borderTop: "none", borderRight: "none", borderBottomLeftRadius: 8, padding: 12, height: 45 }, children: /* @__PURE__ */ jsx7("div", { style: { width: "50%", height: 14, borderRadius: 4, background: "#e5e7eb", animation: "flopay-interim-pulse 1.5s ease-in-out infinite" } }) }),
-        /* @__PURE__ */ jsx7("div", { style: { flex: 1, backgroundColor: inputBg, border: `1px solid ${inputBorder}`, borderTop: "none", borderBottomRightRadius: 8, padding: 12, height: 45 }, children: /* @__PURE__ */ jsx7("div", { style: { width: "40%", height: 14, borderRadius: 4, background: "#e5e7eb", animation: "flopay-interim-pulse 1.5s ease-in-out infinite" } }) })
+      /* @__PURE__ */ jsx6("div", { style: { backgroundColor: inputBg, border: `1px solid ${inputBorder}`, borderTopLeftRadius: 8, borderTopRightRadius: 8, padding: 12, height: 45 }, children: /* @__PURE__ */ jsx6("div", { style: { width: "60%", height: 14, borderRadius: 4, background: "#e5e7eb", animation: "flopay-interim-pulse 1.5s ease-in-out infinite" } }) }),
+      /* @__PURE__ */ jsxs4("div", { style: { display: "flex" }, children: [
+        /* @__PURE__ */ jsx6("div", { style: { flex: 1, backgroundColor: inputBg, border: `1px solid ${inputBorder}`, borderTop: "none", borderRight: "none", borderBottomLeftRadius: 8, padding: 12, height: 45 }, children: /* @__PURE__ */ jsx6("div", { style: { width: "50%", height: 14, borderRadius: 4, background: "#e5e7eb", animation: "flopay-interim-pulse 1.5s ease-in-out infinite" } }) }),
+        /* @__PURE__ */ jsx6("div", { style: { flex: 1, backgroundColor: inputBg, border: `1px solid ${inputBorder}`, borderTop: "none", borderBottomRightRadius: 8, padding: 12, height: 45 }, children: /* @__PURE__ */ jsx6("div", { style: { width: "40%", height: 14, borderRadius: 4, background: "#e5e7eb", animation: "flopay-interim-pulse 1.5s ease-in-out infinite" } }) })
       ] }),
-      /* @__PURE__ */ jsx7("div", { style: { backgroundColor: inputBg, border: `1px solid ${inputBorder}`, borderRadius: 8, marginTop: 8, padding: 12, height: 45 }, children: /* @__PURE__ */ jsx7("div", { style: { width: "45%", height: 14, borderRadius: 4, background: "#e5e7eb", animation: "flopay-interim-pulse 1.5s ease-in-out infinite" } }) }),
-      /* @__PURE__ */ jsx7("div", { style: {
+      /* @__PURE__ */ jsx6("div", { style: { backgroundColor: inputBg, border: `1px solid ${inputBorder}`, borderRadius: 8, marginTop: 8, padding: 12, height: 45 }, children: /* @__PURE__ */ jsx6("div", { style: { width: "45%", height: 14, borderRadius: 4, background: "#e5e7eb", animation: "flopay-interim-pulse 1.5s ease-in-out infinite" } }) }),
+      /* @__PURE__ */ jsx6("div", { style: {
         height: 50,
         borderRadius: 8,
         marginTop: 16,
@@ -4046,7 +3946,7 @@ function InterimButtonsView({
         ...bStyles.submitButton,
         opacity: 0.5
       } }),
-      /* @__PURE__ */ jsx7("style", { children: `
+      /* @__PURE__ */ jsx6("style", { children: `
           @keyframes flopay-interim-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }
           @keyframes flopay-interim-expand {
             0% { opacity: 0; max-height: 0; transform: translateY(-12px); }
@@ -4056,10 +3956,10 @@ function InterimButtonsView({
         ` })
     ] });
   }
-  return /* @__PURE__ */ jsxs5("div", { style: { display: "flex", flexDirection: "column", gap: "0.5rem" }, children: [
+  return /* @__PURE__ */ jsxs4("div", { style: { display: "flex", flexDirection: "column", gap: "0.5rem" }, children: [
     showPayPal && skeleton(DEFAULT_BUTTONS_LAYOUT_BUTTON_HEIGHT2),
     (showApplePay || showGooglePay) && skeleton(DEFAULT_BUTTONS_LAYOUT_BUTTON_HEIGHT2),
-    /* @__PURE__ */ jsx7(
+    /* @__PURE__ */ jsx6(
       "button",
       {
         type: "button",
@@ -4099,10 +3999,10 @@ function InterimButtonsView({
         onMouseUp: (e) => {
           e.currentTarget.style.transform = "scale(1)";
         },
-        children: /* @__PURE__ */ jsx7(CardButtonContentSlot, { content: cardButtonContent })
+        children: /* @__PURE__ */ jsx6(CardButtonContentSlot, { content: cardButtonContent })
       }
     ),
-    errorMessage && /* @__PURE__ */ jsxs5("div", { style: {
+    errorMessage && /* @__PURE__ */ jsxs4("div", { style: {
       margin: "0.25rem 0",
       padding: "0.625rem 0.875rem",
       background: "#FEF2F2",
@@ -4116,21 +4016,22 @@ function InterimButtonsView({
       gap: "0.5rem",
       ...bStyles.errorBanner
     }, children: [
-      /* @__PURE__ */ jsx7("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", style: { flexShrink: 0 }, children: /* @__PURE__ */ jsx7("path", { d: "M12 9v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z", stroke: "#DC2626", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }),
+      /* @__PURE__ */ jsx6("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", style: { flexShrink: 0 }, children: /* @__PURE__ */ jsx6("path", { d: "M12 9v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z", stroke: "#DC2626", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }),
       errorMessage
     ] }),
-    /* @__PURE__ */ jsx7("style", { children: `@keyframes flopay-interim-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }` })
+    /* @__PURE__ */ jsx6("style", { children: `@keyframes flopay-interim-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }` })
   ] });
 }
 
 // src/checkout-form.tsx
+import { PaymentAPI as PaymentAPI4 } from "@flopay/js";
 import { FloPayError as FloPayError5 } from "@flopay/shared";
-import { forwardRef as forwardRef2, useCallback as useCallback4, useEffect as useEffect6, useImperativeHandle as useImperativeHandle2, useState as useState5 } from "react";
-import { Fragment as Fragment4, jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
+import { forwardRef as forwardRef2, useCallback as useCallback3, useEffect as useEffect5, useImperativeHandle as useImperativeHandle2, useState as useState4 } from "react";
+import { Fragment as Fragment4, jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
 var WALLET_RESUME_KEY2 = "flopay_wallet_resume";
 var CheckoutForm = forwardRef2(
   function CheckoutForm2(props, ref) {
-    return /* @__PURE__ */ jsx8(CheckoutFormInner, { ...props, innerRef: ref });
+    return /* @__PURE__ */ jsx7(CheckoutFormInner, { ...props, innerRef: ref });
   }
 );
 function CheckoutFormInner({
@@ -4159,50 +4060,44 @@ function CheckoutFormInner({
   const paypalFlopay = usePayPalFloPay();
   const elements = useElements();
   const contextBillingUrl = useBillingApiUrl();
-  const [processing, setProcessing] = useState5(false);
-  const [error, setError] = useState5(null);
-  const [is3DSActive, setIs3DSActive] = useState5(false);
+  const [processing, setProcessing] = useState4(false);
+  const [error, setError] = useState4(null);
+  const [is3DSActive, setIs3DSActive] = useState4(false);
   const displayError = externalError ?? error;
   const isSubmitting = externalProcessing ?? processing;
   const isSelfContained = !onTokenizedBody;
   const baseUrl = (billingApiUrl || contextBillingUrl).replace(/\/+$/, "");
-  const updateError = useCallback4(
+  const updateError = useCallback3(
     (err) => {
       setError(err);
       onErrorChange?.(err);
     },
     [onErrorChange]
   );
-  const emitDecline = useCallback4(
+  const emitDecline = useCallback3(
     (input, overrides) => {
       onDecline?.(buildDeclineEvent("card", input, overrides));
     },
     [onDecline]
   );
-  const processPaymentInternal = useCallback4(
+  const processPaymentInternal = useCallback3(
     async (tokenizedBody, completionPaymentMethodId) => {
       setProcessing(true);
       updateError(null);
       const resolvedCompletionPaymentMethodId = completionPaymentMethodId ?? resolveTokenizedPaymentMethodId(tokenizedBody);
       const requestTokenizedBody = tokenizedBody.originalPaymentMethodId ? { ...tokenizedBody, originalPaymentMethodId: void 0 } : tokenizedBody;
       try {
-        const response = await fetch(`${baseUrl}/v1/checkouts/sessions/process`, {
-          method: "POST",
-          headers: {
-            "Content-Type": "application/json",
-            "x-user-id": userId ?? ""
+        const api = new PaymentAPI4(baseUrl);
+        const response = await api.processPayment(userId ?? "", {
+          sessionId,
+          tokenizedData: requestTokenizedBody,
+          accountData: {
+            userId: userId ?? "",
+            email: email ?? "",
+            firstName: firstName ?? "",
+            lastName: lastName ?? ""
           },
-          body: JSON.stringify({
-            sessionId,
-            tokenizedData: requestTokenizedBody,
-            accountData: {
-              userId: userId ?? "",
-              email: email ?? "",
-              firstName: firstName ?? "",
-              lastName: lastName ?? ""
-            },
-            chv
-          })
+          chv
         });
         if (response.ok) {
           onComplete?.({
@@ -4296,7 +4191,7 @@ function CheckoutFormInner({
     },
     [baseUrl, sessionId, userId, email, firstName, lastName, chv, flopay, paypalFlopay, onComplete, onError, onDecline, updateError, emitDecline]
   );
-  const dispatchTokenizedBody = useCallback4(
+  const dispatchTokenizedBody = useCallback3(
     (tokenizedBody) => {
       if (onTokenizedBody) {
         onTokenizedBody(tokenizedBody);
@@ -4333,7 +4228,7 @@ function CheckoutFormInner({
       }
     }
   }), [flopay, dispatchTokenizedBody, onError, updateError, emitDecline]);
-  useEffect6(() => {
+  useEffect5(() => {
     if (typeof window === "undefined") return;
     const stored = localStorage.getItem(WALLET_RESUME_KEY2);
     if (!stored) return;
@@ -4351,7 +4246,7 @@ function CheckoutFormInner({
       localStorage.removeItem(WALLET_RESUME_KEY2);
     }
   }, [sessionId, dispatchTokenizedBody]);
-  const handleSubmit = useCallback4(
+  const handleSubmit = useCallback3(
     async (e) => {
       e.preventDefault();
       if (!flopay || !elements || isSubmitting) return;
@@ -4441,8 +4336,8 @@ function CheckoutFormInner({
     [flopay, elements, isSubmitting, sessionId, email, baseUrl, isSelfContained, dispatchTokenizedBody, onError, updateError, emitDecline]
   );
   const isReady = flopay !== null && elements !== null;
-  return /* @__PURE__ */ jsxs6("form", { onSubmit: handleSubmit, className, style: { position: "relative" }, children: [
-    (is3DSActive || isSubmitting) && /* @__PURE__ */ jsx8("div", { "data-testid": "flopay-overlay", style: {
+  return /* @__PURE__ */ jsxs5("form", { onSubmit: handleSubmit, className, style: { position: "relative" }, children: [
+    (is3DSActive || isSubmitting) && /* @__PURE__ */ jsx7("div", { "data-testid": "flopay-overlay", style: {
       position: "absolute",
       inset: 0,
       background: "rgba(255,255,255,0.7)",
@@ -4451,12 +4346,12 @@ function CheckoutFormInner({
       justifyContent: "center",
       zIndex: 10
     }, children: is3DSActive ? "Verifying payment..." : "Processing..." }),
-    !isReady && /* @__PURE__ */ jsx8("div", { "data-testid": "flopay-loading", "aria-busy": "true", children: "Loading payment form..." }),
-    isReady && /* @__PURE__ */ jsxs6(Fragment4, { children: [
-      /* @__PURE__ */ jsx8(PaymentElement, { options: { layout } }),
-      showAddress && /* @__PURE__ */ jsx8(AddressElement, { options: { mode: showAddress === true ? "billing" : showAddress } }),
-      displayError && /* @__PURE__ */ jsx8("div", { role: "alert", "data-testid": "flopay-error", style: { color: "red", margin: "0.75rem 0" }, children: displayError }),
-      children ?? /* @__PURE__ */ jsx8(
+    !isReady && /* @__PURE__ */ jsx7("div", { "data-testid": "flopay-loading", "aria-busy": "true", children: "Loading payment form..." }),
+    isReady && /* @__PURE__ */ jsxs5(Fragment4, { children: [
+      /* @__PURE__ */ jsx7(PaymentElement, { options: { layout } }),
+      showAddress && /* @__PURE__ */ jsx7(AddressElement, { options: { mode: showAddress === true ? "billing" : showAddress } }),
+      displayError && /* @__PURE__ */ jsx7("div", { role: "alert", "data-testid": "flopay-error", style: { color: "red", margin: "0.75rem 0" }, children: displayError }),
+      children ?? /* @__PURE__ */ jsx7(
         "button",
         {
           type: "submit",
@@ -4470,9 +4365,10 @@ function CheckoutFormInner({
 }
 
 // src/paypal-button.tsx
+import { PaymentAPI as PaymentAPI5 } from "@flopay/js";
 import { FloPayError as FloPayError6 } from "@flopay/shared";
-import { useCallback as useCallback5, useEffect as useEffect7, useRef as useRef4, useState as useState6 } from "react";
-import { Fragment as Fragment5, jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
+import { useCallback as useCallback4, useEffect as useEffect6, useRef as useRef4, useState as useState5 } from "react";
+import { Fragment as Fragment5, jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
 function PayPalButton({
   sessionId,
   billingApiUrl,
@@ -4489,30 +4385,24 @@ function PayPalButton({
   const flopay = useFloPay();
   const elements = useElements();
   const contextBillingUrl = useBillingApiUrl();
-  const [ready, setReady] = useState6(false);
-  const [submitting, setSubmitting] = useState6(false);
+  const [ready, setReady] = useState5(false);
+  const [submitting, setSubmitting] = useState5(false);
   const paypalResumeAttempted = useRef4(false);
   const baseUrl = (billingApiUrl || contextBillingUrl).replace(/\/+$/, "");
-  const processPaymentInternal = useCallback5(
+  const processPaymentInternal = useCallback4(
     async (tokenizedBody) => {
       try {
-        const response = await fetch(`${baseUrl}/v1/checkouts/sessions/process`, {
-          method: "POST",
-          headers: {
-            "Content-Type": "application/json",
-            "x-user-id": userId ?? ""
+        const api = new PaymentAPI5(baseUrl);
+        const response = await api.processPayment(userId ?? "", {
+          sessionId,
+          tokenizedData: tokenizedBody,
+          accountData: {
+            userId: userId ?? "",
+            email: email ?? "",
+            firstName: firstName ?? "",
+            lastName: lastName ?? ""
           },
-          body: JSON.stringify({
-            sessionId,
-            tokenizedData: tokenizedBody,
-            accountData: {
-              userId: userId ?? "",
-              email: email ?? "",
-              firstName: firstName ?? "",
-              lastName: lastName ?? ""
-            },
-            chv
-          })
+          chv
         });
         if (response.ok) {
           onComplete?.();
@@ -4526,7 +4416,7 @@ function PayPalButton({
     },
     [baseUrl, sessionId, userId, email, firstName, lastName, chv, onComplete, onErrorChange]
   );
-  const dispatchTokenizedBody = useCallback5(
+  const dispatchTokenizedBody = useCallback4(
     (body) => {
       if (onTokenizedBody) {
         onTokenizedBody(body);
@@ -4536,7 +4426,7 @@ function PayPalButton({
     },
     [onTokenizedBody, processPaymentInternal]
   );
-  useEffect7(() => {
+  useEffect6(() => {
     if (!flopay || paypalResumeAttempted.current) return;
     const params = new URLSearchParams(window.location.search);
     const paymentIntentId = params.get("payment_intent");
@@ -4584,7 +4474,7 @@ function PayPalButton({
       }
     })();
   }, [flopay, dispatchTokenizedBody, onErrorChange]);
-  const handlePayPalConfirm = useCallback5(async () => {
+  const handlePayPalConfirm = useCallback4(async () => {
     if (!flopay || !elements) return;
     try {
       setSubmitting(true);
@@ -4617,11 +4507,11 @@ function PayPalButton({
     }
   }, [flopay, elements, sessionId, email, baseUrl, dispatchTokenizedBody, onErrorChange]);
   if (!flopay || !elements) {
-    return /* @__PURE__ */ jsx9("div", { style: { height: 45, background: "#f0f0f0", borderRadius: 6, animation: "pulse 1.5s infinite" } });
+    return /* @__PURE__ */ jsx8("div", { style: { height: 45, background: "#f0f0f0", borderRadius: 6, animation: "pulse 1.5s infinite" } });
   }
-  return /* @__PURE__ */ jsxs7(Fragment5, { children: [
-    !ready && /* @__PURE__ */ jsx9("div", { style: { height: 45, background: "#f0f0f0", borderRadius: 6 } }),
-    /* @__PURE__ */ jsx9("div", { style: ready ? {} : { display: "none" }, children: /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsxs6(Fragment5, { children: [
+    !ready && /* @__PURE__ */ jsx8("div", { style: { height: 45, background: "#f0f0f0", borderRadius: 6 } }),
+    /* @__PURE__ */ jsx8("div", { style: ready ? {} : { display: "none" }, children: /* @__PURE__ */ jsx8(
       "button",
       {
         type: "button",
@@ -4643,7 +4533,7 @@ function PayPalButton({
         children: submitting ? "Processing..." : "PayPal"
       }
     ) }),
-    (submitting || isProcessing) && /* @__PURE__ */ jsx9("div", { style: {
+    (submitting || isProcessing) && /* @__PURE__ */ jsx8("div", { style: {
       position: "fixed",
       inset: 0,
       background: "rgba(0,0,0,0.4)",
@@ -4651,7 +4541,7 @@ function PayPalButton({
       alignItems: "center",
       justifyContent: "center",
       zIndex: 1e3
-    }, children: /* @__PURE__ */ jsx9("div", { style: {
+    }, children: /* @__PURE__ */ jsx8("div", { style: {
       background: "white",
       borderRadius: 8,
       padding: "1.5rem",
@@ -4663,10 +4553,10 @@ function PayPalButton({
 }
 
 // src/automatic-payment-button.tsx
-import { useCallback as useCallback6, useEffect as useEffect8, useMemo as useMemo4, useRef as useRef5, useState as useState7 } from "react";
-import { PaymentAPI as PaymentAPI3 } from "@flopay/js";
+import { useCallback as useCallback5, useEffect as useEffect7, useMemo as useMemo4, useRef as useRef5, useState as useState6 } from "react";
+import { PaymentAPI as PaymentAPI6 } from "@flopay/js";
 import { FloPayError as FloPayError7, resolveBillingApiUrl as resolveBillingApiUrl4, resolveButtonsLayoutTheme as resolveButtonsLayoutTheme3 } from "@flopay/shared";
-import { Fragment as Fragment6, jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
 var DEFAULT_BUTTONS_LAYOUT_BUTTON_HEIGHT3 = 44;
 var PAYPAL_RESUME_STORAGE_KEY2 = "flopay_automatic_payment_button_resume";
 function sleep2(ms) {
@@ -4813,10 +4703,10 @@ function FloPayAutomaticPaymentButton({
       utmMetadata
     ]
   );
-  const [isProcessing, setIsProcessing] = useState7(false);
-  const [overlayStatus, setOverlayStatus] = useState7(null);
-  const [overlayError, setOverlayError] = useState7(null);
-  const [fallbackSession, setFallbackSession] = useState7(null);
+  const [isProcessing, setIsProcessing] = useState6(false);
+  const [overlayStatus, setOverlayStatus] = useState6(null);
+  const [overlayError, setOverlayError] = useState6(null);
+  const [fallbackSession, setFallbackSession] = useState6(null);
   const automaticPaymentToken = useMemo4(
     () => paymentMethodId ? {
       id: paymentMethodId,
@@ -4831,25 +4721,25 @@ function FloPayAutomaticPaymentButton({
   const onSuccessRef = useRef5(onSuccess);
   const onErrorRef = useRef5(onError);
   const onDeclineRef = useRef5(onDecline);
-  useEffect8(() => {
+  useEffect7(() => {
     fallbackSessionRef.current = fallbackSession;
   }, [fallbackSession]);
-  useEffect8(() => {
+  useEffect7(() => {
     onSuccessRef.current = onSuccess;
   }, [onSuccess]);
-  useEffect8(() => {
+  useEffect7(() => {
     onErrorRef.current = onError;
   }, [onError]);
-  useEffect8(() => {
+  useEffect7(() => {
     onDeclineRef.current = onDecline;
   }, [onDecline]);
-  useEffect8(() => {
+  useEffect7(() => {
     isMountedRef.current = true;
     return () => {
       isMountedRef.current = false;
     };
   }, []);
-  useEffect8(() => {
+  useEffect7(() => {
     if (!fallbackSession || typeof window === "undefined") {
       return;
     }
@@ -4863,13 +4753,13 @@ function FloPayAutomaticPaymentButton({
       window.removeEventListener("keydown", handleKeyDown);
     };
   }, [fallbackSession]);
-  const emitDecline = useCallback6((error, method = DEFAULT_SAVED_PAYMENT_DECLINE_METHOD) => {
+  const emitDecline = useCallback5((error, method = DEFAULT_SAVED_PAYMENT_DECLINE_METHOD) => {
     onDeclineRef.current?.(buildDeclineEvent(method, error, {
       code: error.code,
       declineCode: error.declineCode
     }));
   }, []);
-  const showSuccess = useCallback6(async (event) => {
+  const showSuccess = useCallback5(async (event) => {
     if (!isMountedRef.current) return;
     setOverlayError(null);
     setOverlayStatus("success");
@@ -4877,7 +4767,7 @@ function FloPayAutomaticPaymentButton({
     if (!isMountedRef.current) return;
     onSuccessRef.current?.(event);
   }, []);
-  const showError = useCallback6(async (error, options) => {
+  const showError = useCallback5(async (error, options) => {
     if (!isMountedRef.current) return;
     onErrorRef.current?.(error);
     if (options?.emitDecline) {
@@ -4887,7 +4777,7 @@ function FloPayAutomaticPaymentButton({
     setOverlayStatus("error");
     await sleep2(PROCESSING_OVERLAY_ERROR_DELAY_MS);
   }, [emitDecline]);
-  const processResolvedSession = useCallback6(async (apiResult, resolvedSessionId, options) => {
+  const processResolvedSession = useCallback5(async (apiResult, resolvedSessionId, options) => {
     const session = apiResult.data.session ?? null;
     if (!session) {
       throw new FloPayError7("No session data returned", "api_error");
@@ -4911,6 +4801,29 @@ function FloPayAutomaticPaymentButton({
       const redirectResult = getRedirectResultFromCheckoutProcessError(apiResult.autoProcessingError);
       const shouldTreatCreateSessionFlowAsServerAutoAttempt = options?.fromCreateSession && (apiResult.autoProcessingAttempted === true || !!apiResult.autoProcessingError || !!redirectResult);
       const shouldRetryPayPalClientSide = checkoutMethod === "paypal" && automaticPaymentToken?.isPaypal === true && options?.fromCreateSession === true;
+      if (apiResult.autoProcessingPending) {
+        const api = new PaymentAPI6(resolvedBillingUrl);
+        const completed = await api.waitForCheckoutSessionCompletion(apiResult.autoProcessingPending.sessionId, {
+          initialDelayMs: apiResult.autoProcessingPending.retryAfterMs
+        });
+        const completedSession = completed.data.session;
+        if (!completedSession || completedSession.status !== "complete") {
+          throw new FloPayError7("Automatic payment failed. Please try again.", "api_error", {
+            code: completedSession?.status === "expired" ? "checkout_session_expired" : "checkout_processing_timeout"
+          });
+        }
+        await showSuccess({
+          result: {
+            status: "succeeded",
+            paymentMethodId: paymentMethodId ?? void 0,
+            checkoutMethod
+          },
+          session: completedSession,
+          sessionId: completedSession.id || resolvedSessionId,
+          autoCompleted: false
+        });
+        return;
+      }
       if (redirectResult) {
         const {
           publishableKey,
@@ -5087,7 +5000,7 @@ function FloPayAutomaticPaymentButton({
     showError,
     showSuccess
   ]);
-  const handleButtonClick = useCallback6(async (event) => {
+  const handleButtonClick = useCallback5(async (event) => {
     buttonProps.onClick?.(event);
     if (event.defaultPrevented || disabled || isProcessing) {
       return;
@@ -5121,7 +5034,7 @@ function FloPayAutomaticPaymentButton({
     setOverlayError(null);
     setOverlayStatus("processing");
     try {
-      const api = new PaymentAPI3(resolvedBillingUrl);
+      const api = new PaymentAPI6(resolvedBillingUrl);
       if (sessionId) {
         const result = await api.getUnifiedCheckoutSession(sessionId);
         await processResolvedSession(result, sessionId);
@@ -5169,7 +5082,7 @@ function FloPayAutomaticPaymentButton({
     showError,
     showSuccess
   ]);
-  const handleFallbackComplete = useCallback6((result) => {
+  const handleFallbackComplete = useCallback5((result) => {
     const activeFallback = fallbackSessionRef.current;
     setFallbackSession(null);
     onSuccessRef.current?.({
@@ -5179,13 +5092,13 @@ function FloPayAutomaticPaymentButton({
       autoCompleted: false
     });
   }, []);
-  const handleFallbackError = useCallback6((error) => {
+  const handleFallbackError = useCallback5((error) => {
     onErrorRef.current?.(error);
   }, []);
-  const handleFallbackDecline = useCallback6((decline) => {
+  const handleFallbackDecline = useCallback5((decline) => {
     onDeclineRef.current?.(decline);
   }, []);
-  useEffect8(() => {
+  useEffect7(() => {
     if (typeof window === "undefined" || resumeAttemptedRef.current) {
       return;
     }
@@ -5251,7 +5164,7 @@ function FloPayAutomaticPaymentButton({
             { checkoutMethod: "paypal" }
           );
         }
-        const api = new PaymentAPI3(resolvedBillingUrl);
+        const api = new PaymentAPI6(resolvedBillingUrl);
         const sessionResult = await api.getUnifiedCheckoutSession(resumeState.sessionId);
         let resumeSession = sessionResult.data.session;
         if (!resumeSession) {
@@ -5326,8 +5239,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__ */ jsxs8(Fragment6, { children: [
-    /* @__PURE__ */ jsx10(
+  return /* @__PURE__ */ jsxs7(Fragment6, { children: [
+    /* @__PURE__ */ jsx9(
       "button",
       {
         ...buttonProps,
@@ -5368,17 +5281,17 @@ function FloPayAutomaticPaymentButton({
             e.currentTarget.style.transform = "scale(1)";
           }
         },
-        children: /* @__PURE__ */ jsx10(CardButtonContentSlot, { content: children })
+        children: /* @__PURE__ */ jsx9(CardButtonContentSlot, { content: children })
       }
     ),
-    overlayStatus && /* @__PURE__ */ jsx10(
+    overlayStatus && /* @__PURE__ */ jsx9(
       ProcessingOverlay,
       {
         status: overlayStatus,
         errorMessage: overlayError
       }
     ),
-    fallbackSession && /* @__PURE__ */ jsx10(
+    fallbackSession && /* @__PURE__ */ jsx9(
       "div",
       {
         "data-testid": "flopay-automatic-payment-fallback",
@@ -5399,7 +5312,7 @@ function FloPayAutomaticPaymentButton({
           padding: "1.5rem",
           zIndex: 1100
         },
-        children: /* @__PURE__ */ jsx10(
+        children: /* @__PURE__ */ jsx9(
           "div",
           {
             style: {
@@ -5415,7 +5328,7 @@ function FloPayAutomaticPaymentButton({
               flexDirection: "column",
               gap: "1rem"
             },
-            children: /* @__PURE__ */ jsx10(
+            children: /* @__PURE__ */ jsx9(
               FloPayCheckout,
               {
                 sessionId: fallbackSession.sessionId,
@@ -5445,11 +5358,9 @@ export {
   FloPayAutomaticPaymentButton,
   FloPayCheckout,
   FloPayProvider,
-  InAppBrowserNotice,
   PayPalButton,
   PaymentElement,
   SplitCardForm,
-  isInAppBrowser,
   useCheckout,
   useElements,
   useFloPay,