@flopay/react 0.4.7 → 0.4.9

package/dist/index.cjs

@@ -126,13 +126,22 @@ function FloPayProvider({
       clientSecret: options?.clientSecret,
       amount: options?.amount,
       currency: options?.currency,
-      paymentMethodCreation: options?.paymentMethodCreation
+      paymentMethodCreation: options?.paymentMethodCreation,
+      setupFutureUsage: options?.setupFutureUsage
     });
     setElements(els);
     return () => {
       els.destroy();
     };
-  }, [flopay, options?.appearance, options?.clientSecret, options?.amount, options?.currency]);
+  }, [
+    flopay,
+    options?.appearance,
+    options?.clientSecret,
+    options?.amount,
+    options?.currency,
+    options?.paymentMethodCreation,
+    options?.setupFutureUsage
+  ]);
   const resolvedBillingApiUrl = (0, import_shared.resolveBillingApiUrl)(options?.billingApiUrl);
   const value = (0, import_react2.useMemo)(
     () => ({ flopay, paypalFlopay, elements, billingApiUrl: resolvedBillingApiUrl }),
@@ -550,6 +559,15 @@ function buildDeclineEvent(method, input, overrides) {
     ...declineCode ? { declineCode } : {}
   };
 }
+function mapPayPalIntentStatusToPaymentResult(status) {
+  if (status === "succeeded") {
+    return "succeeded";
+  }
+  if (status === "processing" || status === "requires_capture") {
+    return "processing";
+  }
+  return "failed";
+}
 function resolveTokenizedPaymentMethodId(tokenizedBody) {
   const candidates = [
     tokenizedBody?.id,
@@ -777,7 +795,10 @@ function PayPalButtonInner({
       const createPM = stripe.createPaymentMethod;
       const { error: pmError, paymentMethod } = await createPM({ type: "paypal" });
       if (pmError) {
-        console.warn("[FloPay] Could not create PayPal PM upfront:", pmError.message);
+        const message = pmError.message ?? "PayPal payment failed.";
+        onErrorChange?.(message);
+        event.paymentFailed({ reason: "fail", message });
+        return;
       }
       const intentResponse = await fetch(`${baseUrl}/v1/checkouts/payments/intents`, {
         method: "POST",
@@ -786,7 +807,9 @@ function PayPalButtonInner({
           sessionId: effectiveSessionId,
           email: effectiveEmail,
           paymentMethodType: paymentMethod?.id ?? "paypal",
-          isPaypal: "true"
+          isPaypal: "true",
+          setupFutureUsage: "off_session",
+          setup_future_usage: "off_session"
         })
       });
       if (!intentResponse.ok) throw new Error("Failed to create payment intent");
@@ -822,6 +845,7 @@ function PayPalButtonInner({
         accountPatch: prepared?.accountPatch,
         sessionId: effectiveSessionId
       });
+      return;
     } catch (err) {
       onErrorChange?.(err instanceof Error ? err.message : "PayPal payment failed. Please try again.");
     } finally {
@@ -842,6 +866,9 @@ function PayPalButtonInner({
         },
         options: {
           buttonType: { paypal: "paypal" },
+          billingAddressRequired: false,
+          phoneNumberRequired: false,
+          shippingAddressRequired: false,
           paymentMethods: {
             applePay: "never",
             googlePay: "never",
@@ -1121,7 +1148,8 @@ function SplitCardFormInner({
     mode: "payment",
     amount: amountInCents,
     currency: currency.toLowerCase(),
-    captureMethod: "manual"
+    captureMethod: "manual",
+    setupFutureUsage: "off_session"
   }), [amountInCents, currency]);
   const updateError = (0, import_react7.useCallback)(
     (err) => {
@@ -1206,6 +1234,8 @@ function SplitCardFormInner({
       updateError(null);
       const effectiveSessionId = overrides?.sessionId ?? sessionId;
       const effectiveAccount = mergeAccountPatch(resolvedAccount, overrides?.accountPatch);
+      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",
@@ -1215,7 +1245,7 @@ function SplitCardFormInner({
           },
           body: JSON.stringify({
             sessionId: effectiveSessionId,
-            tokenizedData: tokenizedBody,
+            tokenizedData: requestTokenizedBody,
             accountData: {
               userId: effectiveAccount.userId ?? "",
               email: effectiveAccount.email ?? "",
@@ -1232,7 +1262,8 @@ function SplitCardFormInner({
           onComplete?.({
             status: "succeeded",
             paymentIntentId: tokenizedBody.threeDSecureActionResultTokenId,
-            paymentMethodId: resolveTokenizedPaymentMethodId(tokenizedBody)
+            paymentMethodId: resolvedCompletionPaymentMethodId,
+            checkoutMethod: tokenizedBody.isPaypal ? "paypal" : "card"
           });
           return;
         }
@@ -1246,9 +1277,22 @@ function SplitCardFormInner({
           }
           setIs3DSActive(true);
           try {
+            const retryBillingAddress = {
+              ...(enableAVS ? selectedCountryRef.current : effectiveAccount.country) ? {
+                country: enableAVS ? selectedCountryRef.current : effectiveAccount.country
+              } : {},
+              ...(enableAVS ? zipCodeRef.current.trim() : effectiveAccount.zip) || "" ? {
+                postal_code: enableAVS ? zipCodeRef.current.trim() : effectiveAccount.zip
+              } : {}
+            };
             const result = await flopay.confirmPayment({
               clientSecret: secret,
-              returnUrl: window.location.href
+              returnUrl: window.location.href,
+              billingDetails: {
+                ...effectiveAccount.email ? { email: effectiveAccount.email } : {},
+                ...fullName.trim() ? { name: fullName.trim() } : {},
+                ...Object.keys(retryBillingAddress).length > 0 ? { address: retryBillingAddress } : {}
+              }
             });
             if (result.error) {
               setOverlayStatus("error");
@@ -1262,8 +1306,9 @@ function SplitCardFormInner({
               await processPaymentInternal({
                 id: result.paymentIntentId,
                 type: "card",
-                threeDSecureActionResultTokenId: result.paymentIntentId,
-                originalPaymentMethodId: resolveTokenizedPaymentMethodId(tokenizedBody)
+                threeDSecureActionResultTokenId: result.paymentIntentId
+              }, {
+                completionPaymentMethodId: resolvedCompletionPaymentMethodId
               });
             }
           } finally {
@@ -2088,7 +2133,8 @@ async function processSavedPaymentForMode({
       result: {
         status: "succeeded",
         paymentIntentId: tokenizedData?.threeDSecureActionResultTokenId,
-        paymentMethodId: resolveTokenizedPaymentMethodId(tokenizedData)
+        paymentMethodId: resolveTokenizedPaymentMethodId(tokenizedData),
+        checkoutMethod: tokenizedData ? tokenizedData.isPaypal ? "paypal" : "card" : void 0
       }
     };
   }
@@ -2207,8 +2253,7 @@ async function processSavedPaymentWithIntent({
     tokenizedData: {
       id: paymentMethodId,
       type: "card",
-      threeDSecureActionResultTokenId: confirmResult.paymentIntentId,
-      originalPaymentMethodId: paymentMethodId
+      threeDSecureActionResultTokenId: confirmResult.paymentIntentId
     },
     returnUrl
   });
@@ -2224,7 +2269,8 @@ async function processSavedPaymentWithIntent({
   return {
     ...finalResult,
     paymentIntentId: finalResult.paymentIntentId ?? confirmResult.paymentIntentId,
-    paymentMethodId: finalResult.paymentMethodId ?? paymentMethodId
+    paymentMethodId: finalResult.paymentMethodId ?? paymentMethodId,
+    checkoutMethod: finalResult.checkoutMethod ?? "card"
   };
 }
 async function handleSavedPaymentRedirectResult(redirectResult, {
@@ -2318,8 +2364,7 @@ async function handleSavedPaymentRedirectResult(redirectResult, {
         tokenizedData: {
           id: paymentIntent.id,
           type: "card",
-          threeDSecureActionResultTokenId: paymentIntent.id,
-          originalPaymentMethodId: savedPaymentMethodId
+          threeDSecureActionResultTokenId: paymentIntent.id
         },
         returnUrl
       });
@@ -2374,7 +2419,10 @@ async function handleSavedPaymentRedirectResult(redirectResult, {
         { checkoutMethod: "paypal" }
       );
     }
-    return { status: "succeeded" };
+    return {
+      status: "succeeded",
+      checkoutMethod: "paypal"
+    };
   }
   throw new import_shared6.FloPayError("Unsupported payment redirect state.", "api_error");
 }
@@ -2387,19 +2435,16 @@ function normalizeSavedPaymentError(err) {
     "api_error"
   );
 }
-function resolveSavedPaymentPublishableKeys(unified, fallbackPublishableKey) {
+function resolveSavedPaymentPublishableKeys(unified) {
   let publishableKey;
   let paypalPublishableKey;
   if (unified.provider === "stripe") {
     publishableKey = unified.data.stripe?.publishableKey;
     paypalPublishableKey = unified.data.stripe?.paypalPublishableKey ?? void 0;
   }
-  if (!publishableKey) {
-    publishableKey = fallbackPublishableKey;
-  }
   if (!publishableKey) {
     throw new import_shared6.FloPayError(
-      "No publishable key found. Provide fallbackPublishableKey or ensure the session includes gatewayData.publishableKey.",
+      "No publishable key found in the checkout session. Ensure the session includes gatewayData.publishableKey.",
       "validation_error"
     );
   }
@@ -2437,9 +2482,60 @@ async function loadSavedPaymentProviders({
 // src/flopay-checkout.tsx
 var import_jsx_runtime6 = require("react/jsx-runtime");
 var DEFAULT_BUTTONS_LAYOUT_BUTTON_HEIGHT2 = 44;
+var PAYPAL_RESUME_STORAGE_KEY = "flopay_checkout_saved_payment_resume";
 function sleep(ms) {
   return new Promise((resolve) => setTimeout(resolve, ms));
 }
+function canUseStorage() {
+  return typeof window !== "undefined" && typeof window.sessionStorage !== "undefined";
+}
+function readPayPalResumeState() {
+  if (!canUseStorage()) return null;
+  try {
+    const raw = window.sessionStorage.getItem(PAYPAL_RESUME_STORAGE_KEY);
+    if (!raw) return null;
+    return JSON.parse(raw);
+  } catch {
+    return null;
+  }
+}
+function persistPayPalResumeState(state) {
+  if (!canUseStorage()) return;
+  try {
+    window.sessionStorage.setItem(PAYPAL_RESUME_STORAGE_KEY, JSON.stringify(state));
+  } catch (error) {
+    console.warn("[FloPayCheckout] Failed to persist PayPal resume state.", error);
+  }
+}
+function clearPayPalResumeState() {
+  if (!canUseStorage()) return;
+  try {
+    window.sessionStorage.removeItem(PAYPAL_RESUME_STORAGE_KEY);
+  } catch (error) {
+    console.warn("[FloPayCheckout] Failed to clear PayPal resume state.", error);
+  }
+}
+function clearPayPalRedirectParams() {
+  if (typeof window === "undefined") return;
+  const url = new URL(window.location.href);
+  const keys = ["payment_intent", "payment_intent_client_secret", "redirect_status"];
+  let changed = false;
+  for (const key of keys) {
+    if (url.searchParams.has(key)) {
+      url.searchParams.delete(key);
+      changed = true;
+    }
+  }
+  if (changed) {
+    window.history.replaceState(window.history.state, "", url.toString());
+  }
+}
+function replaceCheckoutModeQueryParam(mode) {
+  if (typeof window === "undefined") return;
+  const url = new URL(window.location.href);
+  url.searchParams.set("mode", mode);
+  window.history.replaceState(window.history.state, "", url.toString());
+}
 function hasInlineSessionPatchData(patch) {
   if (!patch) return false;
   return Boolean(
@@ -2452,7 +2548,6 @@ function FloPayCheckout({
   billingApiUrl,
   appearance,
   locale,
-  fallbackPublishableKey,
   loading: loadingNode,
   error: errorNode,
   onComplete,
@@ -2507,6 +2602,8 @@ function FloPayCheckout({
   const [createSessionPatchBaseHash, setCreateSessionPatchBaseHash] = (0, import_react8.useState)("");
   const [cardBootstrapPending, setCardBootstrapPending] = (0, import_react8.useState)(false);
   const autoCheckoutAttempted = (0, import_react8.useRef)(false);
+  const paypalResumeAttempted = (0, import_react8.useRef)(false);
+  const savedPaymentKeysRef = (0, import_react8.useRef)(null);
   const onCompleteRef = (0, import_react8.useRef)(onComplete);
   onCompleteRef.current = onComplete;
   const onErrorRef = (0, import_react8.useRef)(onError);
@@ -2566,6 +2663,13 @@ function FloPayCheckout({
         const redirectResult = getRedirectResultFromCheckoutProcessError(options?.initialAutoProcessingError);
         let paymentResult;
         if (redirectResult) {
+          if (redirectResult.type === "paypal_redirect_required" && savedPaymentKeysRef.current) {
+            persistPayPalResumeState({
+              sessionId: activeSessionId2,
+              publishableKey: savedPaymentKeysRef.current.publishableKey,
+              paypalPublishableKey: savedPaymentKeysRef.current.paypalPublishableKey
+            });
+          }
           paymentResult = await handleSavedPaymentRedirectResult(redirectResult, {
             flopay: flopayRef.current,
             paypalFlopay: paypalFlopayRef.current,
@@ -2574,6 +2678,9 @@ function FloPayCheckout({
             sessionId: activeSessionId2,
             session: sess
           });
+          if (redirectResult.type === "paypal_redirect_required") {
+            clearPayPalResumeState();
+          }
         } else if (options?.initialAutoProcessingError) {
           throw checkoutProcessErrorToFloPayError(
             options.initialAutoProcessingError,
@@ -2585,6 +2692,7 @@ function FloPayCheckout({
         } else if (options?.fromCreateSession) {
           if (options?.fallbackToFull) {
             setCurrentMode("full");
+            replaceCheckoutModeQueryParam("full");
           }
           return false;
         } else {
@@ -2593,14 +2701,28 @@ function FloPayCheckout({
             sessionId: activeSessionId2,
             session: sess
           });
-          paymentResult = result.type === "success" ? result.result : await handleSavedPaymentRedirectResult(result, {
-            flopay: flopayRef.current,
-            paypalFlopay: paypalFlopayRef.current,
-            attempt3DS: options?.attempt3DS,
-            billingApiUrl: resolvedBillingUrl,
-            sessionId: activeSessionId2,
-            session: sess
-          });
+          if (result.type === "success") {
+            paymentResult = result.result;
+          } else {
+            if (result.type === "paypal_redirect_required" && savedPaymentKeysRef.current) {
+              persistPayPalResumeState({
+                sessionId: activeSessionId2,
+                publishableKey: savedPaymentKeysRef.current.publishableKey,
+                paypalPublishableKey: savedPaymentKeysRef.current.paypalPublishableKey
+              });
+            }
+            paymentResult = await handleSavedPaymentRedirectResult(result, {
+              flopay: flopayRef.current,
+              paypalFlopay: paypalFlopayRef.current,
+              attempt3DS: options?.attempt3DS,
+              billingApiUrl: resolvedBillingUrl,
+              sessionId: activeSessionId2,
+              session: sess
+            });
+            if (result.type === "paypal_redirect_required") {
+              clearPayPalResumeState();
+            }
+          }
         }
         setModeOverlayStatus("success");
         await sleep(PROCESSING_OVERLAY_SUCCESS_DELAY_MS);
@@ -2613,6 +2735,7 @@ function FloPayCheckout({
         setModeOverlayError(floPayErr.message);
         if (options?.fallbackToFull) {
           setCurrentMode("full");
+          replaceCheckoutModeQueryParam("full");
         }
         onErrorRef.current?.(floPayErr);
         emitDecline(method, floPayErr, {
@@ -2636,6 +2759,96 @@ function FloPayCheckout({
       resolvedBillingUrl
     ]
   );
+  (0, import_react8.useEffect)(() => {
+    if (typeof window === "undefined" || paypalResumeAttempted.current) {
+      return;
+    }
+    const params = new URLSearchParams(window.location.search);
+    const clientSecret = params.get("payment_intent_client_secret");
+    if (!clientSecret) {
+      return;
+    }
+    const resumeState = readPayPalResumeState();
+    if (!resumeState) {
+      return;
+    }
+    paypalResumeAttempted.current = true;
+    void (async () => {
+      setModeError(null);
+      setModeOverlayError(null);
+      setModeOverlayStatus("processing");
+      setConfirmProcessing(true);
+      try {
+        if (params.get("redirect_status") === "failed") {
+          throw Object.assign(
+            new import_shared7.FloPayError("PayPal payment was declined. Please try again.", "api_error"),
+            { checkoutMethod: "paypal" }
+          );
+        }
+        const {
+          flopay: resumeFlopay,
+          paypalFlopay: resumePaypalFlopay
+        } = await loadSavedPaymentProviders({
+          publishableKey: resumeState.publishableKey,
+          paypalPublishableKey: resumeState.paypalPublishableKey,
+          billingApiUrl: resolvedBillingUrl,
+          locale
+        });
+        const paypalStripe = (resumePaypalFlopay ?? resumeFlopay).getRawProvider();
+        if (!paypalStripe) {
+          throw Object.assign(
+            new import_shared7.FloPayError("PayPal is not available.", "api_error"),
+            { checkoutMethod: "paypal" }
+          );
+        }
+        const { paymentIntent, error } = await paypalStripe.retrievePaymentIntent(clientSecret);
+        if (error) {
+          throw Object.assign(
+            new import_shared7.FloPayError(
+              error.message ?? "Failed to retrieve PayPal payment status.",
+              "api_error",
+              { code: error.code }
+            ),
+            { checkoutMethod: "paypal" }
+          );
+        }
+        const resultStatus = mapPayPalIntentStatusToPaymentResult(paymentIntent?.status);
+        if (!paymentIntent || resultStatus === "failed") {
+          throw Object.assign(
+            new import_shared7.FloPayError("PayPal payment was not completed. Please try again.", "api_error"),
+            { checkoutMethod: "paypal" }
+          );
+        }
+        const paymentMethodId = typeof paymentIntent.payment_method === "string" ? paymentIntent.payment_method : paymentIntent.payment_method?.id;
+        setModeOverlayStatus("success");
+        await sleep(PROCESSING_OVERLAY_SUCCESS_DELAY_MS);
+        onCompleteRef.current?.({
+          status: resultStatus,
+          paymentIntentId: paymentIntent.id,
+          paymentMethodId,
+          checkoutMethod: "paypal"
+        });
+      } catch (err) {
+        const floPayErr = normalizeSavedPaymentError(err);
+        const method = floPayErr.checkoutMethod ?? "paypal";
+        setModeError(floPayErr.message);
+        setModeOverlayError(floPayErr.message);
+        onErrorRef.current?.(floPayErr);
+        emitDecline(method, floPayErr, {
+          code: floPayErr.code,
+          declineCode: floPayErr.declineCode
+        });
+        setModeOverlayStatus("error");
+        await sleep(PROCESSING_OVERLAY_ERROR_DELAY_MS);
+      } finally {
+        clearPayPalResumeState();
+        clearPayPalRedirectParams();
+        setModeOverlayStatus(null);
+        setModeOverlayError(null);
+        setConfirmProcessing(false);
+      }
+    })();
+  }, [emitDecline, locale, normalizeSavedPaymentError, resolvedBillingUrl]);
   const inflightRef = (0, import_react8.useRef)(/* @__PURE__ */ new Map());
   const initializedHashRef = (0, import_react8.useRef)(null);
   function hashCreateParams(params) {
@@ -2734,7 +2947,7 @@ function FloPayCheckout({
         const {
           publishableKey,
           paypalPublishableKey
-        } = resolveSavedPaymentPublishableKeys(realResult, fallbackPublishableKey);
+        } = resolveSavedPaymentPublishableKeys(realResult);
         const {
           flopay: instance,
           paypalFlopay: paypalInstance
@@ -2757,7 +2970,7 @@ function FloPayCheckout({
       }
       return resolved;
     },
-    [fallbackPublishableKey, locale, resolvedBillingUrl]
+    [locale, resolvedBillingUrl]
   );
   const handleInlineSessionPatch = (0, import_react8.useCallback)(async (patch) => {
     if (!hasInlineSessionPatchData(patch) || cardBootstrapPending) {
@@ -2805,6 +3018,7 @@ function FloPayCheckout({
         try {
           const resolved = await bootstrapInlineSession();
           const resolvedSession = resolved.result.data.session ?? null;
+          savedPaymentKeysRef.current = resolveSavedPaymentPublishableKeys(resolved.result);
           if (!cancelled && shouldAutoProcessInlineSession && resolvedSession) {
             autoCheckoutAttempted.current = true;
             await runSavedPaymentFlow(resolvedSession, {
@@ -2903,7 +3117,11 @@ function FloPayCheckout({
       const {
         publishableKey,
         paypalPublishableKey
-      } = resolveSavedPaymentPublishableKeys(result, fallbackPublishableKey);
+      } = resolveSavedPaymentPublishableKeys(result);
+      savedPaymentKeysRef.current = {
+        publishableKey,
+        paypalPublishableKey
+      };
       const {
         flopay: instance,
         paypalFlopay: paypalInstance
@@ -3456,9 +3674,11 @@ function CheckoutFormInner({
     [onDecline]
   );
   const processPaymentInternal = (0, import_react9.useCallback)(
-    async (tokenizedBody) => {
+    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",
@@ -3468,7 +3688,7 @@ function CheckoutFormInner({
           },
           body: JSON.stringify({
             sessionId,
-            tokenizedData: tokenizedBody,
+            tokenizedData: requestTokenizedBody,
             accountData: {
               userId: userId ?? "",
               email: email ?? "",
@@ -3482,7 +3702,8 @@ function CheckoutFormInner({
           onComplete?.({
             status: "succeeded",
             paymentIntentId: tokenizedBody.threeDSecureActionResultTokenId,
-            paymentMethodId: resolveTokenizedPaymentMethodId(tokenizedBody)
+            paymentMethodId: resolvedCompletionPaymentMethodId,
+            checkoutMethod: tokenizedBody.isPaypal ? "paypal" : "card"
           });
           return;
         }
@@ -3495,9 +3716,14 @@ function CheckoutFormInner({
           }
           setIs3DSActive(true);
           try {
+            const retryFullName = `${firstName ?? ""} ${lastName ?? ""}`.trim();
             const result = await flopay.confirmPayment({
               clientSecret: secret,
-              returnUrl: window.location.href
+              returnUrl: window.location.href,
+              billingDetails: {
+                ...email ? { email } : {},
+                ...retryFullName ? { name: retryFullName } : {}
+              }
             });
             if (result.error) {
               updateError(result.error.message);
@@ -3509,9 +3735,8 @@ function CheckoutFormInner({
               await processPaymentInternal({
                 id: result.paymentIntentId,
                 type: "card",
-                threeDSecureActionResultTokenId: result.paymentIntentId,
-                originalPaymentMethodId: resolveTokenizedPaymentMethodId(tokenizedBody)
-              });
+                threeDSecureActionResultTokenId: result.paymentIntentId
+              }, resolvedCompletionPaymentMethodId);
             }
           } finally {
             setIs3DSActive(false);
@@ -3838,33 +4063,23 @@ function PayPalButton({
       if (!sessionId || !email) {
         throw new import_shared9.FloPayError("Missing sessionId or email for PayPal payment", "validation_error");
       }
-      const intentResponse = await fetch(`${baseUrl}/v1/checkouts/payments/intents`, {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({
-          sessionId,
-          email,
-          paymentMethodType: "paypal",
-          isPaypal: "true"
-        })
-      });
-      if (!intentResponse.ok) throw new import_shared9.FloPayError("Failed to create payment intent", "api_error");
-      const intentJson = await intentResponse.json();
-      const intentClientSecret = intentJson.data?.id;
-      if (!intentClientSecret) throw new import_shared9.FloPayError("No client_secret in response", "api_error");
-      const result = await flopay.confirmPayment({
-        clientSecret: intentClientSecret,
+      const result = await flopay.confirmPayPalPayment({
+        billingApiUrl: baseUrl,
+        sessionId,
+        email,
         returnUrl: window.location.href
       });
-      if (result.status === "succeeded" || result.status === "processing") {
+      if (result.error) {
+        onErrorChange?.(result.error.message);
+        return;
+      }
+      if (result.paymentIntentId && (result.status === "succeeded" || result.status === "processing" || result.status === "requires_capture")) {
         dispatchTokenizedBody({
-          id: result.paymentIntentId,
+          id: result.paymentMethodId ?? result.paymentIntentId,
           type: "card",
           threeDSecureActionResultTokenId: result.paymentIntentId,
           isPaypal: true
         });
-      } else if (result.error) {
-        onErrorChange?.(result.error.message);
       }
     } catch (err) {
       onErrorChange?.(err instanceof Error ? err.message : "PayPal payment failed. Please try again.");
@@ -3924,7 +4139,7 @@ var import_js3 = require("@flopay/js");
 var import_shared10 = require("@flopay/shared");
 var import_jsx_runtime9 = require("react/jsx-runtime");
 var DEFAULT_BUTTONS_LAYOUT_BUTTON_HEIGHT3 = 44;
-var PAYPAL_RESUME_STORAGE_KEY = "flopay_automatic_payment_button_resume";
+var PAYPAL_RESUME_STORAGE_KEY2 = "flopay_automatic_payment_button_resume";
 function sleep2(ms) {
   return new Promise((resolve) => setTimeout(resolve, ms));
 }
@@ -3937,42 +4152,44 @@ function coerceError(err, fallbackMessage) {
     "api_error"
   );
 }
-function canUseStorage() {
+function canUseStorage2() {
   return typeof window !== "undefined" && typeof window.sessionStorage !== "undefined";
 }
 function shouldShowFallbackCheckout(error, sessionId) {
   if (!sessionId) return false;
   if (error.type === "validation_error") return false;
-  if (error.checkoutMethod && error.checkoutMethod !== "card") return false;
+  if (error.checkoutMethod && error.checkoutMethod !== "card" && error.checkoutMethod !== "paypal") {
+    return false;
+  }
   return true;
 }
-function readPayPalResumeState() {
-  if (!canUseStorage()) return null;
+function readPayPalResumeState2() {
+  if (!canUseStorage2()) return null;
   try {
-    const raw = window.sessionStorage.getItem(PAYPAL_RESUME_STORAGE_KEY);
+    const raw = window.sessionStorage.getItem(PAYPAL_RESUME_STORAGE_KEY2);
     if (!raw) return null;
     return JSON.parse(raw);
   } catch {
     return null;
   }
 }
-function persistPayPalResumeState(state) {
-  if (!canUseStorage()) return;
+function persistPayPalResumeState2(state) {
+  if (!canUseStorage2()) return;
   try {
-    window.sessionStorage.setItem(PAYPAL_RESUME_STORAGE_KEY, JSON.stringify(state));
+    window.sessionStorage.setItem(PAYPAL_RESUME_STORAGE_KEY2, JSON.stringify(state));
   } catch (error) {
     console.warn("[FloPayAutomaticPaymentButton] Failed to persist PayPal resume state.", error);
   }
 }
-function clearPayPalResumeState() {
-  if (!canUseStorage()) return;
+function clearPayPalResumeState2() {
+  if (!canUseStorage2()) return;
   try {
-    window.sessionStorage.removeItem(PAYPAL_RESUME_STORAGE_KEY);
+    window.sessionStorage.removeItem(PAYPAL_RESUME_STORAGE_KEY2);
   } catch (error) {
     console.warn("[FloPayAutomaticPaymentButton] Failed to clear PayPal resume state.", error);
   }
 }
-function clearPayPalRedirectParams() {
+function clearPayPalRedirectParams2() {
   if (typeof window === "undefined") return;
   const url = new URL(window.location.href);
   const keys = ["payment_intent", "payment_intent_client_secret", "redirect_status"];
@@ -4014,6 +4231,7 @@ function FloPayAutomaticPaymentButton({
   sessionId,
   createSession,
   paymentMethodId,
+  checkoutMethod,
   clientId,
   items,
   subscriptions,
@@ -4025,7 +4243,6 @@ function FloPayAutomaticPaymentButton({
   utmMetadata,
   billingApiUrl,
   locale,
-  fallbackPublishableKey,
   buttonsTheme,
   buttonsStyles: stylesOverride,
   onSuccess,
@@ -4074,9 +4291,10 @@ function FloPayAutomaticPaymentButton({
   const automaticPaymentToken = (0, import_react11.useMemo)(
     () => paymentMethodId ? {
       id: paymentMethodId,
-      type: "card"
+      type: "card",
+      ...checkoutMethod === "paypal" ? { isPaypal: true } : {}
     } : void 0,
-    [paymentMethodId]
+    [checkoutMethod, paymentMethodId]
   );
   const isMountedRef = (0, import_react11.useRef)(true);
   const resumeAttemptedRef = (0, import_react11.useRef)(false);
@@ -4158,13 +4376,14 @@ function FloPayAutomaticPaymentButton({
       let paymentResult = null;
       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 (redirectResult) {
         const {
           publishableKey,
           paypalPublishableKey
-        } = resolveSavedPaymentPublishableKeys(apiResult, fallbackPublishableKey);
+        } = resolveSavedPaymentPublishableKeys(apiResult);
         if (redirectResult.type === "paypal_redirect_required") {
-          persistPayPalResumeState({
+          persistPayPalResumeState2({
             sessionId: session.id || resolvedSessionId,
             publishableKey,
             paypalPublishableKey
@@ -4188,9 +4407,9 @@ function FloPayAutomaticPaymentButton({
           session
         });
         if (redirectResult.type === "paypal_redirect_required") {
-          clearPayPalResumeState();
+          clearPayPalResumeState2();
         }
-      } else if (apiResult.autoProcessingError) {
+      } else if (apiResult.autoProcessingError && !shouldRetryPayPalClientSide) {
         throw checkoutProcessErrorToFloPayError(
           apiResult.autoProcessingError,
           "Automatic payment failed. Please try again.",
@@ -4198,7 +4417,7 @@ function FloPayAutomaticPaymentButton({
             checkoutMethod: apiResult.autoProcessingError.checkoutMethod
           }
         );
-      } else if (shouldTreatCreateSessionFlowAsServerAutoAttempt) {
+      } else if (shouldTreatCreateSessionFlowAsServerAutoAttempt && !shouldRetryPayPalClientSide) {
         throw checkoutProcessErrorToFloPayError(
           {
             type: "unknown",
@@ -4218,9 +4437,9 @@ function FloPayAutomaticPaymentButton({
           const {
             publishableKey,
             paypalPublishableKey
-          } = resolveSavedPaymentPublishableKeys(apiResult, fallbackPublishableKey);
+          } = resolveSavedPaymentPublishableKeys(apiResult);
           if (result.type === "paypal_redirect_required") {
-            persistPayPalResumeState({
+            persistPayPalResumeState2({
               sessionId: session.id || resolvedSessionId,
               publishableKey,
               paypalPublishableKey
@@ -4244,17 +4463,19 @@ function FloPayAutomaticPaymentButton({
             session
           });
           if (result.type === "paypal_redirect_required") {
-            clearPayPalResumeState();
+            clearPayPalResumeState2();
           }
         }
       }
       await showSuccess({
         result: paymentResult ? {
           ...paymentResult,
-          paymentMethodId: paymentResult.paymentMethodId ?? paymentMethodId
+          paymentMethodId: paymentResult.paymentMethodId ?? paymentMethodId,
+          checkoutMethod: paymentResult.checkoutMethod ?? checkoutMethod
         } : {
           status: "succeeded",
-          paymentMethodId: paymentMethodId ?? void 0
+          paymentMethodId: paymentMethodId ?? void 0,
+          checkoutMethod
         },
         session,
         sessionId: session.id || resolvedSessionId,
@@ -4269,7 +4490,7 @@ function FloPayAutomaticPaymentButton({
           const {
             publishableKey,
             paypalPublishableKey
-          } = resolveSavedPaymentPublishableKeys(apiResult, fallbackPublishableKey);
+          } = resolveSavedPaymentPublishableKeys(apiResult);
           const {
             flopay
           } = await loadSavedPaymentProviders({
@@ -4288,7 +4509,8 @@ function FloPayAutomaticPaymentButton({
           await showSuccess({
             result: {
               ...paymentResult,
-              paymentMethodId: paymentResult.paymentMethodId ?? paymentMethodId
+              paymentMethodId: paymentResult.paymentMethodId ?? paymentMethodId,
+              checkoutMethod: paymentResult.checkoutMethod ?? checkoutMethod
             },
             session,
             sessionId: fallbackSessionId,
@@ -4311,7 +4533,7 @@ function FloPayAutomaticPaymentButton({
       }
     }
   }, [
-    fallbackPublishableKey,
+    checkoutMethod,
     locale,
     automaticPaymentToken,
     paymentMethodId,
@@ -4423,7 +4645,7 @@ function FloPayAutomaticPaymentButton({
     if (!clientSecret) {
       return;
     }
-    const resumeState = readPayPalResumeState();
+    const resumeState = readPayPalResumeState2();
     if (!resumeState) {
       return;
     }
@@ -4466,9 +4688,16 @@ function FloPayAutomaticPaymentButton({
             { checkoutMethod: "paypal" }
           );
         }
-        if (paymentIntent && (paymentIntent.status === "requires_capture" || paymentIntent.status === "succeeded" || paymentIntent.status === "processing")) {
+        const resultStatus = mapPayPalIntentStatusToPaymentResult(paymentIntent?.status);
+        if (paymentIntent && resultStatus !== "failed") {
+          const paymentMethodId2 = typeof paymentIntent.payment_method === "string" ? paymentIntent.payment_method : paymentIntent.payment_method?.id;
           await showSuccess({
-            result: { status: "succeeded", paymentIntentId: paymentIntent.id },
+            result: {
+              status: resultStatus,
+              paymentIntentId: paymentIntent.id,
+              paymentMethodId: paymentMethodId2,
+              checkoutMethod: "paypal"
+            },
             session: null,
             sessionId: resumeState.sessionId,
             autoCompleted: false
@@ -4486,8 +4715,8 @@ function FloPayAutomaticPaymentButton({
           method: floPayErr.checkoutMethod ?? "paypal"
         });
       } finally {
-        clearPayPalResumeState();
-        clearPayPalRedirectParams();
+        clearPayPalResumeState2();
+        clearPayPalRedirectParams2();
         if (isMountedRef.current) {
           setOverlayStatus(null);
           setOverlayError(null);
@@ -4601,7 +4830,6 @@ function FloPayAutomaticPaymentButton({
                 sessionId: fallbackSession.sessionId,
                 checkoutMode: "full",
                 billingApiUrl: resolvedBillingUrl,
-                fallbackPublishableKey,
                 initialErrorMessage: fallbackSession.errorMessage,
                 cardTitleContent: null,
                 showSecurityFooter: false,