@flopay/react 0.4.4 → 0.4.7

package/dist/index.cjs

@@ -1407,13 +1407,19 @@ function SplitCardFormInner({
           onError?.(submitResult.error);
           return;
         }
-        const billingDetails = enableAVS ? {
-          name: fullName,
-          address: {
-            country: selectedCountryRef.current,
-            postal_code: zipCodeRef.current
-          }
-        } : void 0;
+        const billingAddress = {
+          ...(enableAVS ? selectedCountryRef.current : resolvedAccount.country) ? {
+            country: enableAVS ? selectedCountryRef.current : resolvedAccount.country
+          } : {},
+          ...(enableAVS ? zipCodeRef.current.trim() : resolvedAccount.zip) || "" ? {
+            postal_code: enableAVS ? zipCodeRef.current.trim() : resolvedAccount.zip
+          } : {}
+        };
+        const billingDetails = {
+          ...resolvedAccount.email ? { email: resolvedAccount.email } : {},
+          ...fullName.trim() ? { name: fullName.trim() } : {},
+          ...Object.keys(billingAddress).length > 0 ? { address: billingAddress } : {}
+        };
         const pmResult = await flopay.createPaymentMethod(billingDetails);
         if (pmResult.error || !pmResult.paymentMethodId) {
           updateError(pmResult.error?.message ?? "Failed to create payment method.");
@@ -1923,6 +1929,32 @@ function SplitCardFormInner({
 var import_js = require("@flopay/js");
 var import_shared6 = require("@flopay/shared");
 var DEFAULT_SAVED_PAYMENT_DECLINE_METHOD = "card";
+function getRedirectResultFromCheckoutProcessError(error) {
+  if (!error?.type || !error.threeDSecureToken) {
+    return null;
+  }
+  if (error.type !== "3ds_required" && error.type !== "paypal_redirect_required") {
+    return null;
+  }
+  return {
+    type: error.type,
+    threeDSecureToken: error.threeDSecureToken,
+    paymentMethodId: error.paymentMethodId
+  };
+}
+function checkoutProcessErrorToFloPayError(error, fallbackMessage = "Payment failed. Please try again.", options) {
+  const checkoutMethod = options?.checkoutMethod ?? error?.checkoutMethod ?? (error?.type === "paypal_redirect_required" ? "paypal" : "card");
+  return Object.assign(
+    new import_shared6.FloPayError(
+      error?.message ?? fallbackMessage,
+      "api_error",
+      {
+        code: error?.gatewayErrorCode
+      }
+    ),
+    { checkoutMethod }
+  );
+}
 function resolveSavedPaymentReturnUrl(session) {
   if (typeof window !== "undefined" && window.location.href) {
     return window.location.href;
@@ -2445,6 +2477,7 @@ function FloPayCheckout({
   avsLayout,
   submitLabel,
   className,
+  initialErrorMessage = null,
   children,
   checkoutMode: checkoutModeProp,
   confirmLabel,
@@ -2467,7 +2500,7 @@ function FloPayCheckout({
   const [loadError, setLoadError] = (0, import_react8.useState)(null);
   const [currentMode, setCurrentMode] = (0, import_react8.useState)("full");
   const [confirmProcessing, setConfirmProcessing] = (0, import_react8.useState)(false);
-  const [modeError, setModeError] = (0, import_react8.useState)(null);
+  const [modeError, setModeError] = (0, import_react8.useState)(initialErrorMessage);
   const [modeOverlayStatus, setModeOverlayStatus] = (0, import_react8.useState)(null);
   const [modeOverlayError, setModeOverlayError] = (0, import_react8.useState)(null);
   const [createSessionPatch, setCreateSessionPatch] = (0, import_react8.useState)(void 0);
@@ -2514,6 +2547,9 @@ function FloPayCheckout({
     setCreateSessionPatch(void 0);
     setCreateSessionPatchBaseHash(baseCreateSessionHash);
   }, [baseCreateSessionHash]);
+  (0, import_react8.useEffect)(() => {
+    setModeError(initialErrorMessage);
+  }, [initialErrorMessage]);
   const emitDecline = (0, import_react8.useCallback)(
     (method, input, overrides) => {
       onDeclineRef.current?.(buildDeclineEvent(method, input, overrides));
@@ -2527,19 +2563,45 @@ function FloPayCheckout({
       setModeOverlayStatus("processing");
       const activeSessionId2 = options?.sessionId ?? sess.id;
       try {
-        const result = await processSavedPaymentForMode({
-          billingApiUrl: resolvedBillingUrl,
-          sessionId: activeSessionId2,
-          session: sess
-        });
-        const paymentResult = result.type === "success" ? result.result : await handleSavedPaymentRedirectResult(result, {
-          flopay: flopayRef.current,
-          paypalFlopay: paypalFlopayRef.current,
-          attempt3DS: options?.attempt3DS,
-          billingApiUrl: resolvedBillingUrl,
-          sessionId: activeSessionId2,
-          session: sess
-        });
+        const redirectResult = getRedirectResultFromCheckoutProcessError(options?.initialAutoProcessingError);
+        let paymentResult;
+        if (redirectResult) {
+          paymentResult = await handleSavedPaymentRedirectResult(redirectResult, {
+            flopay: flopayRef.current,
+            paypalFlopay: paypalFlopayRef.current,
+            attempt3DS: options?.attempt3DS,
+            billingApiUrl: resolvedBillingUrl,
+            sessionId: activeSessionId2,
+            session: sess
+          });
+        } else if (options?.initialAutoProcessingError) {
+          throw checkoutProcessErrorToFloPayError(
+            options.initialAutoProcessingError,
+            "Automatic payment failed. Please try again.",
+            {
+              checkoutMethod: options.initialAutoProcessingError.checkoutMethod
+            }
+          );
+        } else if (options?.fromCreateSession) {
+          if (options?.fallbackToFull) {
+            setCurrentMode("full");
+          }
+          return false;
+        } else {
+          const result = await processSavedPaymentForMode({
+            billingApiUrl: resolvedBillingUrl,
+            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
+          });
+        }
         setModeOverlayStatus("success");
         await sleep(PROCESSING_OVERLAY_SUCCESS_DELAY_MS);
         onCompleteRef.current?.(paymentResult);
@@ -2606,10 +2668,10 @@ function FloPayCheckout({
   }, [sessionIdProp]);
   (0, import_react8.useEffect)(() => {
     autoCheckoutAttempted.current = false;
-    setModeError(null);
+    setModeError(initialErrorMessage);
     setModeOverlayError(null);
     setModeOverlayStatus(null);
-  }, [sessionIdProp, createSessionHash]);
+  }, [createSessionHash, initialErrorMessage, sessionIdProp]);
   async function resolveInlineSession(params, cacheKey) {
     const api = new import_js2.PaymentAPI(resolvedBillingUrl);
     let sid = typeof window !== "undefined" ? window.sessionStorage.getItem(cacheKey) : null;
@@ -2748,6 +2810,9 @@ function FloPayCheckout({
             await runSavedPaymentFlow(resolvedSession, {
               attempt3DS: true,
               fallbackToFull: true,
+              fromCreateSession: true,
+              initialAutoProcessingError: resolved.result.autoProcessingError,
+              autoProcessingAttempted: resolved.result.autoProcessingAttempted,
               sessionId: resolved.sid || resolvedSession.id
             });
             return;
@@ -3568,7 +3633,11 @@ function CheckoutFormInner({
           onError?.(submitResult.error);
           return;
         }
-        const pmResult = await flopay.createPaymentMethod();
+        const fullName = `${firstName ?? ""} ${lastName ?? ""}`.trim();
+        const pmResult = await flopay.createPaymentMethod({
+          ...email ? { email } : {},
+          ...fullName ? { name: fullName } : {}
+        });
         if (pmResult.error || !pmResult.paymentMethodId) {
           updateError(pmResult.error?.message ?? "Failed to create payment method.");
           return;
@@ -4071,7 +4140,7 @@ function FloPayAutomaticPaymentButton({
     setOverlayStatus("error");
     await sleep2(PROCESSING_OVERLAY_ERROR_DELAY_MS);
   }, [emitDecline]);
-  const processResolvedSession = (0, import_react11.useCallback)(async (apiResult, resolvedSessionId) => {
+  const processResolvedSession = (0, import_react11.useCallback)(async (apiResult, resolvedSessionId, options) => {
     const session = apiResult.data.session ?? null;
     if (!session) {
       throw new import_shared10.FloPayError("No session data returned", "api_error");
@@ -4086,19 +4155,15 @@ function FloPayAutomaticPaymentButton({
       return;
     }
     try {
-      const result = await processSavedPaymentForMode({
-        billingApiUrl: resolvedBillingUrl,
-        sessionId: resolvedSessionId ?? session.id,
-        session,
-        tokenizedData: automaticPaymentToken
-      });
-      let paymentResult = result.type === "success" ? result.result : null;
-      if (result.type !== "success") {
+      let paymentResult = null;
+      const redirectResult = getRedirectResultFromCheckoutProcessError(apiResult.autoProcessingError);
+      const shouldTreatCreateSessionFlowAsServerAutoAttempt = options?.fromCreateSession && (apiResult.autoProcessingAttempted === true || !!apiResult.autoProcessingError || !!redirectResult);
+      if (redirectResult) {
         const {
           publishableKey,
           paypalPublishableKey
         } = resolveSavedPaymentPublishableKeys(apiResult, fallbackPublishableKey);
-        if (result.type === "paypal_redirect_required") {
+        if (redirectResult.type === "paypal_redirect_required") {
           persistPayPalResumeState({
             sessionId: session.id || resolvedSessionId,
             publishableKey,
@@ -4114,7 +4179,7 @@ function FloPayAutomaticPaymentButton({
           billingApiUrl: resolvedBillingUrl,
           locale
         });
-        paymentResult = await handleSavedPaymentRedirectResult(result, {
+        paymentResult = await handleSavedPaymentRedirectResult(redirectResult, {
           flopay,
           paypalFlopay,
           attempt3DS: true,
@@ -4122,9 +4187,66 @@ function FloPayAutomaticPaymentButton({
           sessionId: session.id || resolvedSessionId,
           session
         });
-        if (result.type === "paypal_redirect_required") {
+        if (redirectResult.type === "paypal_redirect_required") {
           clearPayPalResumeState();
         }
+      } else if (apiResult.autoProcessingError) {
+        throw checkoutProcessErrorToFloPayError(
+          apiResult.autoProcessingError,
+          "Automatic payment failed. Please try again.",
+          {
+            checkoutMethod: apiResult.autoProcessingError.checkoutMethod
+          }
+        );
+      } else if (shouldTreatCreateSessionFlowAsServerAutoAttempt) {
+        throw checkoutProcessErrorToFloPayError(
+          {
+            type: "unknown",
+            message: "Automatic payment failed. Please try again."
+          },
+          "Automatic payment failed. Please try again."
+        );
+      } else {
+        const result = await processSavedPaymentForMode({
+          billingApiUrl: resolvedBillingUrl,
+          sessionId: resolvedSessionId ?? session.id,
+          session,
+          tokenizedData: automaticPaymentToken
+        });
+        paymentResult = result.type === "success" ? result.result : null;
+        if (result.type !== "success") {
+          const {
+            publishableKey,
+            paypalPublishableKey
+          } = resolveSavedPaymentPublishableKeys(apiResult, fallbackPublishableKey);
+          if (result.type === "paypal_redirect_required") {
+            persistPayPalResumeState({
+              sessionId: session.id || resolvedSessionId,
+              publishableKey,
+              paypalPublishableKey
+            });
+          }
+          const {
+            flopay,
+            paypalFlopay
+          } = await loadSavedPaymentProviders({
+            publishableKey,
+            paypalPublishableKey,
+            billingApiUrl: resolvedBillingUrl,
+            locale
+          });
+          paymentResult = await handleSavedPaymentRedirectResult(result, {
+            flopay,
+            paypalFlopay,
+            attempt3DS: true,
+            billingApiUrl: resolvedBillingUrl,
+            sessionId: session.id || resolvedSessionId,
+            session
+          });
+          if (result.type === "paypal_redirect_required") {
+            clearPayPalResumeState();
+          }
+        }
       }
       await showSuccess({
         result: paymentResult ? {
@@ -4141,7 +4263,8 @@ function FloPayAutomaticPaymentButton({
     } catch (err) {
       let floPayErr = normalizeSavedPaymentError(err);
       const fallbackSessionId = session.id || resolvedSessionId;
-      if (floPayErr.code === "authentication_required" && fallbackSessionId && automaticPaymentToken?.id && automaticPaymentToken.id.startsWith("pm_")) {
+      const shouldTreatCreateSessionFlowAsServerAutoAttempt = options?.fromCreateSession && apiResult.autoProcessingAttempted === true;
+      if (!shouldTreatCreateSessionFlowAsServerAutoAttempt && floPayErr.code === "authentication_required" && fallbackSessionId && automaticPaymentToken?.id && automaticPaymentToken.id.startsWith("pm_")) {
         try {
           const {
             publishableKey,
@@ -4238,7 +4361,9 @@ function FloPayAutomaticPaymentButton({
       }
       try {
         const result = await api.createAndFetchSession(createSessionDraft);
-        await processResolvedSession(result, result.data.session?.id ?? null);
+        await processResolvedSession(result, result.data.session?.id ?? null, {
+          fromCreateSession: true
+        });
       } catch (err) {
         if (err instanceof import_shared10.FloPayError && err.code === "session_auto_completed") {
           await showSuccess({
@@ -4454,7 +4579,7 @@ function FloPayAutomaticPaymentButton({
           padding: "1.5rem",
           zIndex: 1100
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
           "div",
           {
             style: {
@@ -4470,48 +4595,21 @@ function FloPayAutomaticPaymentButton({
               flexDirection: "column",
               gap: "1rem"
             },
-            children: [
-              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-                "div",
-                {
-                  style: {
-                    display: "flex",
-                    gap: "1rem",
-                    alignItems: "flex-start"
-                  },
-                  children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-                    "div",
-                    {
-                      style: {
-                        flex: 1,
-                        background: "#fef2f2",
-                        color: "#b91c1c",
-                        border: "1px solid #fecaca",
-                        borderRadius: "12px",
-                        padding: "0.75rem 1rem",
-                        fontSize: "0.9rem",
-                        lineHeight: 1.5
-                      },
-                      children: fallbackSession.errorMessage
-                    }
-                  )
-                }
-              ),
-              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-                FloPayCheckout,
-                {
-                  sessionId: fallbackSession.sessionId,
-                  checkoutMode: "full",
-                  billingApiUrl: resolvedBillingUrl,
-                  fallbackPublishableKey,
-                  cardTitleContent: null,
-                  showSecurityFooter: false,
-                  onComplete: handleFallbackComplete,
-                  onError: handleFallbackError,
-                  onDecline: handleFallbackDecline
-                }
-              )
-            ]
+            children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+              FloPayCheckout,
+              {
+                sessionId: fallbackSession.sessionId,
+                checkoutMode: "full",
+                billingApiUrl: resolvedBillingUrl,
+                fallbackPublishableKey,
+                initialErrorMessage: fallbackSession.errorMessage,
+                cardTitleContent: null,
+                showSecurityFooter: false,
+                onComplete: handleFallbackComplete,
+                onError: handleFallbackError,
+                onDecline: handleFallbackDecline
+              }
+            )
           }
         )
       }