@funnelsgrove/payments 0.13.0 → 0.15.0

package/dist/providers/stripe/components/SharedStripeCheckoutV2Dialog.js

@@ -11,7 +11,7 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useCallback, useEffect, useMemo, useState, } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState, } from 'react';
 import { CheckoutProvider, PaymentElement, useCheckout, } from '@stripe/react-stripe-js/checkout';
 import { PaymentBrandMark, SecurityLockIcon } from './CheckoutBrandAssets.js';
 import { StripeCheckoutExpressCheckoutButton } from './StripeCheckoutExpressCheckoutButton.js';
@@ -70,6 +70,7 @@ function SharedStripeCheckoutV2CheckoutSessionForm({ amountCents, buttonColor, c
         ? true
         : walletAvailable;
     const [submitting, setSubmitting] = useState(false);
+    const submitInFlightRef = useRef(false);
     const [paymentElementReady, setPaymentElementReady] = useState(false);
     const [error, setError] = useState(null);
     const [billingCountry, setBillingCountry] = useState(null);
@@ -250,7 +251,7 @@ function SharedStripeCheckoutV2CheckoutSessionForm({ amountCents, buttonColor, c
     };
     const handleSubmit = async (event) => {
         event.preventDefault();
-        if (submitting) {
+        if (submitInFlightRef.current) {
             return;
         }
         const billingCountryError = getBillingCountryError(billingCountry !== null && billingCountry !== void 0 ? billingCountry : fixedBillingCountry);
@@ -268,12 +269,17 @@ function SharedStripeCheckoutV2CheckoutSessionForm({ amountCents, buttonColor, c
             setSharedError('Payment form is not ready yet.', true);
             return;
         }
+        submitInFlightRef.current = true;
         setSubmitting(true);
         setSharedError(null);
+        const finishSubmitting = () => {
+            submitInFlightRef.current = false;
+            setSubmitting(false);
+        };
         try {
             const syncedEmail = await ensureCustomerEmail();
             if (!syncedEmail) {
-                setSubmitting(false);
+                finishSubmitting();
                 return;
             }
             await trackPaymentInfoSubmitted();
@@ -283,7 +289,7 @@ function SharedStripeCheckoutV2CheckoutSessionForm({ amountCents, buttonColor, c
             if (result.type === 'error') {
                 const message = result.error.message || 'Payment failed.';
                 setSharedError(message, false, result.error);
-                setSubmitting(false);
+                finishSubmitting();
                 return;
             }
             if (typeof window !== 'undefined') {
@@ -291,11 +297,11 @@ function SharedStripeCheckoutV2CheckoutSessionForm({ amountCents, buttonColor, c
                 window.location.assign(returnUrl);
                 return;
             }
-            setSubmitting(false);
+            finishSubmitting();
         }
         catch (submitError) {
             setSharedError(getFriendlyCardErrorMessage(submitError));
-            setSubmitting(false);
+            finishSubmitting();
         }
     };
     const visibleError = error;

package/dist/providers/stripe/components/StripeOneTimeWalletSurface.d.ts

@@ -12,4 +12,4 @@ export type StripeOneTimeWalletSurfaceProps = Omit<StripeWalletSurfaceProps, 'ap
     googlePayOptions?: StripeWalletSurfaceProps['googlePayOptions'];
     googlePayPlaceholderLabel?: string;
 };
-export declare function StripeOneTimeWalletSurface({ applePayOptions, applePayPlaceholderLabel, checkout, googlePayOptions, googlePayPlaceholderLabel, surfaceId, ...surfaceProps }: StripeOneTimeWalletSurfaceProps): import("react/jsx-runtime").JSX.Element;
+export declare function StripeOneTimeWalletSurface({ applePayOptions, applePayPlaceholderLabel, checkout, checkoutAnalytics, googlePayOptions, googlePayPlaceholderLabel, surfaceId, ...surfaceProps }: StripeOneTimeWalletSurfaceProps): import("react/jsx-runtime").JSX.Element;

package/dist/providers/stripe/components/StripeOneTimeWalletSurface.js

@@ -16,13 +16,13 @@ import { useStripeOneTimeCheckoutSession, } from '../hooks/useStripeOneTimeCheck
 import { StripeWalletSurface, buildStripeWalletSurfaceAnalyticsMetadata, } from './StripeWalletSurface.internal.js';
 export function StripeOneTimeWalletSurface(_a) {
     var _b, _c;
-    var { applePayOptions, applePayPlaceholderLabel = 'Buy with Apple Pay', checkout, googlePayOptions, googlePayPlaceholderLabel = 'Buy with Google Pay', surfaceId } = _a, surfaceProps = __rest(_a, ["applePayOptions", "applePayPlaceholderLabel", "checkout", "googlePayOptions", "googlePayPlaceholderLabel", "surfaceId"]);
+    var { applePayOptions, applePayPlaceholderLabel = 'Buy with Apple Pay', checkout, checkoutAnalytics, googlePayOptions, googlePayPlaceholderLabel = 'Buy with Google Pay', surfaceId } = _a, surfaceProps = __rest(_a, ["applePayOptions", "applePayPlaceholderLabel", "checkout", "checkoutAnalytics", "googlePayOptions", "googlePayPlaceholderLabel", "surfaceId"]);
     const normalizedSurfaceId = surfaceId.trim();
     const { customerName } = checkout, checkoutSessionInput = __rest(checkout, ["customerName"]);
     const surfaceAnalyticsMetadata = useMemo(() => {
         var _a;
         return buildStripeWalletSurfaceAnalyticsMetadata(Object.assign(Object.assign({}, ((_a = checkout.analyticsMetadata) !== null && _a !== void 0 ? _a : {})), { paymentMode: 'one_time' }), normalizedSurfaceId);
     }, [checkout.analyticsMetadata, normalizedSurfaceId]);
-    const session = useStripeOneTimeCheckoutSession(Object.assign(Object.assign({}, checkoutSessionInput), { analyticsMetadata: surfaceAnalyticsMetadata }));
-    return (_jsx(StripeWalletSurface, Object.assign({}, surfaceProps, { applePayOptions: Object.assign(Object.assign({}, applePayOptions), { buttonType: Object.assign({ applePay: 'buy' }, ((_b = applePayOptions === null || applePayOptions === void 0 ? void 0 : applePayOptions.buttonType) !== null && _b !== void 0 ? _b : {})) }), applePayPlaceholderLabel: applePayPlaceholderLabel, customerEmail: checkout.customerEmail, customerName: customerName, googlePayOptions: Object.assign(Object.assign({}, googlePayOptions), { buttonType: Object.assign({ googlePay: 'buy' }, ((_c = googlePayOptions === null || googlePayOptions === void 0 ? void 0 : googlePayOptions.buttonType) !== null && _c !== void 0 ? _c : {})) }), googlePayPlaceholderLabel: googlePayPlaceholderLabel, returnUrl: checkout.returnUrl, session: session, surfaceId: normalizedSurfaceId })));
+    const session = useStripeOneTimeCheckoutSession(Object.assign(Object.assign({}, checkoutSessionInput), { analyticsMetadata: surfaceAnalyticsMetadata, checkoutAnalytics }));
+    return (_jsx(StripeWalletSurface, Object.assign({}, surfaceProps, { checkoutAnalytics: checkoutAnalytics, applePayOptions: Object.assign(Object.assign({}, applePayOptions), { buttonType: Object.assign({ applePay: 'buy' }, ((_b = applePayOptions === null || applePayOptions === void 0 ? void 0 : applePayOptions.buttonType) !== null && _b !== void 0 ? _b : {})) }), applePayPlaceholderLabel: applePayPlaceholderLabel, customerEmail: checkout.customerEmail, customerName: customerName, googlePayOptions: Object.assign(Object.assign({}, googlePayOptions), { buttonType: Object.assign({ googlePay: 'buy' }, ((_c = googlePayOptions === null || googlePayOptions === void 0 ? void 0 : googlePayOptions.buttonType) !== null && _c !== void 0 ? _c : {})) }), googlePayPlaceholderLabel: googlePayPlaceholderLabel, returnUrl: checkout.returnUrl, session: session, surfaceId: normalizedSurfaceId })));
 }

package/dist/providers/stripe/hooks/useStripeOneTimeCheckoutSession.d.ts

@@ -2,6 +2,7 @@ import type { Stripe } from '@stripe/stripe-js';
 import type { RuntimeMode } from '@funnelsgrove/runtime';
 import { type CheckoutPreparationLoading, type CheckoutPreparationSource } from '../../paymentProvider.types.js';
 import { type PaywallPlan, type StripeRuntimeConfigOverrides } from '../services/stripe.service.js';
+import { type CheckoutObservabilityAnalyticsContext } from '../../../services/checkoutObservability.service.js';
 export { isStripeCheckoutIdentityReady as isStripeOneTimeCheckoutIdentityReady, } from './checkoutIdentity.js';
 type StripeOneTimeCheckoutPlanInput = Pick<PaywallPlan, 'amountCents' | 'analyticsPurchaseValue' | 'description' | 'id' | 'providerPlanId' | 'title' | 'funnelPlanKey' | 'offerSetId' | 'offerSetKey'>;
 export type StripeOneTimeCheckoutSessionInput = {
@@ -9,6 +10,7 @@ export type StripeOneTimeCheckoutSessionInput = {
     paymentProfileId?: string | null;
     provider?: 'stripe' | null;
     analyticsMetadata?: Record<string, unknown> | null;
+    checkoutAnalytics?: CheckoutObservabilityAnalyticsContext | null;
     checkoutMode: RuntimeMode;
     couponId?: string | null;
     customerEmail?: string | null;
@@ -49,4 +51,4 @@ export type StripeOneTimeCheckoutIntentKeyInput = Pick<StripeOneTimeCheckoutSess
 };
 export declare function buildStripeOneTimeCheckoutIntentKey({ runtimeConfigRevisionId, paymentProfileId, provider, checkoutMode, couponId, customerEmail, plan, returnUrl, runtimeConfig, stripePublishableKey, userId, }: StripeOneTimeCheckoutIntentKeyInput): string;
 export declare function shouldResetStripeOneTimeCheckoutSessionForIntentKey(previousIntentKey: string | null, nextIntentKey: string): boolean;
-export declare function useStripeOneTimeCheckoutSession({ runtimeConfigRevisionId, paymentProfileId, provider, analyticsMetadata, checkoutMode, couponId, customerEmail, enabled, onError, plan, returnUrl, runtimeConfig, stripePublishableKey, userId, }: StripeOneTimeCheckoutSessionInput): StripeOneTimeCheckoutSession;
+export declare function useStripeOneTimeCheckoutSession({ runtimeConfigRevisionId, paymentProfileId, provider, analyticsMetadata, checkoutAnalytics, checkoutMode, couponId, customerEmail, enabled, onError, plan, returnUrl, runtimeConfig, stripePublishableKey, userId, }: StripeOneTimeCheckoutSessionInput): StripeOneTimeCheckoutSession;

package/dist/providers/stripe/hooks/useStripeOneTimeCheckoutSession.js

@@ -13,8 +13,10 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState, } from 'react';
 import { createEmptyCheckoutPreparationLoading, } from '../../paymentProvider.types.js';
 import { createStripeOneTimeCheckout, getStripePromise, isStripeConfigured, } from '../services/stripe.service.js';
-import { isInactiveCheckoutSessionError } from './useStripeSubscriptionCheckoutSession.js';
+import { describeStripeCheckoutFailure } from '../services/stripeCheckoutFailure.js';
+import { isInactiveCheckoutSessionError, shouldReportStripeCheckoutFailureShown, } from './useStripeSubscriptionCheckoutSession.js';
 import { toAnalyticsPaymentMethod } from '../../../services/paymentMethodAnalytics.service.js';
+import { resolveCheckoutObservabilityAnalyticsContext, trackCheckoutFailureShown, } from '../../../services/checkoutObservability.service.js';
 import { resolveStripeCheckoutAttempt, } from './checkoutAttempt.js';
 import { isStripeCheckoutIdentityReady } from './checkoutIdentity.js';
 export { isStripeCheckoutIdentityReady as isStripeOneTimeCheckoutIdentityReady, } from './checkoutIdentity.js';
@@ -24,12 +26,6 @@ export function resolveStripeOneTimeCheckoutPreparationOptions(source, options =
     const paymentMethod = (_b = options.paymentMethod) !== null && _b !== void 0 ? _b : (source === 'card' && checkoutStartSource !== 'checkout_render' ? 'card' : undefined);
     return Object.assign(Object.assign(Object.assign({}, options), { checkoutStartSource }), (paymentMethod !== undefined ? { paymentMethod } : {}));
 }
-const getFriendlyStripeCheckoutError = (error) => {
-    const message = error instanceof Error ? error.message : 'Unable to initialize checkout';
-    return message === 'Internal server error'
-        ? 'Unable to initialize checkout. Stripe settings may be missing for this funnel.'
-        : message;
-};
 const normalizeRuntimeConfigValue = (value) => (value === null || value === void 0 ? void 0 : value.trim()) || '';
 const useIsomorphicLayoutEffect = typeof window === 'undefined' ? useEffect : useLayoutEffect;
 export const buildStripeOneTimeCheckoutPreparationAnalyticsMetadata = (analyticsMetadata, options = {}) => {
@@ -75,7 +71,7 @@ export function buildStripeOneTimeCheckoutIntentKey({ runtimeConfigRevisionId, p
 export function shouldResetStripeOneTimeCheckoutSessionForIntentKey(previousIntentKey, nextIntentKey) {
     return previousIntentKey !== null && previousIntentKey !== nextIntentKey;
 }
-export function useStripeOneTimeCheckoutSession({ runtimeConfigRevisionId, paymentProfileId, provider, analyticsMetadata, checkoutMode, couponId, customerEmail, enabled = true, onError, plan, returnUrl, runtimeConfig, stripePublishableKey, userId, }) {
+export function useStripeOneTimeCheckoutSession({ runtimeConfigRevisionId, paymentProfileId, provider, analyticsMetadata, checkoutAnalytics, checkoutMode, couponId, customerEmail, enabled = true, onError, plan, returnUrl, runtimeConfig, stripePublishableKey, userId, }) {
     var _a, _b, _c;
     const [clientSecret, setClientSecret] = useState(null);
     const [clientSecretIntentKey, setClientSecretIntentKey] = useState(null);
@@ -226,7 +222,26 @@ export function useStripeOneTimeCheckoutSession({ runtimeConfigRevisionId, payme
             catch (checkoutError) {
                 if (((_e = creatingIntentRef.current) === null || _e === void 0 ? void 0 : _e.key) === requestKey &&
                     ((_f = creatingIntentRef.current) === null || _f === void 0 ? void 0 : _f.id) === requestId) {
-                    setError(getFriendlyStripeCheckoutError(checkoutError));
+                    const failure = describeStripeCheckoutFailure(checkoutError);
+                    const message = failure.message;
+                    const observabilityAnalytics = resolveCheckoutObservabilityAnalyticsContext({
+                        analytics: checkoutAnalytics,
+                        environment: checkoutMode,
+                        metadata: analyticsMetadataRef.current,
+                        runtimeConfig,
+                    });
+                    if (observabilityAnalytics && shouldReportStripeCheckoutFailureShown(message)) {
+                        trackCheckoutFailureShown({
+                            analytics: observabilityAnalytics,
+                            errorCode: failure.errorCode,
+                            errorMessage: message,
+                            failureStage: 'checkout_session_creation',
+                            paymentMethod: options.paymentMethod,
+                            provider: 'stripe',
+                            providerErrorCode: failure.providerErrorCode,
+                        });
+                    }
+                    setError(message);
                 }
                 return null;
             }
@@ -249,6 +264,7 @@ export function useStripeOneTimeCheckoutSession({ runtimeConfigRevisionId, payme
         paymentProfileId,
         provider,
         checkoutMode,
+        checkoutAnalytics,
         clearActiveCheckoutSession,
         configured,
         couponId,

package/dist/providers/stripe/hooks/useStripeSubscriptionCheckoutSession.js

@@ -13,6 +13,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState, } from 'react';
 import { createEmptyCheckoutPreparationLoading, } from '../../paymentProvider.types.js';
 import { createStripeSubscriptionCheckout, getStripePromise, isStripeConfigured, updateStripeSubscriptionCheckoutPlan, } from '../services/stripe.service.js';
+import { describeStripeCheckoutFailure } from '../services/stripeCheckoutFailure.js';
 import { toAnalyticsPaymentMethod } from '../../../services/paymentMethodAnalytics.service.js';
 import { resolveCheckoutObservabilityAnalyticsContext, trackCheckoutFailureShown, } from '../../../services/checkoutObservability.service.js';
 import { resolveStripeCheckoutAttempt, } from './checkoutAttempt.js';
@@ -24,12 +25,6 @@ export function resolveStripeSubscriptionCheckoutPreparationOptions(source, opti
     const paymentMethod = (_b = options.paymentMethod) !== null && _b !== void 0 ? _b : (source === 'card' && checkoutStartSource !== 'checkout_render' ? 'card' : undefined);
     return Object.assign(Object.assign(Object.assign({}, options), { checkoutStartSource }), (paymentMethod !== undefined ? { paymentMethod } : {}));
 }
-const getFriendlyStripeCheckoutError = (error) => {
-    const message = error instanceof Error ? error.message : 'Unable to initialize checkout';
-    return message === 'Internal server error'
-        ? 'Unable to initialize checkout. Stripe settings may be missing for this funnel.'
-        : message;
-};
 const normalizeRuntimeConfigValue = (value) => (value === null || value === void 0 ? void 0 : value.trim()) || '';
 const useIsomorphicLayoutEffect = typeof window === 'undefined' ? useEffect : useLayoutEffect;
 export const buildStripeSubscriptionCheckoutPreparationAnalyticsMetadata = (analyticsMetadata, options = {}) => {
@@ -246,7 +241,8 @@ export function useStripeSubscriptionCheckoutSession({ checkoutMode, analyticsMe
             catch (subscriptionError) {
                 if (((_f = creatingIntentRef.current) === null || _f === void 0 ? void 0 : _f.key) === requestKey &&
                     ((_g = creatingIntentRef.current) === null || _g === void 0 ? void 0 : _g.id) === requestId) {
-                    const message = getFriendlyStripeCheckoutError(subscriptionError);
+                    const failure = describeStripeCheckoutFailure(subscriptionError);
+                    const message = failure.message;
                     const observabilityAnalytics = resolveCheckoutObservabilityAnalyticsContext({
                         analytics: checkoutAnalytics,
                         environment: checkoutMode,
@@ -257,10 +253,12 @@ export function useStripeSubscriptionCheckoutSession({ checkoutMode, analyticsMe
                         && shouldReportStripeCheckoutFailureShown(message)) {
                         trackCheckoutFailureShown({
                             analytics: observabilityAnalytics,
+                            errorCode: failure.errorCode,
                             errorMessage: message,
                             failureStage: 'checkout_session_creation',
                             paymentMethod: options.paymentMethod,
                             provider: 'stripe',
+                            providerErrorCode: failure.providerErrorCode,
                         });
                     }
                     setError(message);
@@ -364,7 +362,8 @@ export function useStripeSubscriptionCheckoutSession({ checkoutMode, analyticsMe
             return true;
         }
         catch (subscriptionError) {
-            const message = getFriendlyStripeCheckoutError(subscriptionError);
+            const failure = describeStripeCheckoutFailure(subscriptionError);
+            const message = failure.message;
             const observabilityAnalytics = resolveCheckoutObservabilityAnalyticsContext({
                 analytics: checkoutAnalytics,
                 environment: checkoutMode,
@@ -376,9 +375,11 @@ export function useStripeSubscriptionCheckoutSession({ checkoutMode, analyticsMe
                 trackCheckoutFailureShown({
                     analytics: observabilityAnalytics,
                     checkoutSessionId: activeCheckoutSessionId,
+                    errorCode: failure.errorCode,
                     errorMessage: message,
                     failureStage: 'checkout_session_update',
                     provider: 'stripe',
+                    providerErrorCode: failure.providerErrorCode,
                 });
             }
             setError(message);

package/dist/providers/stripe/services/stripeCheckoutFailure.d.ts

@@ -0,0 +1,6 @@
+export type StripeCheckoutFailure = {
+    errorCode?: string;
+    message: string;
+    providerErrorCode?: string;
+};
+export declare const describeStripeCheckoutFailure: (error: unknown) => StripeCheckoutFailure;

package/dist/providers/stripe/services/stripeCheckoutFailure.js

@@ -0,0 +1,22 @@
+import { FunnelSdkHttpError } from '@funnelsgrove/runtime';
+export const describeStripeCheckoutFailure = (error) => {
+    const errorCode = error instanceof FunnelSdkHttpError
+        ? error.code || undefined
+        : undefined;
+    const providerErrorCode = (errorCode === null || errorCode === void 0 ? void 0 : errorCode.startsWith('stripe_'))
+        ? errorCode.slice('stripe_'.length)
+        : undefined;
+    const rawMessage = error instanceof Error
+        ? error.message
+        : 'Unable to initialize checkout';
+    const message = errorCode === 'stripe_email_invalid'
+        ? 'Enter a valid email address to continue.'
+        : rawMessage === 'Internal server error'
+            ? 'Unable to initialize checkout. Stripe settings may be missing for this funnel.'
+            : rawMessage;
+    return {
+        errorCode,
+        message,
+        providerErrorCode,
+    };
+};

package/dist/services/checkoutObservability.service.js

@@ -39,14 +39,19 @@ const STRIPE_PAYMENT_REJECTION_CODES = new Set([
     'payment_intent_authentication_failure',
     'paymentFailed',
 ]);
+const STRIPE_VALIDATION_ERROR_CODES = new Set(['email_invalid']);
 export const classifyCheckoutFailure = (input) => {
     const providerDeclineCode = asNonEmptyString(input.providerDeclineCode);
     const providerErrorCode = asNonEmptyString(input.providerErrorCode);
     const providerErrorType = asNonEmptyString(input.providerErrorType);
+    if (input.provider === 'stripe' && providerErrorCode
+        && STRIPE_VALIDATION_ERROR_CODES.has(providerErrorCode)) {
+        return 'validation_failure';
+    }
     if (input.provider === 'stripe' && (Boolean(providerDeclineCode)
         || providerErrorType === 'card_error'
         || (providerErrorCode ? STRIPE_PAYMENT_REJECTION_CODES.has(providerErrorCode) : false)
-        || /card has insufficient funds|unable to authenticate your payment method/i.test(input.errorMessage))) {
+        || /card has insufficient funds|unable to authenticate your payment method|card(?: was| is)? declined|security code is incorrect/i.test(input.errorMessage))) {
         return 'payment_rejection';
     }
     const message = input.errorMessage.trim();
@@ -57,8 +62,8 @@ export const classifyCheckoutFailure = (input) => {
     if (/failed to fetch|load failed|network|connection to (?:the )?provider|too many requests/i.test(message)) {
         return 'network_failure';
     }
-    if (/(?:email|card number|expiration|expiry|cvc|zip|postal code|billing address|country).*(?:required|incomplete|incorrect|invalid|unsupported)/i.test(message)
-        || /(?:required|incomplete|incorrect|invalid|unsupported).*(?:email|card number|expiration|expiry|cvc|zip|postal code|billing address|country)/i.test(message)
+    if (/(?:email|card number|expiration|expiry|cvc|security code|zip|postal code|billing address|country).*(?:required|incomplete|incorrect|invalid|unsupported)/i.test(message)
+        || /(?:required|incomplete|incorrect|invalid|unsupported).*(?:email|card number|expiration|expiry|cvc|security code|zip|postal code|billing address|country)/i.test(message)
         || /(?:enter|provide|use) a valid email(?: address)?/i.test(message)) {
         return 'validation_failure';
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@funnelsgrove/payments",
-  "version": "0.13.0",
+  "version": "0.15.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/The-Solid-Grove/funnelsgrove.git",