@flopay/react 1.2.0 → 1.2.4

package/dist/index.cjs

@@ -714,6 +714,7 @@ var import_jsx_runtime5 = require("react/jsx-runtime");
 var DEFAULT_BUTTON_HEIGHT = 45;
 function DirectPayPalButton({
   sessionId,
+  nonce,
   billingApiUrl,
   email,
   clientId,
@@ -751,6 +752,7 @@ function DirectPayPalButton({
   const runBeforeButtonClickRef = (0, import_react7.useRef)(runBeforeButtonClick);
   const sessionRef = (0, import_react7.useRef)(session);
   const emailRef = (0, import_react7.useRef)(email);
+  const nonceRef = (0, import_react7.useRef)(nonce);
   const beforeClickRef = (0, import_react7.useRef)(null);
   (0, import_react7.useEffect)(() => {
     onTokenizedBodyRef.current = onTokenizedBody;
@@ -779,6 +781,9 @@ function DirectPayPalButton({
   (0, import_react7.useEffect)(() => {
     emailRef.current = email;
   }, [email]);
+  (0, import_react7.useEffect)(() => {
+    nonceRef.current = nonce;
+  }, [nonce]);
   (0, import_react7.useEffect)(() => {
     onLoadStateChangeRef.current?.(ready && !failed);
   }, [ready, failed]);
@@ -934,6 +939,7 @@ function DirectPayPalButton({
           effectiveUserId,
           {
             sessionId: effectiveSessionId,
+            nonce: nonceRef.current,
             tokenizedData: body,
             accountData: {
               userId: effectiveUserId,
@@ -968,9 +974,12 @@ function DirectPayPalButton({
       const prepared = beforeClickRef.current;
       const effectiveSessionId = prepared?.sessionId ?? sessionId;
       const effectiveEmail = prepared?.accountPatch?.email ?? emailRef.current;
+      const intentHeaders = { "Content-Type": "application/json" };
+      const currentNonce = nonceRef.current;
+      if (currentNonce) intentHeaders["x-checkout-session-token"] = currentNonce;
       const response = await fetch(`${baseUrl}/v1/checkouts/payments/intents`, {
         method: "POST",
-        headers: { "Content-Type": "application/json" },
+        headers: intentHeaders,
         body: JSON.stringify({
           sessionId: effectiveSessionId,
           email: effectiveEmail,
@@ -1263,6 +1272,7 @@ var import_shared6 = require("@flopay/shared");
 var import_jsx_runtime6 = require("react/jsx-runtime");
 var STRIPE_RESUME_KEY = "flopay_stripe_resume";
 var LEGACY_WALLET_RESUME_KEY = "flopay_wallet_resume";
+var PAYPAL_RESUME_KEY = "flopay_paypal_resume";
 var FLOPAY_KEYFRAMES = `
 .paypal-buttons { margin: 0 !important; vertical-align: top !important; }
 @keyframes flopay-spin { to { transform: rotate(360deg); } }
@@ -1399,6 +1409,7 @@ var SplitCardForm = (0, import_react8.forwardRef)(
 );
 function PayPalButtonInner({
   sessionId,
+  nonce,
   email,
   billingApiUrl,
   onTokenizedBody,
@@ -1428,6 +1439,25 @@ function PayPalButtonInner({
     const redirectStatus = params.get("redirect_status");
     if (!paymentIntentId || !clientSecret) return;
     paypalResumeAttempted.current = true;
+    let persistedOverrides;
+    try {
+      const raw = localStorage.getItem(PAYPAL_RESUME_KEY);
+      if (raw) {
+        const parsed = JSON.parse(raw);
+        if (parsed.clientSecret === clientSecret) {
+          persistedOverrides = {
+            ...parsed.accountPatch ? { accountPatch: parsed.accountPatch } : {},
+            ...parsed.sessionId ? { sessionId: parsed.sessionId } : {},
+            ...parsed.nonce ? { nonce: parsed.nonce } : {}
+          };
+        }
+      }
+    } catch {
+    }
+    try {
+      localStorage.removeItem(PAYPAL_RESUME_KEY);
+    } catch {
+    }
     const cleanedUrl = new URL(window.location.href);
     cleanedUrl.searchParams.delete("payment_intent");
     cleanedUrl.searchParams.delete("payment_intent_client_secret");
@@ -1454,7 +1484,7 @@ function PayPalButtonInner({
             type: "card",
             threeDSecureActionResultTokenId: paymentIntent.id,
             isPaypal: true
-          });
+          }, persistedOverrides);
         } else {
           const message = "PayPal payment was not completed. Please try again.";
           onErrorChange?.(message);
@@ -1480,7 +1510,8 @@ function PayPalButtonInner({
     }
     beforeClickRef.current = {
       accountPatch: beforeClick.accountPatch,
-      sessionId: beforeClick.sessionId
+      sessionId: beforeClick.sessionId,
+      nonce: beforeClick.nonce
     };
     onButtonClick?.("paypal");
     event.resolve();
@@ -1497,10 +1528,12 @@ function PayPalButtonInner({
       }
       prepared = {
         accountPatch: beforeClick.accountPatch,
-        sessionId: beforeClick.sessionId
+        sessionId: beforeClick.sessionId,
+        nonce: beforeClick.nonce
       };
     }
     const effectiveSessionId = prepared?.sessionId ?? sessionId;
+    const effectiveNonce = prepared?.nonce ?? nonce;
     const effectiveEmail = prepared?.accountPatch?.email ?? email;
     try {
       setSubmitting(true);
@@ -1516,9 +1549,11 @@ function PayPalButtonInner({
         event.paymentFailed({ reason: "fail", message });
         return;
       }
+      const intentHeaders = { "Content-Type": "application/json" };
+      if (effectiveNonce) intentHeaders["x-checkout-session-token"] = effectiveNonce;
       const intentResponse = await fetch(`${baseUrl}/v1/checkouts/payments/intents`, {
         method: "POST",
-        headers: { "Content-Type": "application/json" },
+        headers: intentHeaders,
         body: JSON.stringify({
           sessionId: effectiveSessionId,
           email: effectiveEmail,
@@ -1547,12 +1582,29 @@ function PayPalButtonInner({
       if (paymentMethod?.id) {
         confirmParams["payment_method"] = paymentMethod.id;
       }
+      if (typeof window !== "undefined") {
+        try {
+          localStorage.setItem(PAYPAL_RESUME_KEY, JSON.stringify({
+            clientSecret: intentClientSecret,
+            sessionId: effectiveSessionId,
+            nonce: effectiveNonce,
+            accountPatch: prepared?.accountPatch
+          }));
+        } catch {
+        }
+      }
       const { error: confirmError, paymentIntent } = await stripe.confirmPayment({
         clientSecret: intentClientSecret,
         confirmParams,
         redirect: "if_required"
       });
       if (confirmError) {
+        if (typeof window !== "undefined") {
+          try {
+            localStorage.removeItem(PAYPAL_RESUME_KEY);
+          } catch {
+          }
+        }
         const message = confirmError.message ?? "PayPal payment failed.";
         onErrorChange?.(message);
         onDecline?.(buildDeclineEvent("paypal", message, {
@@ -1560,6 +1612,12 @@ function PayPalButtonInner({
         }));
         return;
       }
+      if (typeof window !== "undefined") {
+        try {
+          localStorage.removeItem(PAYPAL_RESUME_KEY);
+        } catch {
+        }
+      }
       const confirmedPmId = typeof paymentIntent?.payment_method === "string" ? paymentIntent.payment_method : paymentIntent?.payment_method?.id;
       onTokenizedBody({
         id: confirmedPmId ?? paymentIntent?.id,
@@ -1568,7 +1626,8 @@ function PayPalButtonInner({
         isPaypal: true
       }, {
         accountPatch: prepared?.accountPatch,
-        sessionId: effectiveSessionId
+        sessionId: effectiveSessionId,
+        nonce: effectiveNonce
       });
       return;
     } catch (err) {
@@ -1576,7 +1635,7 @@ function PayPalButtonInner({
     } finally {
       setSubmitting(false);
     }
-  }, [stripe, elements, sessionId, email, baseUrl, onTokenizedBody, onErrorChange, onDecline, runBeforeButtonClick]);
+  }, [stripe, elements, sessionId, nonce, email, baseUrl, onTokenizedBody, onErrorChange, onDecline, runBeforeButtonClick]);
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
       ExpressCheckoutReadySwap,
@@ -1616,6 +1675,7 @@ function PayPalButtonInner({
 }
 function WalletButtonInner({
   sessionId,
+  nonce,
   email,
   billingApiUrl,
   expressMethods,
@@ -1652,11 +1712,13 @@ function WalletButtonInner({
         }
         prepared = {
           accountPatch: beforeClick.accountPatch,
-          sessionId: beforeClick.sessionId
+          sessionId: beforeClick.sessionId,
+          nonce: beforeClick.nonce
         };
       }
       const method = buttonMethod;
       const effectiveSessionId = prepared?.sessionId ?? sessionId;
+      const effectiveNonce = prepared?.nonce ?? nonce;
       const effectiveEmail = prepared?.accountPatch?.email ?? email;
       try {
         setSubmitting(true);
@@ -1674,9 +1736,11 @@ function WalletButtonInner({
         if (!effectiveSessionId || !effectiveEmail) {
           throw new Error("Missing sessionId or email for wallet payment");
         }
+        const intentHeaders = { "Content-Type": "application/json" };
+        if (effectiveNonce) intentHeaders["x-checkout-session-token"] = effectiveNonce;
         const intentResponse = await fetch(`${baseUrl}/v1/checkouts/payments/intents`, {
           method: "POST",
-          headers: { "Content-Type": "application/json" },
+          headers: intentHeaders,
           body: JSON.stringify({
             sessionId: effectiveSessionId,
             email: effectiveEmail,
@@ -1715,7 +1779,8 @@ function WalletButtonInner({
           threeDSecureActionResultTokenId: paymentIntent?.id
         }, {
           accountPatch: prepared?.accountPatch,
-          sessionId: effectiveSessionId
+          sessionId: effectiveSessionId,
+          nonce: effectiveNonce
         });
       } catch (err) {
         onErrorChange?.(err instanceof Error ? err.message : "Wallet payment failed. Please try again.");
@@ -1723,7 +1788,7 @@ function WalletButtonInner({
         setSubmitting(false);
       }
     },
-    [stripe, elements, sessionId, email, baseUrl, onTokenizedBody, onErrorChange, onDecline, runBeforeButtonClick]
+    [stripe, elements, sessionId, nonce, email, baseUrl, onTokenizedBody, onErrorChange, onDecline, runBeforeButtonClick]
   );
   const expressMethodMap = (0, import_react8.useMemo)(() => {
     const allKeys = ["applePay", "googlePay", "paypal", "link", "amazonPay", "klarna"];
@@ -1769,7 +1834,8 @@ function WalletButtonInner({
               }
               beforeClickRef.current = {
                 accountPatch: beforeClick.accountPatch,
-                sessionId: beforeClick.sessionId
+                sessionId: beforeClick.sessionId,
+                nonce: beforeClick.nonce
               };
               onButtonClick?.(lastWalletMethodRef.current);
               event.resolve();
@@ -1924,6 +1990,7 @@ function StripeMethodButton({
 function StripeMethodInlineForm({
   method,
   sessionId,
+  nonce,
   email,
   billingName,
   billingApiUrl,
@@ -1957,6 +2024,7 @@ function StripeMethodInlineForm({
     }
     onButtonClick?.("card");
     const effectiveSessionId = beforeClick.sessionId ?? sessionId;
+    const effectiveNonce = beforeClick.nonce ?? nonce;
     const effectiveEmail = beforeClick.accountPatch?.email ?? email;
     try {
       onErrorChange?.(null);
@@ -1974,9 +2042,11 @@ function StripeMethodInlineForm({
       if (!effectiveSessionId || !effectiveEmail) {
         throw new Error("Missing sessionId or email for payment.");
       }
+      const intentHeaders = { "Content-Type": "application/json" };
+      if (effectiveNonce) intentHeaders["x-checkout-session-token"] = effectiveNonce;
       const intentResponse = await fetch(`${baseUrl}/v1/checkouts/payments/intents`, {
         method: "POST",
-        headers: { "Content-Type": "application/json" },
+        headers: intentHeaders,
         body: JSON.stringify({
           sessionId: effectiveSessionId,
           email: effectiveEmail,
@@ -1996,7 +2066,10 @@ function StripeMethodInlineForm({
       if (typeof window !== "undefined") {
         try {
           localStorage.setItem(STRIPE_RESUME_KEY, JSON.stringify({
+            clientSecret: intentClientSecret,
             sessionId: effectiveSessionId,
+            nonce: effectiveNonce,
+            accountPatch: beforeClick.accountPatch,
             paymentMethodId: paymentMethod.id,
             paymentMethodType: paymentMethod.type ?? method,
             gateway: "stripe"
@@ -2053,7 +2126,8 @@ function StripeMethodInlineForm({
         paymentMethodType: paymentMethod.type ?? method
       }, {
         accountPatch: beforeClick.accountPatch,
-        sessionId: effectiveSessionId
+        sessionId: effectiveSessionId,
+        nonce: effectiveNonce
       });
     } catch (err) {
       onErrorChange?.(err instanceof Error ? err.message : "Payment failed. Please try again.");
@@ -2069,6 +2143,7 @@ function StripeMethodInlineForm({
     runBeforeButtonClick,
     onButtonClick,
     sessionId,
+    nonce,
     email,
     baseUrl,
     method,
@@ -2129,6 +2204,7 @@ function StripeMethodInlineForm({
 }
 function StripePaymentElementInner({
   sessionId,
+  nonce,
   email,
   billingName,
   billingApiUrl,
@@ -2174,15 +2250,18 @@ function StripePaymentElementInner({
     }
     onButtonClick?.("card");
     const effectiveSessionId = beforeClick.sessionId ?? sessionId;
+    const effectiveNonce = beforeClick.nonce ?? nonce;
     const effectiveEmail = beforeClick.accountPatch?.email ?? email;
     try {
       onErrorChange?.(null);
       if (!effectiveSessionId || !effectiveEmail) {
         throw new Error("Missing sessionId or email for payment.");
       }
+      const intentHeaders = { "Content-Type": "application/json" };
+      if (effectiveNonce) intentHeaders["x-checkout-session-token"] = effectiveNonce;
       const intentResponse = await fetch(`${baseUrl}/v1/checkouts/payments/intents`, {
         method: "POST",
-        headers: { "Content-Type": "application/json" },
+        headers: intentHeaders,
         body: JSON.stringify({
           sessionId: effectiveSessionId,
           email: effectiveEmail,
@@ -2206,7 +2285,10 @@ function StripePaymentElementInner({
       if (typeof window !== "undefined") {
         try {
           localStorage.setItem(STRIPE_RESUME_KEY, JSON.stringify({
+            clientSecret: intentClientSecret,
             sessionId: effectiveSessionId,
+            nonce: effectiveNonce,
+            accountPatch: beforeClick.accountPatch,
             paymentMethodType: method,
             gateway: "stripe"
           }));
@@ -2271,7 +2353,8 @@ function StripePaymentElementInner({
         paymentMethodType: method
       }, {
         accountPatch: beforeClick.accountPatch,
-        sessionId: effectiveSessionId
+        sessionId: effectiveSessionId,
+        nonce: effectiveNonce
       });
     } catch (err) {
       onErrorChange?.(err instanceof Error ? err.message : "Payment failed. Please try again.");
@@ -2285,6 +2368,7 @@ function StripePaymentElementInner({
     runBeforeButtonClick,
     onButtonClick,
     sessionId,
+    nonce,
     email,
     baseUrl,
     billingName,
@@ -2376,6 +2460,7 @@ function StripePaymentElementInner({
 }
 function SplitCardFormInner({
   sessionId,
+  nonce,
   billingApiUrl,
   email,
   userId,
@@ -2685,19 +2770,24 @@ function SplitCardFormInner({
   const applyInlineSessionPatch = (0, import_react8.useCallback)(
     (patch, method) => {
       if (!checkout.applyInlineSessionPatch) {
-        return Promise.resolve({ error: null, sessionId });
+        return Promise.resolve({ error: null, sessionId, nonce });
       }
       return checkout.applyInlineSessionPatch(patch).then((result) => ({
         error: null,
-        sessionId: result.sessionId || sessionId
+        sessionId: result.sessionId || sessionId,
+        // A freshly bootstrapped session carries its own nonce on
+        // `session.clientSecret`. Pair it with the new sessionId so
+        // downstream continuation calls don't send the new id with the
+        // prior session-bound token.
+        nonce: result.session?.clientSecret || nonce
       })).catch((err) => {
         const floPayErr = normalizeBeforeButtonClickError(method, err);
         updateError(floPayErr.message);
         onError?.(floPayErr);
-        return { error: floPayErr, sessionId };
+        return { error: floPayErr, sessionId, nonce };
       });
     },
-    [checkout.applyInlineSessionPatch, onError, sessionId, updateError]
+    [checkout.applyInlineSessionPatch, nonce, onError, sessionId, updateError]
   );
   const runBeforeButtonClick = (0, import_react8.useCallback)(async (method) => {
     if (!onBeforeButtonClick) return { proceed: true };
@@ -2724,7 +2814,8 @@ function SplitCardFormInner({
         return {
           proceed: true,
           accountPatch: result.account,
-          sessionId: patchResult.sessionId
+          sessionId: patchResult.sessionId,
+          nonce: patchResult.nonce
         };
       }
       return { proceed: true };
@@ -2743,6 +2834,7 @@ function SplitCardFormInner({
       setOverlayStatus("processing");
       updateError(null);
       const effectiveSessionId = overrides?.sessionId ?? sessionId;
+      const effectiveNonce = overrides?.nonce ?? nonce;
       const effectiveAccount = mergeAccountPatch(resolvedAccount, overrides?.accountPatch);
       const resolvedCompletionPaymentMethodId = overrides?.completionPaymentMethodId ?? resolveTokenizedPaymentMethodId(tokenizedBody);
       const requestTokenizedBody = tokenizedBody.originalPaymentMethodId ? { ...tokenizedBody, originalPaymentMethodId: void 0 } : tokenizedBody;
@@ -2750,6 +2842,7 @@ function SplitCardFormInner({
         const api = new import_js2.PaymentAPI(baseUrl);
         const response = await api.processPayment(effectiveAccount.userId ?? "", {
           sessionId: effectiveSessionId,
+          nonce: effectiveNonce,
           tokenizedData: requestTokenizedBody,
           accountData: {
             userId: effectiveAccount.userId ?? "",
@@ -2853,6 +2946,12 @@ function SplitCardFormInner({
                 type: "card",
                 threeDSecureActionResultTokenId: result.paymentIntentId
               }, {
+                // Preserve the session/nonce/account overrides resolved
+                // above so the retry talks to the same (possibly
+                // freshly bootstrapped) session as the original attempt.
+                accountPatch: overrides?.accountPatch,
+                sessionId: effectiveSessionId,
+                nonce: effectiveNonce,
                 completionPaymentMethodId: resolvedCompletionPaymentMethodId
               });
             }
@@ -2936,7 +3035,7 @@ function SplitCardFormInner({
         processingRef.current = false;
       }
     },
-    [baseUrl, sessionId, resolvedAccount, fullName, chv, flopay, paypalFlopay, onComplete, onError, updateError, emitDecline]
+    [baseUrl, sessionId, nonce, resolvedAccount, fullName, chv, flopay, paypalFlopay, onComplete, onError, updateError, emitDecline]
   );
   const dispatchTokenizedBody = (0, import_react8.useCallback)(
     (tokenizedBody, overrides) => {
@@ -2994,7 +3093,17 @@ function SplitCardFormInner({
       }
     };
     const payload = readPayload(STRIPE_RESUME_KEY) ?? readPayload(LEGACY_WALLET_RESUME_KEY);
-    if (payload?.sessionId && payload.sessionId !== sessionId) return;
+    let persistedOverrides;
+    if (payload?.clientSecret) {
+      if (payload.clientSecret !== clientSecret) return;
+      persistedOverrides = {
+        ...payload.accountPatch ? { accountPatch: payload.accountPatch } : {},
+        ...payload.sessionId ? { sessionId: payload.sessionId } : {},
+        ...payload.nonce ? { nonce: payload.nonce } : {}
+      };
+    } else if (payload?.sessionId && payload.sessionId !== sessionId) {
+      return;
+    }
     stripeResumeAttemptedRef.current = true;
     localStorage.removeItem(STRIPE_RESUME_KEY);
     localStorage.removeItem(LEGACY_WALLET_RESUME_KEY);
@@ -3041,7 +3150,7 @@ function SplitCardFormInner({
         threeDSecureActionResultTokenId: paymentIntent.id,
         gateway: payload?.gateway ?? "stripe",
         paymentMethodType
-      });
+      }, persistedOverrides);
     })();
   }, [sessionId, dispatchTokenizedBody, flopay, updateError, emitDecline]);
   const handleSubmit = (0, import_react8.useCallback)(
@@ -3112,9 +3221,11 @@ function SplitCardFormInner({
         if (!sessionId || !resolvedAccount.email) {
           throw new import_shared6.FloPayError("Missing sessionId or email", "validation_error");
         }
+        const intentHeaders = { "Content-Type": "application/json" };
+        if (nonce) intentHeaders["x-checkout-session-token"] = nonce;
         const intentResponse = await fetch(`${baseUrl}/v1/checkouts/payments/intents`, {
           method: "POST",
-          headers: { "Content-Type": "application/json" },
+          headers: intentHeaders,
           body: JSON.stringify({
             sessionId,
             email: resolvedAccount.email,
@@ -3182,7 +3293,7 @@ function SplitCardFormInner({
         }
       }
     },
-    [flopay, elements, isSubmitting, sessionId, resolvedAccount.email, baseUrl, isSelfContained, dispatchTokenizedBody, onButtonClick, onError, updateError, emitDecline, layout]
+    [flopay, elements, isSubmitting, sessionId, nonce, resolvedAccount.email, baseUrl, isSelfContained, dispatchTokenizedBody, onButtonClick, onError, updateError, emitDecline, layout]
   );
   const isReady = flopay !== null && elements !== null;
   if (!isReady) {
@@ -3714,6 +3825,7 @@ function SplitCardFormInner({
                   DirectPayPalButton,
                   {
                     sessionId,
+                    nonce,
                     billingApiUrl: resolvedBillingApiUrl,
                     email: resolvedAccount.email,
                     clientId: directPaypal.clientId,
@@ -3739,6 +3851,7 @@ function SplitCardFormInner({
                 PayPalButtonInner,
                 {
                   sessionId,
+                  nonce,
                   email: resolvedAccount.email,
                   billingApiUrl: resolvedBillingApiUrl,
                   onTokenizedBody: dispatchTokenizedBody,
@@ -3755,6 +3868,7 @@ function SplitCardFormInner({
                 WalletButtonInner,
                 {
                   sessionId,
+                  nonce,
                   email: resolvedAccount.email,
                   billingApiUrl: resolvedBillingApiUrl,
                   expressMethods: walletExpressMethods,
@@ -3771,6 +3885,7 @@ function SplitCardFormInner({
                 StripePaymentElementInner,
                 {
                   sessionId,
+                  nonce,
                   email: resolvedAccount.email,
                   billingName: [resolvedAccount.firstName, resolvedAccount.lastName].filter(Boolean).join(" ").trim() || void 0,
                   billingApiUrl: resolvedBillingApiUrl,
@@ -3946,6 +4061,7 @@ function SplitCardFormInner({
                 {
                   method: expandedApmMethod,
                   sessionId,
+                  nonce,
                   email: resolvedAccount.email,
                   billingName: [resolvedAccount.firstName, resolvedAccount.lastName].filter(Boolean).join(" ").trim() || void 0,
                   billingApiUrl: resolvedBillingApiUrl,
@@ -4044,6 +4160,7 @@ function SplitCardFormInner({
               {
                 method: expandedApmMethod,
                 sessionId,
+                nonce,
                 email: resolvedAccount.email,
                 billingName: [resolvedAccount.firstName, resolvedAccount.lastName].filter(Boolean).join(" ").trim() || void 0,
                 billingApiUrl: resolvedBillingApiUrl,
@@ -4092,6 +4209,7 @@ function SplitCardFormInner({
           DirectPayPalButton,
           {
             sessionId,
+            nonce,
             billingApiUrl: resolvedBillingApiUrl,
             email: resolvedAccount.email,
             clientId: directPaypal.clientId,
@@ -4117,6 +4235,7 @@ function SplitCardFormInner({
         PayPalButtonInner,
         {
           sessionId,
+          nonce,
           email: resolvedAccount.email,
           billingApiUrl: resolvedBillingApiUrl,
           onTokenizedBody: dispatchTokenizedBody,
@@ -4133,6 +4252,7 @@ function SplitCardFormInner({
         WalletButtonInner,
         {
           sessionId,
+          nonce,
           email: resolvedAccount.email,
           billingApiUrl: resolvedBillingApiUrl,
           expressMethods: walletExpressMethods,
@@ -4149,6 +4269,7 @@ function SplitCardFormInner({
         StripePaymentElementInner,
         {
           sessionId,
+          nonce,
           email: resolvedAccount.email,
           billingName: [resolvedAccount.firstName, resolvedAccount.lastName].filter(Boolean).join(" ").trim() || void 0,
           billingApiUrl: resolvedBillingApiUrl,
@@ -4292,6 +4413,7 @@ function getRedirectTokenFromProcessResponse(json, options) {
 async function recover3DSRedirectResult({
   billingApiUrl,
   sessionId,
+  nonce,
   responseJson
 }) {
   const directToken = getRedirectTokenFromProcessResponse(responseJson, {
@@ -4308,7 +4430,7 @@ async function recover3DSRedirectResult({
   }
   try {
     const api = new import_js3.PaymentAPI(billingApiUrl);
-    const unified = await api.getUnifiedCheckoutSession(sessionId);
+    const unified = await api.getUnifiedCheckoutSession(sessionId, nonce);
     const refreshedToken = unified.data.stripe?.clientSecret;
     if (isStripePaymentIntentClientSecret(refreshedToken)) {
       return {
@@ -4338,6 +4460,7 @@ async function processSavedPaymentForMode({
   const api = new import_js3.PaymentAPI(baseUrl);
   const response = await retryOnceOnFetchFailure(() => api.processPayment(customerId, {
     sessionId: resolvedSessionId,
+    nonce: session.clientSecret,
     tokenizedData,
     accountData: {
       userId: customerId,
@@ -4380,6 +4503,7 @@ async function processSavedPaymentForMode({
     const recoveredRedirect = await recover3DSRedirectResult({
       billingApiUrl: baseUrl,
       sessionId: resolvedSessionId,
+      nonce: session.clientSecret,
       responseJson: json
     });
     if (recoveredRedirect) {
@@ -5517,6 +5641,8 @@ function FloPayCheckout({
     return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CheckoutContext.Provider, { value: checkoutValue, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
       "div",
       {
+        role: "alert",
+        "data-testid": "flopay-load-error",
         style: {
           padding: 24,
           textAlign: "center",
@@ -5572,6 +5698,7 @@ function FloPayCheckout({
           DirectPayPalButton,
           {
             sessionId: activeSessionId,
+            nonce: session.clientSecret || void 0,
             billingApiUrl: resolvedBillingUrl,
             email: session.customer?.email,
             clientId: directPaypalConfig.clientId,
@@ -5657,6 +5784,7 @@ function FloPayCheckout({
         SessionInjector,
         {
           sessionId: activeSessionId,
+          nonce: session?.clientSecret || void 0,
           billingApiUrl: resolvedBillingUrl,
           session,
           children
@@ -5666,6 +5794,7 @@ function FloPayCheckout({
       SplitCardForm,
       {
         sessionId: activeSessionId,
+        nonce: session?.clientSecret || void 0,
         email: session?.customer?.email,
         userId: session?.customer?.id,
         firstName: session?.customer?.firstName,
@@ -5716,6 +5845,7 @@ function FloPayCheckout({
 }
 function SessionInjector({
   sessionId,
+  nonce,
   billingApiUrl,
   session,
   children
@@ -5725,6 +5855,7 @@ function SessionInjector({
     const existing = child.props;
     const injected = {};
     if (!existing.sessionId) injected.sessionId = sessionId;
+    if (!existing.nonce && nonce) injected.nonce = nonce;
     if (!existing.billingApiUrl) injected.billingApiUrl = billingApiUrl;
     if (session?.customer) {
       if (!existing.email) injected.email = session.customer.email;
@@ -5974,6 +6105,7 @@ var CheckoutForm = (0, import_react10.forwardRef)(
 );
 function CheckoutFormInner({
   sessionId,
+  nonce,
   billingApiUrl,
   email,
   userId,
@@ -6028,6 +6160,7 @@ function CheckoutFormInner({
         const api = new import_js5.PaymentAPI(baseUrl);
         const response = await api.processPayment(userId ?? "", {
           sessionId,
+          nonce,
           tokenizedData: requestTokenizedBody,
           accountData: {
             userId: userId ?? "",
@@ -6127,7 +6260,7 @@ function CheckoutFormInner({
         setProcessing(false);
       }
     },
-    [baseUrl, sessionId, userId, email, firstName, lastName, chv, flopay, paypalFlopay, onComplete, onError, onDecline, updateError, emitDecline]
+    [baseUrl, sessionId, nonce, userId, email, firstName, lastName, chv, flopay, paypalFlopay, onComplete, onError, onDecline, updateError, emitDecline]
   );
   const dispatchTokenizedBody = (0, import_react10.useCallback)(
     (tokenizedBody) => {
@@ -6210,9 +6343,11 @@ function CheckoutFormInner({
         if (!sessionId || !email) {
           throw new import_shared9.FloPayError("Missing sessionId or email", "validation_error");
         }
+        const intentHeaders = { "Content-Type": "application/json" };
+        if (nonce) intentHeaders["x-checkout-session-token"] = nonce;
         const intentResponse = await fetch(`${baseUrl}/v1/checkouts/payments/intents`, {
           method: "POST",
-          headers: { "Content-Type": "application/json" },
+          headers: intentHeaders,
           body: JSON.stringify({
             sessionId,
             email,
@@ -6271,7 +6406,7 @@ function CheckoutFormInner({
         }
       }
     },
-    [flopay, elements, isSubmitting, sessionId, email, baseUrl, isSelfContained, dispatchTokenizedBody, onError, updateError, emitDecline]
+    [flopay, elements, isSubmitting, sessionId, nonce, email, firstName, lastName, baseUrl, isSelfContained, dispatchTokenizedBody, onError, updateError, emitDecline]
   );
   const isReady = flopay !== null && elements !== null;
   return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("form", { onSubmit: handleSubmit, className, style: { position: "relative" }, children: [
@@ -6309,6 +6444,7 @@ var import_react11 = require("react");
 var import_jsx_runtime9 = require("react/jsx-runtime");
 function PayPalButton({
   sessionId,
+  nonce,
   billingApiUrl,
   email,
   userId,
@@ -6333,6 +6469,7 @@ function PayPalButton({
         const api = new import_js6.PaymentAPI(baseUrl);
         const response = await api.processPayment(userId ?? "", {
           sessionId,
+          nonce,
           tokenizedData: tokenizedBody,
           accountData: {
             userId: userId ?? "",
@@ -6352,7 +6489,7 @@ function PayPalButton({
         onErrorChange?.(err instanceof Error ? err.message : "An unexpected error occurred");
       }
     },
-    [baseUrl, sessionId, userId, email, firstName, lastName, chv, onComplete, onErrorChange]
+    [baseUrl, sessionId, nonce, userId, email, firstName, lastName, chv, onComplete, onErrorChange]
   );
   const dispatchTokenizedBody = (0, import_react11.useCallback)(
     (body) => {
@@ -6423,6 +6560,7 @@ function PayPalButton({
       const result = await flopay.confirmPayPalPayment({
         billingApiUrl: baseUrl,
         sessionId,
+        nonce,
         email,
         returnUrl: window.location.href
       });
@@ -6443,7 +6581,7 @@ function PayPalButton({
     } finally {
       setSubmitting(false);
     }
-  }, [flopay, elements, sessionId, email, baseUrl, dispatchTokenizedBody, onErrorChange]);
+  }, [flopay, elements, sessionId, nonce, email, baseUrl, dispatchTokenizedBody, onErrorChange]);
   if (!flopay || !elements) {
     return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: { height: 45, background: "#f0f0f0", borderRadius: 6, animation: "pulse 1.5s infinite" } });
   }