@flopay/react 1.2.6 → 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 {
@@ -806,6 +805,15 @@ interface FloPayAutomaticPaymentSuccessEvent {
 }
 interface FloPayAutomaticPaymentButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'onError'> {
     sessionId?: string;
+    /**
+     * Session-bound checkout token for a consumer-supplied {@link sessionId}
+     * (the `nonce` returned when that session was created). Post-#640 backends
+     * require it as `x-checkout-session-token` to read the session and to
+     * `/process` it; without it the existing-session path 401s with
+     * "Missing checkout session token.". Ignored on the create-session path,
+     * where the SDK mints and threads the nonce itself.
+     */
+    nonce?: string;
     createSession?: InlineSessionDraft;
     /**
      * @deprecated Ignored. The backend now picks the customer's most recent
@@ -858,6 +866,6 @@ interface FloPayAutomaticPaymentButtonProps extends Omit<React.ButtonHTMLAttribu
     onDecline?: (decline: DeclineEvent) => void;
     children?: React.ReactNode;
 }
-declare function FloPayAutomaticPaymentButton({ sessionId, 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 {
@@ -806,6 +805,15 @@ interface FloPayAutomaticPaymentSuccessEvent {
 }
 interface FloPayAutomaticPaymentButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'onError'> {
     sessionId?: string;
+    /**
+     * Session-bound checkout token for a consumer-supplied {@link sessionId}
+     * (the `nonce` returned when that session was created). Post-#640 backends
+     * require it as `x-checkout-session-token` to read the session and to
+     * `/process` it; without it the existing-session path 401s with
+     * "Missing checkout session token.". Ignored on the create-session path,
+     * where the SDK mints and threads the nonce itself.
+     */
+    nonce?: string;
     createSession?: InlineSessionDraft;
     /**
      * @deprecated Ignored. The backend now picks the customer's most recent
@@ -858,6 +866,6 @@ interface FloPayAutomaticPaymentButtonProps extends Omit<React.ButtonHTMLAttribu
     onDecline?: (decline: DeclineEvent) => void;
     children?: React.ReactNode;
 }
-declare function FloPayAutomaticPaymentButton({ sessionId, 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;
@@ -4418,11 +4456,13 @@ async function processSavedPaymentForMode({
   billingApiUrl,
   sessionId,
   session,
+  nonce,
   tokenizedData,
   returnUrl
 }) {
   const baseUrl = billingApiUrl.replace(/\/+$/, "");
   const resolvedSessionId = sessionId ?? session.id;
+  const resolvedNonce = nonce ?? session.clientSecret;
   const customerId = session.customer?.id ?? session.accountData?.userId ?? "";
   const customerEmail = session.customer?.email ?? session.accountData?.email ?? "";
   const firstName = session.customer?.firstName ?? session.accountData?.firstName ?? "";
@@ -4432,7 +4472,7 @@ async function processSavedPaymentForMode({
   const api = new PaymentAPI3(baseUrl);
   const response = await retryOnceOnFetchFailure(() => api.processPayment(customerId, {
     sessionId: resolvedSessionId,
-    nonce: session.clientSecret,
+    nonce: resolvedNonce,
     tokenizedData,
     accountData: {
       userId: customerId,
@@ -4475,7 +4515,7 @@ async function processSavedPaymentForMode({
     const recoveredRedirect = await recover3DSRedirectResult({
       billingApiUrl: baseUrl,
       sessionId: resolvedSessionId,
-      nonce: session.clientSecret,
+      nonce: resolvedNonce,
       responseJson: json
     });
     if (recoveredRedirect) {
@@ -4523,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({
@@ -6653,6 +6695,7 @@ function resolveCreateSessionDraft(props) {
 }
 function FloPayAutomaticPaymentButton({
   sessionId,
+  nonce,
   createSession,
   // Deprecated — accepted for back-compat and silently ignored. Backend
   // resolves the customer's latest payment method server-side.
@@ -6784,6 +6827,7 @@ function FloPayAutomaticPaymentButton({
     if (!session) {
       throw new FloPayError8("No session data returned", "api_error");
     }
+    const effectiveNonce = session.clientSecret || nonce;
     if (session.status === "complete") {
       await showSuccess({
         result: { status: "succeeded" },
@@ -6839,7 +6883,8 @@ function FloPayAutomaticPaymentButton({
       const result = await processSavedPaymentForMode({
         billingApiUrl: resolvedBillingUrl,
         sessionId: resolvedSessionId ?? session.id,
-        session
+        session,
+        nonce: effectiveNonce
       });
       if (result.type !== "success") {
         throw checkoutProcessErrorToFloPayError(
@@ -6866,11 +6911,13 @@ function FloPayAutomaticPaymentButton({
       if (shouldShowFallbackCheckout(floPayErr, fallbackSessionId) && fallbackSessionId && isMountedRef.current) {
         setFallbackSession({
           sessionId: fallbackSessionId,
-          errorMessage: floPayErr.message
+          errorMessage: floPayErr.message,
+          nonce: effectiveNonce || void 0
         });
       }
     }
   }, [
+    nonce,
     resolvedBillingUrl,
     showError,
     showSuccess
@@ -6911,7 +6958,7 @@ function FloPayAutomaticPaymentButton({
     try {
       const api = new PaymentAPI7(resolvedBillingUrl);
       if (sessionId) {
-        const result = await api.getUnifiedCheckoutSession(sessionId);
+        const result = await api.getUnifiedCheckoutSession(sessionId, nonce);
         await processResolvedSession(result, sessionId);
         return;
       }
@@ -6950,6 +6997,7 @@ function FloPayAutomaticPaymentButton({
     createSessionDraft,
     disabled,
     isProcessing,
+    nonce,
     processResolvedSession,
     resolvedBillingUrl,
     sessionId,
@@ -7084,6 +7132,7 @@ function FloPayAutomaticPaymentButton({
               FloPayCheckout,
               {
                 sessionId: fallbackSession.sessionId,
+                nonce: fallbackSession.nonce,
                 checkoutMode: "full",
                 billingApiUrl: resolvedBillingUrl,
                 locale,