@funnelsgrove/payments 0.1.39 → 0.1.41

package/dist/components/shared/SharedStripeCheckoutV2Dialog.d.ts

@@ -1,8 +1,11 @@
 import type { Stripe } from '@stripe/stripe-js';
+import { type StripeSubscriptionCheckoutAnalyticsContext } from '../../services/checkoutCompletionAnalytics.service.js';
 export type SharedStripeCheckoutV2DialogProps = {
     amountCents: number;
     buttonColor: string;
     cardSubmitLabel: string;
+    checkoutAnalytics?: StripeSubscriptionCheckoutAnalyticsContext | null;
+    checkoutSessionId?: string | null;
     clientSecret: string;
     closeAriaLabel: string;
     countdownLabel: string;
@@ -22,6 +25,7 @@ export type SharedStripeCheckoutV2DialogProps = {
     onCustomerEmailCommit?: (email: string) => Promise<string | null | void>;
     onError?: (message: string | null) => void;
     onInactiveCheckoutSession?: () => void;
+    onPaymentInfoSubmitted?: () => void | Promise<void>;
     onSuccess?: () => void | Promise<void>;
     paymentMethodLabels?: readonly string[];
     paypalButtonLabel: string;
@@ -57,5 +61,5 @@ export type SharedCheckoutSpecialOfferDialogProps = {
     themeColor: string;
     title: string;
 };
-export declare function SharedStripeCheckoutV2Dialog({ clientSecret, onClose, stripePromise, ...props }: SharedStripeCheckoutV2DialogProps): import("react/jsx-runtime").JSX.Element;
+export declare function SharedStripeCheckoutV2Dialog({ checkoutAnalytics, checkoutSessionId, clientSecret, onClose, stripePromise, ...props }: SharedStripeCheckoutV2DialogProps): import("react/jsx-runtime").JSX.Element;
 export declare function SharedCheckoutSpecialOfferDialog({ buttonColor, buttonLabel, description, discountLabel, imageAlt, imageSrc, onAccept, themeColor, title, }: SharedCheckoutSpecialOfferDialogProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/shared/SharedStripeCheckoutV2Dialog.js

@@ -17,6 +17,7 @@ import { PaymentBrandMark, SecurityLockIcon } from './CheckoutBrandAssets.js';
 import { StripeCheckoutExpressCheckoutButton } from './StripeCheckoutExpressCheckoutButton.js';
 import { isInactiveCheckoutSessionError } from '../../providers/stripe/useStripeSubscriptionCheckoutSession.js';
 import { getStripeWalletPaymentMethodOrder, usePlatformWalletPaymentMethods, } from './walletPlatform.js';
+import { trackPaidStripeSubscriptionCheckoutCompleted, trackStripeSubscriptionCheckoutStarted, } from '../../services/checkoutCompletionAnalytics.service.js';
 const defaultPaymentMethodLabels = ['Visa', 'Mastercard', 'Maestro', 'Discover'];
 const stripeCheckoutV2Appearance = {
     labels: 'above',
@@ -52,7 +53,7 @@ function getFriendlyCardErrorMessage(error) {
         ? error.message
         : 'Payment failed. Please review your card details and try again.';
 }
-function SharedStripeCheckoutV2Form({ amountCents, buttonColor, cardSubmitLabel, closeAriaLabel, countdownLabel, customerEmail, customerEmailEditable = false, customerEmailLabel = 'Email', customerEmailPlaceholder = 'Enter your email', customerEmailInvalidMessage = 'Enter a valid email address.', customerName, discountAmountLabel, discountLabel, discountPercent, initialWalletAvailable, onClose, onCustomerEmailChange, onCustomerEmailCommit, onError, onInactiveCheckoutSession, onSuccess, paymentMethodLabels = defaultPaymentMethodLabels, promoActive, processingLabel, promoCode, promoCodeLabel, remainingSeconds, returnUrl, savedLabel, secureLabel, satisfactionLabel, satisfactionPercent, summaryLabel, themeColor, title, totalLabel, totalValue, walletButtonLabel, originalPriceLabel, originalPriceValue, }) {
+function SharedStripeCheckoutV2Form({ amountCents, buttonColor, cardSubmitLabel, closeAriaLabel, countdownLabel, checkoutAnalytics, checkoutSessionId, customerEmail, customerEmailEditable = false, customerEmailLabel = 'Email', customerEmailPlaceholder = 'Enter your email', customerEmailInvalidMessage = 'Enter a valid email address.', customerName, discountAmountLabel, discountLabel, discountPercent, initialWalletAvailable, onClose, onCustomerEmailChange, onCustomerEmailCommit, onError, onInactiveCheckoutSession, onPaymentInfoSubmitted, onSuccess, paymentMethodLabels = defaultPaymentMethodLabels, promoActive, processingLabel, promoCode, promoCodeLabel, remainingSeconds, returnUrl, savedLabel, secureLabel, satisfactionLabel, satisfactionPercent, summaryLabel, themeColor, title, totalLabel, totalValue, walletButtonLabel, originalPriceLabel, originalPriceValue, }) {
     const checkoutState = useCheckout();
     const walletPaymentMethods = usePlatformWalletPaymentMethods();
     const [selectedMethod, setSelectedMethod] = useState('wallet');
@@ -157,6 +158,12 @@ function SharedStripeCheckoutV2Form({ amountCents, buttonColor, cardSubmitLabel,
             setSelectedMethod('card');
         }
     };
+    const trackCheckoutSuccess = async () => {
+        if (checkoutAnalytics) {
+            await trackPaidStripeSubscriptionCheckoutCompleted(Object.assign({ checkoutSessionId }, checkoutAnalytics));
+        }
+        await (onSuccess === null || onSuccess === void 0 ? void 0 : onSuccess());
+    };
     useEffect(() => {
         if (effectiveSelectedMethod !== 'card' || typeof window === 'undefined') {
             return;
@@ -217,6 +224,7 @@ function SharedStripeCheckoutV2Form({ amountCents, buttonColor, cardSubmitLabel,
                 setSubmitting(false);
                 return;
             }
+            await (onPaymentInfoSubmitted === null || onPaymentInfoSubmitted === void 0 ? void 0 : onPaymentInfoSubmitted());
             const result = await checkoutState.checkout.confirm({
                 redirect: 'if_required',
             });
@@ -227,7 +235,7 @@ function SharedStripeCheckoutV2Form({ amountCents, buttonColor, cardSubmitLabel,
                 return;
             }
             if (typeof window !== 'undefined') {
-                await (onSuccess === null || onSuccess === void 0 ? void 0 : onSuccess());
+                await trackCheckoutSuccess();
                 window.location.assign(returnUrl);
                 return;
             }
@@ -259,7 +267,7 @@ function SharedStripeCheckoutV2Form({ amountCents, buttonColor, cardSubmitLabel,
                             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, className: 'shared-checkout-v2-express-buttons', confirmEmail: false, customerEmail: resolvedCustomerEmail, customerName: customerName, initialAvailable: initialWalletAvailable, keepInitialAvailableOnReady: initialWalletAvailable === true, onAvailabilityChange: handleWalletAvailabilityChange, onError: setSharedError, onSuccess: onSuccess, options: expressCheckoutOptions, returnUrl: returnUrl, summaryLabel: expressCheckoutSummaryLabel }), _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, 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 }), _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' : '',
                         ]
@@ -273,13 +281,19 @@ function SharedStripeCheckoutV2Form({ amountCents, buttonColor, cardSubmitLabel,
                                                     } }) })] }), _jsx(PaymentElement, { options: paymentElementOptions })] }), visibleError ? _jsx("p", { className: 'shared-checkout-v2-error', children: visibleError }) : null, _jsxs("button", { type: 'submit', className: 'shared-checkout-v2-card-submit', disabled: submitting, children: [_jsx(SecurityLockIcon, { className: 'shared-checkout-v2-card-submit-icon' }), submitting ? processingLabel : cardSubmitLabel] }), _jsx("div", { className: 'shared-checkout-v2-card-brands', "aria-hidden": 'true', children: cardBrandLabels.map((label) => (_jsx(PaymentBrandMark, { label: label, className: 'shared-checkout-v2-card-brand' }, label))) }), _jsxs("p", { className: 'shared-checkout-v2-secure-pill shared-checkout-v2-secure-pill--card', children: [_jsx(SecurityLockIcon, { className: 'shared-checkout-v2-secure-pill-icon' }), secureLabel] })] })] })] }));
 }
 export function SharedStripeCheckoutV2Dialog(_a) {
-    var { clientSecret, onClose, stripePromise } = _a, props = __rest(_a, ["clientSecret", "onClose", "stripePromise"]);
+    var { checkoutAnalytics, checkoutSessionId, clientSecret, onClose, stripePromise } = _a, props = __rest(_a, ["checkoutAnalytics", "checkoutSessionId", "clientSecret", "onClose", "stripePromise"]);
     const checkoutProviderOptions = useMemo(() => ({
         clientSecret,
         elementsOptions: {
             appearance: stripeCheckoutV2Appearance,
         },
     }), [clientSecret]);
+    useEffect(() => {
+        if (!checkoutAnalytics) {
+            return;
+        }
+        void trackStripeSubscriptionCheckoutStarted(Object.assign({ checkoutSessionId }, checkoutAnalytics));
+    }, [checkoutAnalytics, checkoutSessionId, clientSecret]);
     useEffect(() => {
         const handleKeyDown = (event) => {
             if (event.key === 'Escape') {
@@ -289,7 +303,7 @@ export function SharedStripeCheckoutV2Dialog(_a) {
         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', role: 'dialog', "aria-modal": 'true', "aria-labelledby": 'shared-checkout-v2-title', children: _jsx(CheckoutProvider, { stripe: stripePromise, options: checkoutProviderOptions, children: _jsx(SharedStripeCheckoutV2Form, Object.assign({}, props, { clientSecret: clientSecret, onClose: onClose })) }, clientSecret) }) }), _jsx("style", { children: sharedStripeCheckoutV2Styles })] }));
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: 'shared-checkout-v2-overlay', children: _jsx("div", { className: 'shared-checkout-v2-dialog', role: 'dialog', "aria-modal": 'true', "aria-labelledby": 'shared-checkout-v2-title', children: _jsx(CheckoutProvider, { stripe: stripePromise, options: checkoutProviderOptions, children: _jsx(SharedStripeCheckoutV2Form, Object.assign({}, props, { checkoutAnalytics: checkoutAnalytics, checkoutSessionId: checkoutSessionId, clientSecret: clientSecret, onClose: onClose })) }, clientSecret) }) }), _jsx("style", { children: sharedStripeCheckoutV2Styles })] }));
 }
 function SharedCheckoutSpecialOfferGift({ discountLabel, imageAlt, imageSrc, }) {
     if (imageSrc) {

package/dist/components/shared/StripeCheckoutExpressCheckoutButton.d.ts

@@ -1,7 +1,10 @@
 import type { AvailablePaymentMethods, StripeCheckoutExpressCheckoutElementOptions } from '@stripe/stripe-js';
+import { type StripeSubscriptionCheckoutAnalyticsContext } from '../../services/checkoutCompletionAnalytics.service.js';
 export type StripeCheckoutExpressCheckoutButtonProps = {
     amountCents: number;
     beforeConfirm?: () => Promise<string | null>;
+    checkoutAnalytics?: StripeSubscriptionCheckoutAnalyticsContext | null;
+    checkoutSessionId?: string | null;
     summaryLabel: string;
     returnUrl: string;
     confirmEmail?: boolean;
@@ -17,6 +20,7 @@ export type StripeCheckoutExpressCheckoutButtonProps = {
     onAvailabilityChange?: (available: boolean) => void;
     onCancel?: () => void;
     onError?: (message: string | null) => void;
+    onPaymentInfoSubmitted?: () => void | Promise<void>;
     onSuccess?: () => void | Promise<void>;
 };
-export declare function StripeCheckoutExpressCheckoutButton({ beforeConfirm, returnUrl, confirmEmail, customerEmail, className, options, availabilityPaymentMethods, initialAvailable, keepInitialAvailableOnReady, serverUpdateKey, onServerUpdate, onAvailabilityChange, onCancel, onError, onSuccess, }: StripeCheckoutExpressCheckoutButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare function StripeCheckoutExpressCheckoutButton({ beforeConfirm, checkoutAnalytics, checkoutSessionId, returnUrl, confirmEmail, customerEmail, className, options, availabilityPaymentMethods, initialAvailable, keepInitialAvailableOnReady, serverUpdateKey, onServerUpdate, onAvailabilityChange, onCancel, onError, onPaymentInfoSubmitted, onSuccess, }: StripeCheckoutExpressCheckoutButtonProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/shared/StripeCheckoutExpressCheckoutButton.js

@@ -2,6 +2,7 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { ExpressCheckoutElement, useCheckout, } from '@stripe/react-stripe-js/checkout';
+import { trackPaidStripeSubscriptionCheckoutCompleted, trackStripeSubscriptionCheckoutStarted, } from '../../services/checkoutCompletionAnalytics.service.js';
 const ExpressCheckoutElementWithCancel = ExpressCheckoutElement;
 const buildDefaultOptions = () => ({
     buttonHeight: 55,
@@ -26,7 +27,7 @@ const buildDefaultOptions = () => ({
         paypal: 'never',
     },
 });
-export function StripeCheckoutExpressCheckoutButton({ beforeConfirm, returnUrl, confirmEmail = true, customerEmail, className, options, availabilityPaymentMethods = ['applePay'], initialAvailable, keepInitialAvailableOnReady = false, serverUpdateKey, onServerUpdate, onAvailabilityChange, onCancel, onError, onSuccess, }) {
+export function StripeCheckoutExpressCheckoutButton({ beforeConfirm, checkoutAnalytics, checkoutSessionId, returnUrl, confirmEmail = true, customerEmail, className, options, availabilityPaymentMethods = ['applePay'], initialAvailable, keepInitialAvailableOnReady = false, serverUpdateKey, onServerUpdate, onAvailabilityChange, onCancel, onError, onPaymentInfoSubmitted, onSuccess, }) {
     const checkoutState = useCheckout();
     const appliedServerUpdateKeyRef = useRef('');
     const serverUpdatePromiseRef = useRef(null);
@@ -86,6 +87,12 @@ export function StripeCheckoutExpressCheckoutButton({ beforeConfirm, returnUrl,
         }
         void ensureServerUpdated();
     }, [checkoutState.type, ensureServerUpdated, normalizedServerUpdateKey, onServerUpdate]);
+    const trackCheckoutSuccess = async () => {
+        if (checkoutAnalytics) {
+            await trackPaidStripeSubscriptionCheckoutCompleted(Object.assign({ checkoutSessionId }, checkoutAnalytics));
+        }
+        await (onSuccess === null || onSuccess === void 0 ? void 0 : onSuccess());
+    };
     const handleConfirm = async (event) => {
         if (checkoutState.type !== 'success') {
             const message = checkoutState.type === 'error'
@@ -103,6 +110,9 @@ export function StripeCheckoutExpressCheckoutButton({ beforeConfirm, returnUrl,
             event.paymentFailed({ reason: 'fail', message });
             return;
         }
+        if (checkoutAnalytics) {
+            await trackStripeSubscriptionCheckoutStarted(Object.assign({ checkoutSessionId }, checkoutAnalytics));
+        }
         let preparedCustomerEmail = (customerEmail === null || customerEmail === void 0 ? void 0 : customerEmail.trim()) || null;
         if (beforeConfirm) {
             try {
@@ -123,6 +133,7 @@ export function StripeCheckoutExpressCheckoutButton({ beforeConfirm, returnUrl,
             event.paymentFailed({ reason: 'invalid_payment_data', message });
             return;
         }
+        await (onPaymentInfoSubmitted === null || onPaymentInfoSubmitted === void 0 ? void 0 : onPaymentInfoSubmitted());
         const result = await checkoutState.checkout.confirm(Object.assign(Object.assign({}, (confirmEmail
             ? { email: preparedCustomerEmail || (customerEmail === null || customerEmail === void 0 ? void 0 : customerEmail.trim()) || undefined }
             : {})), { expressCheckoutConfirmEvent: event, redirect: 'if_required' }));
@@ -134,7 +145,7 @@ export function StripeCheckoutExpressCheckoutButton({ beforeConfirm, returnUrl,
         }
         onError === null || onError === void 0 ? void 0 : onError(null);
         if (typeof window !== 'undefined') {
-            await (onSuccess === null || onSuccess === void 0 ? void 0 : onSuccess());
+            await trackCheckoutSuccess();
             window.location.assign(returnUrl);
         }
     };

package/dist/components/shared/StripeExpressCheckoutButton.d.ts

@@ -14,6 +14,7 @@ export type StripeExpressCheckoutButtonProps = {
     onAvailabilityChange?: (available: boolean) => void;
     onCancel?: () => void;
     onError?: (message: string | null) => void;
+    onPaymentInfoSubmitted?: () => void | Promise<void>;
     onSuccess?: () => void | Promise<void>;
 };
-export declare function StripeExpressCheckoutButton({ amountCents, beforeConfirm, summaryLabel, returnUrl, customerEmail, customerName, className, options, availabilityPaymentMethods, initialAvailable, keepInitialAvailableOnReady, onAvailabilityChange, onCancel, onError, onSuccess, }: StripeExpressCheckoutButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare function StripeExpressCheckoutButton({ amountCents, beforeConfirm, summaryLabel, returnUrl, customerEmail, customerName, className, options, availabilityPaymentMethods, initialAvailable, keepInitialAvailableOnReady, onAvailabilityChange, onCancel, onError, onPaymentInfoSubmitted, onSuccess, }: StripeExpressCheckoutButtonProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/shared/StripeExpressCheckoutButton.js

@@ -53,7 +53,7 @@ const buildDefaultOptions = (input) => {
 const isSuccessfulIntentStatus = (status) => {
     return status === 'succeeded' || status === 'processing' || status === 'requires_capture';
 };
-export function StripeExpressCheckoutButton({ amountCents, beforeConfirm, summaryLabel, returnUrl, customerEmail, customerName, className, options, availabilityPaymentMethods = ['applePay'], initialAvailable, keepInitialAvailableOnReady = false, onAvailabilityChange, onCancel, onError, onSuccess, }) {
+export function StripeExpressCheckoutButton({ amountCents, beforeConfirm, summaryLabel, returnUrl, customerEmail, customerName, className, options, availabilityPaymentMethods = ['applePay'], initialAvailable, keepInitialAvailableOnReady = false, onAvailabilityChange, onCancel, onError, onPaymentInfoSubmitted, onSuccess, }) {
     const stripe = useStripe();
     const elements = useElements();
     const [walletAvailable, setWalletAvailable] = useState(initialAvailable !== null && initialAvailable !== void 0 ? initialAvailable : null);
@@ -104,6 +104,7 @@ export function StripeExpressCheckoutButton({ amountCents, beforeConfirm, summar
             event.paymentFailed({ reason: 'invalid_payment_data', message });
             return;
         }
+        await (onPaymentInfoSubmitted === null || onPaymentInfoSubmitted === void 0 ? void 0 : onPaymentInfoSubmitted());
         const result = await stripe.confirmPayment({
             elements,
             confirmParams: {

package/dist/providers/stripe/WalletSubscriptionCheckoutSlot.d.ts

@@ -1,5 +1,6 @@
 import { type ReactNode } from 'react';
 import type { AvailablePaymentMethods, StripeCheckoutExpressCheckoutElementOptions } from '@stripe/stripe-js';
+import type { StripeSubscriptionCheckoutAnalyticsContext } from '../../services/checkoutCompletionAnalytics.service.js';
 import { type StripeSubscriptionCheckoutSession } from './useStripeSubscriptionCheckoutSession.js';
 export type WalletSubscriptionCheckoutRenderStateInput = {
     expressCheckoutAllowed: boolean;
@@ -25,6 +26,7 @@ export type WalletSubscriptionCheckoutSlotProps = {
     amountCents: number;
     availabilityPaymentMethod: keyof AvailablePaymentMethods;
     beforeConfirm?: () => Promise<string | null>;
+    checkoutAnalytics?: StripeSubscriptionCheckoutAnalyticsContext | null;
     className?: string;
     customerEmail?: string | null;
     customerName?: string | null;
@@ -33,6 +35,7 @@ export type WalletSubscriptionCheckoutSlotProps = {
     onAvailabilityChange?: (available: boolean) => void;
     onCancel?: () => void;
     onError?: (message: string | null) => void;
+    onPaymentInfoSubmitted?: () => void | Promise<void>;
     onSuccess?: () => void | Promise<void>;
     onUnavailableClick?: () => Promise<void> | void;
     options?: Partial<StripeCheckoutExpressCheckoutElementOptions>;
@@ -45,5 +48,5 @@ export type WalletSubscriptionCheckoutSlotProps = {
     suspended?: boolean;
 };
 export declare function WalletSubscriptionCheckoutLoadingPlaceholder({ className, label, }: Pick<WalletPlaceholderButtonProps, 'className' | 'label'>): import("react/jsx-runtime").JSX.Element;
-export declare function WalletSubscriptionCheckoutSlot({ amountCents, availabilityPaymentMethod, beforeConfirm, className, customerEmail, customerName, disabled, expressCheckoutAllowed, onAvailabilityChange, onCancel, onError, onSuccess, onUnavailableClick, options, placeholderLabel, renderPreparingPlaceholder, renderPlaceholder, returnUrl, session, summaryLabel, suspended, }: WalletSubscriptionCheckoutSlotProps): import("react/jsx-runtime").JSX.Element;
+export declare function WalletSubscriptionCheckoutSlot({ amountCents, availabilityPaymentMethod, beforeConfirm, checkoutAnalytics, className, customerEmail, customerName, disabled, expressCheckoutAllowed, onAvailabilityChange, onCancel, onError, onPaymentInfoSubmitted, onSuccess, onUnavailableClick, options, placeholderLabel, renderPreparingPlaceholder, renderPlaceholder, returnUrl, session, summaryLabel, suspended, }: WalletSubscriptionCheckoutSlotProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/providers/stripe/WalletSubscriptionCheckoutSlot.js

@@ -27,7 +27,7 @@ export function WalletSubscriptionCheckoutLoadingPlaceholder({ className, label,
             .filter(Boolean)
             .join(' '), "aria-label": label, role: 'status', children: [_jsx("span", { className: 'wallet-subscription-checkout-slot__loading-bar' }), _jsx("style", { children: walletSubscriptionCheckoutLoadingPlaceholderStyles })] }));
 }
-export function WalletSubscriptionCheckoutSlot({ amountCents, availabilityPaymentMethod, beforeConfirm, className, customerEmail, customerName, disabled = false, expressCheckoutAllowed = true, onAvailabilityChange, onCancel, onError, onSuccess, onUnavailableClick, options, placeholderLabel, renderPreparingPlaceholder, renderPlaceholder, returnUrl, session, summaryLabel, suspended = false, }) {
+export function WalletSubscriptionCheckoutSlot({ amountCents, availabilityPaymentMethod, beforeConfirm, checkoutAnalytics, className, customerEmail, customerName, disabled = false, expressCheckoutAllowed = true, onAvailabilityChange, onCancel, onError, onPaymentInfoSubmitted, onSuccess, onUnavailableClick, options, placeholderLabel, renderPreparingPlaceholder, renderPlaceholder, returnUrl, session, summaryLabel, suspended = false, }) {
     const [walletAvailability, setWalletAvailability] = useState({
         available: null,
         intentKey: session.intentKey,
@@ -131,7 +131,7 @@ export function WalletSubscriptionCheckoutSlot({ amountCents, availabilityPaymen
                     .filter(Boolean)
                     .join(' '), "aria-busy": placeholderIsPreparing || undefined, children: [shouldRenderExpressCheckout &&
                         session.activeClientSecret &&
-                        session.stripePromise ? (_jsx(StripeExpressCheckoutElement, { amountCents: amountCents, availabilityPaymentMethods: [availabilityPaymentMethod], beforeConfirm: beforeConfirm, className: className, clientSecret: session.activeClientSecret, customerEmail: customerEmail, customerName: customerName, onAvailabilityChange: handleAvailabilityChange, onCancel: onCancel, onError: handleError, 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, 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({
                             className,
                             disabled: slotDisabled,
                             label: placeholderLabel,

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

@@ -1,12 +1,20 @@
 import type { RuntimeMode } from '@funnelsgrove/runtime';
 import { type StripeRuntimeConfigOverrides } from './stripe.service.js';
-export type TrackPaidStripeSubscriptionCheckoutCompletedInput = {
-    checkoutSessionId?: string | null;
+export type StripeSubscriptionCheckoutAnalyticsContext = {
     environment?: RuntimeMode;
+    featureFlags?: Record<string, string | null | undefined>;
     metadata?: Record<string, unknown> | null;
     runtimeConfig?: StripeRuntimeConfigOverrides;
     stepId?: string;
     stepName?: string;
 };
+export type TrackStripeSubscriptionCheckoutStartedInput = StripeSubscriptionCheckoutAnalyticsContext & {
+    checkoutSessionId?: string | null;
+};
+export type TrackPaidStripeSubscriptionCheckoutCompletedInput = StripeSubscriptionCheckoutAnalyticsContext & {
+    checkoutSessionId?: string | null;
+};
+export type TrackStripeSubscriptionCheckoutStartedResult = 'already_tracked' | 'missing_checkout_session' | 'tracked';
 export type TrackPaidStripeSubscriptionCheckoutCompletedResult = 'already_tracked' | 'missing_checkout_session' | 'tracked' | 'unpaid';
+export declare function trackStripeSubscriptionCheckoutStarted(input: TrackStripeSubscriptionCheckoutStartedInput): Promise<TrackStripeSubscriptionCheckoutStartedResult>;
 export declare function trackPaidStripeSubscriptionCheckoutCompleted(input: TrackPaidStripeSubscriptionCheckoutCompletedInput): Promise<TrackPaidStripeSubscriptionCheckoutCompletedResult>;

package/dist/services/checkoutCompletionAnalytics.service.js

@@ -6,44 +6,75 @@ const asRecord = (value) => {
         : {};
 };
 const activeCheckoutCompletionKeys = new Set();
-const buildCheckoutCompletedStorageKey = (checkoutSessionId, runtimeConfig) => {
+const activeCheckoutStartedKeys = new Set();
+const buildCheckoutStorageKey = (eventName, checkoutSessionId, runtimeConfig) => {
     var _a;
     const funnelId = ((_a = runtimeConfig === null || runtimeConfig === void 0 ? void 0 : runtimeConfig.funnelId) === null || _a === void 0 ? void 0 : _a.trim()) || 'unknown_funnel';
-    return `funnelsgrove:checkout_completed:${funnelId}:${checkoutSessionId}`;
+    return `funnelsgrove:${eventName}:${funnelId}:${checkoutSessionId}`;
 };
-const hasTrackedCheckoutSession = (checkoutSessionId, runtimeConfig) => {
+const hasTrackedCheckoutSession = (eventName, checkoutSessionId, runtimeConfig) => {
     var _a;
     if (typeof window === 'undefined') {
         return false;
     }
     try {
-        return Boolean((_a = window.sessionStorage) === null || _a === void 0 ? void 0 : _a.getItem(buildCheckoutCompletedStorageKey(checkoutSessionId, runtimeConfig)));
+        return Boolean((_a = window.sessionStorage) === null || _a === void 0 ? void 0 : _a.getItem(buildCheckoutStorageKey(eventName, checkoutSessionId, runtimeConfig)));
     }
     catch (_b) {
         return false;
     }
 };
-const markCheckoutSessionTracked = (checkoutSessionId, runtimeConfig) => {
+const markCheckoutSessionTracked = (eventName, checkoutSessionId, runtimeConfig) => {
     var _a;
     if (typeof window === 'undefined') {
         return;
     }
     try {
-        (_a = window.sessionStorage) === null || _a === void 0 ? void 0 : _a.setItem(buildCheckoutCompletedStorageKey(checkoutSessionId, runtimeConfig), '1');
+        (_a = window.sessionStorage) === null || _a === void 0 ? void 0 : _a.setItem(buildCheckoutStorageKey(eventName, checkoutSessionId, runtimeConfig), '1');
     }
     catch (_b) {
         // A stable checkout-session event id still protects provider-side dedupe.
     }
 };
+export async function trackStripeSubscriptionCheckoutStarted(input) {
+    var _a;
+    const checkoutSessionId = ((_a = input.checkoutSessionId) === null || _a === void 0 ? void 0 : _a.trim()) || '';
+    if (!checkoutSessionId) {
+        return 'missing_checkout_session';
+    }
+    const startedKey = buildCheckoutStorageKey('checkout_started', checkoutSessionId, input.runtimeConfig);
+    if (activeCheckoutStartedKeys.has(startedKey) ||
+        hasTrackedCheckoutSession('checkout_started', checkoutSessionId, input.runtimeConfig)) {
+        return 'already_tracked';
+    }
+    activeCheckoutStartedKeys.add(startedKey);
+    try {
+        const metadata = asRecord(input.metadata);
+        const conversionInput = {
+            eventId: checkoutSessionId,
+            featureFlags: input.featureFlags,
+            stepId: input.stepId,
+            stepName: input.stepName,
+            metadata: Object.assign(Object.assign({}, metadata), { checkoutSessionId, checkout_session_id: checkoutSessionId, environment: input.environment || metadata.environment }),
+        };
+        publicAnalyticsSdk.trackCheckoutStarted(conversionInput);
+        markCheckoutSessionTracked('checkout_started', checkoutSessionId, input.runtimeConfig);
+        await publicAnalyticsSdk.flush().catch(() => 0);
+        return 'tracked';
+    }
+    finally {
+        activeCheckoutStartedKeys.delete(startedKey);
+    }
+}
 export async function trackPaidStripeSubscriptionCheckoutCompleted(input) {
     var _a;
     const checkoutSessionId = ((_a = input.checkoutSessionId) === null || _a === void 0 ? void 0 : _a.trim()) || '';
     if (!checkoutSessionId) {
         return 'missing_checkout_session';
     }
-    const completionKey = buildCheckoutCompletedStorageKey(checkoutSessionId, input.runtimeConfig);
+    const completionKey = buildCheckoutStorageKey('checkout_completed', checkoutSessionId, input.runtimeConfig);
     if (activeCheckoutCompletionKeys.has(completionKey) ||
-        hasTrackedCheckoutSession(checkoutSessionId, input.runtimeConfig)) {
+        hasTrackedCheckoutSession('checkout_completed', checkoutSessionId, input.runtimeConfig)) {
         return 'already_tracked';
     }
     activeCheckoutCompletionKeys.add(completionKey);
@@ -59,12 +90,13 @@ export async function trackPaidStripeSubscriptionCheckoutCompleted(input) {
         const analyticsMetadata = asRecord(checkoutStatus.analyticsMetadata);
         const conversionInput = {
             eventId: checkoutSessionId,
+            featureFlags: input.featureFlags,
             stepId: input.stepId,
             stepName: input.stepName,
             metadata: Object.assign(Object.assign(Object.assign({}, asRecord(input.metadata)), analyticsMetadata), { checkoutSessionId, checkout_session_id: checkoutSessionId, checkout_session_status: checkoutStatus.status || undefined, payment_status: checkoutStatus.paymentStatus || undefined, environment: checkoutStatus.environment || input.environment || analyticsMetadata.environment }),
         };
         publicAnalyticsSdk.trackCheckoutCompleted(conversionInput);
-        markCheckoutSessionTracked(checkoutSessionId, input.runtimeConfig);
+        markCheckoutSessionTracked('checkout_completed', checkoutSessionId, input.runtimeConfig);
         await publicAnalyticsSdk.flush().catch(() => 0);
         return 'tracked';
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@funnelsgrove/payments",
-  "version": "0.1.39",
+  "version": "0.1.41",
   "type": "module",
   "private": false,
   "main": "./dist/index.js",
@@ -27,7 +27,7 @@
     "test:run": "vitest run --passWithNoTests"
   },
   "dependencies": {
-    "@funnelsgrove/analytics": "^0.1.13",
+    "@funnelsgrove/analytics": "^0.1.15",
     "@funnelsgrove/runtime": "^0.1.18",
     "@stripe/react-stripe-js": "^5.6.0",
     "@stripe/stripe-js": "^8.7.0",