@flopay/react 0.1.0 → 0.1.2

package/dist/index.cjs

@@ -1029,6 +1029,13 @@ function FloPayCheckout({
           paymentMethodId: json.paymentMethodId
         };
       }
+      if (json?.gatewayErrorCode === "authentication_required") {
+        return {
+          type: "3ds_required",
+          threeDSecureToken: ""
+          // No client secret available
+        };
+      }
       throw new import_shared4.FloPayError(
         json?.message ?? "Payment failed. Please try again.",
         "api_error"
@@ -1036,6 +1043,51 @@ function FloPayCheckout({
     },
     [resolvedBillingUrl, sessionId, onComplete]
   );
+  const handleRedirectResult = (0, import_react6.useCallback)(
+    async (redirectResult, sess, options) => {
+      const stripe = flopayRef.current?.getRawProvider();
+      if (!stripe) return false;
+      if (redirectResult.type === "3ds_required") {
+        if (!options?.attempt3DS || !redirectResult.threeDSecureToken) {
+          setModeError("Your card requires authentication. Please enter your payment details below.");
+          return false;
+        }
+        const { error: nextActionError, paymentIntent } = await stripe.handleNextAction({
+          clientSecret: redirectResult.threeDSecureToken
+        });
+        if (nextActionError) {
+          setModeError(nextActionError.message ?? "3DS authentication failed.");
+          return false;
+        }
+        if (paymentIntent && (paymentIntent.status === "requires_capture" || paymentIntent.status === "succeeded")) {
+          onComplete?.({ status: "succeeded", paymentIntentId: paymentIntent.id });
+          return true;
+        }
+        return false;
+      }
+      if (redirectResult.type === "paypal_redirect_required") {
+        const confirmParams = {
+          return_url: window.location.href
+        };
+        if (redirectResult.paymentMethodId) {
+          confirmParams["payment_method"] = redirectResult.paymentMethodId;
+        }
+        const { error } = await stripe.confirmPayment({
+          clientSecret: redirectResult.threeDSecureToken,
+          confirmParams,
+          redirect: "if_required"
+        });
+        if (error) {
+          setModeError(error.message ?? "PayPal authorization failed.");
+          return false;
+        }
+        onComplete?.({ status: "succeeded" });
+        return true;
+      }
+      return false;
+    },
+    [resolvedBillingUrl, sessionId, onComplete]
+  );
   (0, import_react6.useEffect)(() => {
     let cancelled = false;
     setIsLoading(true);
@@ -1070,29 +1122,11 @@ function FloPayCheckout({
             }
             if (cancelled) return;
             await stripeInitPromise;
-            if (redirectResult.type === "paypal_redirect_required") {
-              const stripeRef = flopayRef.current;
-              if (stripeRef) {
-                const rawStripe = stripeRef.getRawProvider();
-                if (rawStripe) {
-                  const confirmParams = {
-                    return_url: window.location.href
-                  };
-                  if (redirectResult.paymentMethodId) {
-                    confirmParams["payment_method"] = redirectResult.paymentMethodId;
-                  }
-                  await rawStripe.confirmPayment({
-                    clientSecret: redirectResult.threeDSecureToken,
-                    confirmParams,
-                    redirect: "if_required"
-                  });
-                  if (!cancelled) setIsLoading(false);
-                  return;
-                }
-              }
-            }
+            const handled = await handleRedirectResult(redirectResult, sess, { attempt3DS: true });
             if (!cancelled) {
-              setCurrentMode("full");
+              if (!handled) {
+                setCurrentMode("full");
+              }
               setIsLoading(false);
             }
             return;
@@ -1146,14 +1180,22 @@ function FloPayCheckout({
     locale,
     checkoutModeProp,
     onSessionCompleted,
-    processPaymentForMode
+    processPaymentForMode,
+    handleRedirectResult
   ]);
   const handleConfirmCheckout = (0, import_react6.useCallback)(async () => {
     if (confirmProcessing || !session) return;
     setConfirmProcessing(true);
     setModeError(null);
     try {
-      await processPaymentForMode(session);
+      const redirectResult = await processPaymentForMode(session);
+      if (!redirectResult) {
+        return;
+      }
+      const handled = await handleRedirectResult(redirectResult, session);
+      if (!handled) {
+        setCurrentMode("full");
+      }
     } catch (err) {
       const floPayErr = err instanceof import_shared4.FloPayError ? err : new import_shared4.FloPayError(
         err instanceof Error ? err.message : "Payment failed",
@@ -1165,7 +1207,7 @@ function FloPayCheckout({
     } finally {
       setConfirmProcessing(false);
     }
-  }, [confirmProcessing, session, processPaymentForMode, onError]);
+  }, [confirmProcessing, session, processPaymentForMode, handleRedirectResult, onError]);
   const providerOptions = (0, import_react6.useMemo)(() => {
     if (!unified || !session) return void 0;
     const opts = {
@@ -1275,33 +1317,50 @@ function FloPayCheckout({
       )
     ] }) }) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(CheckoutContext.Provider, { value: checkoutValue, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(FloPayProvider, { flopay, options: providerOptions, children: children ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-    SessionInjector,
-    {
-      sessionId,
-      billingApiUrl: resolvedBillingUrl,
-      session,
-      children
-    }
-  ) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-    SplitCardForm,
-    {
-      sessionId,
-      email: session?.customer?.email,
-      userId: session?.customer?.id,
-      firstName: session?.customer?.firstName,
-      lastName: session?.customer?.lastName,
-      totalAmount: session ? Math.round((0, import_shared4.buildCheckoutDisplayData)(session).total * 100) : 0,
-      currency: session?.currency?.toLowerCase() ?? "usd",
-      onComplete,
-      onError,
-      showPayPal,
-      showApplePay,
-      showGooglePay,
-      submitLabel,
-      className
-    }
-  ) }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(CheckoutContext.Provider, { value: checkoutValue, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(FloPayProvider, { flopay, options: providerOptions, children: [
+    modeError && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      "div",
+      {
+        style: {
+          padding: "0.75rem 1rem",
+          marginBottom: "0.75rem",
+          backgroundColor: "#FEF3C7",
+          border: "1px solid #F59E0B",
+          borderRadius: "8px",
+          color: "#92400E",
+          fontSize: "0.875rem"
+        },
+        children: modeError
+      }
+    ),
+    children ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      SessionInjector,
+      {
+        sessionId,
+        billingApiUrl: resolvedBillingUrl,
+        session,
+        children
+      }
+    ) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      SplitCardForm,
+      {
+        sessionId,
+        email: session?.customer?.email,
+        userId: session?.customer?.id,
+        firstName: session?.customer?.firstName,
+        lastName: session?.customer?.lastName,
+        totalAmount: session ? Math.round((0, import_shared4.buildCheckoutDisplayData)(session).total * 100) : 0,
+        currency: session?.currency?.toLowerCase() ?? "usd",
+        onComplete,
+        onError,
+        showPayPal,
+        showApplePay,
+        showGooglePay,
+        submitLabel,
+        className
+      }
+    )
+  ] }) });
 }
 function SessionInjector({
   sessionId,