@flopay/react 0.5.16 → 0.5.18

package/README.md

@@ -83,6 +83,33 @@ function CheckoutPage() {
 
 The mode can also be set on the session itself via the billing API's `checkoutMode` field. The `checkoutMode` prop overrides the session value.
 
+#### Expired Sessions
+
+When `FloPayCheckout` or `FloPayAutomaticPaymentButton` loads a checkout session whose `status` is `expired`, the component calls `onError` with a `FloPayError` so your app can route the customer into a recovery flow.
+
+The error has:
+
+- `message: 'Checkout session has expired.'`
+- `type: 'api_error'`
+- `code: 'checkout_session_expired'`
+
+Use this code to create or request a fresh checkout session, then send the customer back through checkout:
+
+```tsx
+<FloPayCheckout
+  sessionId={sessionId}
+  onComplete={() => router.push('/success')}
+  onError={(error) => {
+    if (error.code === 'checkout_session_expired') {
+      router.push('/checkout/expired');
+      return;
+    }
+
+    console.error(error);
+  }}
+/>
+```
+
 ### Automatic Payment Buttons
 
 Use `FloPayAutomaticPaymentButton` when you want a single reusable button that:

package/dist/index.cjs

@@ -154,7 +154,7 @@ function FloPayProvider({
 
 // src/flopay-checkout.tsx
 var import_react9 = __toESM(require("react"), 1);
-var import_js2 = require("@flopay/js");
+var import_js3 = require("@flopay/js");
 var import_shared7 = require("@flopay/shared");
 
 // src/card-button-content.tsx
@@ -287,6 +287,7 @@ var AddressElement = createElementComponent("address", "AddressElement");
 // src/split-card-form.tsx
 var import_react_stripe_js = require("@stripe/react-stripe-js");
 var import_shared4 = require("@flopay/shared");
+var import_js = require("@flopay/js");
 var import_react8 = require("react");
 
 // src/hooks.ts
@@ -1488,53 +1489,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 import_js.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 = (0, import_shared4.isAVSFieldVisible)(avsConfig.state, c);
+              const line1Visible = (0, import_shared4.isAVSFieldVisible)(avsConfig.address_line_1, c);
+              const zipVisible = (0, import_shared4.isAVSFieldVisible)(avsConfig.postal_code, c);
+              const derivedState = line1Visible && !stateVisible && zipVisible ? (0, import_shared4.getStateFromPostalCode)(c, zipCodeRef.current ?? "") : null;
+              const stateValue2 = stateVisible ? stateRef.current : derivedState;
+              return {
+                country: c,
+                ...zipVisible && zipCodeRef.current ? { zip: zipCodeRef.current } : {},
+                ...(0, import_shared4.isAVSFieldVisible)(avsConfig.city, c) && cityRef.current ? { city: cityRef.current } : {},
+                ...stateValue2 ? { state: stateValue2 } : {},
+                ...line1Visible && addressLine1Ref.current ? { addressLine1: addressLine1Ref.current } : {},
+                ...(0, import_shared4.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 = (0, import_shared4.isAVSFieldVisible)(avsConfig.state, c);
-                const line1Visible = (0, import_shared4.isAVSFieldVisible)(avsConfig.address_line_1, c);
-                const zipVisible = (0, import_shared4.isAVSFieldVisible)(avsConfig.postal_code, c);
-                const derivedState = line1Visible && !stateVisible && zipVisible ? (0, import_shared4.getStateFromPostalCode)(c, zipCodeRef.current ?? "") : null;
-                const stateValue2 = stateVisible ? stateRef.current : derivedState;
-                return {
-                  country: c,
-                  ...zipVisible && zipCodeRef.current ? { zip: zipCodeRef.current } : {},
-                  ...(0, import_shared4.isAVSFieldVisible)(avsConfig.city, c) && cityRef.current ? { city: cityRef.current } : {},
-                  ...stateValue2 ? { state: stateValue2 } : {},
-                  ...line1Visible && addressLine1Ref.current ? { addressLine1: addressLine1Ref.current } : {},
-                  ...(0, import_shared4.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: (0, import_shared4.isAVSFieldVisible)(avsConfig.country, selectedCountryRef.current),
-              postal_code: (0, import_shared4.isAVSFieldVisible)(avsConfig.postal_code, selectedCountryRef.current),
-              address_line_1: (0, import_shared4.isAVSFieldVisible)(avsConfig.address_line_1, selectedCountryRef.current),
-              address_line_2: (0, import_shared4.isAVSFieldVisible)(avsConfig.address_line_2, selectedCountryRef.current),
-              city: (0, import_shared4.isAVSFieldVisible)(avsConfig.city, selectedCountryRef.current),
-              state: (0, import_shared4.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: (0, import_shared4.isAVSFieldVisible)(avsConfig.country, selectedCountryRef.current),
+            postal_code: (0, import_shared4.isAVSFieldVisible)(avsConfig.postal_code, selectedCountryRef.current),
+            address_line_1: (0, import_shared4.isAVSFieldVisible)(avsConfig.address_line_1, selectedCountryRef.current),
+            address_line_2: (0, import_shared4.isAVSFieldVisible)(avsConfig.address_line_2, selectedCountryRef.current),
+            city: (0, import_shared4.isAVSFieldVisible)(avsConfig.city, selectedCountryRef.current),
+            state: (0, import_shared4.isAVSFieldVisible)(avsConfig.state, selectedCountryRef.current)
+          } : void 0
         });
         if (response.ok) {
           markSessionRecentlyCompleted(effectiveSessionId);
@@ -2437,7 +2432,7 @@ function SplitCardFormInner({
 }
 
 // src/saved-payment-flow.ts
-var import_js = require("@flopay/js");
+var import_js2 = require("@flopay/js");
 var import_shared6 = require("@flopay/shared");
 var DEFAULT_SAVED_PAYMENT_DECLINE_METHOD = "card";
 function getRedirectResultFromCheckoutProcessError(error) {
@@ -2545,7 +2540,7 @@ async function recover3DSRedirectResult({
     return null;
   }
   try {
-    const api = new import_js.PaymentAPI(billingApiUrl);
+    const api = new import_js2.PaymentAPI(billingApiUrl);
     const unified = await api.getUnifiedCheckoutSession(sessionId);
     const refreshedToken = unified.provider === "stripe" ? unified.data.stripe?.clientSecret : void 0;
     if (isStripePaymentIntentClientSecret(refreshedToken)) {
@@ -2573,25 +2568,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 import_js2.PaymentAPI(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 {
@@ -2664,7 +2653,7 @@ async function processSavedPaymentWithIntent({
       { checkoutMethod: "card" }
     );
   }
-  const api = new import_js.PaymentAPI(billingApiUrl);
+  const api = new import_js2.PaymentAPI(billingApiUrl);
   const intentResponse = await retryOnceOnFetchFailure(() => api.createPaymentIntent(
     sessionId,
     customerEmail,
@@ -2950,11 +2939,11 @@ async function loadSavedPaymentProviders({
 }) {
   const needsSeparatePaypal = Boolean(paypalPublishableKey) && paypalPublishableKey !== publishableKey;
   const [instance, paypalInstanceOrError] = await Promise.all([
-    (0, import_js.loadFloPay)(publishableKey, {
+    (0, import_js2.loadFloPay)(publishableKey, {
       billingApiUrl,
       locale
     }),
-    needsSeparatePaypal ? (0, import_js.loadFloPay)(paypalPublishableKey, {
+    needsSeparatePaypal ? (0, import_js2.loadFloPay)(paypalPublishableKey, {
       billingApiUrl,
       locale
     }).catch((err) => {
@@ -3171,6 +3160,17 @@ function FloPayCheckout({
           if (redirectResult.type === "paypal_redirect_required") {
             clearPayPalResumeState();
           }
+        } else if (options?.initialAutoProcessingPending) {
+          const api = new import_js3.PaymentAPI(resolvedBillingUrl);
+          const completed = await api.waitForCheckoutSessionCompletion(options.initialAutoProcessingPending.sessionId, {
+            initialDelayMs: options.initialAutoProcessingPending.retryAfterMs
+          });
+          if (completed.data.session?.status !== "complete") {
+            throw new import_shared7.FloPayError("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,
@@ -3313,7 +3313,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 import_js2.PaymentAPI(resolvedBillingUrl);
+          const resumeApi = new import_js3.PaymentAPI(resolvedBillingUrl);
           const resumeSessionResult = await resumeApi.getUnifiedCheckoutSession(resumeState.sessionId);
           const resumeSession = resumeSessionResult.data.session;
           if (resumeSession && resumeSession.status !== "complete") {
@@ -3407,7 +3407,7 @@ function FloPayCheckout({
     setModeOverlayStatus(null);
   }, [createSessionHash, initialErrorMessage, sessionIdProp]);
   async function resolveInlineSession(params, cacheKey) {
-    const api = new import_js2.PaymentAPI(resolvedBillingUrl);
+    const api = new import_js3.PaymentAPI(resolvedBillingUrl);
     let sid = typeof window !== "undefined" ? window.sessionStorage.getItem(cacheKey) : null;
     let realResult = null;
     if (sid) {
@@ -3559,6 +3559,7 @@ function FloPayCheckout({
               fallbackToFull: true,
               fromCreateSession: true,
               initialAutoProcessingError: resolved.result.autoProcessingError,
+              initialAutoProcessingPending: resolved.result.autoProcessingPending,
               autoProcessingAttempted: resolved.result.autoProcessingAttempted,
               sessionId: resolved.sid || resolvedSession.id
             });
@@ -3597,7 +3598,7 @@ function FloPayCheckout({
     setIsLoading(true);
     async function init() {
       try {
-        const api = new import_js2.PaymentAPI(resolvedBillingUrl);
+        const api = new import_js3.PaymentAPI(resolvedBillingUrl);
         const result = await api.getUnifiedCheckoutSession(activeSessionId);
         if (cancelled) return;
         setUnified(result);
@@ -3611,6 +3612,11 @@ function FloPayCheckout({
           onSessionCompletedRef.current?.(sess.successUrl ?? "");
           return;
         }
+        if (sess.status === "expired") {
+          throw new import_shared7.FloPayError("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");
@@ -3782,8 +3788,10 @@ function FloPayCheckout({
     ] });
   }
   if (loadError) {
-    if (errorNode) return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_jsx_runtime7.Fragment, { children: errorNode(loadError) });
-    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    if (errorNode) {
+      return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CheckoutContext.Provider, { value: checkoutValue, children: errorNode(loadError) });
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CheckoutContext.Provider, { value: checkoutValue, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
       "div",
       {
         style: {
@@ -3794,7 +3802,7 @@ function FloPayCheckout({
         },
         children: loadError.message
       }
-    );
+    ) });
   }
   if (shouldShowInterimButtons) {
     return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
@@ -4156,6 +4164,7 @@ function InterimButtonsView({
 }
 
 // src/checkout-form.tsx
+var import_js4 = require("@flopay/js");
 var import_shared8 = require("@flopay/shared");
 var import_react10 = require("react");
 var import_jsx_runtime8 = require("react/jsx-runtime");
@@ -4218,23 +4227,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 import_js4.PaymentAPI(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?.({
@@ -4502,6 +4505,7 @@ function CheckoutFormInner({
 }
 
 // src/paypal-button.tsx
+var import_js5 = require("@flopay/js");
 var import_shared9 = require("@flopay/shared");
 var import_react11 = require("react");
 var import_jsx_runtime9 = require("react/jsx-runtime");
@@ -4528,23 +4532,17 @@ function PayPalButton({
   const processPaymentInternal = (0, import_react11.useCallback)(
     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 import_js5.PaymentAPI(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?.();
@@ -4696,7 +4694,7 @@ function PayPalButton({
 
 // src/automatic-payment-button.tsx
 var import_react12 = require("react");
-var import_js3 = require("@flopay/js");
+var import_js6 = require("@flopay/js");
 var import_shared10 = require("@flopay/shared");
 var import_jsx_runtime10 = require("react/jsx-runtime");
 var DEFAULT_BUTTONS_LAYOUT_BUTTON_HEIGHT3 = 44;
@@ -4933,11 +4931,39 @@ function FloPayAutomaticPaymentButton({
       });
       return;
     }
+    if (session.status === "expired") {
+      throw new import_shared10.FloPayError("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 import_js6.PaymentAPI(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 import_shared10.FloPayError("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,
@@ -5148,7 +5174,7 @@ function FloPayAutomaticPaymentButton({
     setOverlayError(null);
     setOverlayStatus("processing");
     try {
-      const api = new import_js3.PaymentAPI(resolvedBillingUrl);
+      const api = new import_js6.PaymentAPI(resolvedBillingUrl);
       if (sessionId) {
         const result = await api.getUnifiedCheckoutSession(sessionId);
         await processResolvedSession(result, sessionId);
@@ -5278,7 +5304,7 @@ function FloPayAutomaticPaymentButton({
             { checkoutMethod: "paypal" }
           );
         }
-        const api = new import_js3.PaymentAPI(resolvedBillingUrl);
+        const api = new import_js6.PaymentAPI(resolvedBillingUrl);
         const sessionResult = await api.getUnifiedCheckoutSession(resumeState.sessionId);
         let resumeSession = sessionResult.data.session;
         if (!resumeSession) {