@flopay/react 1.2.7 → 1.2.8

package/dist/index.d.cts

@@ -3,7 +3,6 @@ import { FloPay, FloPayElements } from '@flopay/js';
 import * as _flopay_shared from '@flopay/shared';
 import { FloPayAppearance, InlineSessionDraft, FloPayError, PaymentResult, DeclineEvent, CheckoutButtonMethod, BeforeButtonClickEvent, InlineSessionPatch, CheckoutMode, CheckoutSession, ElementOptions, ElementChangeEvent, TokenizedBody, AVSFieldConfig, GatewayEnvironment, CheckoutProduct, CheckoutItem, CheckoutSubscription, ThemeId, ButtonsLayoutTheme, ButtonsLayoutStyles } from '@flopay/shared';
 export { BeforeButtonClickEvent, CheckoutButtonMethod, DeclineEvent, InlineSessionDraft, InlineSessionPatch } from '@flopay/shared';
-import * as react_jsx_runtime from 'react/jsx-runtime';
 
 /** Props for the `FloPayProvider` component. */
 interface FloPayProviderProps {
@@ -867,6 +866,6 @@ interface FloPayAutomaticPaymentButtonProps extends Omit<React.ButtonHTMLAttribu
     onDecline?: (decline: DeclineEvent) => void;
     children?: React.ReactNode;
 }
-declare function FloPayAutomaticPaymentButton({ sessionId, nonce, createSession, paymentMethodId: _deprecatedPaymentMethodId, checkoutMethod: _deprecatedCheckoutMethod, clientId, products, items, subscriptions, account, successUrl, cancelUrl, couponCodes, tagsData, utmMetadata, billingApiUrl, locale, theme, buttonsTheme, buttonsStyles: stylesOverride, onSuccess, onError, onDecline, children, disabled, type, style, ...buttonProps }: FloPayAutomaticPaymentButtonProps): react_jsx_runtime.JSX.Element;
+declare function FloPayAutomaticPaymentButton({ sessionId, nonce, createSession, paymentMethodId: _deprecatedPaymentMethodId, checkoutMethod: _deprecatedCheckoutMethod, clientId, products, items, subscriptions, account, successUrl, cancelUrl, couponCodes, tagsData, utmMetadata, billingApiUrl, locale, theme, buttonsTheme, buttonsStyles: stylesOverride, onSuccess, onError, onDecline, children, disabled, type, style, ...buttonProps }: FloPayAutomaticPaymentButtonProps): React.JSX.Element;
 
 export { AddressElement, CardCvcElement, CardElement, CardExpiryElement, CardNumberElement, CheckoutForm, type CheckoutFormProps, type CheckoutFormRef, type CheckoutState, DirectPayPalButton, type DirectPayPalButtonProps, type ElementComponentProps, FloPayAutomaticPaymentButton, type FloPayAutomaticPaymentButtonProps, type FloPayAutomaticPaymentSuccessEvent, FloPayCheckout, type FloPayCheckoutProps, FloPayProvider, type FloPayProviderProps, PayPalButton, type PayPalButtonProps, PaymentElement, SplitCardForm, type SplitCardFormProps, type SplitCardFormRef, useCheckout, useElements, useFloPay, usePayPalFloPay };

package/dist/index.d.ts

@@ -3,7 +3,6 @@ import { FloPay, FloPayElements } from '@flopay/js';
 import * as _flopay_shared from '@flopay/shared';
 import { FloPayAppearance, InlineSessionDraft, FloPayError, PaymentResult, DeclineEvent, CheckoutButtonMethod, BeforeButtonClickEvent, InlineSessionPatch, CheckoutMode, CheckoutSession, ElementOptions, ElementChangeEvent, TokenizedBody, AVSFieldConfig, GatewayEnvironment, CheckoutProduct, CheckoutItem, CheckoutSubscription, ThemeId, ButtonsLayoutTheme, ButtonsLayoutStyles } from '@flopay/shared';
 export { BeforeButtonClickEvent, CheckoutButtonMethod, DeclineEvent, InlineSessionDraft, InlineSessionPatch } from '@flopay/shared';
-import * as react_jsx_runtime from 'react/jsx-runtime';
 
 /** Props for the `FloPayProvider` component. */
 interface FloPayProviderProps {
@@ -867,6 +866,6 @@ interface FloPayAutomaticPaymentButtonProps extends Omit<React.ButtonHTMLAttribu
     onDecline?: (decline: DeclineEvent) => void;
     children?: React.ReactNode;
 }
-declare function FloPayAutomaticPaymentButton({ sessionId, nonce, createSession, paymentMethodId: _deprecatedPaymentMethodId, checkoutMethod: _deprecatedCheckoutMethod, clientId, products, items, subscriptions, account, successUrl, cancelUrl, couponCodes, tagsData, utmMetadata, billingApiUrl, locale, theme, buttonsTheme, buttonsStyles: stylesOverride, onSuccess, onError, onDecline, children, disabled, type, style, ...buttonProps }: FloPayAutomaticPaymentButtonProps): react_jsx_runtime.JSX.Element;
+declare function FloPayAutomaticPaymentButton({ sessionId, nonce, createSession, paymentMethodId: _deprecatedPaymentMethodId, checkoutMethod: _deprecatedCheckoutMethod, clientId, products, items, subscriptions, account, successUrl, cancelUrl, couponCodes, tagsData, utmMetadata, billingApiUrl, locale, theme, buttonsTheme, buttonsStyles: stylesOverride, onSuccess, onError, onDecline, children, disabled, type, style, ...buttonProps }: FloPayAutomaticPaymentButtonProps): React.JSX.Element;
 
 export { AddressElement, CardCvcElement, CardElement, CardExpiryElement, CardNumberElement, CheckoutForm, type CheckoutFormProps, type CheckoutFormRef, type CheckoutState, DirectPayPalButton, type DirectPayPalButtonProps, type ElementComponentProps, FloPayAutomaticPaymentButton, type FloPayAutomaticPaymentButtonProps, type FloPayAutomaticPaymentSuccessEvent, FloPayCheckout, type FloPayCheckoutProps, FloPayProvider, type FloPayProviderProps, PayPalButton, type PayPalButtonProps, PaymentElement, SplitCardForm, type SplitCardFormProps, type SplitCardFormRef, useCheckout, useElements, useFloPay, usePayPalFloPay };

package/dist/index.mjs

@@ -436,7 +436,7 @@ function ProcessingOverlay({
 }
 
 // src/checkout-utils.ts
-import { FloPayError } from "@flopay/shared";
+import { FloPayError, isSetupIntentClientSecret } from "@flopay/shared";
 function mergeInlineSessionPatches(base, patch) {
   if (!patch) return base;
   if (!base) return patch;
@@ -605,6 +605,18 @@ function resolvePaymentIntentPaymentMethodId(paymentIntent) {
 }
 async function retrievePaymentIntentFromProvider(provider, clientSecret) {
   const retriever = provider;
+  if (isSetupIntentClientSecret(clientSecret)) {
+    if (!retriever?.retrieveSetupIntent) {
+      return null;
+    }
+    const { setupIntent, error: error2 } = await retriever.retrieveSetupIntent(clientSecret);
+    if (error2) {
+      throw new FloPayError(error2.message ?? "Failed to retrieve setup intent.", "api_error", {
+        ...error2.code ? { code: error2.code } : {}
+      });
+    }
+    return setupIntent ?? null;
+  }
   if (!retriever?.retrievePaymentIntent) {
     return null;
   }
@@ -616,6 +628,12 @@ async function retrievePaymentIntentFromProvider(provider, clientSecret) {
   }
   return paymentIntent ?? null;
 }
+function resolveWalletElementsMode(amountInMinorUnits) {
+  if (typeof amountInMinorUnits !== "number" || !Number.isFinite(amountInMinorUnits) || amountInMinorUnits <= 0) {
+    return { mode: "setup" };
+  }
+  return { mode: "payment", amount: amountInMinorUnits };
+}
 function resolveTokenizedPaymentMethodId(tokenizedBody) {
   const candidates = [
     tokenizedBody?.id,
@@ -1240,7 +1258,7 @@ ${debugLines.join("\n")}`
 }
 
 // src/split-card-form.tsx
-import { FloPayError as FloPayError3, resolveTheme } from "@flopay/shared";
+import { FloPayError as FloPayError3, isSetupIntentClientSecret as isSetupIntentClientSecret2, resolveTheme } from "@flopay/shared";
 import { Fragment as Fragment2, jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
 var STRIPE_RESUME_KEY = "flopay_stripe_resume";
 var LEGACY_WALLET_RESUME_KEY = "flopay_wallet_resume";
@@ -1733,10 +1751,7 @@ function WalletButtonInner({
         const intentJson = await intentResponse.json();
         const intentClientSecret = intentJson.data?.id;
         if (!intentClientSecret) throw new Error("No client_secret in payment intent response");
-        const { error: confirmError, paymentIntent } = await stripe.confirmCardPayment(
-          intentClientSecret,
-          { payment_method: paymentMethod.id }
-        );
+        const { error: confirmError, intentId } = isSetupIntentClientSecret2(intentClientSecret) ? await stripe.confirmCardSetup(intentClientSecret, { payment_method: paymentMethod.id }).then((r) => ({ error: r.error, intentId: r.setupIntent?.id })) : await stripe.confirmCardPayment(intentClientSecret, { payment_method: paymentMethod.id }).then((r) => ({ error: r.error, intentId: r.paymentIntent?.id }));
         if (confirmError) {
           const message = confirmError.message ?? "Wallet payment failed.";
           onErrorChange?.(message);
@@ -1748,7 +1763,7 @@ function WalletButtonInner({
         onTokenizedBody({
           id: paymentMethod.id,
           type: "card",
-          threeDSecureActionResultTokenId: paymentIntent?.id
+          threeDSecureActionResultTokenId: intentId
         }, {
           accountPatch: prepared?.accountPatch,
           sessionId: effectiveSessionId,
@@ -2611,14 +2626,17 @@ function SplitCardFormInner({
       }
     };
   }, [appearance]);
-  const walletOptions = useMemo3(() => ({
-    mode: "payment",
-    amount: amountInCents,
-    currency: currency.toLowerCase(),
-    paymentMethodCreation: "manual",
-    captureMethod: "manual",
-    ...stripeAppearanceProp
-  }), [amountInCents, currency, stripeAppearanceProp]);
+  const walletOptions = useMemo3(() => {
+    const modeOptions = resolveWalletElementsMode(totalAmount);
+    return {
+      ...modeOptions,
+      currency: currency.toLowerCase(),
+      paymentMethodCreation: "manual",
+      // captureMethod only applies to payment mode; Stripe rejects it in setup.
+      ...modeOptions.mode === "payment" ? { captureMethod: "manual" } : {},
+      ...stripeAppearanceProp
+    };
+  }, [totalAmount, currency, stripeAppearanceProp]);
   const paypalOptions = useMemo3(() => ({
     mode: "payment",
     amount: amountInCents,
@@ -4288,8 +4306,28 @@ function SplitCardFormInner({
 
 // src/saved-payment-flow.ts
 import { loadFloPay, PaymentAPI as PaymentAPI3 } from "@flopay/js";
-import { FloPayError as FloPayError4 } from "@flopay/shared";
+import { FloPayError as FloPayError4, isSetupIntentClientSecret as isSetupIntentClientSecret3 } from "@flopay/shared";
 var DEFAULT_SAVED_PAYMENT_DECLINE_METHOD = "card";
+async function retrieveResumeIntent(stripe, clientSecret, isSetupIntent) {
+  if (isSetupIntent) {
+    if (typeof stripe.retrieveSetupIntent !== "function") return null;
+    const { setupIntent, error: error2 } = await stripe.retrieveSetupIntent(clientSecret);
+    return { error: error2, intent: setupIntent ?? null };
+  }
+  if (typeof stripe.retrievePaymentIntent !== "function") return null;
+  const { paymentIntent, error } = await stripe.retrievePaymentIntent(clientSecret);
+  return { error, intent: paymentIntent ?? null };
+}
+async function confirmResumeIntent(stripe, clientSecret, data, isSetupIntent) {
+  if (isSetupIntent) {
+    if (typeof stripe.confirmCardSetup !== "function") return null;
+    const { setupIntent, error: error2 } = await stripe.confirmCardSetup(clientSecret, data);
+    return { error: error2, intent: setupIntent ?? null };
+  }
+  if (typeof stripe.confirmCardPayment !== "function") return null;
+  const { paymentIntent, error } = await stripe.confirmCardPayment(clientSecret, data);
+  return { error, intent: paymentIntent ?? null };
+}
 function getRedirectResultFromCheckoutProcessError(error) {
   if (!error?.type || !error.threeDSecureToken) {
     return null;
@@ -4525,64 +4563,66 @@ async function handleSavedPaymentRedirectResult(redirectResult, {
         { checkoutMethod: "card" }
       );
     }
+    const isSetupIntent = isSetupIntentClientSecret3(redirectResult.threeDSecureToken);
     let paymentIntent = null;
     let savedPaymentMethodId = redirectResult.paymentMethodId;
-    if (typeof stripe.retrievePaymentIntent === "function") {
-      const { paymentIntent: existingPaymentIntent, error: retrieveError } = await stripe.retrievePaymentIntent(
-        redirectResult.threeDSecureToken
-      );
-      if (retrieveError) {
+    const retrieved = await retrieveResumeIntent(stripe, redirectResult.threeDSecureToken, isSetupIntent);
+    if (retrieved) {
+      if (retrieved.error) {
         throw Object.assign(
           new FloPayError4(
-            retrieveError.message ?? "Failed to retrieve 3DS payment status.",
+            retrieved.error.message ?? `Failed to retrieve 3DS ${isSetupIntent ? "setup" : "payment"} status.`,
             "api_error",
-            { code: retrieveError.code }
+            { code: retrieved.error.code }
           ),
           { checkoutMethod: "card" }
         );
       }
-      if (!savedPaymentMethodId && existingPaymentIntent?.payment_method) {
-        if (typeof existingPaymentIntent.payment_method === "string") {
-          savedPaymentMethodId = existingPaymentIntent.payment_method;
-        } else if ("id" in existingPaymentIntent.payment_method) {
-          savedPaymentMethodId = existingPaymentIntent.payment_method.id;
+      const existingIntent = retrieved.intent;
+      if (!savedPaymentMethodId && existingIntent?.payment_method) {
+        if (typeof existingIntent.payment_method === "string") {
+          savedPaymentMethodId = existingIntent.payment_method;
+        } else if ("id" in existingIntent.payment_method) {
+          savedPaymentMethodId = existingIntent.payment_method.id ?? void 0;
         }
       }
     }
-    if (savedPaymentMethodId && typeof stripe.confirmCardPayment === "function") {
-      const { error: confirmError, paymentIntent: confirmedPaymentIntent } = await stripe.confirmCardPayment(
-        redirectResult.threeDSecureToken,
-        {
-          payment_method: savedPaymentMethodId,
-          return_url: returnUrl ?? resolveSavedPaymentReturnUrl(session) ?? window.location.href
-        }
-      );
-      if (confirmError) {
+    const confirmed = savedPaymentMethodId ? await confirmResumeIntent(
+      stripe,
+      redirectResult.threeDSecureToken,
+      {
+        payment_method: savedPaymentMethodId,
+        return_url: returnUrl ?? resolveSavedPaymentReturnUrl(session) ?? window.location.href
+      },
+      isSetupIntent
+    ) : null;
+    if (confirmed) {
+      if (confirmed.error) {
         throw Object.assign(
           new FloPayError4(
-            confirmError.message ?? "3DS authentication failed.",
+            confirmed.error.message ?? "3DS authentication failed.",
             "api_error",
-            { code: confirmError.code }
+            { code: confirmed.error.code }
           ),
           { checkoutMethod: "card" }
         );
       }
-      paymentIntent = confirmedPaymentIntent ?? null;
+      paymentIntent = confirmed.intent;
     } else {
-      const { error: nextActionError, paymentIntent: nextActionPaymentIntent } = await stripe.handleNextAction({
+      const nextAction = await stripe.handleNextAction({
         clientSecret: redirectResult.threeDSecureToken
       });
-      if (nextActionError) {
+      if (nextAction.error) {
         throw Object.assign(
           new FloPayError4(
-            nextActionError.message ?? "3DS authentication failed.",
+            nextAction.error.message ?? "3DS authentication failed.",
             "api_error",
-            { code: nextActionError.code }
+            { code: nextAction.error.code }
           ),
           { checkoutMethod: "card" }
         );
       }
-      paymentIntent = nextActionPaymentIntent ?? null;
+      paymentIntent = (isSetupIntent ? nextAction.setupIntent : nextAction.paymentIntent) ?? null;
     }
     if (paymentIntent && (paymentIntent.status === "requires_capture" || paymentIntent.status === "succeeded" || paymentIntent.status === "processing")) {
       const followUp = await processSavedPaymentForMode({