@flopay/react 0.5.16 → 0.5.18

package/dist/index.mjs

@@ -101,7 +101,7 @@ 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 { 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,6 +248,7 @@ import {
   isAVSFieldVisible,
   getStateFromPostalCode
 } from "@flopay/shared";
+import { PaymentAPI } from "@flopay/js";
 import { forwardRef, useCallback as useCallback2, useContext as useContext3, useEffect as useEffect4, useImperativeHandle, useMemo as useMemo2, useRef as useRef2, useState as useState3 } from "react";
 
 // src/hooks.ts
@@ -1449,53 +1450,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);
@@ -2398,7 +2393,7 @@ function SplitCardFormInner({
 }
 
 // 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 +2501,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 +2529,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 +2614,7 @@ async function processSavedPaymentWithIntent({
       { checkoutMethod: "card" }
     );
   }
-  const api = new PaymentAPI(billingApiUrl);
+  const api = new PaymentAPI2(billingApiUrl);
   const intentResponse = await retryOnceOnFetchFailure(() => api.createPaymentIntent(
     sessionId,
     customerEmail,
@@ -3132,6 +3121,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,
@@ -3274,7 +3274,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") {
@@ -3368,7 +3368,7 @@ function FloPayCheckout({
     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) {
@@ -3520,6 +3520,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 +3559,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);
@@ -3572,6 +3573,11 @@ function FloPayCheckout({
           onSessionCompletedRef.current?.(sess.successUrl ?? "");
           return;
         }
+        if (sess.status === "expired") {
+          throw new FloPayError4("Checkout session has expired.", "api_error", {
+            code: "checkout_session_expired"
+          });
+        }
         const effectiveMode = checkoutModeProp ?? sess.checkoutMode ?? "full";
         setCurrentMode(effectiveMode);
         const hasPayPalRedirectParams = typeof window !== "undefined" && new URLSearchParams(window.location.search).has("payment_intent");
@@ -3743,8 +3749,10 @@ function FloPayCheckout({
     ] });
   }
   if (loadError) {
-    if (errorNode) return /* @__PURE__ */ jsx7(Fragment3, { children: errorNode(loadError) });
-    return /* @__PURE__ */ jsx7(
+    if (errorNode) {
+      return /* @__PURE__ */ jsx7(CheckoutContext.Provider, { value: checkoutValue, children: errorNode(loadError) });
+    }
+    return /* @__PURE__ */ jsx7(CheckoutContext.Provider, { value: checkoutValue, children: /* @__PURE__ */ jsx7(
       "div",
       {
         style: {
@@ -3755,7 +3763,7 @@ function FloPayCheckout({
         },
         children: loadError.message
       }
-    );
+    ) });
   }
   if (shouldShowInterimButtons) {
     return /* @__PURE__ */ jsxs5(Fragment3, { children: [
@@ -4117,6 +4125,7 @@ function InterimButtonsView({
 }
 
 // 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";
@@ -4179,23 +4188,17 @@ function CheckoutFormInner({
       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?.({
@@ -4463,6 +4466,7 @@ 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";
@@ -4489,23 +4493,17 @@ function PayPalButton({
   const processPaymentInternal = useCallback5(
     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?.();
@@ -4657,7 +4655,7 @@ 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 { 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";
 var DEFAULT_BUTTONS_LAYOUT_BUTTON_HEIGHT3 = 44;
@@ -4894,11 +4892,39 @@ function FloPayAutomaticPaymentButton({
       });
       return;
     }
+    if (session.status === "expired") {
+      throw new FloPayError7("Checkout session has expired.", "api_error", {
+        code: "checkout_session_expired"
+      });
+    }
     try {
       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 (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,
@@ -5109,7 +5135,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);
@@ -5239,7 +5265,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) {