@funnelsgrove/payments 0.1.48 → 0.1.50

package/README.md

@@ -22,13 +22,17 @@ Use these for new subscription paywalls:
 - `WalletSubscriptionCheckoutSlot`
 - `trackPaidStripeSubscriptionCheckoutCompleted`
 
+Use these for new one-time paywall plans:
+
+- `createStripePaymentIntent`
+- `SharedStripeCheckoutV2Dialog` with `checkoutMode="payment_intent"`
+
 Use `chargeStripeOneClickPayment` for post-checkout one-click upsells when the shared client helper fits the funnel. It delegates to `funnelSdkService.chargeOneClickPayment`.
 
 ## Compatibility-Only Surfaces
 
 Keep these exports available for saved drafts, old published artifacts, and controlled migrations. Do not use them for new subscription checkout work:
 
-- `createStripePaymentIntent`
 - `SharedStripeCheckoutDialog`
 - `ApplePaySubscribeButton`
 - `GooglePaySubscribeButton`
@@ -64,7 +68,7 @@ When a live funnel still uses one of these, migrate the funnel deliberately with
 - `services/planCatalog.service`: plan resolution and selection helpers.
 - `services/runtimeBillingPlanCatalog.service`: test/live runtime catalog selection.
 - `services/paywallOffer.service`: timed discount and display-plan helpers.
-- `services/stripe.service`: Stripe loader, checkout-session, hosted checkout, one-click, and compatibility PaymentIntent clients.
+- `services/stripe.service`: Stripe loader, checkout-session, hosted checkout, one-click, and one-time PaymentIntent clients.
 - `providers/*`: provider-neutral checkout state and Stripe subscription checkout slots.
 - `components/shared/*`: plan selector, checkout dialogs, Express Checkout wrappers, wallet placeholders, and trust assets.
 - `testing/walletCheckoutSmoke`: wallet checkout smoke assertions.
@@ -74,7 +78,9 @@ When a live funnel still uses one of these, migrate the funnel deliberately with
 - Keep provider-specific implementation under `src/providers/<provider>`.
 - Stripe owns real card fields and wallet controls. Local wallet buttons are placeholders until Stripe confirms availability.
 - Wallet unavailable state must fall back to card/manual checkout or disappear.
-- Do not create checkout sessions until the visitor taps a visible checkout CTA.
+- Do not count checkout intent until the visitor taps or confirms a visible checkout CTA.
+- Wallet slots may create render-only Checkout Sessions on mount so Apple Pay and Google Pay render before the visitor taps. These sessions must use `checkoutStartSource: 'wallet_render'`; trusted server `checkout_started` analytics ignores that source.
+- Funnel paywalls should style wallet buttons through the shared slot API: `className` for the Stripe button/placeholder, `slotClassName` for the outer slot, `appearance` for Stripe Elements appearance, and `options` for Stripe Express Checkout options.
 - Keep discount math reusable here, but keep offer activation timing in funnel code.
 - Checkout metadata must avoid sensitive raw query params and use `@funnelsgrove/analytics` metadata helpers.
 

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

@@ -1,5 +1,6 @@
 import { type ReactNode } from 'react';
 import type { Stripe } from '@stripe/stripe-js';
+import { type StripeSubscriptionCheckoutAnalyticsContext } from '../../services/checkoutCompletionAnalytics.service.js';
 export type SharedStripeCheckoutSummaryRow = {
     id: string;
     label: string;
@@ -8,6 +9,8 @@ export type SharedStripeCheckoutSummaryRow = {
 };
 export type SharedStripeCheckoutDialogProps = {
     amountCents: number;
+    checkoutAnalytics?: StripeSubscriptionCheckoutAnalyticsContext | null;
+    checkoutSessionId?: string | null;
     clientSecret: string;
     closeAriaLabel: string;
     customerEmailEditable?: boolean;
@@ -41,4 +44,4 @@ export type SharedStripeCheckoutDialogProps = {
 };
 export declare function useApplePayQrFallbackAllowed(): boolean;
 export declare function useApplePayExpressCheckoutAllowed(): boolean;
-export declare function SharedStripeCheckoutDialog({ clientSecret, onClose, stripePromise, ...props }: SharedStripeCheckoutDialogProps): import("react/jsx-runtime").JSX.Element;
+export declare function SharedStripeCheckoutDialog({ checkoutAnalytics, checkoutSessionId, clientSecret, onClose, stripePromise, ...props }: SharedStripeCheckoutDialogProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/shared/SharedStripeCheckoutDialog.js

@@ -16,6 +16,7 @@ import { CardCvcElement, CardExpiryElement, CardNumberElement, Elements, useElem
 import { ApplePaySubscribeButton } from './ApplePaySubscribeButton.js';
 import { PaymentBrandMark, SecurityLockIcon, StripeWordmark, } from './CheckoutBrandAssets.js';
 import { StripeExpressCheckoutButton } from './StripeExpressCheckoutButton.js';
+import { trackStripeSubscriptionCheckoutStarted, } from '../../services/checkoutCompletionAnalytics.service.js';
 const isValidEmail = (value) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value);
 const defaultPaymentMethodLabels = ['Visa', 'Mastercard', 'PayPal', 'G Pay', 'Apple Pay'];
 const normalizeBillingName = (input) => {
@@ -244,7 +245,13 @@ function SharedStripeCheckoutForm({ amountCents, clientSecret, closeAriaLabel, c
                                                     } }) })] })] })] }), fieldError ? _jsx("p", { className: 'shared-stripe-checkout-error', children: fieldError }) : null, _jsx("button", { type: 'submit', className: 'shared-stripe-checkout-submit', disabled: !canSubmit, children: submitting ? processingLabel : submitLabel }), _jsxs("div", { className: 'shared-stripe-checkout-trust', children: [_jsxs("p", { className: 'shared-stripe-checkout-secure', children: [_jsx(SecurityLockIcon, { className: 'shared-stripe-checkout-secure-icon' }), _jsx("span", { children: secureLabel })] }), _jsxs("p", { className: 'shared-stripe-checkout-powered', children: [poweredByText ? _jsx("span", { children: poweredByText }) : null, showsStripeWordmark ? (_jsx(StripeWordmark, { className: 'shared-stripe-checkout-powered-mark' })) : null] })] }), paymentMethodLabels.length > 0 ? (_jsx("div", { className: 'shared-stripe-checkout-brands', "aria-hidden": 'true', children: paymentMethodLabels.map((label) => (_jsx(PaymentBrandMark, { label: label, className: 'shared-stripe-checkout-brand' }, label))) })) : null, legalNotice ? (_jsx("div", { className: 'shared-stripe-checkout-legal', children: legalNotice })) : null, renewalNotice ? (_jsx("div", { className: 'shared-stripe-checkout-renewal', children: renewalNotice })) : null] })] }));
 }
 export function SharedStripeCheckoutDialog(_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"]);
+    useEffect(() => {
+        if (!checkoutAnalytics) {
+            return;
+        }
+        void trackStripeSubscriptionCheckoutStarted(Object.assign({ checkoutSessionId }, checkoutAnalytics));
+    }, [checkoutAnalytics, checkoutSessionId, clientSecret]);
     useEffect(() => {
         const handleKeyDown = (event) => {
             if (event.key === 'Escape') {

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

@@ -5,6 +5,7 @@ export type SharedStripeCheckoutV2DialogProps = {
     buttonColor: string;
     cardSubmitLabel: string;
     checkoutAnalytics?: StripeSubscriptionCheckoutAnalyticsContext | null;
+    checkoutMode?: 'checkout_session' | 'payment_intent';
     checkoutSessionId?: string | null;
     clientSecret: string;
     closeAriaLabel: string;
@@ -63,5 +64,5 @@ export type SharedCheckoutSpecialOfferDialogProps = {
     themeColor: string;
     title: string;
 };
-export declare function SharedStripeCheckoutV2Dialog({ checkoutAnalytics, checkoutSessionId, clientSecret, onClose, stripePromise, supportedCountries, ...props }: SharedStripeCheckoutV2DialogProps): import("react/jsx-runtime").JSX.Element;
+export declare function SharedStripeCheckoutV2Dialog({ checkoutAnalytics, checkoutMode, checkoutSessionId, clientSecret, onClose, stripePromise, supportedCountries, ...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

@@ -12,8 +12,10 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useEffect, useMemo, useState, } from 'react';
+import { Elements, PaymentElement as PaymentIntentPaymentElement, useElements, useStripe, } from '@stripe/react-stripe-js';
 import { CheckoutProvider, PaymentElement, useCheckout, } from '@stripe/react-stripe-js/checkout';
 import { PaymentBrandMark, SecurityLockIcon } from './CheckoutBrandAssets.js';
+import { StripeExpressCheckoutButton } from './StripeExpressCheckoutButton.js';
 import { StripeCheckoutExpressCheckoutButton } from './StripeCheckoutExpressCheckoutButton.js';
 import { getUnsupportedCheckoutCountryMessage, normalizeSupportedCheckoutCountries, } from './checkoutCountries.js';
 import { isInactiveCheckoutSessionError } from '../../providers/stripe/useStripeSubscriptionCheckoutSession.js';
@@ -59,7 +61,24 @@ function getFriendlyCardErrorMessage(error) {
         ? error.message
         : 'Payment failed. Please review your card details and try again.';
 }
-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, supportedCountries, themeColor, title, totalLabel, totalValue, unsupportedCountryMessage, walletButtonLabel, originalPriceLabel, originalPriceValue, }) {
+const normalizeBillingName = (input) => {
+    var _a, _b, _c;
+    const normalizedName = (_a = input.name) === null || _a === void 0 ? void 0 : _a.trim();
+    if (normalizedName) {
+        return normalizedName;
+    }
+    const normalizedEmail = (_b = input.email) === null || _b === void 0 ? void 0 : _b.trim();
+    if (normalizedEmail) {
+        const localPart = (_c = normalizedEmail
+            .split('@')[0]) === null || _c === void 0 ? void 0 : _c.replace(/[._-]+/g, ' ').trim();
+        if (localPart) {
+            return localPart;
+        }
+    }
+    return 'Customer';
+};
+const isSuccessfulIntentStatus = (status) => status === 'succeeded' || status === 'processing' || status === 'requires_capture';
+function SharedStripeCheckoutV2CheckoutSessionForm({ 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, supportedCountries, themeColor, title, totalLabel, totalValue, unsupportedCountryMessage, walletButtonLabel, originalPriceLabel, originalPriceValue, }) {
     const checkoutState = useCheckout();
     const walletPaymentMethods = usePlatformWalletPaymentMethods();
     const [selectedMethod, setSelectedMethod] = useState('wallet');
@@ -306,10 +325,272 @@ function SharedStripeCheckoutV2Form({ amountCents, buttonColor, cardSubmitLabel,
                                                         onCustomerEmailChange === null || onCustomerEmailChange === void 0 ? void 0 : onCustomerEmailChange(event.target.value);
                                                     } }) })] }), _jsx(PaymentElement, { options: paymentElementOptions, onChange: handlePaymentElementChange }), fixedBillingCountry && fixedBillingCountryLabel ? (_jsxs("label", { className: 'shared-checkout-v2-country-field', children: [_jsx("span", { className: 'shared-checkout-v2-country-label', children: "Country" }), _jsx("span", { className: 'shared-checkout-v2-country-control', children: _jsx("select", { "aria-label": 'Country', className: 'shared-checkout-v2-country-select', value: fixedBillingCountry, onChange: () => setBillingCountry(fixedBillingCountry), children: _jsx("option", { value: fixedBillingCountry, children: fixedBillingCountryLabel }) }) })] })) : null] }), 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 { checkoutAnalytics, checkoutSessionId, clientSecret, onClose, stripePromise, supportedCountries } = _a, props = __rest(_a, ["checkoutAnalytics", "checkoutSessionId", "clientSecret", "onClose", "stripePromise", "supportedCountries"]);
+function SharedStripeCheckoutV2PaymentIntentForm({ 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, onPaymentInfoSubmitted, onSuccess, paymentMethodLabels = defaultPaymentMethodLabels, promoActive, processingLabel, promoCode, promoCodeLabel, remainingSeconds, returnUrl, savedLabel, secureLabel, satisfactionLabel, satisfactionPercent, summaryLabel, supportedCountries, themeColor, title, totalLabel, totalValue, unsupportedCountryMessage, walletButtonLabel, originalPriceLabel, originalPriceValue, }) {
+    const stripe = useStripe();
+    const elements = useElements();
+    const walletPaymentMethods = usePlatformWalletPaymentMethods();
+    const [selectedMethod, setSelectedMethod] = useState('wallet');
+    const [walletAvailable, setWalletAvailable] = useState(initialWalletAvailable !== null && initialWalletAvailable !== void 0 ? initialWalletAvailable : null);
+    const effectiveWalletAvailable = initialWalletAvailable === true && walletAvailable !== false
+        ? true
+        : walletAvailable;
+    const [submitting, setSubmitting] = useState(false);
+    const [error, setError] = useState(null);
+    const [billingCountry, setBillingCountry] = useState(null);
+    const initialCustomerEmail = (customerEmail === null || customerEmail === void 0 ? void 0 : customerEmail.trim()) || '';
+    const [emailDraft, setEmailDraft] = useState(initialCustomerEmail);
     const normalizedSupportedCountries = useMemo(() => normalizeSupportedCheckoutCountries(supportedCountries), [supportedCountries]);
     const fixedBillingCountry = getFixedSupportedBillingCountry(normalizedSupportedCountries);
+    const fixedBillingCountryLabel = fixedBillingCountry
+        ? getCheckoutCountryLabel(fixedBillingCountry)
+        : null;
+    const cardBrandLabels = useMemo(() => paymentMethodLabels.length > 0 ? paymentMethodLabels : defaultPaymentMethodLabels, [paymentMethodLabels]);
+    const normalizedPromoCode = promoCode.trim();
+    const showPromo = promoActive !== null && promoActive !== void 0 ? promoActive : (discountPercent > 0 && normalizedPromoCode.length > 0);
+    const countdownValue = formatCountdown(remainingSeconds);
+    const resolvedCustomerEmail = customerEmailEditable
+        ? emailDraft.trim() || initialCustomerEmail
+        : initialCustomerEmail;
+    const emailFieldClassName = [
+        'shared-checkout-v2-email-field',
+        customerEmailEditable ? '' : 'is-disabled',
+    ]
+        .filter(Boolean)
+        .join(' ');
+    const checkoutStyle = {
+        '--shared-checkout-v2-theme-color': themeColor,
+        '--shared-checkout-v2-button-color': buttonColor,
+    };
+    const expressCheckoutSummaryLabel = (summaryLabel === null || summaryLabel === void 0 ? void 0 : summaryLabel.trim()) || discountLabel || title;
+    const walletAriaLabel = walletPaymentMethods
+        .map((method) => method === 'applePay' ? walletButtonLabel : 'Google Pay')
+        .join(' / ');
+    const showWalletMethod = effectiveWalletAvailable !== false && walletPaymentMethods.length > 0;
+    const effectiveSelectedMethod = showWalletMethod && selectedMethod === 'wallet' ? 'wallet' : 'card';
+    const expressCheckoutOptions = useMemo(() => {
+        return {
+            buttonHeight: 55,
+            buttonTheme: {
+                applePay: 'black',
+                googlePay: 'black',
+            },
+            buttonType: {
+                applePay: 'buy',
+                googlePay: 'buy',
+            },
+            layout: {
+                maxColumns: 1,
+                maxRows: 2,
+                overflow: 'auto',
+            },
+            lineItems: [
+                {
+                    name: expressCheckoutSummaryLabel,
+                    amount: amountCents,
+                },
+            ],
+            paymentMethodOrder: getStripeWalletPaymentMethodOrder(walletPaymentMethods),
+            paymentMethods: {
+                amazonPay: 'never',
+                applePay: walletPaymentMethods.includes('applePay') ? 'always' : 'never',
+                googlePay: walletPaymentMethods.includes('googlePay') ? 'always' : 'never',
+                klarna: 'never',
+                link: 'never',
+                paypal: 'never',
+            },
+        };
+    }, [amountCents, expressCheckoutSummaryLabel, walletPaymentMethods]);
+    const paymentElementOptions = useMemo(() => {
+        return Object.assign(Object.assign({ fields: {
+                billingDetails: {
+                    name: 'never',
+                    email: 'never',
+                    address: {
+                        country: fixedBillingCountry ? 'never' : 'auto',
+                    },
+                },
+            } }, (fixedBillingCountry
+            ? {
+                defaultValues: {
+                    billingDetails: {
+                        address: {
+                            country: fixedBillingCountry,
+                        },
+                    },
+                },
+            }
+            : {})), { layout: 'tabs', wallets: {
+                applePay: 'never',
+                googlePay: 'never',
+                link: 'never',
+            } });
+    }, [fixedBillingCountry]);
+    const setSharedError = (message) => {
+        setError(message);
+        onError === null || onError === void 0 ? void 0 : onError(message);
+    };
+    const selectWalletMethod = () => {
+        if (showWalletMethod) {
+            setSelectedMethod('wallet');
+        }
+    };
+    const selectCardMethod = () => setSelectedMethod('card');
+    const handleWalletAvailabilityChange = (available) => {
+        setWalletAvailable(available);
+        if (!available && selectedMethod === 'wallet') {
+            setSelectedMethod('card');
+        }
+    };
+    const getBillingCountryError = (country) => getUnsupportedCheckoutCountryMessage({
+        billingCountry: country,
+        message: unsupportedCountryMessage,
+        supportedCountries: normalizedSupportedCountries,
+    });
+    const handlePaymentElementChange = (event) => {
+        var _a, _b;
+        setBillingCountry((_b = (_a = event.value.billingDetails) === null || _a === void 0 ? void 0 : _a.address.country) !== null && _b !== void 0 ? _b : fixedBillingCountry);
+    };
+    const trackCheckoutSuccess = async () => {
+        await (onSuccess === null || onSuccess === void 0 ? void 0 : onSuccess());
+    };
+    useEffect(() => {
+        if (effectiveSelectedMethod !== 'card' || typeof window === 'undefined') {
+            return;
+        }
+        const resizeTimer = window.setTimeout(() => {
+            window.dispatchEvent(new Event('resize'));
+        }, 0);
+        return () => window.clearTimeout(resizeTimer);
+    }, [effectiveSelectedMethod]);
+    const commitCustomerEmail = async (normalizedEmail) => {
+        if (!customerEmailEditable || !onCustomerEmailCommit) {
+            return normalizedEmail;
+        }
+        const committedEmail = await onCustomerEmailCommit(normalizedEmail);
+        const nextEmail = typeof committedEmail === 'string' && committedEmail.trim()
+            ? committedEmail.trim()
+            : normalizedEmail;
+        setEmailDraft(nextEmail);
+        onCustomerEmailChange === null || onCustomerEmailChange === void 0 ? void 0 : onCustomerEmailChange(nextEmail);
+        return nextEmail;
+    };
+    const commitEmailDraftIfValid = (value) => {
+        const normalizedEmail = value.trim();
+        if (!customerEmailEditable || !onCustomerEmailCommit) {
+            return;
+        }
+        if (!normalizedEmail || !isValidEmail(normalizedEmail)) {
+            return;
+        }
+        void commitCustomerEmail(normalizedEmail).catch((commitError) => {
+            setSharedError(getFriendlyCardErrorMessage(commitError));
+        });
+    };
+    const ensureCustomerEmail = async () => {
+        const normalizedEmail = resolvedCustomerEmail.trim();
+        if (!normalizedEmail || !isValidEmail(normalizedEmail)) {
+            setSharedError(customerEmailInvalidMessage);
+            return null;
+        }
+        return commitCustomerEmail(normalizedEmail);
+    };
+    const handleSubmit = async (event) => {
+        var _a;
+        event.preventDefault();
+        if (!stripe || !elements || submitting) {
+            return;
+        }
+        const billingCountryError = getBillingCountryError(billingCountry !== null && billingCountry !== void 0 ? billingCountry : fixedBillingCountry);
+        if (billingCountryError) {
+            setSharedError(billingCountryError);
+            return;
+        }
+        setSubmitting(true);
+        setSharedError(null);
+        try {
+            const syncedEmail = await ensureCustomerEmail();
+            if (!syncedEmail) {
+                setSubmitting(false);
+                return;
+            }
+            const submitResult = await elements.submit();
+            if (submitResult.error) {
+                setSharedError(submitResult.error.message || 'Payment form is not ready yet.');
+                setSubmitting(false);
+                return;
+            }
+            await (onPaymentInfoSubmitted === null || onPaymentInfoSubmitted === void 0 ? void 0 : onPaymentInfoSubmitted());
+            const result = await stripe.confirmPayment({
+                elements,
+                confirmParams: {
+                    payment_method_data: {
+                        billing_details: {
+                            email: syncedEmail || undefined,
+                            name: normalizeBillingName({
+                                email: syncedEmail,
+                                name: customerName,
+                            }),
+                        },
+                    },
+                    return_url: returnUrl,
+                },
+                redirect: 'if_required',
+            });
+            if (result.error) {
+                const message = result.error.message || 'Payment failed.';
+                setSharedError(message);
+                setSubmitting(false);
+                return;
+            }
+            if (typeof window !== 'undefined' &&
+                isSuccessfulIntentStatus((_a = result.paymentIntent) === null || _a === void 0 ? void 0 : _a.status)) {
+                await trackCheckoutSuccess();
+                window.location.assign(returnUrl);
+                return;
+            }
+            setSubmitting(false);
+        }
+        catch (submitError) {
+            setSharedError(getFriendlyCardErrorMessage(submitError));
+            setSubmitting(false);
+        }
+    };
+    const visibleError = error;
+    return (_jsxs("div", { className: 'shared-checkout-v2-shell', style: checkoutStyle, children: [_jsxs("header", { className: 'shared-checkout-v2-header', children: [_jsx("button", { type: 'button', className: 'shared-checkout-v2-close', onClick: onClose, "aria-label": closeAriaLabel, children: _jsx("span", { "aria-hidden": 'true' }) }), _jsx("h2", { id: 'shared-checkout-v2-title', children: title })] }), _jsxs("section", { className: 'shared-checkout-v2-summary', children: [showPromo ? (_jsxs("p", { className: 'shared-checkout-v2-countdown', children: [discountPercent, "% ", countdownLabel, " ", countdownValue, " min"] })) : null, _jsxs("p", { className: 'shared-checkout-v2-satisfaction', children: [_jsx("strong", { children: satisfactionPercent }), " ", satisfactionLabel] }), showPromo ? (_jsxs("div", { className: 'shared-checkout-v2-price-stack', children: [_jsxs("div", { className: 'shared-checkout-v2-price-row is-muted', children: [_jsx("span", { children: originalPriceLabel }), _jsx("span", { className: 'shared-checkout-v2-strike', children: originalPriceValue })] }), _jsxs("div", { className: 'shared-checkout-v2-price-row is-discount', children: [_jsx("strong", { children: discountLabel }), _jsx("strong", { children: discountAmountLabel })] }), _jsxs("div", { className: 'shared-checkout-v2-promo', children: [_jsx("span", { children: promoCodeLabel }), _jsx("strong", { children: normalizedPromoCode })] })] })) : null, _jsxs("div", { className: [
+                            'shared-checkout-v2-total',
+                            showPromo ? '' : 'is-plain',
+                        ]
+                            .filter(Boolean)
+                            .join(' '), children: [_jsx("span", { children: totalLabel }), _jsxs("strong", { children: [_jsx("svg", { viewBox: '0 0 24 24', "aria-hidden": 'true', children: _jsx("path", { d: 'M20.6 13.4 12.4 21.6a2.2 2.2 0 0 1-3.1 0L2.4 14.7a2.2 2.2 0 0 1-.6-1.6V5.4a2 2 0 0 1 2-2h7.7a2.2 2.2 0 0 1 1.6.6l7.5 7.5a1.4 1.4 0 0 1 0 1.9ZM7.2 8.1a1.2 1.2 0 1 0 0-2.4 1.2 1.2 0 0 0 0 2.4Z' }) }), totalValue] })] }), showPromo ? (_jsxs("p", { className: 'shared-checkout-v2-saved', children: [_jsx("span", { "aria-hidden": 'true', children: "\uD83D\uDD25" }), savedLabel] })) : null] }), _jsxs("form", { className: 'shared-checkout-v2-payment', onSubmit: (event) => void handleSubmit(event), children: [showWalletMethod ? (_jsxs("div", { className: 'shared-checkout-v2-methods', role: 'tablist', "aria-label": 'Payment method', children: [_jsxs("button", { type: 'button', className: [
+                                    'shared-checkout-v2-method',
+                                    effectiveSelectedMethod === 'wallet' ? 'is-selected' : '',
+                                ]
+                                    .filter(Boolean)
+                                    .join(' '), onClick: selectWalletMethod, role: 'tab', "aria-selected": effectiveSelectedMethod === 'wallet', children: [_jsxs("span", { className: 'shared-checkout-v2-tab-wallets', "aria-hidden": 'true', children: [walletPaymentMethods.includes('applePay') ? (_jsx(PaymentBrandMark, { label: 'Apple Pay', className: 'shared-checkout-v2-tab-wallet' })) : null, walletPaymentMethods.includes('googlePay') ? (_jsx(PaymentBrandMark, { label: 'Google Pay', className: 'shared-checkout-v2-tab-wallet' })) : null] }), _jsx("span", { className: 'shared-checkout-v2-sr-only', children: walletAriaLabel })] }), _jsxs("button", { type: 'button', className: [
+                                    'shared-checkout-v2-method',
+                                    effectiveSelectedMethod === 'card' ? 'is-selected' : '',
+                                ]
+                                    .filter(Boolean)
+                                    .join(' '), onClick: selectCardMethod, role: 'tab', "aria-selected": effectiveSelectedMethod === 'card', children: [_jsx("strong", { children: "Credit card" }), _jsx("span", { className: 'shared-checkout-v2-tab-brands', "aria-hidden": 'true', children: cardBrandLabels.slice(0, 4).map((label) => (_jsx(PaymentBrandMark, { label: label, className: 'shared-checkout-v2-tab-brand' }, label))) })] })] })) : null, _jsxs("div", { hidden: effectiveSelectedMethod !== 'wallet', className: [
+                            'shared-checkout-v2-wallet-panel',
+                            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(StripeExpressCheckoutButton, { amountCents: amountCents, availabilityPaymentMethods: walletPaymentMethods, beforeConfirm: ensureCustomerEmail, className: 'shared-checkout-v2-express-buttons', 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' : '',
+                        ]
+                            .filter(Boolean)
+                            .join(' '), children: [_jsxs("div", { className: 'shared-checkout-v2-card-box', children: [_jsxs("label", { className: emailFieldClassName, children: [_jsx("span", { className: 'shared-checkout-v2-email-label', children: customerEmailLabel }), _jsx("span", { className: 'shared-checkout-v2-email-control', children: _jsx("input", { type: 'email', autoComplete: 'email', className: 'shared-checkout-v2-email-input', disabled: !customerEmailEditable, inputMode: 'email', readOnly: !customerEmailEditable, value: customerEmailEditable ? emailDraft : initialCustomerEmail, placeholder: customerEmailPlaceholder, onBlur: (event) => commitEmailDraftIfValid(event.currentTarget.value), onChange: (event) => {
+                                                        if (!customerEmailEditable) {
+                                                            return;
+                                                        }
+                                                        setEmailDraft(event.target.value);
+                                                        onCustomerEmailChange === null || onCustomerEmailChange === void 0 ? void 0 : onCustomerEmailChange(event.target.value);
+                                                    } }) })] }), _jsx(PaymentIntentPaymentElement, { options: paymentElementOptions, onChange: handlePaymentElementChange }), fixedBillingCountry && fixedBillingCountryLabel ? (_jsxs("label", { className: 'shared-checkout-v2-country-field', children: [_jsx("span", { className: 'shared-checkout-v2-country-label', children: "Country" }), _jsx("span", { className: 'shared-checkout-v2-country-control', children: _jsx("select", { "aria-label": 'Country', className: 'shared-checkout-v2-country-select', value: fixedBillingCountry, onChange: () => setBillingCountry(fixedBillingCountry), children: _jsx("option", { value: fixedBillingCountry, children: fixedBillingCountryLabel }) }) })] })) : null] }), 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] })] })] })] }));
+}
+function CheckoutSessionProvider({ children, clientSecret, fixedBillingCountry, stripePromise, }) {
+    const providerChildren = children;
     const checkoutProviderOptions = useMemo(() => (Object.assign(Object.assign({ clientSecret }, (fixedBillingCountry
         ? {
             defaultValues: {
@@ -323,12 +604,26 @@ export function SharedStripeCheckoutV2Dialog(_a) {
         : {})), { elementsOptions: {
             appearance: stripeCheckoutV2Appearance,
         } })), [clientSecret, fixedBillingCountry]);
+    return (_jsx(CheckoutProvider, { stripe: stripePromise, options: checkoutProviderOptions, children: providerChildren }, clientSecret));
+}
+function PaymentIntentProvider({ children, clientSecret, stripePromise, }) {
+    const providerChildren = children;
+    const elementsOptions = useMemo(() => ({
+        clientSecret,
+        appearance: stripeCheckoutV2Appearance,
+    }), [clientSecret]);
+    return (_jsx(Elements, { stripe: stripePromise, options: elementsOptions, children: providerChildren }, clientSecret));
+}
+export function SharedStripeCheckoutV2Dialog(_a) {
+    var { checkoutAnalytics, checkoutMode = 'checkout_session', checkoutSessionId, clientSecret, onClose, stripePromise, supportedCountries } = _a, props = __rest(_a, ["checkoutAnalytics", "checkoutMode", "checkoutSessionId", "clientSecret", "onClose", "stripePromise", "supportedCountries"]);
+    const normalizedSupportedCountries = useMemo(() => normalizeSupportedCheckoutCountries(supportedCountries), [supportedCountries]);
+    const fixedBillingCountry = getFixedSupportedBillingCountry(normalizedSupportedCountries);
     useEffect(() => {
-        if (!checkoutAnalytics) {
+        if (checkoutMode !== 'checkout_session' || !checkoutAnalytics) {
             return;
         }
         void trackStripeSubscriptionCheckoutStarted(Object.assign({ checkoutSessionId }, checkoutAnalytics));
-    }, [checkoutAnalytics, checkoutSessionId, clientSecret]);
+    }, [checkoutAnalytics, checkoutMode, checkoutSessionId, clientSecret]);
     useEffect(() => {
         const handleKeyDown = (event) => {
             if (event.key === 'Escape') {
@@ -338,7 +633,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, { checkoutAnalytics: checkoutAnalytics, checkoutSessionId: checkoutSessionId, clientSecret: clientSecret, onClose: onClose, supportedCountries: normalizedSupportedCountries })) }, 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: checkoutMode === 'payment_intent' ? (_jsx(PaymentIntentProvider, { clientSecret: clientSecret, stripePromise: stripePromise, children: _jsx(SharedStripeCheckoutV2PaymentIntentForm, Object.assign({}, props, { clientSecret: clientSecret, onClose: onClose, supportedCountries: normalizedSupportedCountries })) })) : (_jsx(CheckoutSessionProvider, { clientSecret: clientSecret, fixedBillingCountry: fixedBillingCountry, stripePromise: stripePromise, children: _jsx(SharedStripeCheckoutV2CheckoutSessionForm, Object.assign({}, props, { checkoutAnalytics: checkoutAnalytics, checkoutSessionId: checkoutSessionId, clientSecret: clientSecret, onClose: onClose, supportedCountries: normalizedSupportedCountries })) })) }) }), _jsx("style", { children: sharedStripeCheckoutV2Styles })] }));
 }
 function SharedCheckoutSpecialOfferGift({ discountLabel, imageAlt, imageSrc, }) {
     if (imageSrc) {

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

@@ -1,5 +1,7 @@
+import type { StripeCheckoutExpressCheckoutElementOptions } from '@stripe/stripe-js';
 import { type WalletSubscriptionCheckoutSlotProps } from './WalletSubscriptionCheckoutSlot.js';
-export type ApplePaySubscriptionCheckoutSlotProps = Omit<WalletSubscriptionCheckoutSlotProps, 'availabilityPaymentMethod' | 'expressCheckoutAllowed' | 'placeholderLabel' | 'renderPlaceholder' | 'renderPreparingPlaceholder'> & {
+export type ApplePaySubscriptionCheckoutSlotProps = Omit<WalletSubscriptionCheckoutSlotProps, 'availabilityPaymentMethod' | 'expressCheckoutAllowed' | 'options' | 'placeholderLabel' | 'renderPlaceholder' | 'renderPreparingPlaceholder'> & {
+    options?: Partial<StripeCheckoutExpressCheckoutElementOptions>;
     placeholderLabel?: string;
 };
-export declare function ApplePaySubscriptionCheckoutSlot({ placeholderLabel, ...slotProps }: ApplePaySubscriptionCheckoutSlotProps): import("react/jsx-runtime").JSX.Element;
+export declare function ApplePaySubscriptionCheckoutSlot({ options, placeholderLabel, ...slotProps }: ApplePaySubscriptionCheckoutSlotProps): import("react/jsx-runtime").JSX.Element;

package/dist/providers/stripe/ApplePaySubscriptionCheckoutSlot.js

@@ -13,7 +13,31 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx } from "react/jsx-runtime";
 import { ApplePaySubscribeButton } from '../../components/shared/ApplePaySubscribeButton.js';
 import { WalletSubscriptionCheckoutLoadingPlaceholder, WalletSubscriptionCheckoutSlot, } from './WalletSubscriptionCheckoutSlot.js';
+const applePayExpressCheckoutOptions = {
+    buttonHeight: 55,
+    buttonTheme: {
+        applePay: 'black',
+    },
+    buttonType: {
+        applePay: 'subscribe',
+    },
+    layout: {
+        maxColumns: 1,
+        maxRows: 1,
+        overflow: 'auto',
+    },
+    paymentMethodOrder: ['apple_pay'],
+    paymentMethods: {
+        amazonPay: 'never',
+        applePay: 'always',
+        googlePay: 'never',
+        klarna: 'never',
+        link: 'never',
+        paypal: 'never',
+    },
+};
 export function ApplePaySubscriptionCheckoutSlot(_a) {
-    var { placeholderLabel = 'Subscribe with Apple Pay' } = _a, slotProps = __rest(_a, ["placeholderLabel"]);
-    return (_jsx(WalletSubscriptionCheckoutSlot, Object.assign({}, slotProps, { availabilityPaymentMethod: 'applePay', placeholderLabel: placeholderLabel, renderPreparingPlaceholder: (placeholderProps) => (_jsx(WalletSubscriptionCheckoutLoadingPlaceholder, Object.assign({}, placeholderProps, { label: 'Loading Apple Pay' }))), renderPlaceholder: (placeholderProps) => (_jsx(ApplePaySubscribeButton, Object.assign({}, placeholderProps))) })));
+    var _b, _c, _d, _e, _f, _g, _h, _j, _k;
+    var { options, placeholderLabel = 'Subscribe with Apple Pay' } = _a, slotProps = __rest(_a, ["options", "placeholderLabel"]);
+    return (_jsx(WalletSubscriptionCheckoutSlot, Object.assign({}, slotProps, { availabilityPaymentMethod: 'applePay', options: Object.assign(Object.assign(Object.assign({}, applePayExpressCheckoutOptions), (options !== null && options !== void 0 ? options : {})), { buttonTheme: Object.assign(Object.assign({}, ((_b = applePayExpressCheckoutOptions.buttonTheme) !== null && _b !== void 0 ? _b : {})), ((_c = options === null || options === void 0 ? void 0 : options.buttonTheme) !== null && _c !== void 0 ? _c : {})), buttonType: Object.assign(Object.assign({}, ((_d = applePayExpressCheckoutOptions.buttonType) !== null && _d !== void 0 ? _d : {})), ((_e = options === null || options === void 0 ? void 0 : options.buttonType) !== null && _e !== void 0 ? _e : {})), layout: Object.assign(Object.assign({}, ((_f = applePayExpressCheckoutOptions.layout) !== null && _f !== void 0 ? _f : {})), ((_g = options === null || options === void 0 ? void 0 : options.layout) !== null && _g !== void 0 ? _g : {})), paymentMethods: Object.assign(Object.assign({}, ((_h = applePayExpressCheckoutOptions.paymentMethods) !== null && _h !== void 0 ? _h : {})), ((_j = options === null || options === void 0 ? void 0 : options.paymentMethods) !== null && _j !== void 0 ? _j : {})), paymentMethodOrder: (_k = options === null || options === void 0 ? void 0 : options.paymentMethodOrder) !== null && _k !== void 0 ? _k : applePayExpressCheckoutOptions.paymentMethodOrder }), placeholderLabel: placeholderLabel, renderPreparingPlaceholder: (placeholderProps) => (_jsx(WalletSubscriptionCheckoutLoadingPlaceholder, Object.assign({}, placeholderProps, { label: 'Loading Apple Pay' }))), renderPlaceholder: (placeholderProps) => (_jsx(ApplePaySubscribeButton, Object.assign({}, placeholderProps))) })));
 }

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

@@ -1,6 +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 { Appearance, 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;
@@ -27,6 +27,7 @@ export type WalletSubscriptionCheckoutSlotProps = {
     availabilityPaymentMethod: keyof AvailablePaymentMethods;
     beforeConfirm?: () => Promise<string | null>;
     checkoutAnalytics?: StripeSubscriptionCheckoutAnalyticsContext | null;
+    appearance?: Appearance;
     className?: string;
     customerEmail?: string | null;
     customerName?: string | null;
@@ -44,9 +45,10 @@ export type WalletSubscriptionCheckoutSlotProps = {
     renderPlaceholder: (props: WalletPlaceholderButtonProps) => ReactNode;
     returnUrl: string;
     session: StripeSubscriptionCheckoutSession;
+    slotClassName?: string;
     summaryLabel: string;
     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, 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 declare function WalletSubscriptionCheckoutSlot({ amountCents, appearance, availabilityPaymentMethod, beforeConfirm, checkoutAnalytics, className, customerEmail, customerName, disabled, expressCheckoutAllowed, onAvailabilityChange, onCancel, onError, onPaymentInfoSubmitted, onSuccess, onUnavailableClick, options, placeholderLabel, renderPreparingPlaceholder, renderPlaceholder, returnUrl, session, slotClassName, summaryLabel, suspended, }: WalletSubscriptionCheckoutSlotProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/providers/stripe/WalletSubscriptionCheckoutSlot.js

@@ -2,6 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { StripeExpressCheckoutElement } from '../../components/shared/StripeExpressCheckoutElement.js';
+import { trackStripeSubscriptionCheckoutStarted, } from '../../services/checkoutCompletionAnalytics.service.js';
 import { isInactiveCheckoutSessionError, } from './useStripeSubscriptionCheckoutSession.js';
 export function getWalletSubscriptionCheckoutRenderState({ expressCheckoutAllowed, hasActiveClientSecret, hasStripePromise, suspended, walletAvailable, walletPreparing, }) {
     const shouldRenderExpressCheckout = !suspended &&
@@ -27,12 +28,14 @@ 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, checkoutAnalytics, className, customerEmail, customerName, disabled = false, expressCheckoutAllowed = true, onAvailabilityChange, onCancel, onError, onPaymentInfoSubmitted, onSuccess, onUnavailableClick, options, placeholderLabel, renderPreparingPlaceholder, renderPlaceholder, returnUrl, session, summaryLabel, suspended = false, }) {
+export function WalletSubscriptionCheckoutSlot({ amountCents, appearance, availabilityPaymentMethod, beforeConfirm, checkoutAnalytics, className, customerEmail, customerName, disabled = false, expressCheckoutAllowed = true, onAvailabilityChange, onCancel, onError, onPaymentInfoSubmitted, onSuccess, onUnavailableClick, options, placeholderLabel, renderPreparingPlaceholder, renderPlaceholder, returnUrl, session, slotClassName, summaryLabel, suspended = false, }) {
     const [walletAvailability, setWalletAvailability] = useState({
         available: null,
         intentKey: session.intentKey,
     });
-    const autoWalletAttemptedIntentKeyRef = useRef(null);
+    const [walletCheckoutStartedAfterClickIntentKey, setWalletCheckoutStartedAfterClickIntentKey] = useState(null);
+    const autoWalletPreparationIntentKeyRef = useRef(null);
+    const walletCheckoutStartedAfterClickSessionIdRef = useRef(null);
     const slotDisabled = disabled || !session.configured;
     const walletAvailable = walletAvailability.intentKey === session.intentKey
         ? walletAvailability.available
@@ -70,35 +73,61 @@ export function WalletSubscriptionCheckoutSlot({ amountCents, availabilityPaymen
             suspended ||
             !expressCheckoutAllowed ||
             walletAvailable === false ||
+            session.loading.wallet ||
             session.activeClientSecret) {
             return;
         }
-        const requestKey = session.intentKey;
-        if (autoWalletAttemptedIntentKeyRef.current === requestKey) {
+        if (autoWalletPreparationIntentKeyRef.current === session.intentKey) {
             return;
         }
-        autoWalletAttemptedIntentKeyRef.current = requestKey;
-        void (async () => {
-            const readyClientSecret = await session.prepareWalletCheckout();
+        autoWalletPreparationIntentKeyRef.current = session.intentKey;
+        void session
+            .prepareWalletCheckout({
+            checkoutStartSource: 'wallet_render',
+        })
+            .then((readyClientSecret) => {
             if (!readyClientSecret) {
-                reportWalletPreparationFailure(requestKey);
+                reportWalletPreparationFailure(session.intentKey);
             }
-        })();
+        });
     }, [
         expressCheckoutAllowed,
         reportWalletPreparationFailure,
-        session,
+        session.activeClientSecret,
+        session.intentKey,
+        session.loading.wallet,
+        session.prepareWalletCheckout,
         slotDisabled,
         suspended,
         walletAvailable,
     ]);
+    useEffect(() => {
+        if (!walletCheckoutStartedAfterClickIntentKey ||
+            walletCheckoutStartedAfterClickIntentKey !== session.intentKey ||
+            !session.checkoutSessionId) {
+            return;
+        }
+        if (!checkoutAnalytics ||
+            walletCheckoutStartedAfterClickSessionIdRef.current === session.checkoutSessionId) {
+            return;
+        }
+        walletCheckoutStartedAfterClickSessionIdRef.current = session.checkoutSessionId;
+        void trackStripeSubscriptionCheckoutStarted(Object.assign({ checkoutSessionId: session.checkoutSessionId }, checkoutAnalytics));
+    }, [
+        checkoutAnalytics,
+        session.checkoutSessionId,
+        session.intentKey,
+        walletCheckoutStartedAfterClickIntentKey,
+    ]);
     const handleError = (message) => {
         if (isInactiveCheckoutSessionError(message)) {
             setWalletAvailability({
                 available: null,
                 intentKey: session.intentKey,
             });
-            void session.restartWalletCheckout();
+            void session.restartWalletCheckout({
+                checkoutStartSource: 'wallet_render',
+            });
             return;
         }
         session.setError(message);
@@ -115,8 +144,12 @@ export function WalletSubscriptionCheckoutSlot({ amountCents, availabilityPaymen
             await (onUnavailableClick === null || onUnavailableClick === void 0 ? void 0 : onUnavailableClick());
             return;
         }
-        const readyClientSecret = await session.prepareWalletCheckout();
+        setWalletCheckoutStartedAfterClickIntentKey(session.intentKey);
+        const readyClientSecret = await session.prepareWalletCheckout({
+            checkoutStartSource: 'wallet_render',
+        });
         if (!readyClientSecret) {
+            setWalletCheckoutStartedAfterClickIntentKey(null);
             reportWalletPreparationFailure(session.intentKey);
         }
     };
@@ -125,13 +158,14 @@ export function WalletSubscriptionCheckoutSlot({ amountCents, availabilityPaymen
         : renderPlaceholder;
     return (_jsxs(_Fragment, { children: [shouldRenderPlaceholder || shouldRenderExpressCheckout ? (_jsxs("div", { className: [
                     'wallet-subscription-checkout-slot',
+                    slotClassName !== null && slotClassName !== void 0 ? slotClassName : '',
                     placeholderIsPreparing ? 'is-loading' : '',
                     shouldRenderExpressCheckout ? 'has-express-checkout' : '',
                 ]
                     .filter(Boolean)
                     .join(' '), "aria-busy": placeholderIsPreparing || undefined, children: [shouldRenderExpressCheckout &&
                         session.activeClientSecret &&
-                        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({
+                        session.stripePromise ? (_jsx(StripeExpressCheckoutElement, { amountCents: amountCents, appearance: appearance, availabilityPaymentMethods: [availabilityPaymentMethod], beforeConfirm: beforeConfirm, checkoutAnalytics: checkoutAnalytics, checkoutSessionId: session.checkoutSessionId, className: className, clientSecret: session.activeClientSecret, customerEmail: customerEmail, customerName: customerName, onAvailabilityChange: handleAvailabilityChange, onCancel: onCancel, onError: handleError, onPaymentInfoSubmitted: onPaymentInfoSubmitted, onSuccess: onSuccess, options: options, returnUrl: returnUrl, serverUpdateKey: serverUpdateKey, stripePromise: session.stripePromise, summaryLabel: summaryLabel, onServerUpdate: session.updateCheckoutSessionPlan })) : null, shouldRenderPlaceholder ? (_jsx("div", { className: 'wallet-subscription-checkout-slot__placeholder', children: placeholderRenderer({
                             className,
                             disabled: slotDisabled,
                             label: placeholderLabel,

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

@@ -16,6 +16,10 @@ export type StripeSubscriptionCheckoutSessionInput = {
     runtimeConfig?: StripeRuntimeConfigOverrides;
     userId?: string | null;
 };
+export type StripeSubscriptionCheckoutPreparationOptions = {
+    checkoutStartSource?: 'card_click' | 'wallet_click' | 'wallet_render' | (string & {});
+    forceNew?: boolean;
+};
 export type StripeSubscriptionCheckoutSession = {
     activeClientSecret: string | null;
     activePlanKey: string | null;
@@ -24,12 +28,12 @@ export type StripeSubscriptionCheckoutSession = {
     error: string | null;
     intentKey: string;
     loading: CheckoutPreparationLoading;
-    prepareCardCheckout: () => Promise<string | null>;
-    prepareWalletCheckout: () => Promise<string | null>;
+    prepareCardCheckout: (options?: StripeSubscriptionCheckoutPreparationOptions) => Promise<string | null>;
+    prepareWalletCheckout: (options?: StripeSubscriptionCheckoutPreparationOptions) => Promise<string | null>;
     provider: 'stripe';
     reset: () => void;
-    restartCardCheckout: () => Promise<string | null>;
-    restartWalletCheckout: () => Promise<string | null>;
+    restartCardCheckout: (options?: StripeSubscriptionCheckoutPreparationOptions) => Promise<string | null>;
+    restartWalletCheckout: (options?: StripeSubscriptionCheckoutPreparationOptions) => Promise<string | null>;
     planKey: string;
     setError: (message: string | null) => void;
     stripePromise: Promise<Stripe | null> | null;

package/dist/providers/stripe/useStripeSubscriptionCheckoutSession.js

@@ -10,6 +10,14 @@ const getFriendlyStripeCheckoutError = (error) => {
 };
 const normalizeRuntimeConfigValue = (value) => (value === null || value === void 0 ? void 0 : value.trim()) || '';
 const useIsomorphicLayoutEffect = typeof window === 'undefined' ? useEffect : useLayoutEffect;
+const buildCheckoutPreparationAnalyticsMetadata = (analyticsMetadata, options = {}) => {
+    var _a;
+    const checkoutStartSource = (_a = options.checkoutStartSource) === null || _a === void 0 ? void 0 : _a.trim();
+    if (!checkoutStartSource) {
+        return analyticsMetadata;
+    }
+    return Object.assign(Object.assign({}, (analyticsMetadata !== null && analyticsMetadata !== void 0 ? analyticsMetadata : {})), { checkoutStartSource });
+};
 export function buildStripeSubscriptionCheckoutIntentKey({ checkoutMode, couponId, customerEmail, returnUrl, runtimeConfig, userId, }) {
     const runtimeConfigSignature = [
         normalizeRuntimeConfigValue(runtimeConfig === null || runtimeConfig === void 0 ? void 0 : runtimeConfig.apiBaseUrl),
@@ -110,8 +118,9 @@ export function useStripeSubscriptionCheckoutSession({ checkoutMode, analyticsMe
             ? current
             : Object.assign(Object.assign({}, current), { [source]: value }));
     }, []);
-    const createCheckoutSubscription = useCallback(async (forceNew = false) => {
+    const createCheckoutSubscription = useCallback(async (options = {}) => {
         var _a;
+        const forceNew = options.forceNew === true;
         if (!configured || !plan || !displayPlan) {
             return null;
         }
@@ -133,7 +142,7 @@ export function useStripeSubscriptionCheckoutSession({ checkoutMode, analyticsMe
             try {
                 const response = await createStripeSubscriptionCheckout({
                     plan,
-                    analyticsMetadata: analyticsMetadataRef.current,
+                    analyticsMetadata: buildCheckoutPreparationAnalyticsMetadata(analyticsMetadataRef.current, options),
                     couponId,
                     customerEmail,
                     returnUrl,
@@ -192,6 +201,7 @@ export function useStripeSubscriptionCheckoutSession({ checkoutMode, analyticsMe
         userId,
     ]);
     const prepareCheckout = useCallback(async (source, options = {}) => {
+        var _a;
         if (!configured || !plan || !displayPlan) {
             return null;
         }
@@ -201,7 +211,7 @@ export function useStripeSubscriptionCheckoutSession({ checkoutMode, analyticsMe
         setSourceLoading(source, true);
         setError(null);
         try {
-            return await createCheckoutSubscription(options.forceNew === true);
+            return await createCheckoutSubscription(Object.assign(Object.assign({}, options), { checkoutStartSource: (_a = options.checkoutStartSource) !== null && _a !== void 0 ? _a : (source === 'wallet' ? 'wallet_render' : 'card_click') }));
         }
         finally {
             setSourceLoading(source, false);
@@ -215,10 +225,10 @@ export function useStripeSubscriptionCheckoutSession({ checkoutMode, analyticsMe
         setError,
         setSourceLoading,
     ]);
-    const prepareCardCheckout = useCallback(() => prepareCheckout('card'), [prepareCheckout]);
-    const prepareWalletCheckout = useCallback(() => prepareCheckout('wallet'), [prepareCheckout]);
-    const restartCardCheckout = useCallback(() => prepareCheckout('card', { forceNew: true }), [prepareCheckout]);
-    const restartWalletCheckout = useCallback(() => prepareCheckout('wallet', { forceNew: true }), [prepareCheckout]);
+    const prepareCardCheckout = useCallback((options = {}) => prepareCheckout('card', options), [prepareCheckout]);
+    const prepareWalletCheckout = useCallback((options = {}) => prepareCheckout('wallet', options), [prepareCheckout]);
+    const restartCardCheckout = useCallback((options = {}) => prepareCheckout('card', Object.assign(Object.assign({}, options), { forceNew: true })), [prepareCheckout]);
+    const restartWalletCheckout = useCallback((options = {}) => prepareCheckout('wallet', Object.assign(Object.assign({}, options), { forceNew: true })), [prepareCheckout]);
     const updateCheckoutSessionPlan = useCallback(async () => {
         if (!configured || !plan || !displayPlan || !activeCheckoutSessionId) {
             return false;

package/dist/testing/walletCheckoutSmoke.d.ts

@@ -1,4 +1,4 @@
-export type WalletCheckoutSmokeProfileId = 'mobile-safari' | 'mobile-chrome';
+export type WalletCheckoutSmokeProfileId = 'mobile-safari' | 'mobile-chrome' | 'instagram-ios' | 'instagram-android';
 export type WalletCheckoutSmokeProfile = {
     id: WalletCheckoutSmokeProfileId;
     name: string;

package/dist/testing/walletCheckoutSmoke.js

@@ -22,6 +22,28 @@ export function buildWalletCheckoutSmokeProfiles() {
                 isMobile: true,
             },
         },
+        {
+            id: 'instagram-ios',
+            name: 'Instagram iOS in-app browser',
+            userAgent: 'Mozilla/5.0 (iPhone; CPU iPhone OS 17_5 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Mobile/15E148 Instagram 333.0.0.36.109 (iPhone16,2; iOS 17_5; en_US; en-US; scale=3.00; 1290x2796; 579418012)',
+            viewport: {
+                width: 390,
+                height: 844,
+                hasTouch: true,
+                isMobile: true,
+            },
+        },
+        {
+            id: 'instagram-android',
+            name: 'Instagram Android in-app browser',
+            userAgent: 'Mozilla/5.0 (Linux; Android 14; Pixel 8 Build/AP2A.240605.024; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/126.0.0.0 Mobile Safari/537.36 Instagram 333.0.0.39.92 Android (34/14; 420dpi; 1080x2400; Google/google; Pixel 8; shiba; shiba; en_US; 579418012)',
+            viewport: {
+                width: 412,
+                height: 915,
+                hasTouch: true,
+                isMobile: true,
+            },
+        },
     ];
 }
 export function evaluateWalletCheckoutSmokeSnapshot(snapshot) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@funnelsgrove/payments",
-  "version": "0.1.48",
+  "version": "0.1.50",
   "type": "module",
   "private": false,
   "main": "./dist/index.js",