@flopay/react 0.4.4 → 0.4.7

package/dist/index.d.cts

@@ -128,6 +128,8 @@ interface FloPayCheckoutProps {
     submitLabel?: string;
     /** Additional CSS class for the wrapper. */
     className?: string;
+    /** Seed an initial checkout error message for the rendered payment form. */
+    initialErrorMessage?: string | null;
     /**
      * Override the default `SplitCardForm`. When provided, children are rendered
      * inside the initialized `FloPayProvider` with session props auto-injected.
@@ -167,7 +169,7 @@ interface FloPayCheckoutProps {
  * />
  * ```
  */
-declare function FloPayCheckout({ sessionId: sessionIdProp, createSession: createSessionParams, billingApiUrl, appearance, locale, fallbackPublishableKey, loading: loadingNode, error: errorNode, onComplete, onError, onDecline, onFullNameChange, onCountryChange, onZipChange, showPayPal, showApplePay, showGooglePay, layout, buttonsTheme, buttonsStyles, cardButtonContent, cardBackButtonContent, cardTitleContent, showSecurityFooter, onButtonClick, onBeforeButtonClick, enableAVS, avsLayout, submitLabel, className, children, checkoutMode: checkoutModeProp, confirmLabel, renderConfirmButton, onSessionCompleted, }: FloPayCheckoutProps): React.ReactElement;
+declare function FloPayCheckout({ sessionId: sessionIdProp, createSession: createSessionParams, billingApiUrl, appearance, locale, fallbackPublishableKey, loading: loadingNode, error: errorNode, onComplete, onError, onDecline, onFullNameChange, onCountryChange, onZipChange, showPayPal, showApplePay, showGooglePay, layout, buttonsTheme, buttonsStyles, cardButtonContent, cardBackButtonContent, cardTitleContent, showSecurityFooter, onButtonClick, onBeforeButtonClick, enableAVS, avsLayout, submitLabel, className, initialErrorMessage, children, checkoutMode: checkoutModeProp, confirmLabel, renderConfirmButton, onSessionCompleted, }: FloPayCheckoutProps): React.ReactElement;
 
 /**
  * Returns the current `FloPay` instance, or `null` if the provider

package/dist/index.d.ts

@@ -128,6 +128,8 @@ interface FloPayCheckoutProps {
     submitLabel?: string;
     /** Additional CSS class for the wrapper. */
     className?: string;
+    /** Seed an initial checkout error message for the rendered payment form. */
+    initialErrorMessage?: string | null;
     /**
      * Override the default `SplitCardForm`. When provided, children are rendered
      * inside the initialized `FloPayProvider` with session props auto-injected.
@@ -167,7 +169,7 @@ interface FloPayCheckoutProps {
  * />
  * ```
  */
-declare function FloPayCheckout({ sessionId: sessionIdProp, createSession: createSessionParams, billingApiUrl, appearance, locale, fallbackPublishableKey, loading: loadingNode, error: errorNode, onComplete, onError, onDecline, onFullNameChange, onCountryChange, onZipChange, showPayPal, showApplePay, showGooglePay, layout, buttonsTheme, buttonsStyles, cardButtonContent, cardBackButtonContent, cardTitleContent, showSecurityFooter, onButtonClick, onBeforeButtonClick, enableAVS, avsLayout, submitLabel, className, children, checkoutMode: checkoutModeProp, confirmLabel, renderConfirmButton, onSessionCompleted, }: FloPayCheckoutProps): React.ReactElement;
+declare function FloPayCheckout({ sessionId: sessionIdProp, createSession: createSessionParams, billingApiUrl, appearance, locale, fallbackPublishableKey, loading: loadingNode, error: errorNode, onComplete, onError, onDecline, onFullNameChange, onCountryChange, onZipChange, showPayPal, showApplePay, showGooglePay, layout, buttonsTheme, buttonsStyles, cardButtonContent, cardBackButtonContent, cardTitleContent, showSecurityFooter, onButtonClick, onBeforeButtonClick, enableAVS, avsLayout, submitLabel, className, initialErrorMessage, children, checkoutMode: checkoutModeProp, confirmLabel, renderConfirmButton, onSessionCompleted, }: FloPayCheckoutProps): React.ReactElement;
 
 /**
  * Returns the current `FloPay` instance, or `null` if the provider

package/dist/index.mjs

@@ -1361,13 +1361,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.");
@@ -1877,6 +1883,32 @@ function SplitCardFormInner({
 import { loadFloPay, PaymentAPI } from "@flopay/js";
 import { FloPayError as FloPayError3 } from "@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 FloPayError3(
+      error?.message ?? fallbackMessage,
+      "api_error",
+      {
+        code: error?.gatewayErrorCode
+      }
+    ),
+    { checkoutMethod }
+  );
+}
 function resolveSavedPaymentReturnUrl(session) {
   if (typeof window !== "undefined" && window.location.href) {
     return window.location.href;
@@ -2399,6 +2431,7 @@ function FloPayCheckout({
   avsLayout,
   submitLabel,
   className,
+  initialErrorMessage = null,
   children,
   checkoutMode: checkoutModeProp,
   confirmLabel,
@@ -2421,7 +2454,7 @@ function FloPayCheckout({
   const [loadError, setLoadError] = useState3(null);
   const [currentMode, setCurrentMode] = useState3("full");
   const [confirmProcessing, setConfirmProcessing] = useState3(false);
-  const [modeError, setModeError] = useState3(null);
+  const [modeError, setModeError] = useState3(initialErrorMessage);
   const [modeOverlayStatus, setModeOverlayStatus] = useState3(null);
   const [modeOverlayError, setModeOverlayError] = useState3(null);
   const [createSessionPatch, setCreateSessionPatch] = useState3(void 0);
@@ -2468,6 +2501,9 @@ function FloPayCheckout({
     setCreateSessionPatch(void 0);
     setCreateSessionPatchBaseHash(baseCreateSessionHash);
   }, [baseCreateSessionHash]);
+  useEffect4(() => {
+    setModeError(initialErrorMessage);
+  }, [initialErrorMessage]);
   const emitDecline = useCallback2(
     (method, input, overrides) => {
       onDeclineRef.current?.(buildDeclineEvent(method, input, overrides));
@@ -2481,19 +2517,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);
@@ -2560,10 +2622,10 @@ function FloPayCheckout({
   }, [sessionIdProp]);
   useEffect4(() => {
     autoCheckoutAttempted.current = false;
-    setModeError(null);
+    setModeError(initialErrorMessage);
     setModeOverlayError(null);
     setModeOverlayStatus(null);
-  }, [sessionIdProp, createSessionHash]);
+  }, [createSessionHash, initialErrorMessage, sessionIdProp]);
   async function resolveInlineSession(params, cacheKey) {
     const api = new PaymentAPI2(resolvedBillingUrl);
     let sid = typeof window !== "undefined" ? window.sessionStorage.getItem(cacheKey) : null;
@@ -2702,6 +2764,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;
@@ -3522,7 +3587,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;
@@ -4025,7 +4094,7 @@ function FloPayAutomaticPaymentButton({
     setOverlayStatus("error");
     await sleep2(PROCESSING_OVERLAY_ERROR_DELAY_MS);
   }, [emitDecline]);
-  const processResolvedSession = useCallback5(async (apiResult, resolvedSessionId) => {
+  const processResolvedSession = useCallback5(async (apiResult, resolvedSessionId, options) => {
     const session = apiResult.data.session ?? null;
     if (!session) {
       throw new FloPayError7("No session data returned", "api_error");
@@ -4040,19 +4109,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,
@@ -4068,7 +4133,7 @@ function FloPayAutomaticPaymentButton({
           billingApiUrl: resolvedBillingUrl,
           locale
         });
-        paymentResult = await handleSavedPaymentRedirectResult(result, {
+        paymentResult = await handleSavedPaymentRedirectResult(redirectResult, {
           flopay,
           paypalFlopay,
           attempt3DS: true,
@@ -4076,9 +4141,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 ? {
@@ -4095,7 +4217,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,
@@ -4192,7 +4315,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 FloPayError7 && err.code === "session_auto_completed") {
           await showSuccess({
@@ -4408,7 +4533,7 @@ function FloPayAutomaticPaymentButton({
           padding: "1.5rem",
           zIndex: 1100
         },
-        children: /* @__PURE__ */ jsxs7(
+        children: /* @__PURE__ */ jsx9(
           "div",
           {
             style: {
@@ -4424,48 +4549,21 @@ function FloPayAutomaticPaymentButton({
               flexDirection: "column",
               gap: "1rem"
             },
-            children: [
-              /* @__PURE__ */ jsx9(
-                "div",
-                {
-                  style: {
-                    display: "flex",
-                    gap: "1rem",
-                    alignItems: "flex-start"
-                  },
-                  children: /* @__PURE__ */ jsx9(
-                    "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__ */ jsx9(
-                FloPayCheckout,
-                {
-                  sessionId: fallbackSession.sessionId,
-                  checkoutMode: "full",
-                  billingApiUrl: resolvedBillingUrl,
-                  fallbackPublishableKey,
-                  cardTitleContent: null,
-                  showSecurityFooter: false,
-                  onComplete: handleFallbackComplete,
-                  onError: handleFallbackError,
-                  onDecline: handleFallbackDecline
-                }
-              )
-            ]
+            children: /* @__PURE__ */ jsx9(
+              FloPayCheckout,
+              {
+                sessionId: fallbackSession.sessionId,
+                checkoutMode: "full",
+                billingApiUrl: resolvedBillingUrl,
+                fallbackPublishableKey,
+                initialErrorMessage: fallbackSession.errorMessage,
+                cardTitleContent: null,
+                showSecurityFooter: false,
+                onComplete: handleFallbackComplete,
+                onError: handleFallbackError,
+                onDecline: handleFallbackDecline
+              }
+            )
           }
         )
       }