@funnelsgrove/payments 0.11.6 → 0.11.7

package/dist/index.d.ts

@@ -7,6 +7,7 @@ export * from './services/runtimeBillingPlanCatalog.service.js';
 export * from './services/publishedBillingRuntime.service.js';
 export * from './services/paywallOffer.service.js';
 export * from './services/paymentMethodAnalytics.service.js';
+export * from './services/checkoutObservability.service.js';
 export * from './providers/paymentProvider.types.js';
 export * from './providers/stripe/index.js';
 export * from './providers/solidgate/index.js';

package/dist/index.js

@@ -8,6 +8,7 @@ export * from './services/runtimeBillingPlanCatalog.service.js';
 export * from './services/publishedBillingRuntime.service.js';
 export * from './services/paywallOffer.service.js';
 export * from './services/paymentMethodAnalytics.service.js';
+export * from './services/checkoutObservability.service.js';
 export * from './providers/paymentProvider.types.js';
 // Provider-specific integrations are grouped behind provider barrels.
 export * from './providers/stripe/index.js';

package/dist/providers/solidgate/components/SolidgateCheckoutDialog.js

@@ -3,6 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { publicAnalyticsSdk } from '@funnelsgrove/analytics';
 import { Suspense, lazy, useCallback, useEffect, useMemo, useRef, useState, } from 'react';
 import { pollSolidgateCheckoutStatus, prepareSolidgateCheckout, } from '../services/solidgate.service.js';
+import { trackCheckoutCanceled, trackCheckoutFailureShown, } from '../../../services/checkoutObservability.service.js';
 const SolidgatePayment = lazy(async () => ({
     default: (await import('@solidgate/react-sdk')).default,
 }));
@@ -250,6 +251,20 @@ export function SolidgateCheckoutDialog({ open, request, customerEmail, checkout
         setView(nextView);
         (_a = onStateChangeRef.current) === null || _a === void 0 ? void 0 : _a.call(onStateChangeRef, nextView.state);
     }, []);
+    const trackFailure = useCallback((message, failureStage, attemptId) => {
+        const analytics = checkoutAnalyticsRef.current;
+        if (!analytics) {
+            return;
+        }
+        trackCheckoutFailureShown({
+            analytics,
+            checkoutSessionId: attemptId,
+            errorMessage: message,
+            failureStage,
+            paymentMethod: 'card',
+            provider: 'solidgate',
+        });
+    }, []);
     const requiresEmailCommit = Boolean(onCustomerEmailCommit);
     useEffect(() => {
         var _a, _b, _c, _d, _e, _f;
@@ -291,11 +306,12 @@ export function SolidgateCheckoutDialog({ open, request, customerEmail, checkout
             var _a;
             if (!controller.signal.aborted && !isAbortError(error)) {
                 setState({ state: 'recoverable_error', checkout: null, canResumeVerification: false });
+                trackFailure(copyRef.current.error, 'checkout_session_creation');
                 (_a = onErrorRef.current) === null || _a === void 0 ? void 0 : _a.call(onErrorRef, copyRef.current.error);
             }
         });
         return () => controller.abort();
-    }, [committedEmail, normalizedRequest, open, requiresEmailCommit, setState]);
+    }, [committedEmail, normalizedRequest, open, requiresEmailCommit, setState, trackFailure]);
     const paymentFormMounted = Boolean(view.checkout && mountedPaymentAttemptId === view.checkout.attemptId);
     const showPreparingLoader = view.state === 'loading'
         || (view.state === 'ready' && !paymentFormMounted);
@@ -308,7 +324,18 @@ export function SolidgateCheckoutDialog({ open, request, customerEmail, checkout
             ? document.activeElement
             : null;
         const handleKeyDown = (event) => {
+            var _a;
             if (event.key === 'Escape') {
+                const analytics = checkoutAnalyticsRef.current;
+                if (analytics) {
+                    trackCheckoutCanceled({
+                        analytics,
+                        checkoutSessionId: (_a = view.checkout) === null || _a === void 0 ? void 0 : _a.attemptId,
+                        failureStage: 'checkout_dialog',
+                        paymentMethod: 'card',
+                        provider: 'solidgate',
+                    });
+                }
                 onCloseRef.current();
             }
         };
@@ -320,7 +347,7 @@ export function SolidgateCheckoutDialog({ open, request, customerEmail, checkout
             window.removeEventListener('keydown', handleKeyDown);
             previouslyFocused === null || previouslyFocused === void 0 ? void 0 : previouslyFocused.focus();
         };
-    }, [open, showPreparingLoader]);
+    }, [open, showPreparingLoader, view.checkout]);
     useEffect(() => () => {
         var _a, _b;
         (_a = prepareAbortRef.current) === null || _a === void 0 ? void 0 : _a.abort();
@@ -356,9 +383,11 @@ export function SolidgateCheckoutDialog({ open, request, customerEmail, checkout
             }
             else if (result.status === 'expired') {
                 setState({ state: 'expired', checkout, canResumeVerification: false });
+                trackFailure(copyRef.current.expired, 'payment_expired', checkout.attemptId);
             }
             else if (result.status === 'failed') {
                 setState({ state: 'recoverable_error', checkout, canResumeVerification: false });
+                trackFailure(copyRef.current.error, 'payment_failed', checkout.attemptId);
                 (_c = onErrorRef.current) === null || _c === void 0 ? void 0 : _c.call(onErrorRef, copyRef.current.error);
             }
             else if (result.status === 'requires_payment') {
@@ -371,15 +400,18 @@ export function SolidgateCheckoutDialog({ open, request, customerEmail, checkout
         catch (error) {
             if (!controller.signal.aborted && !isAbortError(error)) {
                 setState({ state: 'recoverable_error', checkout, canResumeVerification: true });
+                trackFailure(copyRef.current.error, 'payment_verification', checkout.attemptId);
                 (_d = onErrorRef.current) === null || _d === void 0 ? void 0 : _d.call(onErrorRef, copyRef.current.error);
             }
         }
-    }, [normalizedRequest, setState, view]);
+    }, [normalizedRequest, setState, trackFailure, view]);
     const commitCustomerEmail = useCallback(async (event) => {
+        var _a, _b;
         event.preventDefault();
         const normalized = normalizeValidEmail(emailInput);
         if (!normalized || !onCustomerEmailCommit) {
             setEmailError(copy.customerEmailInvalid);
+            trackFailure(copy.customerEmailInvalid, 'customer_email', (_a = view.checkout) === null || _a === void 0 ? void 0 : _a.attemptId);
             return;
         }
         setEmailSubmitting(true);
@@ -392,13 +424,28 @@ export function SolidgateCheckoutDialog({ open, request, customerEmail, checkout
             setEmailInput(committed);
             setCommittedEmail(committed);
         }
-        catch (_a) {
+        catch (_c) {
             setEmailError(copy.customerEmailUnavailable);
+            trackFailure(copy.customerEmailUnavailable, 'customer_email', (_b = view.checkout) === null || _b === void 0 ? void 0 : _b.attemptId);
         }
         finally {
             setEmailSubmitting(false);
         }
-    }, [copy.customerEmailInvalid, copy.customerEmailUnavailable, emailInput, onCustomerEmailCommit]);
+    }, [copy.customerEmailInvalid, copy.customerEmailUnavailable, emailInput, onCustomerEmailCommit, trackFailure, view.checkout]);
+    const handleClose = () => {
+        var _a;
+        const analytics = checkoutAnalyticsRef.current;
+        if (analytics) {
+            trackCheckoutCanceled({
+                analytics,
+                checkoutSessionId: (_a = view.checkout) === null || _a === void 0 ? void 0 : _a.attemptId,
+                failureStage: 'checkout_dialog',
+                paymentMethod: 'card',
+                provider: 'solidgate',
+            });
+        }
+        onCloseRef.current();
+    };
     if (!open) {
         return null;
     }
@@ -429,7 +476,7 @@ export function SolidgateCheckoutDialog({ open, request, customerEmail, checkout
                             'solidgate-checkout-dialog',
                             showPreparingLoader ? 'is-preparing' : '',
                             presentation ? 'is-branded' : '',
-                        ].filter(Boolean).join(' '), children: [_jsxs("div", { className: 'solidgate-checkout-header', children: [_jsx("button", { ref: closeButtonRef, type: 'button', onClick: onClose, "aria-label": copy.closeAriaLabel, className: 'solidgate-checkout-close', children: _jsx("span", { "aria-hidden": 'true' }) }), _jsx("h2", { id: 'solidgate-checkout-title', className: 'solidgate-checkout-title', children: (presentation === null || presentation === void 0 ? void 0 : presentation.title) || copy.title })] }), presentation ? (_jsxs("section", { className: 'solidgate-checkout-summary', children: [showPromo ? (_jsxs("p", { className: 'solidgate-checkout-countdown', children: [presentation.discountPercent, "% ", presentation.countdownLabel, ' ', formatCountdown(presentation.remainingSeconds), " min"] })) : null, _jsxs("p", { className: 'solidgate-checkout-satisfaction', children: [_jsx("strong", { children: presentation.satisfactionPercent }), ' ', presentation.satisfactionLabel] }), showPromo ? (_jsxs("div", { className: 'solidgate-checkout-price-stack', children: [_jsxs("div", { className: 'solidgate-checkout-price-row is-muted', children: [_jsx("span", { children: presentation.originalPriceLabel }), _jsx("span", { className: 'solidgate-checkout-strike', children: presentation.originalPriceValue })] }), _jsxs("div", { className: 'solidgate-checkout-price-row is-discount', children: [_jsx("strong", { children: presentation.discountLabel }), _jsx("strong", { children: presentation.discountAmountLabel })] }), _jsxs("div", { className: 'solidgate-checkout-promo', children: [_jsx("span", { children: presentation.promoCodeLabel }), _jsx("strong", { children: presentation.promoCode.trim() })] })] })) : null, _jsxs("div", { className: `solidgate-checkout-total${showPromo ? '' : ' is-plain'}`, children: [_jsx("span", { children: presentation.totalLabel }), _jsx("strong", { children: presentation.totalValue })] }), showPromo ? (_jsxs("p", { className: 'solidgate-checkout-saved', children: [_jsx("span", { "aria-hidden": 'true', children: "\uD83D\uDD25" }), presentation.savedLabel] })) : null] })) : null, view.state === 'collecting_email' ? (_jsxs("form", { className: 'solidgate-checkout-email-form', onSubmit: (event) => void commitCustomerEmail(event), children: [_jsxs("label", { className: 'solidgate-checkout-email-label', children: [copy.customerEmailLabel, _jsx("input", { type: 'email', autoComplete: 'email', inputMode: 'email', maxLength: 320, required: true, value: emailInput, onChange: (event) => {
+                        ].filter(Boolean).join(' '), children: [_jsxs("div", { className: 'solidgate-checkout-header', children: [_jsx("button", { ref: closeButtonRef, type: 'button', onClick: handleClose, "aria-label": copy.closeAriaLabel, className: 'solidgate-checkout-close', children: _jsx("span", { "aria-hidden": 'true' }) }), _jsx("h2", { id: 'solidgate-checkout-title', className: 'solidgate-checkout-title', children: (presentation === null || presentation === void 0 ? void 0 : presentation.title) || copy.title })] }), presentation ? (_jsxs("section", { className: 'solidgate-checkout-summary', children: [showPromo ? (_jsxs("p", { className: 'solidgate-checkout-countdown', children: [presentation.discountPercent, "% ", presentation.countdownLabel, ' ', formatCountdown(presentation.remainingSeconds), " min"] })) : null, _jsxs("p", { className: 'solidgate-checkout-satisfaction', children: [_jsx("strong", { children: presentation.satisfactionPercent }), ' ', presentation.satisfactionLabel] }), showPromo ? (_jsxs("div", { className: 'solidgate-checkout-price-stack', children: [_jsxs("div", { className: 'solidgate-checkout-price-row is-muted', children: [_jsx("span", { children: presentation.originalPriceLabel }), _jsx("span", { className: 'solidgate-checkout-strike', children: presentation.originalPriceValue })] }), _jsxs("div", { className: 'solidgate-checkout-price-row is-discount', children: [_jsx("strong", { children: presentation.discountLabel }), _jsx("strong", { children: presentation.discountAmountLabel })] }), _jsxs("div", { className: 'solidgate-checkout-promo', children: [_jsx("span", { children: presentation.promoCodeLabel }), _jsx("strong", { children: presentation.promoCode.trim() })] })] })) : null, _jsxs("div", { className: `solidgate-checkout-total${showPromo ? '' : ' is-plain'}`, children: [_jsx("span", { children: presentation.totalLabel }), _jsx("strong", { children: presentation.totalValue })] }), showPromo ? (_jsxs("p", { className: 'solidgate-checkout-saved', children: [_jsx("span", { "aria-hidden": 'true', children: "\uD83D\uDD25" }), presentation.savedLabel] })) : null] })) : null, view.state === 'collecting_email' ? (_jsxs("form", { className: 'solidgate-checkout-email-form', onSubmit: (event) => void commitCustomerEmail(event), children: [_jsxs("label", { className: 'solidgate-checkout-email-label', children: [copy.customerEmailLabel, _jsx("input", { type: 'email', autoComplete: 'email', inputMode: 'email', maxLength: 320, required: true, value: emailInput, onChange: (event) => {
                                                     setEmailInput(event.target.value);
                                                     setEmailError(null);
                                                 }, placeholder: copy.customerEmailPlaceholder, "aria-invalid": Boolean(emailError), className: 'solidgate-checkout-email-input' })] }), emailError ? (_jsx("p", { role: 'alert', className: 'solidgate-checkout-alert', children: emailError })) : null, _jsx("button", { type: 'submit', disabled: emailSubmitting, className: 'solidgate-checkout-action', children: copy.customerEmailContinue })] })) : null, view.checkout ? (_jsx(SolidgatePaymentForm, { buttonColor: (presentation === null || presentation === void 0 ? void 0 : presentation.buttonColor) || '#3f51b5', cardSubmitLabel: (presentation === null || presentation === void 0 ? void 0 : presentation.cardSubmitLabel) || 'Pay securely', checkout: view.checkout, hidden: !showForm, loadingLabel: copy.loading, onMounted: () => {
@@ -443,9 +490,10 @@ export function SolidgateCheckoutDialog({ open, request, customerEmail, checkout
                                     }
                                     setState(Object.assign(Object.assign({}, view), { state: 'submitting' }));
                                 }, onVerify: () => void verifyCanonicalStatus(), onError: () => {
-                                    var _a;
+                                    var _a, _b;
                                     setState(Object.assign(Object.assign({}, view), { state: 'recoverable_error', canResumeVerification: false }));
-                                    (_a = onErrorRef.current) === null || _a === void 0 ? void 0 : _a.call(onErrorRef, copyRef.current.error);
+                                    trackFailure(copyRef.current.error, 'payment_form', (_a = view.checkout) === null || _a === void 0 ? void 0 : _a.attemptId);
+                                    (_b = onErrorRef.current) === null || _b === void 0 ? void 0 : _b.call(onErrorRef, copyRef.current.error);
                                 } }, view.checkout.attemptId)) : null, presentation && view.checkout && showForm ? (_jsx("p", { className: 'solidgate-checkout-secure', children: presentation.secureLabel })) : null, statusMessage && view.state !== 'ready' ? (_jsx("div", { className: 'solidgate-checkout-status', children: _jsx("p", { role: 'status', "aria-live": 'polite', children: statusMessage }) })) : null, view.state === 'verifying' && view.canResumeVerification ? (_jsx("button", { type: 'button', onClick: () => void verifyCanonicalStatus(), className: 'solidgate-checkout-action solidgate-checkout-action--spaced', children: copy.resumeVerification })) : null, (view.state === 'recoverable_error' || view.state === 'expired') && onRetry ? (_jsx("button", { type: 'button', onClick: onRetry, className: 'solidgate-checkout-action solidgate-checkout-action--spaced', children: copy.retry })) : null] })) : null] }), _jsx("style", { children: solidgateCheckoutDialogStyles })] }));
 }
 const solidgateCheckoutDialogStyles = `

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

@@ -11,12 +11,13 @@ 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 { useEffect, useMemo, useState, useSyncExternalStore, } from 'react';
+import { useCallback, useEffect, useMemo, useState, useSyncExternalStore, } from 'react';
 import { CardCvcElement, CardExpiryElement, CardNumberElement, Elements, useElements, useStripe, } from '@stripe/react-stripe-js';
 import { ApplePaySubscribeButton } from './ApplePaySubscribeButton.js';
 import { PaymentBrandMark, SecurityLockIcon, StripeWordmark, } from './CheckoutBrandAssets.js';
 import { StripeExpressCheckoutButton } from './StripeExpressCheckoutButton.js';
 import { queueStripeSubscriptionCheckoutStarted, } from '../services/checkoutCompletionAnalytics.service.js';
+import { trackCheckoutCanceled, trackCheckoutFailureShown, } from '../../../services/checkoutObservability.service.js';
 const isValidEmail = (value) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value);
 const defaultPaymentMethodLabels = ['Visa', 'Mastercard', 'PayPal', 'G Pay', 'Apple Pay'];
 const normalizeBillingName = (input) => {
@@ -141,7 +142,17 @@ function SharedStripeCheckoutForm({ amountCents, checkoutAnalytics, checkoutSess
         !submitting;
     const walletCheckoutAllowed = allowApplePayExpressCheckout || allowApplePayQrFallback;
     const walletFallbackDisabled = !walletCheckoutAllowed || walletAvailable === false;
-    const setSharedError = (message) => {
+    const setSharedError = (message, alreadyTracked = false) => {
+        if (message && checkoutAnalytics && !alreadyTracked) {
+            trackCheckoutFailureShown({
+                analytics: checkoutAnalytics,
+                checkoutSessionId,
+                errorMessage: message,
+                failureStage: 'card_form',
+                paymentMethod: 'card',
+                provider: 'stripe',
+            });
+        }
         setError(message);
         onError === null || onError === void 0 ? void 0 : onError(message);
     };
@@ -227,7 +238,7 @@ function SharedStripeCheckoutForm({ amountCents, checkoutAnalytics, checkoutSess
                                     ? 'is-positive'
                                     : row.tone === 'negative'
                                         ? 'is-negative'
-                                        : undefined, children: row.value })] }, row.id))), _jsxs("div", { className: 'shared-stripe-checkout-summary-total', children: [_jsx("span", { children: totalLabel }), _jsx("strong", { children: totalValue })] }), summaryNote ? (_jsx("p", { className: 'shared-stripe-checkout-summary-note', children: summaryNote })) : null] }), _jsxs("form", { className: 'shared-stripe-checkout-form', onSubmit: (event) => void handleSubmit(event), children: [_jsxs("div", { className: 'shared-stripe-checkout-wallet-shell', children: [walletAvailable !== true ? (_jsx(ApplePaySubscribeButton, { className: 'shared-stripe-checkout-wallet-placeholder', disabled: walletFallbackDisabled, label: walletPlaceholderLabel })) : null, walletCheckoutAllowed ? (_jsx(StripeExpressCheckoutButton, { amountCents: amountCents, beforeConfirm: ensureCustomerEmail, checkoutAnalytics: checkoutAnalytics, checkoutSessionId: checkoutSessionId, summaryLabel: summaryLabel, returnUrl: returnUrl, customerEmail: resolvedCustomerEmail, customerName: customerName, className: 'shared-stripe-checkout-wallet-button', onAvailabilityChange: setWalletAvailable, onError: setSharedError })) : null] }), _jsxs("div", { className: 'shared-stripe-checkout-card-surface', children: [_jsxs("div", { className: 'shared-stripe-checkout-field-group shared-stripe-checkout-field-group--wide', children: [_jsx("p", { className: 'shared-stripe-checkout-field-label', children: customerEmailLabel }), _jsx("div", { className: 'shared-stripe-checkout-field shared-stripe-checkout-field--wide', children: _jsx("input", { type: 'email', inputMode: 'email', autoComplete: 'email', className: [
+                                        : undefined, children: row.value })] }, row.id))), _jsxs("div", { className: 'shared-stripe-checkout-summary-total', children: [_jsx("span", { children: totalLabel }), _jsx("strong", { children: totalValue })] }), summaryNote ? (_jsx("p", { className: 'shared-stripe-checkout-summary-note', children: summaryNote })) : null] }), _jsxs("form", { className: 'shared-stripe-checkout-form', onSubmit: (event) => void handleSubmit(event), children: [_jsxs("div", { className: 'shared-stripe-checkout-wallet-shell', children: [walletAvailable !== true ? (_jsx(ApplePaySubscribeButton, { className: 'shared-stripe-checkout-wallet-placeholder', disabled: walletFallbackDisabled, label: walletPlaceholderLabel })) : null, walletCheckoutAllowed ? (_jsx(StripeExpressCheckoutButton, { amountCents: amountCents, beforeConfirm: ensureCustomerEmail, checkoutAnalytics: checkoutAnalytics, checkoutSessionId: checkoutSessionId, summaryLabel: summaryLabel, returnUrl: returnUrl, customerEmail: resolvedCustomerEmail, customerName: customerName, className: 'shared-stripe-checkout-wallet-button', onAvailabilityChange: setWalletAvailable, onError: (message) => setSharedError(message, true) })) : null] }), _jsxs("div", { className: 'shared-stripe-checkout-card-surface', children: [_jsxs("div", { className: 'shared-stripe-checkout-field-group shared-stripe-checkout-field-group--wide', children: [_jsx("p", { className: 'shared-stripe-checkout-field-label', children: customerEmailLabel }), _jsx("div", { className: 'shared-stripe-checkout-field shared-stripe-checkout-field--wide', children: _jsx("input", { type: 'email', inputMode: 'email', autoComplete: 'email', className: [
                                                 'shared-stripe-checkout-text-input',
                                                 customerEmailEditable ? '' : 'is-readonly',
                                             ]
@@ -246,6 +257,17 @@ function SharedStripeCheckoutForm({ amountCents, checkoutAnalytics, checkoutSess
 }
 export function SharedStripeCheckoutDialog(_a) {
     var { checkoutAnalytics, checkoutSessionId, clientSecret, onClose, stripePromise } = _a, props = __rest(_a, ["checkoutAnalytics", "checkoutSessionId", "clientSecret", "onClose", "stripePromise"]);
+    const handleClose = useCallback(() => {
+        if (checkoutAnalytics) {
+            trackCheckoutCanceled({
+                analytics: checkoutAnalytics,
+                checkoutSessionId,
+                failureStage: 'checkout_dialog',
+                provider: 'stripe',
+            });
+        }
+        onClose();
+    }, [checkoutAnalytics, checkoutSessionId, onClose]);
     useEffect(() => {
         if (!checkoutAnalytics) {
             return;
@@ -255,15 +277,15 @@ export function SharedStripeCheckoutDialog(_a) {
     useEffect(() => {
         const handleKeyDown = (event) => {
             if (event.key === 'Escape') {
-                onClose();
+                handleClose();
             }
         };
         window.addEventListener('keydown', handleKeyDown);
         return () => window.removeEventListener('keydown', handleKeyDown);
-    }, [onClose]);
-    return (_jsxs(_Fragment, { children: [_jsx("div", { className: 'shared-stripe-checkout-overlay', role: 'presentation', onClick: onClose, children: _jsx("div", { className: 'shared-stripe-checkout-shell', role: 'dialog', "aria-modal": 'true', "aria-labelledby": 'shared-stripe-checkout-title', onClick: (event) => event.stopPropagation(), children: _jsx(Elements, { stripe: stripePromise, options: {
+    }, [handleClose]);
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: 'shared-stripe-checkout-overlay', role: 'presentation', onClick: handleClose, children: _jsx("div", { className: 'shared-stripe-checkout-shell', role: 'dialog', "aria-modal": 'true', "aria-labelledby": 'shared-stripe-checkout-title', onClick: (event) => event.stopPropagation(), children: _jsx(Elements, { stripe: stripePromise, options: {
                             clientSecret,
-                        }, children: _jsx(SharedStripeCheckoutForm, Object.assign({}, props, { checkoutAnalytics: checkoutAnalytics, checkoutSessionId: checkoutSessionId, clientSecret: clientSecret, onClose: onClose })) }) }) }), _jsx("style", { children: sharedStripeCheckoutDialogStyles })] }));
+                        }, children: _jsx(SharedStripeCheckoutForm, Object.assign({}, props, { checkoutAnalytics: checkoutAnalytics, checkoutSessionId: checkoutSessionId, clientSecret: clientSecret, onClose: handleClose })) }) }) }), _jsx("style", { children: sharedStripeCheckoutDialogStyles })] }));
 }
 const sharedStripeCheckoutDialogStyles = `
 .shared-stripe-checkout-overlay {

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 { useEffect, useMemo, useState, } from 'react';
+import { useCallback, useEffect, useMemo, useState, } from 'react';
 import { CheckoutProvider, PaymentElement, useCheckout, } from '@stripe/react-stripe-js/checkout';
 import { PaymentBrandMark, SecurityLockIcon } from './CheckoutBrandAssets.js';
 import { StripeCheckoutExpressCheckoutButton } from './StripeCheckoutExpressCheckoutButton.js';
@@ -19,6 +19,7 @@ import { getUnsupportedCheckoutCountryMessage, normalizeSupportedCheckoutCountri
 import { isInactiveCheckoutSessionError } from '../hooks/useStripeSubscriptionCheckoutSession.js';
 import { getStripeWalletPaymentMethodOrder, usePlatformWalletPaymentMethods, } from './walletPlatform.js';
 import { queueStripeSubscriptionCheckoutStarted, trackPaidStripeSubscriptionCheckoutCompleted, trackStripeSubscriptionPaymentInfoSubmitted, } from '../services/checkoutCompletionAnalytics.service.js';
+import { trackCheckoutCanceled, trackCheckoutFailureShown, } from '../../../services/checkoutObservability.service.js';
 const defaultPaymentMethodLabels = ['Visa', 'Mastercard', 'Maestro', 'Discover'];
 const stripeCheckoutV2Appearance = {
     labels: 'above',
@@ -151,11 +152,21 @@ function SharedStripeCheckoutV2CheckoutSessionForm({ amountCents, buttonColor, c
         setError(null);
         onInactiveCheckoutSession === null || onInactiveCheckoutSession === void 0 ? void 0 : onInactiveCheckoutSession();
     };
-    const setSharedError = (message) => {
+    const setSharedError = (message, alreadyTracked = false) => {
         if (isInactiveCheckoutSessionError(message)) {
             handleInactiveCheckoutSession();
             return;
         }
+        if (message && checkoutAnalytics && !alreadyTracked) {
+            trackCheckoutFailureShown({
+                analytics: checkoutAnalytics,
+                checkoutSessionId,
+                errorMessage: message,
+                failureStage: 'card_form',
+                paymentMethod: 'card',
+                provider: 'stripe',
+            });
+        }
         setError(message);
         onError === null || onError === void 0 ? void 0 : onError(message);
     };
@@ -300,7 +311,7 @@ function SharedStripeCheckoutV2CheckoutSessionForm({ amountCents, buttonColor, c
                             effectiveSelectedMethod === 'wallet' ? 'is-visible' : '',
                         ]
                             .filter(Boolean)
-                            .join(' '), children: [_jsxs("p", { className: 'shared-checkout-v2-secure-pill', children: [_jsx(SecurityLockIcon, { className: 'shared-checkout-v2-secure-pill-icon' }), secureLabel] }), _jsxs("div", { className: 'shared-checkout-v2-wallet-shell', "aria-label": walletAriaLabel, children: [_jsx(StripeCheckoutExpressCheckoutButton, { amountCents: amountCents, availabilityPaymentMethods: walletPaymentMethods, beforeConfirm: ensureCustomerEmail, checkoutAnalytics: checkoutAnalytics, checkoutSessionId: checkoutSessionId, className: 'shared-checkout-v2-express-buttons', confirmEmail: false, customerEmail: resolvedCustomerEmail, customerName: customerName, initialAvailable: initialWalletAvailable, keepInitialAvailableOnReady: initialWalletAvailable === true, onAvailabilityChange: handleWalletAvailabilityChange, onError: setSharedError, onPaymentInfoSubmitted: onPaymentInfoSubmitted, onSuccess: trackCheckoutSuccess, options: expressCheckoutOptions, returnUrl: returnUrl, summaryLabel: expressCheckoutSummaryLabel, supportedCountries: normalizedSupportedCountries, unsupportedCountryMessage: unsupportedCountryMessage }), _jsx("span", { className: 'shared-checkout-v2-sr-only', children: walletAriaLabel })] })] }), _jsxs("div", { hidden: effectiveSelectedMethod !== 'card', className: [
+                            .join(' '), children: [_jsxs("p", { className: 'shared-checkout-v2-secure-pill', children: [_jsx(SecurityLockIcon, { className: 'shared-checkout-v2-secure-pill-icon' }), secureLabel] }), _jsxs("div", { className: 'shared-checkout-v2-wallet-shell', "aria-label": walletAriaLabel, children: [_jsx(StripeCheckoutExpressCheckoutButton, { amountCents: amountCents, availabilityPaymentMethods: walletPaymentMethods, beforeConfirm: ensureCustomerEmail, checkoutAnalytics: checkoutAnalytics, checkoutSessionId: checkoutSessionId, className: 'shared-checkout-v2-express-buttons', confirmEmail: false, customerEmail: resolvedCustomerEmail, customerName: customerName, initialAvailable: initialWalletAvailable, keepInitialAvailableOnReady: initialWalletAvailable === true, onAvailabilityChange: handleWalletAvailabilityChange, onError: (message) => setSharedError(message, true), onPaymentInfoSubmitted: onPaymentInfoSubmitted, onSuccess: trackCheckoutSuccess, options: expressCheckoutOptions, returnUrl: returnUrl, summaryLabel: expressCheckoutSummaryLabel, supportedCountries: normalizedSupportedCountries, unsupportedCountryMessage: unsupportedCountryMessage }), _jsx("span", { className: 'shared-checkout-v2-sr-only', children: walletAriaLabel })] })] }), _jsxs("div", { hidden: effectiveSelectedMethod !== 'card', className: [
                             'shared-checkout-v2-card-panel',
                             effectiveSelectedMethod === 'card' ? 'is-visible' : '',
                         ]
@@ -336,6 +347,17 @@ export function SharedStripeCheckoutV2Dialog(_a) {
     var { checkoutAnalytics, checkoutSessionId, clientSecret, onClose, stripePromise, supportedCountries, variant = 'standard' } = _a, props = __rest(_a, ["checkoutAnalytics", "checkoutSessionId", "clientSecret", "onClose", "stripePromise", "supportedCountries", "variant"]);
     const normalizedSupportedCountries = useMemo(() => normalizeSupportedCheckoutCountries(supportedCountries), [supportedCountries]);
     const fixedBillingCountry = getFixedSupportedBillingCountry(normalizedSupportedCountries);
+    const handleClose = useCallback(() => {
+        if (checkoutAnalytics) {
+            trackCheckoutCanceled({
+                analytics: checkoutAnalytics,
+                checkoutSessionId,
+                failureStage: 'checkout_dialog',
+                provider: 'stripe',
+            });
+        }
+        onClose();
+    }, [checkoutAnalytics, checkoutSessionId, onClose]);
     useEffect(() => {
         if (!checkoutAnalytics) {
             return;
@@ -345,13 +367,13 @@ export function SharedStripeCheckoutV2Dialog(_a) {
     useEffect(() => {
         const handleKeyDown = (event) => {
             if (event.key === 'Escape') {
-                onClose();
+                handleClose();
             }
         };
         window.addEventListener('keydown', handleKeyDown);
         return () => window.removeEventListener('keydown', handleKeyDown);
-    }, [onClose]);
-    return (_jsxs(_Fragment, { children: [_jsx("div", { className: 'shared-checkout-v2-overlay', children: _jsx("div", { className: 'shared-checkout-v2-dialog', "data-variant": variant, role: 'dialog', "aria-modal": 'true', "aria-labelledby": 'shared-checkout-v2-title', children: _jsx(CheckoutSessionProvider, { clientSecret: clientSecret, fixedBillingCountry: fixedBillingCountry, stripePromise: stripePromise, variant: variant, children: _jsx(SharedStripeCheckoutV2CheckoutSessionForm, Object.assign({}, props, { checkoutAnalytics: checkoutAnalytics, checkoutSessionId: checkoutSessionId, clientSecret: clientSecret, onClose: onClose, supportedCountries: normalizedSupportedCountries, variant: variant })) }) }) }), _jsx("style", { children: sharedStripeCheckoutV2Styles })] }));
+    }, [handleClose]);
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: 'shared-checkout-v2-overlay', children: _jsx("div", { className: 'shared-checkout-v2-dialog', "data-variant": variant, role: 'dialog', "aria-modal": 'true', "aria-labelledby": 'shared-checkout-v2-title', children: _jsx(CheckoutSessionProvider, { clientSecret: clientSecret, fixedBillingCountry: fixedBillingCountry, stripePromise: stripePromise, variant: variant, children: _jsx(SharedStripeCheckoutV2CheckoutSessionForm, Object.assign({}, props, { checkoutAnalytics: checkoutAnalytics, checkoutSessionId: checkoutSessionId, clientSecret: clientSecret, onClose: handleClose, supportedCountries: normalizedSupportedCountries, variant: variant })) }) }) }), _jsx("style", { children: sharedStripeCheckoutV2Styles })] }));
 }
 function SharedCheckoutSpecialOfferGift({ discountLabel, imageAlt, imageSrc, }) {
     if (imageSrc) {

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

@@ -4,6 +4,7 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { ExpressCheckoutElement, useCheckout, } from '@stripe/react-stripe-js/checkout';
 import { queueStripeSubscriptionCheckoutStarted, trackPaidStripeSubscriptionCheckoutCompleted, trackStripeSubscriptionPaymentInfoSubmitted, } from '../services/checkoutCompletionAnalytics.service.js';
 import { getUnsupportedCheckoutCountryMessage, normalizeSupportedCheckoutCountries, } from './checkoutCountries.js';
+import { trackCheckoutCanceled, trackCheckoutFailureShown, } from '../../../services/checkoutObservability.service.js';
 const ExpressCheckoutElementWithCancel = ExpressCheckoutElement;
 const buildDefaultOptions = () => ({
     buttonHeight: 55,
@@ -43,7 +44,7 @@ export function StripeCheckoutExpressCheckoutButton({ beforeConfirm, checkoutAna
         var _a, _b, _c, _d, _e, _f, _g, _h, _j;
         return Object.assign(Object.assign(Object.assign({}, baseOptions), (options !== null && options !== void 0 ? options : {})), { buttonTheme: Object.assign(Object.assign({}, ((_a = baseOptions.buttonTheme) !== null && _a !== void 0 ? _a : {})), ((_b = options === null || options === void 0 ? void 0 : options.buttonTheme) !== null && _b !== void 0 ? _b : {})), buttonType: Object.assign(Object.assign({}, ((_c = baseOptions.buttonType) !== null && _c !== void 0 ? _c : {})), ((_d = options === null || options === void 0 ? void 0 : options.buttonType) !== null && _d !== void 0 ? _d : {})), layout: Object.assign(Object.assign({}, ((_e = baseOptions.layout) !== null && _e !== void 0 ? _e : {})), ((_f = options === null || options === void 0 ? void 0 : options.layout) !== null && _f !== void 0 ? _f : {})), paymentMethods: Object.assign(Object.assign({}, ((_g = baseOptions.paymentMethods) !== null && _g !== void 0 ? _g : {})), ((_h = options === null || options === void 0 ? void 0 : options.paymentMethods) !== null && _h !== void 0 ? _h : {})), paymentMethodOrder: (_j = options === null || options === void 0 ? void 0 : options.paymentMethodOrder) !== null && _j !== void 0 ? _j : baseOptions.paymentMethodOrder });
     }, [baseOptions, options]);
-    const ensureServerUpdated = useCallback(async () => {
+    const ensureServerUpdated = useCallback(async (paymentMethod) => {
         if (!normalizedServerUpdateKey) {
             return true;
         }
@@ -57,14 +58,30 @@ export function StripeCheckoutExpressCheckoutButton({ beforeConfirm, checkoutAna
             return serverUpdatePromiseRef.current;
         }
         const updatePromise = (async () => {
+            let updateCallbackFailed = false;
             const updateResult = await checkoutState.checkout.runServerUpdate(async () => {
                 const updated = await onServerUpdate();
                 if (!updated) {
+                    updateCallbackFailed = true;
                     throw new Error('Unable to update checkout session.');
                 }
             });
             if (updateResult.type === 'error') {
-                onError === null || onError === void 0 ? void 0 : onError(updateResult.error.message || 'Unable to update checkout session.');
+                if (updateCallbackFailed) {
+                    return false;
+                }
+                const message = updateResult.error.message || 'Unable to update checkout session.';
+                if (checkoutAnalytics) {
+                    trackCheckoutFailureShown({
+                        analytics: checkoutAnalytics,
+                        checkoutSessionId,
+                        errorMessage: message,
+                        failureStage: 'wallet_session_update',
+                        paymentMethod,
+                        provider: 'stripe',
+                    });
+                }
+                onError === null || onError === void 0 ? void 0 : onError(message);
                 return false;
             }
             appliedServerUpdateKeyRef.current = normalizedServerUpdateKey;
@@ -78,7 +95,7 @@ export function StripeCheckoutExpressCheckoutButton({ beforeConfirm, checkoutAna
         finally {
             serverUpdatePromiseRef.current = null;
         }
-    }, [checkoutState, normalizedServerUpdateKey, onError, onServerUpdate]);
+    }, [checkoutAnalytics, checkoutSessionId, checkoutState, normalizedServerUpdateKey, onError, onServerUpdate]);
     useEffect(() => {
         if (!normalizedServerUpdateKey) {
             appliedServerUpdateKeyRef.current = '';
@@ -103,6 +120,19 @@ export function StripeCheckoutExpressCheckoutButton({ beforeConfirm, checkoutAna
             checkoutStartSource,
             paymentMethod }));
     };
+    const reportFailure = (message, failureStage, paymentMethod) => {
+        if (checkoutAnalytics) {
+            trackCheckoutFailureShown({
+                analytics: checkoutAnalytics,
+                checkoutSessionId,
+                errorMessage: message,
+                failureStage,
+                paymentMethod,
+                provider: 'stripe',
+            });
+        }
+        onError === null || onError === void 0 ? void 0 : onError(message);
+    };
     const handleConfirm = async (event) => {
         var _a, _b, _c;
         // Checkout Sessions omits the Express Checkout onClick callback. Confirmation
@@ -113,7 +143,7 @@ export function StripeCheckoutExpressCheckoutButton({ beforeConfirm, checkoutAna
             const message = checkoutState.type === 'error'
                 ? checkoutState.error.message
                 : 'Wallet checkout is not ready yet.';
-            onError === null || onError === void 0 ? void 0 : onError(message);
+            reportFailure(message, 'wallet_checkout_not_ready', event.expressPaymentType);
             event.paymentFailed({ reason: 'fail', message });
             return;
         }
@@ -124,14 +154,13 @@ export function StripeCheckoutExpressCheckoutButton({ beforeConfirm, checkoutAna
             supportedCountries: normalizedSupportedCountries,
         });
         if (unsupportedCountryError) {
-            onError === null || onError === void 0 ? void 0 : onError(unsupportedCountryError);
+            reportFailure(unsupportedCountryError, 'wallet_billing_country', event.expressPaymentType);
             event.paymentFailed({ reason: 'invalid_billing_address', message: unsupportedCountryError });
             return;
         }
-        const updated = await ensureServerUpdated();
+        const updated = await ensureServerUpdated(event.expressPaymentType);
         if (!updated) {
             const message = 'Unable to update checkout session.';
-            onError === null || onError === void 0 ? void 0 : onError(message);
             event.paymentFailed({ reason: 'fail', message });
             return;
         }
@@ -144,14 +173,23 @@ export function StripeCheckoutExpressCheckoutButton({ beforeConfirm, checkoutAna
                 const message = confirmError instanceof Error && confirmError.message
                     ? confirmError.message
                     : 'Unable to prepare wallet checkout.';
-                onError === null || onError === void 0 ? void 0 : onError(message);
+                reportFailure(message, 'wallet_before_confirm', event.expressPaymentType);
                 event.paymentFailed({ reason: 'invalid_payment_data', message });
                 return;
             }
         }
         if (beforeConfirm && !preparedCustomerEmail) {
             const message = 'Email is required to continue.';
-            onError === null || onError === void 0 ? void 0 : onError(message);
+            if (checkoutAnalytics) {
+                trackCheckoutCanceled({
+                    analytics: checkoutAnalytics,
+                    checkoutSessionId,
+                    failureStage: 'wallet_preconfirm',
+                    paymentMethod: event.expressPaymentType,
+                    provider: 'stripe',
+                });
+            }
+            reportFailure(message, 'wallet_email_required', event.expressPaymentType);
             event.paymentFailed({ reason: 'invalid_payment_data', message });
             return;
         }
@@ -164,7 +202,7 @@ export function StripeCheckoutExpressCheckoutButton({ beforeConfirm, checkoutAna
             : {})), { expressCheckoutConfirmEvent: event, redirect: 'if_required' }));
         if (result.type === 'error') {
             const message = result.error.message || 'Wallet checkout failed.';
-            onError === null || onError === void 0 ? void 0 : onError(message);
+            reportFailure(message, 'wallet_confirmation', event.expressPaymentType);
             event.paymentFailed({ reason: 'fail', message });
             return;
         }
@@ -184,7 +222,17 @@ export function StripeCheckoutExpressCheckoutButton({ beforeConfirm, checkoutAna
         // Cancel has no method field; only single-method placements can identify it.
         const enabledMethods = Object.entries((_a = resolvedOptions.paymentMethods) !== null && _a !== void 0 ? _a : {})
             .filter(([, availability]) => availability !== 'never');
-        queueCheckoutStarted(enabledMethods.length === 1 ? enabledMethods[0][0] : undefined, 'wallet_cancel');
+        const paymentMethod = enabledMethods.length === 1 ? enabledMethods[0][0] : undefined;
+        queueCheckoutStarted(paymentMethod, 'wallet_cancel');
+        if (checkoutAnalytics) {
+            trackCheckoutCanceled({
+                analytics: checkoutAnalytics,
+                checkoutSessionId,
+                failureStage: 'wallet_sheet',
+                paymentMethod,
+                provider: 'stripe',
+            });
+        }
         onCancel === null || onCancel === void 0 ? void 0 : onCancel();
     };
     return (_jsxs(_Fragment, { children: [_jsx("div", { className: [
@@ -196,7 +244,7 @@ export function StripeCheckoutExpressCheckoutButton({ beforeConfirm, checkoutAna
                     .join(' '), children: _jsx(ExpressCheckoutElementWithCancel, { options: resolvedOptions, onCancel: handleCancel, onClick: handleClick, onConfirm: (event) => void handleConfirm(event), onLoadError: ({ error }) => {
                         setWalletAvailable(false);
                         onAvailabilityChange === null || onAvailabilityChange === void 0 ? void 0 : onAvailabilityChange(false);
-                        onError === null || onError === void 0 ? void 0 : onError(error.message || 'Unable to load wallet checkout.');
+                        reportFailure(error.message || 'Unable to load wallet checkout.', 'wallet_load');
                     }, onReady: ({ availablePaymentMethods: availablePaymentMethodsMap }) => {
                         const available = Boolean(availabilityPaymentMethods.some((paymentMethod) => availablePaymentMethodsMap === null || availablePaymentMethodsMap === void 0 ? void 0 : availablePaymentMethodsMap[paymentMethod]));
                         const resolvedAvailable = available || (keepInitialAvailableOnReady && initialAvailable === true);

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

@@ -3,6 +3,7 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { useMemo, useState } from 'react';
 import { ExpressCheckoutElement, useElements, useStripe } from '@stripe/react-stripe-js';
 import { queueStripeSubscriptionCheckoutStarted, trackStripeSubscriptionPaymentInfoSubmitted, } from '../services/checkoutCompletionAnalytics.service.js';
+import { trackCheckoutCanceled, trackCheckoutFailureShown, } from '../../../services/checkoutObservability.service.js';
 const normalizeBillingName = (input) => {
     var _a, _b, _c;
     const normalizedName = (_a = input.name) === null || _a === void 0 ? void 0 : _a.trim();
@@ -69,11 +70,24 @@ export function StripeExpressCheckoutButton({ amountCents, beforeConfirm, checko
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
         return Object.assign(Object.assign(Object.assign({}, baseOptions), (options !== null && options !== void 0 ? options : {})), { buttonTheme: Object.assign(Object.assign({}, ((_a = baseOptions.buttonTheme) !== null && _a !== void 0 ? _a : {})), ((_b = options === null || options === void 0 ? void 0 : options.buttonTheme) !== null && _b !== void 0 ? _b : {})), buttonType: Object.assign(Object.assign({}, ((_c = baseOptions.buttonType) !== null && _c !== void 0 ? _c : {})), ((_d = options === null || options === void 0 ? void 0 : options.buttonType) !== null && _d !== void 0 ? _d : {})), layout: Object.assign(Object.assign({}, ((_e = baseOptions.layout) !== null && _e !== void 0 ? _e : {})), ((_f = options === null || options === void 0 ? void 0 : options.layout) !== null && _f !== void 0 ? _f : {})), paymentMethods: Object.assign(Object.assign({}, ((_g = baseOptions.paymentMethods) !== null && _g !== void 0 ? _g : {})), ((_h = options === null || options === void 0 ? void 0 : options.paymentMethods) !== null && _h !== void 0 ? _h : {})), lineItems: (_j = options === null || options === void 0 ? void 0 : options.lineItems) !== null && _j !== void 0 ? _j : baseOptions.lineItems, paymentMethodOrder: (_k = options === null || options === void 0 ? void 0 : options.paymentMethodOrder) !== null && _k !== void 0 ? _k : baseOptions.paymentMethodOrder });
     }, [baseOptions, options]);
+    const reportFailure = (message, failureStage, paymentMethod) => {
+        if (checkoutAnalytics) {
+            trackCheckoutFailureShown({
+                analytics: checkoutAnalytics,
+                checkoutSessionId,
+                errorMessage: message,
+                failureStage,
+                paymentMethod,
+                provider: 'stripe',
+            });
+        }
+        onError === null || onError === void 0 ? void 0 : onError(message);
+    };
     const handleConfirm = async (event) => {
         var _a;
         if (!stripe || !elements) {
             const message = 'Wallet checkout is not ready yet.';
-            onError === null || onError === void 0 ? void 0 : onError(message);
+            reportFailure(message, 'wallet_checkout_not_ready', event.expressPaymentType);
             event.paymentFailed({ reason: 'fail', message });
             return;
         }
@@ -87,21 +101,30 @@ export function StripeExpressCheckoutButton({ amountCents, beforeConfirm, checko
                 const message = confirmError instanceof Error && confirmError.message
                     ? confirmError.message
                     : 'Unable to prepare wallet checkout.';
-                onError === null || onError === void 0 ? void 0 : onError(message);
+                reportFailure(message, 'wallet_before_confirm', event.expressPaymentType);
                 event.paymentFailed({ reason: 'invalid_payment_data', message });
                 return;
             }
         }
         if (beforeConfirm && !preparedCustomerEmail) {
             const message = 'Email is required to continue.';
-            onError === null || onError === void 0 ? void 0 : onError(message);
+            if (checkoutAnalytics) {
+                trackCheckoutCanceled({
+                    analytics: checkoutAnalytics,
+                    checkoutSessionId,
+                    failureStage: 'wallet_preconfirm',
+                    paymentMethod: event.expressPaymentType,
+                    provider: 'stripe',
+                });
+            }
+            reportFailure(message, 'wallet_email_required', event.expressPaymentType);
             event.paymentFailed({ reason: 'invalid_payment_data', message });
             return;
         }
         const submitResult = await elements.submit();
         if (submitResult.error) {
             const message = submitResult.error.message || 'Unable to start wallet checkout.';
-            onError === null || onError === void 0 ? void 0 : onError(message);
+            reportFailure(message, 'wallet_payment_details', event.expressPaymentType);
             event.paymentFailed({ reason: 'invalid_payment_data', message });
             return;
         }
@@ -127,7 +150,7 @@ export function StripeExpressCheckoutButton({ amountCents, beforeConfirm, checko
         });
         if (result.error) {
             const message = result.error.message || 'Wallet checkout failed.';
-            onError === null || onError === void 0 ? void 0 : onError(message);
+            reportFailure(message, 'wallet_confirmation', event.expressPaymentType);
             event.paymentFailed({ reason: 'fail', message });
             return;
         }
@@ -144,16 +167,32 @@ export function StripeExpressCheckoutButton({ amountCents, beforeConfirm, checko
         }
         event.resolve();
     };
+    const handleCancel = () => {
+        var _a;
+        const enabledMethods = Object.entries((_a = resolvedOptions.paymentMethods) !== null && _a !== void 0 ? _a : {})
+            .filter(([, availability]) => availability !== 'never');
+        const paymentMethod = enabledMethods.length === 1 ? enabledMethods[0][0] : undefined;
+        if (checkoutAnalytics) {
+            trackCheckoutCanceled({
+                analytics: checkoutAnalytics,
+                checkoutSessionId,
+                failureStage: 'wallet_sheet',
+                paymentMethod,
+                provider: 'stripe',
+            });
+        }
+        onCancel === null || onCancel === void 0 ? void 0 : onCancel();
+    };
     return (_jsxs(_Fragment, { children: [_jsx("div", { className: [
                     'stripe-express-checkout-button',
                     className !== null && className !== void 0 ? className : '',
                     effectiveWalletAvailable === false ? 'is-hidden' : '',
                 ]
                     .filter(Boolean)
-                    .join(' '), children: _jsx(ExpressCheckoutElement, { options: resolvedOptions, onCancel: onCancel, onClick: handleClick, onConfirm: (event) => void handleConfirm(event), onLoadError: ({ error }) => {
+                    .join(' '), children: _jsx(ExpressCheckoutElement, { options: resolvedOptions, onCancel: handleCancel, onClick: handleClick, onConfirm: (event) => void handleConfirm(event), onLoadError: ({ error }) => {
                         setWalletAvailable(false);
                         onAvailabilityChange === null || onAvailabilityChange === void 0 ? void 0 : onAvailabilityChange(false);
-                        onError === null || onError === void 0 ? void 0 : onError(error.message || 'Unable to load wallet checkout.');
+                        reportFailure(error.message || 'Unable to load wallet checkout.', 'wallet_load');
                     }, onReady: ({ availablePaymentMethods: availablePaymentMethodsMap }) => {
                         const available = Boolean(availabilityPaymentMethods.some((paymentMethod) => availablePaymentMethodsMap === null || availablePaymentMethodsMap === void 0 ? void 0 : availablePaymentMethodsMap[paymentMethod]));
                         const resolvedAvailable = available || (keepInitialAvailableOnReady && initialAvailable === true);

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

@@ -20,6 +20,6 @@ export function StripeSubscriptionWalletSurface(_a) {
     const normalizedSurfaceId = surfaceId.trim();
     const { customerName } = checkout, checkoutSessionInput = __rest(checkout, ["customerName"]);
     const surfaceAnalyticsMetadata = useMemo(() => buildStripeSubscriptionWalletSurfaceAnalyticsMetadata(checkout.analyticsMetadata, normalizedSurfaceId), [checkout.analyticsMetadata, normalizedSurfaceId]);
-    const session = useStripeSubscriptionCheckoutSession(Object.assign(Object.assign({}, checkoutSessionInput), { analyticsMetadata: surfaceAnalyticsMetadata }));
+    const session = useStripeSubscriptionCheckoutSession(Object.assign(Object.assign({}, checkoutSessionInput), { analyticsMetadata: surfaceAnalyticsMetadata, checkoutAnalytics: surfaceProps.checkoutAnalytics }));
     return (_jsx(StripeWalletSurface, Object.assign({}, surfaceProps, { customerEmail: checkout.customerEmail, customerName: customerName, returnUrl: checkout.returnUrl, session: session, surfaceId: normalizedSurfaceId })));
 }

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

@@ -3,8 +3,10 @@ import type { RuntimeMode } from '@funnelsgrove/runtime';
 import { type CheckoutPreparationLoading, type CheckoutPreparationSource } from '../../paymentProvider.types.js';
 import type { PaywallDisplayPlan } from '../../../services/paywallOffer.service.js';
 import { type PaywallPlan, type StripeRuntimeConfigOverrides } from '../services/stripe.service.js';
+import { type CheckoutObservabilityAnalyticsContext } from '../../../services/checkoutObservability.service.js';
 export type StripeSubscriptionCheckoutSessionInput = {
     analyticsMetadata?: Record<string, unknown> | null;
+    checkoutAnalytics?: CheckoutObservabilityAnalyticsContext | null;
     checkoutMode: RuntimeMode;
     couponId?: string | null;
     customerEmail?: string | null;
@@ -52,4 +54,5 @@ export type StripeSubscriptionCheckoutIntentKeyInput = Pick<StripeSubscriptionCh
 export declare function buildStripeSubscriptionCheckoutIntentKey({ checkoutMode, couponId, customerEmail, returnUrl, runtimeConfig, runtimeConfigRevisionId, paymentProfileId, provider, stripePublishableKey, userId, }: StripeSubscriptionCheckoutIntentKeyInput): string;
 export declare function shouldResetStripeSubscriptionCheckoutSessionForIntentKey(previousIntentKey: string | null, nextIntentKey: string): boolean;
 export declare function isInactiveCheckoutSessionError(message?: string | null): boolean;
-export declare function useStripeSubscriptionCheckoutSession({ checkoutMode, analyticsMetadata, couponId, customerEmail, displayPlan, enabled, onError, plan, returnUrl, runtimeConfig, runtimeConfigRevisionId, paymentProfileId, provider, stripePublishableKey, userId, }: StripeSubscriptionCheckoutSessionInput): StripeSubscriptionCheckoutSession;
+export declare const shouldReportStripeCheckoutFailureShown: (message: string) => boolean;
+export declare function useStripeSubscriptionCheckoutSession({ checkoutMode, analyticsMetadata, checkoutAnalytics, couponId, customerEmail, displayPlan, enabled, onError, plan, returnUrl, runtimeConfig, runtimeConfigRevisionId, paymentProfileId, provider, stripePublishableKey, userId, }: StripeSubscriptionCheckoutSessionInput): StripeSubscriptionCheckoutSession;

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

@@ -14,6 +14,7 @@ import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState, } f
 import { createEmptyCheckoutPreparationLoading, } from '../../paymentProvider.types.js';
 import { createStripeSubscriptionCheckout, getStripePromise, isStripeConfigured, updateStripeSubscriptionCheckoutPlan, } from '../services/stripe.service.js';
 import { toAnalyticsPaymentMethod } from '../../../services/paymentMethodAnalytics.service.js';
+import { resolveCheckoutObservabilityAnalyticsContext, trackCheckoutFailureShown, } from '../../../services/checkoutObservability.service.js';
 import { resolveStripeCheckoutAttempt, } from './checkoutAttempt.js';
 export function resolveStripeSubscriptionCheckoutPreparationOptions(source, options = {}) {
     var _a, _b;
@@ -68,7 +69,8 @@ export function isInactiveCheckoutSessionError(message) {
     var _a;
     return /\bcheckout session\b.*\bno longer active\b/i.test((_a = message === null || message === void 0 ? void 0 : message.trim()) !== null && _a !== void 0 ? _a : '');
 }
-export function useStripeSubscriptionCheckoutSession({ checkoutMode, analyticsMetadata, couponId, customerEmail, displayPlan, enabled = true, onError, plan, returnUrl, runtimeConfig, runtimeConfigRevisionId, paymentProfileId, provider, stripePublishableKey, userId, }) {
+export const shouldReportStripeCheckoutFailureShown = (message) => !isInactiveCheckoutSessionError(message);
+export function useStripeSubscriptionCheckoutSession({ checkoutMode, analyticsMetadata, checkoutAnalytics, couponId, customerEmail, displayPlan, enabled = true, onError, plan, returnUrl, runtimeConfig, runtimeConfigRevisionId, paymentProfileId, provider, stripePublishableKey, userId, }) {
     var _a, _b, _c, _d, _e;
     const [clientSecret, setClientSecret] = useState(null);
     const [clientSecretIntentKey, setClientSecretIntentKey] = useState(null);
@@ -218,7 +220,24 @@ 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) {
-                    setError(getFriendlyStripeCheckoutError(subscriptionError));
+                    const message = getFriendlyStripeCheckoutError(subscriptionError);
+                    const observabilityAnalytics = resolveCheckoutObservabilityAnalyticsContext({
+                        analytics: checkoutAnalytics,
+                        environment: checkoutMode,
+                        metadata: analyticsMetadataRef.current,
+                        runtimeConfig,
+                    });
+                    if (observabilityAnalytics
+                        && shouldReportStripeCheckoutFailureShown(message)) {
+                        trackCheckoutFailureShown({
+                            analytics: observabilityAnalytics,
+                            errorMessage: message,
+                            failureStage: 'checkout_session_creation',
+                            paymentMethod: options.paymentMethod,
+                            provider: 'stripe',
+                        });
+                    }
+                    setError(message);
                 }
                 return null;
             }
@@ -238,6 +257,7 @@ export function useStripeSubscriptionCheckoutSession({ checkoutMode, analyticsMe
     }, [
         activeClientSecret,
         checkoutMode,
+        checkoutAnalytics,
         clearActiveCheckoutSession,
         configured,
         couponId,
@@ -308,13 +328,31 @@ export function useStripeSubscriptionCheckoutSession({ checkoutMode, analyticsMe
             return true;
         }
         catch (subscriptionError) {
-            setError(getFriendlyStripeCheckoutError(subscriptionError));
+            const message = getFriendlyStripeCheckoutError(subscriptionError);
+            const observabilityAnalytics = resolveCheckoutObservabilityAnalyticsContext({
+                analytics: checkoutAnalytics,
+                environment: checkoutMode,
+                metadata: analyticsMetadataRef.current,
+                runtimeConfig,
+            });
+            if (observabilityAnalytics
+                && shouldReportStripeCheckoutFailureShown(message)) {
+                trackCheckoutFailureShown({
+                    analytics: observabilityAnalytics,
+                    checkoutSessionId: activeCheckoutSessionId,
+                    errorMessage: message,
+                    failureStage: 'checkout_session_update',
+                    provider: 'stripe',
+                });
+            }
+            setError(message);
             return false;
         }
     }, [
         activeCheckoutSessionId,
         activePlanKey,
         checkoutMode,
+        checkoutAnalytics,
         configured,
         couponId,
         customerEmail,

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

@@ -0,0 +1,31 @@
+import { type FunnelSdkRuntimeConfigOverrides, type FunnelStepType, type RuntimeMode } from '@funnelsgrove/runtime';
+export type CheckoutObservabilityAnalyticsContext = {
+    environment?: RuntimeMode;
+    featureFlags?: Record<string, string | null | undefined>;
+    metadata?: Record<string, unknown> | null;
+    runtimeConfig?: FunnelSdkRuntimeConfigOverrides;
+    stepId?: string;
+    stepName?: string;
+    stepType?: Extract<FunnelStepType, 'checkout' | 'paywall_offer' | 'upsell_offer'>;
+    stepContractVersion?: number;
+};
+export declare const resolveCheckoutObservabilityAnalyticsContext: (input: {
+    analytics?: CheckoutObservabilityAnalyticsContext | null;
+    environment?: RuntimeMode;
+    metadata?: Record<string, unknown> | null;
+    runtimeConfig?: FunnelSdkRuntimeConfigOverrides;
+}) => CheckoutObservabilityAnalyticsContext;
+type CheckoutObservabilityInput = {
+    analytics: CheckoutObservabilityAnalyticsContext;
+    checkoutSessionId?: string | null;
+    failureStage: string;
+    paymentMethod?: unknown;
+    provider: 'solidgate' | 'stripe';
+};
+type CheckoutFailureShownInput = CheckoutObservabilityInput & {
+    errorCode?: string | null;
+    errorMessage: string;
+};
+export declare const trackCheckoutFailureShown: (input: CheckoutFailureShownInput) => string | null;
+export declare const trackCheckoutCanceled: (input: CheckoutObservabilityInput) => string | null;
+export {};

package/dist/services/checkoutObservability.service.js

@@ -0,0 +1,124 @@
+import { publicAnalyticsSdk } from '@funnelsgrove/analytics';
+import { buildMainApiUrl, buildSdkHeaders, FUNNEL_ID, FUNNEL_VERSION_ID, } from '@funnelsgrove/runtime';
+import { toAnalyticsPaymentMethod } from './paymentMethodAnalytics.service.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;
+    const metadata = Object.assign(Object.assign({}, ((_a = input.metadata) !== null && _a !== void 0 ? _a : {})), ((_c = (_b = input.analytics) === null || _b === void 0 ? void 0 : _b.metadata) !== null && _c !== void 0 ? _c : {}));
+    const stepId = (_d = asNonEmptyString(metadata.step_id)) !== null && _d !== void 0 ? _d : asNonEmptyString(metadata.stepId);
+    const stepName = (_e = asNonEmptyString(metadata.step_name)) !== null && _e !== void 0 ? _e : asNonEmptyString(metadata.stepName);
+    const stepType = (_f = asNonEmptyString(metadata.step_type)) !== null && _f !== void 0 ? _f : asNonEmptyString(metadata.stepType);
+    const stepContractVersion = Number((_g = metadata.step_contract_version) !== null && _g !== void 0 ? _g : metadata.stepContractVersion);
+    const validStepType = ['checkout', 'paywall_offer', 'upsell_offer'].includes(stepType !== null && stepType !== void 0 ? stepType : '')
+        ? stepType
+        : undefined;
+    const validStepContractVersion = Number.isInteger(stepContractVersion) && stepContractVersion >= 1
+        ? stepContractVersion
+        : undefined;
+    return {
+        environment: (_j = (_h = input.analytics) === null || _h === void 0 ? void 0 : _h.environment) !== null && _j !== void 0 ? _j : input.environment,
+        featureFlags: (_k = input.analytics) === null || _k === void 0 ? void 0 : _k.featureFlags,
+        metadata,
+        runtimeConfig: (_m = (_l = input.analytics) === null || _l === void 0 ? void 0 : _l.runtimeConfig) !== null && _m !== void 0 ? _m : input.runtimeConfig,
+        stepId: (_q = (_p = (_o = input.analytics) === null || _o === void 0 ? void 0 : _o.stepId) !== null && _p !== void 0 ? _p : stepId) !== null && _q !== void 0 ? _q : undefined,
+        stepName: (_t = (_s = (_r = input.analytics) === null || _r === void 0 ? void 0 : _r.stepName) !== null && _s !== void 0 ? _s : stepName) !== null && _t !== void 0 ? _t : undefined,
+        stepType: (_v = (_u = input.analytics) === null || _u === void 0 ? void 0 : _u.stepType) !== null && _v !== void 0 ? _v : validStepType,
+        stepContractVersion: (_x = (_w = input.analytics) === null || _w === void 0 ? void 0 : _w.stepContractVersion) !== null && _x !== void 0 ? _x : validStepContractVersion,
+    };
+};
+const sanitizeErrorMessage = (value) => value
+    .replace(/[\r\n\t]+/g, ' ')
+    .replace(/[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}/gi, '[redacted-email]')
+    .replace(/\b(?:sk|rk)_(?:live|test)_[A-Za-z0-9]+\b/g, '[redacted-key]')
+    .trim()
+    .slice(0, 500);
+const reportCheckoutObservability = (input) => {
+    var _a, _b, _c, _d, _e, _f, _g;
+    const runtimeConfig = input.analytics.runtimeConfig;
+    const funnelId = ((_a = runtimeConfig === null || runtimeConfig === void 0 ? void 0 : runtimeConfig.funnelId) === null || _a === void 0 ? void 0 : _a.trim()) || FUNNEL_ID.trim();
+    const environment = (_b = input.analytics.environment) !== null && _b !== void 0 ? _b : (((_c = input.analytics.metadata) === null || _c === void 0 ? void 0 : _c.environment) === 'test' || ((_d = input.analytics.metadata) === null || _d === void 0 ? void 0 : _d.environment) === 'live'
+        ? input.analytics.metadata.environment
+        : null);
+    if (!funnelId || !environment) {
+        return Promise.resolve();
+    }
+    const path = '/sdk/public/payments/checkout-observability';
+    const baseUrl = (_e = runtimeConfig === null || runtimeConfig === void 0 ? void 0 : runtimeConfig.apiBaseUrl) === null || _e === void 0 ? void 0 : _e.trim().replace(/\/+$/, '');
+    const url = baseUrl ? `${baseUrl}${path}` : buildMainApiUrl(path);
+    const publishableKey = (_f = runtimeConfig === null || runtimeConfig === void 0 ? void 0 : runtimeConfig.funnelSdkPublishableKey) === null || _f === void 0 ? void 0 : _f.trim();
+    return fetch(url, {
+        method: 'POST',
+        headers: publishableKey
+            ? { 'Content-Type': 'application/json', 'x-sdk-publishable-key': publishableKey }
+            : buildSdkHeaders({ 'Content-Type': 'application/json' }),
+        body: JSON.stringify({
+            checkoutSessionId: input.checkoutSessionId || undefined,
+            environment,
+            errorCode: input.errorCode,
+            errorMessage: input.errorMessage,
+            eventId: input.eventId,
+            eventType: input.eventType,
+            failureStage: input.failureStage,
+            funnelId,
+            funnelVersionId: ((_g = runtimeConfig === null || runtimeConfig === void 0 ? void 0 : runtimeConfig.funnelVersionId) === null || _g === void 0 ? void 0 : _g.trim()) || FUNNEL_VERSION_ID.trim() || undefined,
+            paymentMethod: input.paymentMethod || undefined,
+            provider: input.provider,
+        }),
+        keepalive: true,
+    }).then(() => undefined);
+};
+const resolveErrorCode = (message, requestedCode) => {
+    const normalizedCode = requestedCode === null || requestedCode === void 0 ? void 0 : requestedCode.trim().slice(0, 120);
+    if (normalizedCode) {
+        return normalizedCode;
+    }
+    if (message === 'Published Stripe checkout selection is incomplete') {
+        return 'published_checkout_selection_incomplete';
+    }
+    if (/checkout session.*no longer active/i.test(message)) {
+        return 'checkout_session_inactive';
+    }
+    return 'checkout_failure';
+};
+const emitCheckoutObservability = (eventType, input, failure) => {
+    var _a, _b;
+    const paymentMethod = toAnalyticsPaymentMethod(input.paymentMethod);
+    const metadata = Object.assign(Object.assign({}, ((_a = input.analytics.metadata) !== null && _a !== void 0 ? _a : {})), { checkout_session_id: ((_b = input.checkoutSessionId) === null || _b === void 0 ? void 0 : _b.trim()) || undefined, checkout_failure_stage: input.failureStage, payment_provider: input.provider, payment_method: paymentMethod || undefined, error_code: failure === null || failure === void 0 ? void 0 : failure.errorCode, error_message: failure === null || failure === void 0 ? void 0 : failure.errorMessage });
+    const eventId = publicAnalyticsSdk.track({
+        eventType,
+        environment: input.analytics.environment,
+        featureFlags: input.analytics.featureFlags,
+        metadata,
+        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: input.checkoutSessionId,
+        errorCode: failure === null || failure === void 0 ? void 0 : failure.errorCode,
+        errorMessage: failure === null || failure === void 0 ? void 0 : failure.errorMessage,
+        eventId,
+        eventType,
+        failureStage: input.failureStage,
+        paymentMethod,
+        provider: input.provider,
+    }).catch(() => undefined);
+    void publicAnalyticsSdk.flush().catch(() => 0);
+    return eventId;
+};
+export const trackCheckoutFailureShown = (input) => {
+    const errorMessage = sanitizeErrorMessage(input.errorMessage);
+    if (!errorMessage) {
+        return null;
+    }
+    return emitCheckoutObservability('checkout_failure_shown', input, {
+        errorCode: resolveErrorCode(errorMessage, input.errorCode),
+        errorMessage,
+    });
+};
+export const trackCheckoutCanceled = (input) => emitCheckoutObservability('checkout_canceled', input);

package/package.json

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