@funnelsgrove/payments 0.23.2 → 0.24.0

package/dist/generated/package-version.d.ts

@@ -0,0 +1 @@
+export declare const PAYMENTS_PACKAGE_VERSION = "0.24.0";

package/dist/generated/package-version.js

@@ -0,0 +1,2 @@
+// Generated by scripts/generate-package-version.mjs.
+export const PAYMENTS_PACKAGE_VERSION = "0.24.0";

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

@@ -22,6 +22,8 @@ export type StripeCheckoutExpressCheckoutButtonProps = {
     supportedCountries?: readonly string[];
     onServerUpdate?: () => Promise<boolean>;
     onAvailabilityChange?: (available: boolean) => void;
+    onElementMount?: () => void;
+    onElementRetry?: () => void;
     onCancel?: () => void;
     onError?: (message: string | null) => void;
     onPaymentInfoSubmitted?: () => void | Promise<void>;
@@ -35,4 +37,4 @@ export type StripeCheckoutExpressCheckoutButtonProps = {
     onSuccess?: (result: StripeWalletCheckoutSuccess) => void | Promise<void>;
     unsupportedCountryMessage?: string;
 };
-export declare function StripeCheckoutExpressCheckoutButton({ beforeConfirm, checkoutAnalytics, checkoutSessionId, returnUrl, confirmEmail, customerEmail, className, options, availabilityPaymentMethods, initialAvailable, keepInitialAvailableOnReady, serverUpdateKey, supportedCountries, onServerUpdate, onAvailabilityChange, onCancel, onError, onPaymentInfoSubmitted, onPaymentRejected, onSuccess, onEmbeddedComplete, onVerificationPending, unsupportedCountryMessage, }: StripeCheckoutExpressCheckoutButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare function StripeCheckoutExpressCheckoutButton({ beforeConfirm, checkoutAnalytics, checkoutSessionId, returnUrl, confirmEmail, customerEmail, className, options, availabilityPaymentMethods, initialAvailable, keepInitialAvailableOnReady, serverUpdateKey, supportedCountries, onServerUpdate, onAvailabilityChange, onElementMount, onElementRetry, onCancel, onError, onPaymentInfoSubmitted, onPaymentRejected, onSuccess, onEmbeddedComplete, onVerificationPending, unsupportedCountryMessage, }: StripeCheckoutExpressCheckoutButtonProps): import("react/jsx-runtime").JSX.Element;

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

@@ -53,13 +53,19 @@ const normalizeStripeCheckoutProviderError = (error) => {
         type: typeof record.type === 'string' ? record.type : undefined,
     };
 };
-export function StripeCheckoutExpressCheckoutButton({ beforeConfirm, checkoutAnalytics, checkoutSessionId, returnUrl, confirmEmail = true, customerEmail, className, options, availabilityPaymentMethods = ['applePay'], initialAvailable, keepInitialAvailableOnReady = false, serverUpdateKey, supportedCountries, onServerUpdate, onAvailabilityChange, onCancel, onError, onPaymentInfoSubmitted, onPaymentRejected, onSuccess, onEmbeddedComplete, onVerificationPending, unsupportedCountryMessage, }) {
+export function StripeCheckoutExpressCheckoutButton({ beforeConfirm, checkoutAnalytics, checkoutSessionId, returnUrl, confirmEmail = true, customerEmail, className, options, availabilityPaymentMethods = ['applePay'], initialAvailable, keepInitialAvailableOnReady = false, serverUpdateKey, supportedCountries, onServerUpdate, onAvailabilityChange, onElementMount, onElementRetry, onCancel, onError, onPaymentInfoSubmitted, onPaymentRejected, onSuccess, onEmbeddedComplete, onVerificationPending, unsupportedCountryMessage, }) {
     const checkoutState = useCheckout();
     const [completed, setCompleted] = useState(false);
     const completedRef = useRef(false);
     const verificationInFlightRef = useRef(false);
     const [verificationInFlight, setVerificationInFlight] = useState(false);
     const [verificationError, setVerificationError] = useState(null);
+    const onElementMountRef = useRef(onElementMount);
+    onElementMountRef.current = onElementMount;
+    useEffect(() => {
+        var _a;
+        (_a = onElementMountRef.current) === null || _a === void 0 ? void 0 : _a.call(onElementMountRef);
+    }, []);
     const [loadRetry, setLoadRetry] = useState(0);
     const loadRetryUsedRef = useRef(false);
     const walletReadyRef = useRef(false);
@@ -373,6 +379,7 @@ export function StripeCheckoutExpressCheckoutButton({ beforeConfirm, checkoutAna
                         }
                         if (!walletReadyRef.current && !loadRetryUsedRef.current) {
                             loadRetryUsedRef.current = true;
+                            onElementRetry === null || onElementRetry === void 0 ? void 0 : onElementRetry();
                             // Replace only the failed Element, retaining the Checkout Session.
                             loadRetryTimerRef.current = setTimeout(() => {
                                 loadRetryTimerRef.current = null;

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

@@ -5,7 +5,8 @@ import { StripeExpressCheckoutElement } from './StripeExpressCheckoutElement.js'
 import { trackStripeSubscriptionCheckoutStarted, } from '../services/checkoutCompletionAnalytics.service.js';
 import { toAnalyticsPaymentMethod } from '../../../services/paymentMethodAnalytics.service.js';
 import { isInactiveCheckoutSessionError, } from '../hooks/useStripeSubscriptionCheckoutSession.js';
-import { trackCheckoutWalletReady } from '../../../services/checkoutObservability.service.js';
+import { trackCheckoutWalletReady, trackCheckoutWalletSlow } from '../../../services/checkoutObservability.service.js';
+const WALLET_SLOW_THRESHOLD_MS = 15000;
 export function getWalletSubscriptionCheckoutRenderState({ expressCheckoutAllowed, hasActiveClientSecret, hasStripePromise, suspended, walletAvailable, walletPreparing, }) {
     const shouldRenderExpressCheckout = !suspended &&
         expressCheckoutAllowed &&
@@ -44,14 +45,21 @@ export function WalletSubscriptionCheckoutSlot({ amountCents, appearance, availa
     const autoWalletPreparationIntentKeyRef = useRef(null);
     const walletCheckoutStartedAfterClickSessionIdRef = useRef(null);
     const walletReadinessCycleRef = useRef(null);
+    const checkoutAnalyticsRef = useRef(checkoutAnalytics);
+    checkoutAnalyticsRef.current = checkoutAnalytics;
     if (!walletReadinessCycleRef.current
         || walletReadinessCycleRef.current.intentKey !== session.intentKey) {
         walletReadinessCycleRef.current = {
+            activeSecretObservedAtMs: null,
             clientSecretReceivedAtMs: null,
+            elementMountedAtMs: null,
+            elementRetryCount: 0,
             intentKey: session.intentKey,
             mountedAtMs: null,
             reportedCheckoutSessionId: null,
             requestStartedAtMs: null,
+            slowReportedCheckoutSessionId: null,
+            stripePromiseWaitMs: null,
         };
     }
     useEffect(() => {
@@ -60,11 +68,71 @@ export function WalletSubscriptionCheckoutSlot({ amountCents, appearance, availa
             cycle.mountedAtMs = performance.now();
         }
     }, [session.intentKey]);
+    useEffect(() => {
+        const cycle = walletReadinessCycleRef.current;
+        if (session.activeClientSecret && (cycle === null || cycle === void 0 ? void 0 : cycle.intentKey) === session.intentKey) {
+            cycle.activeSecretObservedAtMs = performance.now();
+        }
+    }, [session.activeClientSecret, session.intentKey]);
+    useEffect(() => {
+        const stripePromise = session.stripePromise;
+        if (!stripePromise) {
+            return;
+        }
+        const intentKey = session.intentKey;
+        const startedAtMs = performance.now();
+        let active = true;
+        void stripePromise.then((stripe) => {
+            const cycle = walletReadinessCycleRef.current;
+            if (active && stripe && (cycle === null || cycle === void 0 ? void 0 : cycle.intentKey) === intentKey) {
+                cycle.stripePromiseWaitMs = Math.max(0, performance.now() - startedAtMs);
+            }
+        }).catch(() => undefined);
+        return () => {
+            active = false;
+        };
+    }, [session.intentKey, session.stripePromise]);
     const slotDisabled = disabled || !session.configured;
     const analyticsPaymentMethod = toAnalyticsPaymentMethod(availabilityPaymentMethod);
     const walletAvailable = walletAvailability.intentKey === session.intentKey
         ? walletAvailability.available
         : null;
+    useEffect(() => {
+        var _a;
+        const checkoutSessionId = (_a = session.checkoutSessionId) === null || _a === void 0 ? void 0 : _a.trim();
+        if (slotDisabled
+            || suspended
+            || !expressCheckoutAllowed
+            || !session.activeClientSecret
+            || !checkoutSessionId
+            || walletAvailable !== null) {
+            return;
+        }
+        const intentKey = session.intentKey;
+        const observedAtMs = performance.now();
+        const timer = setTimeout(() => {
+            var _a;
+            const cycle = walletReadinessCycleRef.current;
+            const analytics = checkoutAnalyticsRef.current;
+            if (!analytics
+                || !cycle
+                || cycle.intentKey !== intentKey
+                || cycle.reportedCheckoutSessionId === checkoutSessionId
+                || cycle.slowReportedCheckoutSessionId === checkoutSessionId) {
+                return;
+            }
+            cycle.slowReportedCheckoutSessionId = checkoutSessionId;
+            trackCheckoutWalletSlow({
+                analytics,
+                checkoutSessionId,
+                paymentMethod: availabilityPaymentMethod,
+                provider: 'stripe',
+                walletTimingOrigin: cycle.clientSecretReceivedAtMs === null ? 'already_active' : 'prepared_here',
+                walletClientSecretToSlowMs: Math.max(0, performance.now() - ((_a = cycle.clientSecretReceivedAtMs) !== null && _a !== void 0 ? _a : observedAtMs)),
+            });
+        }, WALLET_SLOW_THRESHOLD_MS);
+        return () => clearTimeout(timer);
+    }, [availabilityPaymentMethod, expressCheckoutAllowed, session.activeClientSecret, session.checkoutSessionId, session.intentKey, slotDisabled, suspended, walletAvailable]);
     const { placeholderIsPreparing, shouldRenderExpressCheckout, shouldRenderPlaceholder, } = getWalletSubscriptionCheckoutRenderState({
         expressCheckoutAllowed,
         hasActiveClientSecret: Boolean(session.activeClientSecret),
@@ -103,7 +171,10 @@ export function WalletSubscriptionCheckoutSlot({ amountCents, appearance, availa
         const requestStartedAtMs = performance.now();
         (_a = cycle.mountedAtMs) !== null && _a !== void 0 ? _a : (cycle.mountedAtMs = requestStartedAtMs);
         cycle.requestStartedAtMs = requestStartedAtMs;
+        cycle.activeSecretObservedAtMs = null;
         cycle.clientSecretReceivedAtMs = null;
+        cycle.elementMountedAtMs = null;
+        cycle.elementRetryCount = 0;
         cycle.reportedCheckoutSessionId = null;
     }, []);
     const finishWalletPreparationTiming = useCallback((intentKey, readyClientSecret) => {
@@ -180,9 +251,12 @@ export function WalletSubscriptionCheckoutSlot({ amountCents, appearance, availa
                 available: null,
                 intentKey: session.intentKey,
             });
+            startWalletPreparationTiming(session.intentKey);
             void session.restartWalletCheckout({
                 checkoutStartSource: 'wallet_click',
                 paymentMethod: analyticsPaymentMethod,
+            }).then((readyClientSecret) => {
+                finishWalletPreparationTiming(session.intentKey, readyClientSecret);
             });
             return;
         }
@@ -190,7 +264,7 @@ export function WalletSubscriptionCheckoutSlot({ amountCents, appearance, availa
         onError === null || onError === void 0 ? void 0 : onError(message);
     };
     const handleAvailabilityChange = (available) => {
-        var _a;
+        var _a, _b, _c;
         reportWalletAvailability(session.intentKey, available);
         const cycle = walletReadinessCycleRef.current;
         const checkoutSessionId = ((_a = session.checkoutSessionId) === null || _a === void 0 ? void 0 : _a.trim()) || '';
@@ -200,22 +274,40 @@ export function WalletSubscriptionCheckoutSlot({ amountCents, appearance, availa
             || !cycle
             || cycle.intentKey !== session.intentKey
             || cycle.mountedAtMs === null
-            || cycle.requestStartedAtMs === null
-            || cycle.clientSecretReceivedAtMs === null
             || cycle.reportedCheckoutSessionId === checkoutSessionId) {
             return;
         }
         const readyAtMs = performance.now();
+        const { requestStartedAtMs, clientSecretReceivedAtMs } = cycle;
+        const preparedHere = requestStartedAtMs !== null && clientSecretReceivedAtMs !== null;
+        const observedAtMs = (_b = cycle.activeSecretObservedAtMs) !== null && _b !== void 0 ? _b : cycle.mountedAtMs;
         cycle.reportedCheckoutSessionId = checkoutSessionId;
         trackCheckoutWalletReady({
             analytics: checkoutAnalytics,
             checkoutSessionId,
             paymentMethod: availabilityPaymentMethod,
             provider: 'stripe',
-            walletClientSecretToReadyMs: Math.max(0, readyAtMs - cycle.clientSecretReceivedAtMs),
+            walletTimingOrigin: preparedHere ? 'prepared_here' : 'already_active',
+            walletClientSecretToReadyMs: preparedHere
+                ? Math.max(0, readyAtMs - clientSecretReceivedAtMs) : undefined,
+            walletObservedActiveToReadyMs: preparedHere
+                ? undefined : Math.max(0, readyAtMs - observedAtMs),
             walletMountToReadyMs: Math.max(0, readyAtMs - cycle.mountedAtMs),
-            walletMountToRequestMs: Math.max(0, cycle.requestStartedAtMs - cycle.mountedAtMs),
-            walletRequestMs: Math.max(0, cycle.clientSecretReceivedAtMs - cycle.requestStartedAtMs),
+            walletMountToRequestMs: preparedHere
+                ? Math.max(0, requestStartedAtMs - cycle.mountedAtMs) : undefined,
+            walletRequestMs: preparedHere
+                ? Math.max(0, clientSecretReceivedAtMs - requestStartedAtMs) : undefined,
+            walletClientSecretToElementMountMs: !preparedHere || cycle.elementMountedAtMs === null
+                ? undefined
+                : Math.max(0, cycle.elementMountedAtMs - clientSecretReceivedAtMs),
+            walletObservedActiveToElementMountMs: preparedHere || cycle.elementMountedAtMs === null
+                ? undefined
+                : Math.max(0, cycle.elementMountedAtMs - observedAtMs),
+            walletElementMountToReadyMs: cycle.elementMountedAtMs === null
+                ? undefined
+                : Math.max(0, readyAtMs - cycle.elementMountedAtMs),
+            walletElementRetryCount: cycle.elementRetryCount,
+            walletStripePromiseWaitMs: (_c = cycle.stripePromiseWaitMs) !== null && _c !== void 0 ? _c : undefined,
         });
     };
     const handlePlaceholderClick = async () => {
@@ -250,7 +342,17 @@ export function WalletSubscriptionCheckoutSlot({ amountCents, appearance, availa
                     .filter(Boolean)
                     .join(' '), "aria-busy": placeholderIsPreparing || undefined, children: [shouldRenderExpressCheckout &&
                         session.activeClientSecret &&
-                        session.stripePromise ? (_jsx(StripeExpressCheckoutElement, { amountCents: amountCents, appearance: appearance, availabilityPaymentMethods: [availabilityPaymentMethod], beforeConfirm: beforeConfirm, checkoutAnalytics: checkoutAnalytics, checkoutSessionId: session.checkoutSessionId, className: className, clientSecret: session.activeClientSecret, customerEmail: customerEmail, customerName: customerName, onAvailabilityChange: handleAvailabilityChange, onCancel: onCancel, onError: handleError, onPaymentInfoSubmitted: onPaymentInfoSubmitted, onSuccess: onSuccess, options: options, returnUrl: returnUrl, serverUpdateKey: serverUpdateKey, stripePromise: session.stripePromise, summaryLabel: summaryLabel, onServerUpdate: session.updateCheckoutSessionPlan })) : null, shouldRenderPlaceholder ? (_jsx("div", { className: 'wallet-subscription-checkout-slot__placeholder', children: placeholderRenderer({
+                        session.stripePromise ? (_jsx(StripeExpressCheckoutElement, { amountCents: amountCents, appearance: appearance, availabilityPaymentMethods: [availabilityPaymentMethod], beforeConfirm: beforeConfirm, checkoutAnalytics: checkoutAnalytics, checkoutSessionId: session.checkoutSessionId, className: className, clientSecret: session.activeClientSecret, customerEmail: customerEmail, customerName: customerName, onAvailabilityChange: handleAvailabilityChange, onElementMount: () => {
+                            const cycle = walletReadinessCycleRef.current;
+                            if ((cycle === null || cycle === void 0 ? void 0 : cycle.intentKey) === session.intentKey) {
+                                cycle.elementMountedAtMs = performance.now();
+                            }
+                        }, onElementRetry: () => {
+                            const cycle = walletReadinessCycleRef.current;
+                            if ((cycle === null || cycle === void 0 ? void 0 : cycle.intentKey) === session.intentKey) {
+                                cycle.elementRetryCount += 1;
+                            }
+                        }, onCancel: onCancel, onError: handleError, onPaymentInfoSubmitted: onPaymentInfoSubmitted, onSuccess: onSuccess, options: options, returnUrl: returnUrl, serverUpdateKey: serverUpdateKey, stripePromise: session.stripePromise, summaryLabel: summaryLabel, onServerUpdate: session.updateCheckoutSessionPlan })) : null, shouldRenderPlaceholder ? (_jsx("div", { className: 'wallet-subscription-checkout-slot__placeholder', children: placeholderRenderer({
                             className,
                             disabled: slotDisabled,
                             label: placeholderLabel,

package/dist/services/checkoutObservability.service.d.ts

@@ -41,10 +41,25 @@ export type CheckoutWalletReadyInput = {
     checkoutSessionId: string;
     paymentMethod: unknown;
     provider: 'stripe';
-    walletClientSecretToReadyMs: number;
+    walletTimingOrigin?: 'prepared_here' | 'already_active';
+    walletClientSecretToReadyMs?: number;
+    walletClientSecretToElementMountMs?: number;
+    walletObservedActiveToReadyMs?: number;
+    walletObservedActiveToElementMountMs?: number;
+    walletElementMountToReadyMs?: number;
+    walletElementRetryCount?: number;
+    walletStripePromiseWaitMs?: number;
     walletMountToReadyMs: number;
-    walletMountToRequestMs: number;
-    walletRequestMs: number;
+    walletMountToRequestMs?: number;
+    walletRequestMs?: number;
 };
 export declare const trackCheckoutWalletReady: (input: CheckoutWalletReadyInput) => string | null;
+export declare const trackCheckoutWalletSlow: (input: {
+    analytics: CheckoutObservabilityAnalyticsContext;
+    checkoutSessionId: string;
+    paymentMethod: unknown;
+    provider: "stripe";
+    walletTimingOrigin: "prepared_here" | "already_active";
+    walletClientSecretToSlowMs: number;
+}) => string | null;
 export {};

package/dist/services/checkoutObservability.service.js

@@ -1,6 +1,7 @@
 import { publicAnalyticsSdk, } from '@funnelsgrove/analytics';
 import { buildMainApiUrl, buildSdkHeaders, FUNNEL_ID, FUNNEL_VERSION_ID, } from '@funnelsgrove/runtime';
 import { toAnalyticsPaymentMethod } from './paymentMethodAnalytics.service.js';
+import { PAYMENTS_PACKAGE_VERSION } from '../generated/package-version.js';
 const asNonEmptyString = (value) => typeof value === 'string' && value.trim() ? value.trim() : null;
 export const resolveCheckoutObservabilityAnalyticsContext = (input) => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x;
@@ -112,6 +113,19 @@ const reportCheckoutObservability = (input) => {
             providerErrorCode: input.providerErrorCode,
             providerErrorType: input.providerErrorType,
             walletClientSecretToReadyMs: input.walletClientSecretToReadyMs,
+            walletClientSecretToElementMountMs: input.walletClientSecretToElementMountMs,
+            walletClientSecretToSlowMs: input.walletClientSecretToSlowMs,
+            walletObservedActiveToReadyMs: input.walletObservedActiveToReadyMs,
+            walletObservedActiveToElementMountMs: input.walletObservedActiveToElementMountMs,
+            walletTimingOrigin: input.walletTimingOrigin,
+            walletElementMountToReadyMs: input.walletElementMountToReadyMs,
+            walletElementRetryCount: input.walletElementRetryCount,
+            walletStripePromiseWaitMs: input.walletStripePromiseWaitMs,
+            walletVisibilityAtReady: input.walletVisibilityAtReady,
+            walletVisibilityAtSlow: input.walletVisibilityAtSlow,
+            walletBrowserFamily: input.walletBrowserFamily,
+            walletOsFamily: input.walletOsFamily,
+            paymentsSdkVersion: input.paymentsSdkVersion,
             walletMountToReadyMs: input.walletMountToReadyMs,
             walletMountToRequestMs: input.walletMountToRequestMs,
             walletRequestMs: input.walletRequestMs,
@@ -201,36 +215,90 @@ export const trackCheckoutFailureShown = (input) => {
 };
 export const trackCheckoutCanceled = (input) => emitCheckoutObservability('checkout_canceled', input);
 const normalizeWalletTiming = (value) => (Number.isFinite(value) && value >= 0 && value <= 300000 ? value : null);
+const browserFamily = (userAgent) => {
+    if (/Edg(?:e|iOS|A)?\//i.test(userAgent))
+        return 'edge';
+    if (/FxiOS\/|Firefox\//i.test(userAgent))
+        return 'firefox';
+    if (/CriOS\/|Chrome\//i.test(userAgent))
+        return 'chrome';
+    if (/Safari\//i.test(userAgent))
+        return 'safari';
+    return 'other';
+};
+const osFamily = (userAgent) => {
+    if (/iPhone|iPad|iPod/i.test(userAgent))
+        return 'ios';
+    if (/Android/i.test(userAgent))
+        return 'android';
+    if (/Windows/i.test(userAgent))
+        return 'windows';
+    if (/Macintosh|Mac OS X/i.test(userAgent))
+        return 'macos';
+    return 'other';
+};
+const getWalletClientContext = () => {
+    const userAgent = typeof navigator === 'undefined' ? '' : navigator.userAgent;
+    const visibilityState = typeof document === 'undefined' ? undefined : document.visibilityState;
+    return {
+        walletBrowserFamily: browserFamily(userAgent),
+        walletOsFamily: osFamily(userAgent),
+        visibilityState: visibilityState === 'visible'
+            || visibilityState === 'hidden'
+            || visibilityState === 'prerender'
+            ? visibilityState : 'unknown',
+    };
+};
 export const trackCheckoutWalletReady = (input) => {
-    var _a;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
     const checkoutSessionId = input.checkoutSessionId.trim();
     const paymentMethod = toAnalyticsPaymentMethod(input.paymentMethod);
-    const walletClientSecretToReadyMs = normalizeWalletTiming(input.walletClientSecretToReadyMs);
+    const walletClientSecretToReadyMs = input.walletClientSecretToReadyMs === undefined
+        ? undefined : (_a = normalizeWalletTiming(input.walletClientSecretToReadyMs)) !== null && _a !== void 0 ? _a : undefined;
+    const walletClientSecretToElementMountMs = input.walletClientSecretToElementMountMs === undefined
+        ? undefined : (_b = normalizeWalletTiming(input.walletClientSecretToElementMountMs)) !== null && _b !== void 0 ? _b : undefined;
+    const walletElementMountToReadyMs = input.walletElementMountToReadyMs === undefined
+        ? undefined : (_c = normalizeWalletTiming(input.walletElementMountToReadyMs)) !== null && _c !== void 0 ? _c : undefined;
+    const walletObservedActiveToReadyMs = input.walletObservedActiveToReadyMs === undefined
+        ? undefined : (_d = normalizeWalletTiming(input.walletObservedActiveToReadyMs)) !== null && _d !== void 0 ? _d : undefined;
+    const walletObservedActiveToElementMountMs = input.walletObservedActiveToElementMountMs === undefined
+        ? undefined : (_e = normalizeWalletTiming(input.walletObservedActiveToElementMountMs)) !== null && _e !== void 0 ? _e : undefined;
+    const walletStripePromiseWaitMs = input.walletStripePromiseWaitMs === undefined
+        ? undefined : (_f = normalizeWalletTiming(input.walletStripePromiseWaitMs)) !== null && _f !== void 0 ? _f : undefined;
+    const walletElementRetryCount = input.walletElementRetryCount !== undefined
+        && Number.isInteger(input.walletElementRetryCount)
+        && input.walletElementRetryCount >= 0
+        && input.walletElementRetryCount <= 5
+        ? input.walletElementRetryCount : undefined;
     const walletMountToReadyMs = normalizeWalletTiming(input.walletMountToReadyMs);
-    const walletMountToRequestMs = normalizeWalletTiming(input.walletMountToRequestMs);
-    const walletRequestMs = normalizeWalletTiming(input.walletRequestMs);
+    const walletMountToRequestMs = input.walletMountToRequestMs === undefined
+        ? undefined : (_g = normalizeWalletTiming(input.walletMountToRequestMs)) !== null && _g !== void 0 ? _g : undefined;
+    const walletRequestMs = input.walletRequestMs === undefined
+        ? undefined : (_h = normalizeWalletTiming(input.walletRequestMs)) !== null && _h !== void 0 ? _h : undefined;
+    const alreadyActive = input.walletTimingOrigin === 'already_active';
     if (!checkoutSessionId
         || !paymentMethod
-        || walletClientSecretToReadyMs === null
         || walletMountToReadyMs === null
-        || walletMountToRequestMs === null
-        || walletRequestMs === null) {
+        || (alreadyActive
+            ? walletObservedActiveToReadyMs === undefined
+            : walletClientSecretToReadyMs === undefined
+                || walletMountToRequestMs === undefined
+                || walletRequestMs === undefined)) {
         return null;
     }
-    const eventId = publicAnalyticsSdk.track({
+    const { walletBrowserFamily, walletOsFamily, visibilityState: walletVisibilityAtReady } = getWalletClientContext();
+    const eventId = `wallet-ready:${checkoutSessionId}:${paymentMethod}`;
+    const analyticsEventId = publicAnalyticsSdk.track({
         environment: input.analytics.environment,
-        eventId: `wallet-ready:${checkoutSessionId}:${paymentMethod}`,
+        eventId,
         eventType: 'checkout_wallet_ready',
         featureFlags: input.analytics.featureFlags,
-        metadata: Object.assign(Object.assign({}, ((_a = input.analytics.metadata) !== null && _a !== void 0 ? _a : {})), { checkout_session_id: checkoutSessionId, payment_method: paymentMethod, payment_provider: input.provider, wallet_client_secret_to_ready_ms: walletClientSecretToReadyMs, wallet_mount_to_ready_ms: walletMountToReadyMs, wallet_mount_to_request_ms: walletMountToRequestMs, wallet_checkout_request_ms: walletRequestMs }),
+        metadata: Object.assign(Object.assign({}, ((_j = input.analytics.metadata) !== null && _j !== void 0 ? _j : {})), { checkout_session_id: checkoutSessionId, payment_method: paymentMethod, payment_provider: input.provider, wallet_client_secret_to_ready_ms: walletClientSecretToReadyMs, wallet_observed_active_to_ready_ms: walletObservedActiveToReadyMs, wallet_observed_active_to_element_mount_ms: walletObservedActiveToElementMountMs, wallet_timing_origin: (_k = input.walletTimingOrigin) !== null && _k !== void 0 ? _k : 'prepared_here', wallet_client_secret_to_element_mount_ms: walletClientSecretToElementMountMs, wallet_element_mount_to_ready_ms: walletElementMountToReadyMs, wallet_element_retry_count: walletElementRetryCount, wallet_stripe_promise_wait_ms: walletStripePromiseWaitMs, wallet_visibility_at_ready: walletVisibilityAtReady, wallet_browser_family: walletBrowserFamily, wallet_os_family: walletOsFamily, payments_sdk_version: PAYMENTS_PACKAGE_VERSION, wallet_mount_to_ready_ms: walletMountToReadyMs, wallet_mount_to_request_ms: walletMountToRequestMs, wallet_checkout_request_ms: walletRequestMs }),
         stepContractVersion: input.analytics.stepContractVersion,
         stepId: input.analytics.stepId,
         stepName: input.analytics.stepName,
         stepType: input.analytics.stepType,
     });
-    if (!eventId) {
-        return null;
-    }
     void reportCheckoutObservability({
         analytics: input.analytics,
         checkoutSessionId,
@@ -239,10 +307,61 @@ export const trackCheckoutWalletReady = (input) => {
         paymentMethod,
         provider: input.provider,
         walletClientSecretToReadyMs,
+        walletObservedActiveToReadyMs,
+        walletObservedActiveToElementMountMs,
+        walletTimingOrigin: (_l = input.walletTimingOrigin) !== null && _l !== void 0 ? _l : 'prepared_here',
+        walletClientSecretToElementMountMs,
+        walletElementMountToReadyMs,
+        walletElementRetryCount,
+        walletStripePromiseWaitMs,
+        walletVisibilityAtReady,
+        walletBrowserFamily,
+        walletOsFamily,
+        paymentsSdkVersion: PAYMENTS_PACKAGE_VERSION,
         walletMountToReadyMs,
         walletMountToRequestMs,
         walletRequestMs,
     }).catch(() => undefined);
-    void publicAnalyticsSdk.flush().catch(() => 0);
+    if (analyticsEventId)
+        void publicAnalyticsSdk.flush().catch(() => 0);
+    return eventId;
+};
+export const trackCheckoutWalletSlow = (input) => {
+    var _a;
+    const checkoutSessionId = input.checkoutSessionId.trim();
+    const paymentMethod = toAnalyticsPaymentMethod(input.paymentMethod);
+    const walletClientSecretToSlowMs = normalizeWalletTiming(input.walletClientSecretToSlowMs);
+    if (!checkoutSessionId || !paymentMethod || walletClientSecretToSlowMs === null) {
+        return null;
+    }
+    const { walletBrowserFamily, walletOsFamily, visibilityState: walletVisibilityAtSlow } = getWalletClientContext();
+    const eventId = `wallet-slow:${checkoutSessionId}:${paymentMethod}`;
+    const analyticsEventId = publicAnalyticsSdk.track({
+        environment: input.analytics.environment,
+        eventId,
+        eventType: 'checkout_wallet_slow',
+        featureFlags: input.analytics.featureFlags,
+        metadata: Object.assign(Object.assign({}, ((_a = input.analytics.metadata) !== null && _a !== void 0 ? _a : {})), { checkout_session_id: checkoutSessionId, payment_method: paymentMethod, payment_provider: input.provider, wallet_timing_origin: input.walletTimingOrigin, wallet_client_secret_to_slow_ms: walletClientSecretToSlowMs, wallet_visibility_at_slow: walletVisibilityAtSlow, wallet_browser_family: walletBrowserFamily, wallet_os_family: walletOsFamily, payments_sdk_version: PAYMENTS_PACKAGE_VERSION }),
+        stepContractVersion: input.analytics.stepContractVersion,
+        stepId: input.analytics.stepId,
+        stepName: input.analytics.stepName,
+        stepType: input.analytics.stepType,
+    });
+    void reportCheckoutObservability({
+        analytics: input.analytics,
+        checkoutSessionId,
+        eventId,
+        eventType: 'checkout_wallet_slow',
+        paymentMethod,
+        provider: input.provider,
+        walletTimingOrigin: input.walletTimingOrigin,
+        walletClientSecretToSlowMs,
+        walletVisibilityAtSlow,
+        walletBrowserFamily,
+        walletOsFamily,
+        paymentsSdkVersion: PAYMENTS_PACKAGE_VERSION,
+    }).catch(() => undefined);
+    if (analyticsEventId)
+        void publicAnalyticsSdk.flush().catch(() => 0);
     return eventId;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@funnelsgrove/payments",
-  "version": "0.23.2",
+  "version": "0.24.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/The-Solid-Grove/funnelsgrove.git",
@@ -25,7 +25,7 @@
     "access": "public"
   },
   "scripts": {
-    "build": "rm -rf dist && tsc -p tsconfig.build.json && node ../../scripts/fix-esm-relative-imports.mjs dist",
+    "build": "node scripts/generate-package-version.mjs && rm -rf dist && tsc -p tsconfig.build.json && node ../../scripts/fix-esm-relative-imports.mjs dist",
     "lint": "eslint .",
     "prepublishOnly": "npm run build",
     "smoke:wallet": "npm run build && node scripts/wallet-checkout-smoke.mjs",
@@ -46,11 +46,11 @@
     "jsdom": "20.0.3",
     "typescript": "^5",
     "vitest": "^3.2.4",
-    "@funnelsgrove/runtime": "0.21.1",
-    "@funnelsgrove/analytics": "0.4.1"
+    "@funnelsgrove/runtime": "0.23.0",
+    "@funnelsgrove/analytics": "0.5.0"
   },
   "peerDependencies": {
-    "@funnelsgrove/runtime": "^0.21.1",
-    "@funnelsgrove/analytics": "^0.4.1"
+    "@funnelsgrove/runtime": "^0.23.0",
+    "@funnelsgrove/analytics": "^0.5.0"
   }
 }