@funnelsgrove/payments 0.1.34 → 0.1.36

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

@@ -0,0 +1,146 @@
+import { type FormEvent } from 'react';
+import type { RuntimeMode } from '@funnelsgrove/runtime';
+import type { StripeRuntimeConfigOverrides, PaywallPlan } from '../../services/stripe.service.js';
+import type { PaywallDisplayPlan } from '../../services/paywallOffer.service.js';
+import { type PlatformWalletPaymentMethod } from './walletPlatform.js';
+import { type StripeSubscriptionCheckoutSession } from '../../providers/stripe/useStripeSubscriptionCheckoutSession.js';
+export type PaywallSubscriptionCheckoutContent = {
+    title: string;
+    closeAriaLabel: string;
+    walletButtonLabel: string;
+    customerEmailLabel: string;
+    customerEmailPlaceholder: string;
+    customerEmailInvalidMessage: string;
+    walletEmailPromptTitle: string;
+    walletEmailPromptDescription: string;
+    walletEmailPromptSubmitLabel: string;
+    walletEmailPromptCancelLabel: string;
+    countdownLabel: string;
+    satisfactionPercent: string;
+    satisfactionLabel: string;
+    originalPriceLabel: string;
+    discountRowLabelTemplate: string;
+    promoCodeLabel: string;
+    savedLabelTemplate: string;
+    totalLabel: string;
+    cardSubmitLabel: string;
+    paypalLabel: string;
+    paypalButtonLabel: string;
+    processingLabel: string;
+    secureLabel: string;
+    paymentMethodLabels: readonly string[];
+    specialOffer: {
+        image?: {
+            src?: string;
+            alt?: string;
+        };
+        discountLabel: string;
+        title: string;
+        description: string;
+        buttonLabel: string;
+    };
+};
+export type PaywallSubscriptionPaymentStackContent = {
+    cardButtonLabel: string;
+    googlePayPlaceholderLabel: string;
+    metaLabels: readonly string[];
+    stripeUnavailableNote: string;
+    supportText: string;
+    walletPlaceholderLabel: string;
+};
+type PaywallCheckoutCloseDiscountState = {
+    stage: string;
+    status: string;
+};
+export type UsePaywallSubscriptionCheckoutControllerInput = {
+    analyticsMetadata?: Record<string, unknown> | null;
+    appliedDiscountAmountCents: number;
+    checkoutDiscountPercent: number;
+    checkoutMode: RuntimeMode;
+    checkoutPromoActive: boolean;
+    content: PaywallSubscriptionCheckoutContent;
+    customerEmailEditable: boolean;
+    customerName?: string | null;
+    discountState?: PaywallCheckoutCloseDiscountState | null;
+    initialCustomerEmail?: string | null;
+    onCheckoutCompleted?: () => Promise<void> | void;
+    onCheckoutStarted?: () => Promise<void> | void;
+    onCustomerEmailCommit: (email: string) => Promise<string>;
+    onFirstCheckoutClosed?: () => void;
+    plan: PaywallPlan | null;
+    returnUrl: string;
+    runtimeConfig?: StripeRuntimeConfigOverrides;
+    selectedDisplayPlan: PaywallDisplayPlan | null;
+    supportEmail: string;
+    userId?: string | null;
+    getReturnUrl?: (checkoutSessionId?: string | null) => string;
+};
+export type PaywallSubscriptionCheckoutController = {
+    checkoutDialogOpen: boolean;
+    checkoutDialogReady: boolean;
+    checkoutDisabled: boolean;
+    checkoutDiscountAmountLabel: string;
+    checkoutDiscountLabel: string;
+    checkoutInitialWalletAvailable: boolean | null;
+    checkoutSavedLabel: string;
+    checkoutSession: StripeSubscriptionCheckoutSession;
+    checkoutSuccessReturnUrl: string;
+    checkoutSummaryLabel: string;
+    checkoutTotalValue: string;
+    closeCheckoutDialog: () => void;
+    commitCheckoutEmail: (draftEmail: string) => Promise<string>;
+    customerEmail: string;
+    customerEmailEditable: boolean;
+    customerName: string;
+    error: string | null;
+    handleApplePayAvailabilityChange: (available: boolean) => void;
+    handleGooglePayAvailabilityChange: (available: boolean) => void;
+    openCardCheckoutFromUnavailableWallet: () => Promise<void>;
+    preparePaywallWalletCheckout: () => Promise<string | null>;
+    setCheckoutEmail: (value: string) => void;
+    startCheckout: () => Promise<void>;
+    supportEmail: string;
+    trackCheckoutCompleted: () => Promise<void>;
+    walletEmailPromptCancel: () => void;
+    walletEmailPromptDraft: string;
+    walletEmailPromptError: string | null;
+    walletEmailPromptOpen: boolean;
+    walletEmailPromptSubmit: (event: FormEvent<HTMLFormElement>) => Promise<void>;
+    walletPaymentMethods: readonly PlatformWalletPaymentMethod[];
+    setWalletEmailPromptDraft: (value: string) => void;
+};
+export declare function usePaywallSubscriptionCheckoutController({ analyticsMetadata, appliedDiscountAmountCents, checkoutDiscountPercent, checkoutMode, checkoutPromoActive, content, customerEmailEditable, customerName, discountState, getReturnUrl, initialCustomerEmail, onCheckoutCompleted, onCheckoutStarted, onCustomerEmailCommit, onFirstCheckoutClosed, plan, returnUrl, runtimeConfig, selectedDisplayPlan, supportEmail, userId, }: UsePaywallSubscriptionCheckoutControllerInput): PaywallSubscriptionCheckoutController;
+export type PaywallSubscriptionCheckoutDialogsProps = {
+    buttonColor?: string;
+    content: PaywallSubscriptionCheckoutContent;
+    controller: PaywallSubscriptionCheckoutController;
+    discountPercent: number;
+    promoActive: boolean;
+    promoDisplayName: string;
+    remainingSeconds: number;
+    selectedDisplayPlan: PaywallDisplayPlan | null;
+    specialOfferDialogOpen: boolean;
+    themeColor?: string;
+    onSpecialOfferAccept: () => void;
+};
+export declare function PaywallSubscriptionCheckoutDialogs({ buttonColor, content, controller, discountPercent, promoActive, promoDisplayName, remainingSeconds, selectedDisplayPlan, specialOfferDialogOpen, themeColor, onSpecialOfferAccept, }: PaywallSubscriptionCheckoutDialogsProps): import("react/jsx-runtime").JSX.Element;
+export type PaywallSubscriptionPaymentStackProps = {
+    applePayButtonClassName?: string;
+    applePayShellClassName?: string;
+    cardButtonClassName?: string;
+    className?: string;
+    content: PaywallSubscriptionPaymentStackContent;
+    controller: PaywallSubscriptionCheckoutController;
+    disclaimerClassName?: string;
+    errorClassName?: string;
+    googlePayButtonClassName?: string;
+    googlePayShellClassName?: string;
+    metaClassName?: string;
+    noteClassName?: string;
+    paymentDisclaimer: string;
+    selectedDisplayPlan: PaywallDisplayPlan | null;
+    supportClassName?: string;
+    walletSuspended: boolean;
+};
+export declare function PaywallSubscriptionPaymentStack({ applePayButtonClassName, applePayShellClassName, cardButtonClassName, className, content, controller, disclaimerClassName, errorClassName, googlePayButtonClassName, googlePayShellClassName, metaClassName, noteClassName, paymentDisclaimer, selectedDisplayPlan, supportClassName, walletSuspended, }: PaywallSubscriptionPaymentStackProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/shared/PaywallSubscriptionCheckout.js

@@ -0,0 +1,340 @@
+'use client';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { ApplePaySubscriptionCheckoutSlot, } from '../../providers/stripe/ApplePaySubscriptionCheckoutSlot.js';
+import { GooglePaySubscriptionCheckoutSlot, } from '../../providers/stripe/GooglePaySubscriptionCheckoutSlot.js';
+import { SharedCheckoutSpecialOfferDialog, SharedStripeCheckoutV2Dialog, } from './SharedStripeCheckoutV2Dialog.js';
+import { usePlatformWalletPaymentMethods } from './walletPlatform.js';
+import { useStripeSubscriptionCheckoutSession, } from '../../providers/stripe/useStripeSubscriptionCheckoutSession.js';
+const checkoutCurrencyFormatter = new Intl.NumberFormat('en-US', {
+    currency: 'USD',
+    maximumFractionDigits: 2,
+    minimumFractionDigits: 2,
+    style: 'currency',
+});
+function formatCheckoutAmount(amountCents) {
+    return checkoutCurrencyFormatter.format(amountCents / 100);
+}
+function getErrorMessage(error, fallback) {
+    return error instanceof Error && error.message ? error.message : fallback;
+}
+export function usePaywallSubscriptionCheckoutController({ analyticsMetadata, appliedDiscountAmountCents, checkoutDiscountPercent, checkoutMode, checkoutPromoActive, content, customerEmailEditable, customerName, discountState, getReturnUrl, initialCustomerEmail, onCheckoutCompleted, onCheckoutStarted, onCustomerEmailCommit, onFirstCheckoutClosed, plan, returnUrl, runtimeConfig, selectedDisplayPlan, supportEmail, userId, }) {
+    var _a, _b, _c, _d;
+    const walletPaymentMethods = usePlatformWalletPaymentMethods();
+    const [checkoutDialogOpen, setCheckoutDialogOpen] = useState(false);
+    const [checkoutEmail, setCheckoutEmail] = useState((_a = initialCustomerEmail === null || initialCustomerEmail === void 0 ? void 0 : initialCustomerEmail.trim()) !== null && _a !== void 0 ? _a : '');
+    const [error, setError] = useState(null);
+    const [paywallWalletAvailability, setPaywallWalletAvailability] = useState({
+        intentKey: '',
+        methods: {},
+    });
+    const [walletEmailPromptOpen, setWalletEmailPromptOpen] = useState(false);
+    const [walletEmailPromptDraft, setWalletEmailPromptDraft] = useState('');
+    const [walletEmailPromptError, setWalletEmailPromptError] = useState(null);
+    const walletEmailResolverRef = useRef(null);
+    const checkoutSummaryLabel = ((_b = selectedDisplayPlan === null || selectedDisplayPlan === void 0 ? void 0 : selectedDisplayPlan.checkoutSummaryLabel) === null || _b === void 0 ? void 0 : _b.trim()) || (selectedDisplayPlan === null || selectedDisplayPlan === void 0 ? void 0 : selectedDisplayPlan.title) || 'Selected plan';
+    const checkoutDiscountLabel = checkoutPromoActive
+        ? content.discountRowLabelTemplate.replace('{percent}', String(checkoutDiscountPercent))
+        : '';
+    const checkoutDiscountAmountLabel = checkoutPromoActive
+        ? `-${formatCheckoutAmount(appliedDiscountAmountCents)}`
+        : '';
+    const checkoutSavedLabel = checkoutPromoActive
+        ? content.savedLabelTemplate
+            .replace('{amount}', formatCheckoutAmount(appliedDiscountAmountCents))
+            .replace('{percent}', String(checkoutDiscountPercent))
+        : '';
+    const checkoutTotalValue = useMemo(() => {
+        var _a;
+        if (!selectedDisplayPlan) {
+            return '';
+        }
+        return ((_a = selectedDisplayPlan.priceLabel.split('/')[0]) === null || _a === void 0 ? void 0 : _a.trim()) || selectedDisplayPlan.priceLabel;
+    }, [selectedDisplayPlan]);
+    const successReturnUrl = useMemo(() => (getReturnUrl === null || getReturnUrl === void 0 ? void 0 : getReturnUrl()) || returnUrl, [getReturnUrl, returnUrl]);
+    const checkoutSession = useStripeSubscriptionCheckoutSession({
+        analyticsMetadata,
+        checkoutMode,
+        couponId: checkoutPromoActive ? (_c = selectedDisplayPlan === null || selectedDisplayPlan === void 0 ? void 0 : selectedDisplayPlan.couponId) !== null && _c !== void 0 ? _c : null : null,
+        customerEmail: checkoutEmail || initialCustomerEmail,
+        displayPlan: selectedDisplayPlan,
+        onError: setError,
+        plan,
+        returnUrl: successReturnUrl,
+        runtimeConfig,
+        userId,
+    });
+    const checkoutDisabled = !checkoutSession.configured || !plan || !selectedDisplayPlan || !userId;
+    const checkoutDialogReady = checkoutDialogOpen &&
+        Boolean(checkoutSession.activeClientSecret) &&
+        Boolean(checkoutSession.stripePromise) &&
+        Boolean(selectedDisplayPlan);
+    const checkoutSuccessReturnUrl = useMemo(() => (getReturnUrl === null || getReturnUrl === void 0 ? void 0 : getReturnUrl(checkoutSession.checkoutSessionId)) || returnUrl, [checkoutSession.checkoutSessionId, getReturnUrl, returnUrl]);
+    const currentPaywallWalletAvailability = paywallWalletAvailability.intentKey === checkoutSession.intentKey
+        ? paywallWalletAvailability.methods
+        : {};
+    const checkoutInitialWalletAvailable = walletPaymentMethods.some((method) => currentPaywallWalletAvailability[method] === true)
+        ? true
+        : null;
+    useEffect(() => {
+        const timeoutId = window.setTimeout(() => {
+            var _a;
+            setCheckoutEmail((_a = initialCustomerEmail === null || initialCustomerEmail === void 0 ? void 0 : initialCustomerEmail.trim()) !== null && _a !== void 0 ? _a : '');
+        }, 0);
+        return () => window.clearTimeout(timeoutId);
+    }, [initialCustomerEmail]);
+    useEffect(() => {
+        return () => {
+            var _a;
+            (_a = walletEmailResolverRef.current) === null || _a === void 0 ? void 0 : _a.call(walletEmailResolverRef, null);
+            walletEmailResolverRef.current = null;
+        };
+    }, []);
+    const updatePaywallWalletAvailability = (method, available) => {
+        setPaywallWalletAvailability((current) => {
+            const currentMethods = current.intentKey === checkoutSession.intentKey ? current.methods : {};
+            return {
+                intentKey: checkoutSession.intentKey,
+                methods: Object.assign(Object.assign({}, currentMethods), { [method]: available }),
+            };
+        });
+    };
+    const handleApplePayAvailabilityChange = (available) => updatePaywallWalletAvailability('applePay', available);
+    const handleGooglePayAvailabilityChange = (available) => updatePaywallWalletAvailability('googlePay', available);
+    const trackCheckoutStarted = async () => {
+        await (onCheckoutStarted === null || onCheckoutStarted === void 0 ? void 0 : onCheckoutStarted());
+    };
+    const startCheckout = async () => {
+        if (checkoutDisabled || checkoutSession.loading.card) {
+            return;
+        }
+        await trackCheckoutStarted();
+        if (checkoutSession.activeClientSecret) {
+            setCheckoutDialogOpen(true);
+            return;
+        }
+        const readyClientSecret = await checkoutSession.prepareCardCheckout();
+        if (readyClientSecret) {
+            setCheckoutDialogOpen(true);
+        }
+    };
+    const trackCheckoutCompleted = async () => {
+        await (onCheckoutCompleted === null || onCheckoutCompleted === void 0 ? void 0 : onCheckoutCompleted());
+    };
+    const commitCheckoutEmail = async (draftEmail) => {
+        var _a;
+        const normalizedEmail = draftEmail.trim();
+        if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(normalizedEmail)) {
+            throw new Error(content.customerEmailInvalidMessage);
+        }
+        if (normalizedEmail === ((_a = initialCustomerEmail === null || initialCustomerEmail === void 0 ? void 0 : initialCustomerEmail.trim()) !== null && _a !== void 0 ? _a : '')) {
+            setCheckoutEmail(normalizedEmail);
+            return normalizedEmail;
+        }
+        const syncedEmail = await onCustomerEmailCommit(normalizedEmail);
+        const committedEmail = syncedEmail.trim() || normalizedEmail;
+        setCheckoutEmail(committedEmail);
+        return committedEmail;
+    };
+    const resolveWalletEmailPrompt = useCallback((email) => {
+        var _a;
+        (_a = walletEmailResolverRef.current) === null || _a === void 0 ? void 0 : _a.call(walletEmailResolverRef, email);
+        walletEmailResolverRef.current = null;
+    }, []);
+    const requestWalletEmail = useCallback(async () => {
+        setWalletEmailPromptDraft(checkoutEmail.trim() || (initialCustomerEmail === null || initialCustomerEmail === void 0 ? void 0 : initialCustomerEmail.trim()) || '');
+        setWalletEmailPromptError(null);
+        setWalletEmailPromptOpen(true);
+        return await new Promise((resolve) => {
+            walletEmailResolverRef.current = resolve;
+        });
+    }, [checkoutEmail, initialCustomerEmail]);
+    const walletEmailPromptSubmit = async (event) => {
+        event.preventDefault();
+        try {
+            const committedEmail = await commitCheckoutEmail(walletEmailPromptDraft);
+            setWalletEmailPromptOpen(false);
+            setWalletEmailPromptError(null);
+            resolveWalletEmailPrompt(committedEmail);
+        }
+        catch (submitError) {
+            setWalletEmailPromptError(getErrorMessage(submitError, content.customerEmailInvalidMessage));
+        }
+    };
+    const walletEmailPromptCancel = () => {
+        setWalletEmailPromptOpen(false);
+        setWalletEmailPromptError(null);
+        resolveWalletEmailPrompt(null);
+    };
+    const preparePaywallWalletCheckout = async () => {
+        await trackCheckoutStarted();
+        const normalizedEmail = checkoutEmail.trim() || (initialCustomerEmail === null || initialCustomerEmail === void 0 ? void 0 : initialCustomerEmail.trim()) || '';
+        if (!normalizedEmail) {
+            return await requestWalletEmail();
+        }
+        return normalizedEmail;
+    };
+    const openCardCheckoutFromUnavailableWallet = async () => {
+        var _a;
+        if (checkoutDisabled || checkoutSession.loading.card) {
+            return;
+        }
+        await trackCheckoutStarted();
+        const readyClientSecret = (_a = checkoutSession.activeClientSecret) !== null && _a !== void 0 ? _a : await checkoutSession.prepareCardCheckout();
+        if (readyClientSecret) {
+            setCheckoutDialogOpen(true);
+        }
+    };
+    const closeCheckoutDialog = () => {
+        setCheckoutDialogOpen(false);
+        setError(null);
+        if ((discountState === null || discountState === void 0 ? void 0 : discountState.stage) === 'first' && discountState.status === 'active') {
+            onFirstCheckoutClosed === null || onFirstCheckoutClosed === void 0 ? void 0 : onFirstCheckoutClosed();
+        }
+    };
+    return {
+        checkoutDialogOpen,
+        checkoutDialogReady,
+        checkoutDisabled,
+        checkoutDiscountAmountLabel,
+        checkoutDiscountLabel,
+        checkoutInitialWalletAvailable,
+        checkoutSavedLabel,
+        checkoutSession,
+        checkoutSuccessReturnUrl,
+        checkoutSummaryLabel,
+        checkoutTotalValue,
+        closeCheckoutDialog,
+        commitCheckoutEmail,
+        customerEmail: checkoutEmail,
+        customerEmailEditable,
+        customerName: (_d = customerName === null || customerName === void 0 ? void 0 : customerName.trim()) !== null && _d !== void 0 ? _d : '',
+        error,
+        handleApplePayAvailabilityChange,
+        handleGooglePayAvailabilityChange,
+        openCardCheckoutFromUnavailableWallet,
+        preparePaywallWalletCheckout,
+        setCheckoutEmail,
+        startCheckout,
+        supportEmail,
+        trackCheckoutCompleted,
+        walletEmailPromptCancel,
+        walletEmailPromptDraft,
+        walletEmailPromptError,
+        walletEmailPromptOpen,
+        walletEmailPromptSubmit,
+        walletPaymentMethods,
+        setWalletEmailPromptDraft,
+    };
+}
+export function PaywallSubscriptionCheckoutDialogs({ buttonColor = 'var(--color-secondary-text)', content, controller, discountPercent, promoActive, promoDisplayName, remainingSeconds, selectedDisplayPlan, specialOfferDialogOpen, themeColor = 'var(--color-secondary-text)', onSpecialOfferAccept, }) {
+    var _a, _b;
+    return (_jsxs(_Fragment, { children: [controller.checkoutDialogOpen &&
+                controller.checkoutSession.activeClientSecret &&
+                controller.checkoutSession.stripePromise &&
+                selectedDisplayPlan ? (_jsx(SharedStripeCheckoutV2Dialog, { amountCents: selectedDisplayPlan.amountCents, buttonColor: buttonColor, cardSubmitLabel: content.cardSubmitLabel, clientSecret: controller.checkoutSession.activeClientSecret, closeAriaLabel: content.closeAriaLabel, countdownLabel: content.countdownLabel, customerEmail: controller.customerEmail, customerEmailEditable: controller.customerEmailEditable, customerEmailLabel: content.customerEmailLabel, customerEmailPlaceholder: content.customerEmailPlaceholder, customerEmailInvalidMessage: content.customerEmailInvalidMessage, customerName: controller.customerName, discountAmountLabel: controller.checkoutDiscountAmountLabel, discountLabel: controller.checkoutDiscountLabel, discountPercent: discountPercent, initialWalletAvailable: controller.checkoutInitialWalletAvailable, onClose: controller.closeCheckoutDialog, onCustomerEmailChange: controller.setCheckoutEmail, onCustomerEmailCommit: controller.commitCheckoutEmail, onError: controller.checkoutSession.setError, onSuccess: controller.trackCheckoutCompleted, paymentMethodLabels: content.paymentMethodLabels, paypalButtonLabel: content.paypalButtonLabel, paypalLabel: content.paypalLabel, promoActive: promoActive, promoCode: promoDisplayName, promoCodeLabel: content.promoCodeLabel, processingLabel: content.processingLabel, remainingSeconds: remainingSeconds, returnUrl: controller.checkoutSuccessReturnUrl, savedLabel: controller.checkoutSavedLabel, secureLabel: content.secureLabel, satisfactionLabel: content.satisfactionLabel, satisfactionPercent: content.satisfactionPercent, stripePromise: controller.checkoutSession.stripePromise, summaryLabel: controller.checkoutSummaryLabel, themeColor: themeColor, title: content.title, totalLabel: content.totalLabel, totalValue: controller.checkoutTotalValue, walletButtonLabel: content.walletButtonLabel, originalPriceLabel: content.originalPriceLabel, originalPriceValue: selectedDisplayPlan.basePriceLabel })) : null, specialOfferDialogOpen ? (_jsx(SharedCheckoutSpecialOfferDialog, { buttonColor: buttonColor, buttonLabel: content.specialOffer.buttonLabel, description: content.specialOffer.description, discountLabel: content.specialOffer.discountLabel, imageAlt: (_a = content.specialOffer.image) === null || _a === void 0 ? void 0 : _a.alt, imageSrc: (_b = content.specialOffer.image) === null || _b === void 0 ? void 0 : _b.src, onAccept: onSpecialOfferAccept, themeColor: themeColor, title: content.specialOffer.title })) : null, controller.walletEmailPromptOpen ? (_jsx(PaywallWalletEmailPromptDialog, { content: content, draftEmail: controller.walletEmailPromptDraft, error: controller.walletEmailPromptError, onCancel: controller.walletEmailPromptCancel, onChange: controller.setWalletEmailPromptDraft, onSubmit: controller.walletEmailPromptSubmit })) : null] }));
+}
+export function PaywallSubscriptionPaymentStack({ applePayButtonClassName, applePayShellClassName, cardButtonClassName, className, content, controller, disclaimerClassName, errorClassName, googlePayButtonClassName, googlePayShellClassName, metaClassName, noteClassName, paymentDisclaimer, selectedDisplayPlan, supportClassName, walletSuspended, }) {
+    const suspended = controller.checkoutDialogReady || walletSuspended;
+    return (_jsxs("section", { className: className, children: [controller.walletPaymentMethods.includes('applePay') ? (_jsx("div", { className: applePayShellClassName, children: selectedDisplayPlan ? (_jsx(ApplePaySubscriptionCheckoutSlot, { amountCents: selectedDisplayPlan.amountCents, beforeConfirm: controller.preparePaywallWalletCheckout, className: applePayButtonClassName, customerEmail: controller.customerEmail, customerName: controller.customerName, disabled: controller.checkoutDisabled, onAvailabilityChange: controller.handleApplePayAvailabilityChange, onSuccess: controller.trackCheckoutCompleted, onUnavailableClick: controller.openCardCheckoutFromUnavailableWallet, placeholderLabel: content.walletPlaceholderLabel, returnUrl: controller.checkoutSuccessReturnUrl, session: controller.checkoutSession, summaryLabel: controller.checkoutSummaryLabel, suspended: suspended })) : null })) : null, controller.walletPaymentMethods.includes('googlePay') ? (_jsx("div", { className: googlePayShellClassName, children: selectedDisplayPlan ? (_jsx(GooglePaySubscriptionCheckoutSlot, { amountCents: selectedDisplayPlan.amountCents, beforeConfirm: controller.preparePaywallWalletCheckout, className: googlePayButtonClassName, customerEmail: controller.customerEmail, customerName: controller.customerName, disabled: controller.checkoutDisabled, onAvailabilityChange: controller.handleGooglePayAvailabilityChange, onSuccess: controller.trackCheckoutCompleted, onUnavailableClick: controller.openCardCheckoutFromUnavailableWallet, placeholderLabel: content.googlePayPlaceholderLabel, returnUrl: controller.checkoutSuccessReturnUrl, session: controller.checkoutSession, summaryLabel: controller.checkoutSummaryLabel, suspended: suspended })) : null })) : null, _jsx("button", { type: 'button', className: cardButtonClassName, onClick: () => void controller.startCheckout(), disabled: controller.checkoutDisabled || controller.checkoutSession.loading.card, children: content.cardButtonLabel }), _jsx("p", { className: metaClassName, children: content.metaLabels.join(' · ') }), _jsx("p", { className: disclaimerClassName, children: paymentDisclaimer }), _jsxs("p", { className: supportClassName, children: [content.supportText, ' ', _jsx("a", { href: `mailto:${controller.supportEmail}`, children: controller.supportEmail })] }), !controller.checkoutSession.configured ? (_jsx("p", { className: noteClassName, children: content.stripeUnavailableNote })) : null, controller.error ? _jsx("p", { className: errorClassName, children: controller.error }) : null] }));
+}
+function PaywallWalletEmailPromptDialog({ content, draftEmail, error, onCancel, onChange, onSubmit, }) {
+    return (_jsxs("div", { className: 'paywall-wallet-email-prompt-backdrop', role: 'presentation', children: [_jsxs("form", { className: 'paywall-wallet-email-prompt', role: 'dialog', "aria-modal": 'true', "aria-labelledby": 'paywall-wallet-email-prompt-title', onSubmit: (event) => void onSubmit(event), children: [_jsx("h2", { id: 'paywall-wallet-email-prompt-title', children: content.walletEmailPromptTitle }), _jsx("p", { children: content.walletEmailPromptDescription }), _jsxs("label", { children: [_jsx("span", { children: content.customerEmailLabel }), _jsx("input", { type: 'email', inputMode: 'email', autoComplete: 'email', value: draftEmail, onChange: (event) => onChange(event.currentTarget.value), placeholder: content.customerEmailPlaceholder, autoFocus: true })] }), error ? _jsx("p", { className: 'paywall-wallet-email-prompt-error', children: error }) : null, _jsxs("div", { className: 'paywall-wallet-email-prompt-actions', children: [_jsx("button", { type: 'button', onClick: onCancel, children: content.walletEmailPromptCancelLabel }), _jsx("button", { type: 'submit', children: content.walletEmailPromptSubmitLabel })] })] }), _jsx("style", { children: paywallWalletEmailPromptStyles })] }));
+}
+const paywallWalletEmailPromptStyles = `
+.paywall-wallet-email-prompt-backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 1000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 20px;
+  background: rgb(13 17 32 / 42%);
+}
+
+.paywall-wallet-email-prompt {
+  box-sizing: border-box;
+  width: min(100%, 360px);
+  border-radius: 20px;
+  background: #fff;
+  padding: 22px;
+  box-shadow: 0 18px 48px rgb(19 27 47 / 26%);
+  color: #111827;
+}
+
+.paywall-wallet-email-prompt h2 {
+  margin: 0;
+  color: #111827;
+  font-size: 22px;
+  font-weight: 800;
+  line-height: 1.15;
+  letter-spacing: 0;
+}
+
+.paywall-wallet-email-prompt p {
+  margin: 10px 0 0;
+  color: #4b5563;
+  font-size: 15px;
+  font-weight: 500;
+  line-height: 1.45;
+}
+
+.paywall-wallet-email-prompt label {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  margin-top: 18px;
+  color: #374151;
+  font-size: 13px;
+  font-weight: 700;
+  line-height: 1.2;
+}
+
+.paywall-wallet-email-prompt input {
+  min-height: 48px;
+  border: 1px solid #d8deea;
+  border-radius: 12px;
+  padding: 0 14px;
+  color: #111827;
+  font: inherit;
+  font-size: 16px;
+  font-weight: 500;
+  outline: none;
+}
+
+.paywall-wallet-email-prompt input:focus {
+  border-color: var(--color-secondary-text);
+  box-shadow: 0 0 0 3px rgb(63 81 181 / 12%);
+}
+
+.paywall-wallet-email-prompt-error {
+  color: #c03232 !important;
+}
+
+.paywall-wallet-email-prompt-actions {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+  gap: 10px;
+  margin-top: 18px;
+}
+
+.paywall-wallet-email-prompt-actions button {
+  min-height: 48px;
+  border-radius: 14px;
+  border: 0;
+  font-size: 15px;
+  font-weight: 800;
+  cursor: pointer;
+}
+
+.paywall-wallet-email-prompt-actions button[type='button'] {
+  background: #f2f5fb;
+  color: #4b5563;
+}
+
+.paywall-wallet-email-prompt-actions button[type='submit'] {
+  background: var(--color-secondary-text);
+  color: #fff;
+}
+`;

package/dist/index.d.ts

@@ -14,6 +14,7 @@ export * from './providers/stripe/GooglePaySubscriptionCheckoutSlot.js';
 export { ManageSubscriptionScreen, type ManageSubscriptionContent, type ManageSubscriptionScreenProps, } from './components/ManageSubscriptionScreen.js';
 export * from './components/shared/SharedStripeCheckoutDialog.js';
 export * from './components/shared/SharedStripeCheckoutV2Dialog.js';
+export * from './components/shared/PaywallSubscriptionCheckout.js';
 export * from './components/shared/ApplePaySubscribeButton.js';
 export * from './components/shared/GooglePaySubscribeButton.js';
 export * from './components/shared/StripeCheckoutExpressCheckoutButton.js';
@@ -21,3 +22,4 @@ export * from './components/shared/StripeExpressCheckoutButton.js';
 export * from './components/shared/StripeExpressCheckoutElement.js';
 export * from './components/shared/StripePlanSelector.js';
 export * from './components/shared/walletPlatform.js';
+export * from './testing/walletCheckoutSmoke.js';

package/dist/index.js

@@ -14,6 +14,7 @@ export * from './providers/stripe/GooglePaySubscriptionCheckoutSlot.js';
 export { ManageSubscriptionScreen, } from './components/ManageSubscriptionScreen.js';
 export * from './components/shared/SharedStripeCheckoutDialog.js';
 export * from './components/shared/SharedStripeCheckoutV2Dialog.js';
+export * from './components/shared/PaywallSubscriptionCheckout.js';
 export * from './components/shared/ApplePaySubscribeButton.js';
 export * from './components/shared/GooglePaySubscribeButton.js';
 export * from './components/shared/StripeCheckoutExpressCheckoutButton.js';
@@ -21,3 +22,4 @@ export * from './components/shared/StripeExpressCheckoutButton.js';
 export * from './components/shared/StripeExpressCheckoutElement.js';
 export * from './components/shared/StripePlanSelector.js';
 export * from './components/shared/walletPlatform.js';
+export * from './testing/walletCheckoutSmoke.js';

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

@@ -7,13 +7,14 @@ export type WalletSubscriptionCheckoutRenderStateInput = {
     hasStripePromise: boolean;
     suspended: boolean;
     walletAvailable: boolean | null;
+    walletPreparing: boolean;
 };
 export type WalletSubscriptionCheckoutRenderState = {
     placeholderIsPreparing: boolean;
     shouldRenderExpressCheckout: boolean;
     shouldRenderPlaceholder: boolean;
 };
-export declare function getWalletSubscriptionCheckoutRenderState({ expressCheckoutAllowed, hasActiveClientSecret, hasStripePromise, suspended, walletAvailable, }: WalletSubscriptionCheckoutRenderStateInput): WalletSubscriptionCheckoutRenderState;
+export declare function getWalletSubscriptionCheckoutRenderState({ expressCheckoutAllowed, hasActiveClientSecret, hasStripePromise, suspended, walletAvailable, walletPreparing, }: WalletSubscriptionCheckoutRenderStateInput): WalletSubscriptionCheckoutRenderState;
 type WalletPlaceholderButtonProps = {
     className?: string;
     disabled: boolean;

package/dist/providers/stripe/WalletSubscriptionCheckoutSlot.js

@@ -3,7 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { StripeExpressCheckoutElement } from '../../components/shared/StripeExpressCheckoutElement.js';
 import { isInactiveCheckoutSessionError, } from './useStripeSubscriptionCheckoutSession.js';
-export function getWalletSubscriptionCheckoutRenderState({ expressCheckoutAllowed, hasActiveClientSecret, hasStripePromise, suspended, walletAvailable, }) {
+export function getWalletSubscriptionCheckoutRenderState({ expressCheckoutAllowed, hasActiveClientSecret, hasStripePromise, suspended, walletAvailable, walletPreparing, }) {
     const shouldRenderExpressCheckout = !suspended &&
         expressCheckoutAllowed &&
         walletAvailable !== false &&
@@ -14,7 +14,7 @@ export function getWalletSubscriptionCheckoutRenderState({ expressCheckoutAllowe
         expressCheckoutAllowed &&
         walletAvailable === null;
     return {
-        placeholderIsPreparing: shouldRenderPlaceholder,
+        placeholderIsPreparing: shouldRenderPlaceholder && walletPreparing,
         shouldRenderExpressCheckout,
         shouldRenderPlaceholder,
     };
@@ -43,19 +43,28 @@ export function WalletSubscriptionCheckoutSlot({ amountCents, availabilityPaymen
         hasStripePromise: Boolean(session.stripePromise),
         suspended,
         walletAvailable,
+        walletPreparing: session.loading.wallet,
     });
     const serverUpdateKey = session.activeClientSecret &&
         session.checkoutSessionId &&
         session.activePlanKey !== session.planKey
         ? session.planKey
         : null;
-    const markWalletUnavailable = useCallback((intentKey) => {
+    const reportWalletAvailability = useCallback((intentKey, available) => {
         setWalletAvailability({
-            available: false,
+            available: available,
             intentKey,
         });
-        onAvailabilityChange === null || onAvailabilityChange === void 0 ? void 0 : onAvailabilityChange(false);
+        onAvailabilityChange === null || onAvailabilityChange === void 0 ? void 0 : onAvailabilityChange(available);
     }, [onAvailabilityChange]);
+    const reportWalletPreparationFailure = useCallback((intentKey) => {
+        setWalletAvailability((current) => current.intentKey === intentKey
+            ? current
+            : {
+                available: null,
+                intentKey,
+            });
+    }, []);
     useEffect(() => {
         if (slotDisabled ||
             suspended ||
@@ -72,12 +81,12 @@ export function WalletSubscriptionCheckoutSlot({ amountCents, availabilityPaymen
         void (async () => {
             const readyClientSecret = await session.prepareWalletCheckout();
             if (!readyClientSecret) {
-                markWalletUnavailable(requestKey);
+                reportWalletPreparationFailure(requestKey);
             }
         })();
     }, [
         expressCheckoutAllowed,
-        markWalletUnavailable,
+        reportWalletPreparationFailure,
         session,
         slotDisabled,
         suspended,
@@ -96,11 +105,7 @@ export function WalletSubscriptionCheckoutSlot({ amountCents, availabilityPaymen
         onError === null || onError === void 0 ? void 0 : onError(message);
     };
     const handleAvailabilityChange = (available) => {
-        setWalletAvailability({
-            available,
-            intentKey: session.intentKey,
-        });
-        onAvailabilityChange === null || onAvailabilityChange === void 0 ? void 0 : onAvailabilityChange(available);
+        reportWalletAvailability(session.intentKey, available);
     };
     const handlePlaceholderClick = async () => {
         if (slotDisabled || session.loading.wallet) {
@@ -112,9 +117,12 @@ export function WalletSubscriptionCheckoutSlot({ amountCents, availabilityPaymen
         }
         const readyClientSecret = await session.prepareWalletCheckout();
         if (!readyClientSecret) {
-            markWalletUnavailable(session.intentKey);
+            reportWalletPreparationFailure(session.intentKey);
         }
     };
+    const placeholderRenderer = placeholderIsPreparing
+        ? renderPreparingPlaceholder !== null && renderPreparingPlaceholder !== void 0 ? renderPreparingPlaceholder : renderPlaceholder
+        : renderPlaceholder;
     return (_jsxs(_Fragment, { children: [shouldRenderPlaceholder || shouldRenderExpressCheckout ? (_jsxs("div", { className: [
                     'wallet-subscription-checkout-slot',
                     placeholderIsPreparing ? 'is-loading' : '',
@@ -123,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, 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: (renderPreparingPlaceholder !== null && renderPreparingPlaceholder !== void 0 ? renderPreparingPlaceholder : renderPlaceholder)({
+                        session.stripePromise ? (_jsx(StripeExpressCheckoutElement, { amountCents: amountCents, availabilityPaymentMethods: [availabilityPaymentMethod], beforeConfirm: beforeConfirm, className: className, clientSecret: session.activeClientSecret, customerEmail: customerEmail, customerName: customerName, onAvailabilityChange: handleAvailabilityChange, 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({
                             className,
                             disabled: slotDisabled,
                             label: placeholderLabel,

package/dist/providers/stripe/useStripeSubscriptionCheckoutSession.js

@@ -70,6 +70,10 @@ export function useStripeSubscriptionCheckoutSession({ checkoutMode, analyticsMe
     const activePlanKey = clientSecretIntentKey === intentKey ? clientSecretPlanKey : null;
     const stripePromise = useMemo(() => getStripePromise(checkoutMode, runtimeStripePublishableKey), [checkoutMode, runtimeStripePublishableKey]);
     const previousIntentKeyRef = useRef(intentKey);
+    const analyticsMetadataRef = useRef(analyticsMetadata);
+    useEffect(() => {
+        analyticsMetadataRef.current = analyticsMetadata;
+    }, [analyticsMetadata]);
     const clearActiveCheckoutSession = useCallback(() => {
         requestIdRef.current += 1;
         creatingIntentRef.current = null;
@@ -129,7 +133,7 @@ export function useStripeSubscriptionCheckoutSession({ checkoutMode, analyticsMe
             try {
                 const response = await createStripeSubscriptionCheckout({
                     plan,
-                    analyticsMetadata,
+                    analyticsMetadata: analyticsMetadataRef.current,
                     couponId,
                     customerEmail,
                     returnUrl,
@@ -173,7 +177,6 @@ export function useStripeSubscriptionCheckoutSession({ checkoutMode, analyticsMe
         return subscriptionRequest;
     }, [
         activeClientSecret,
-        analyticsMetadata,
         checkoutMode,
         clearActiveCheckoutSession,
         configured,
@@ -228,7 +231,7 @@ export function useStripeSubscriptionCheckoutSession({ checkoutMode, analyticsMe
             await updateStripeSubscriptionCheckoutPlan({
                 checkoutSessionId: activeCheckoutSessionId,
                 plan,
-                analyticsMetadata,
+                analyticsMetadata: analyticsMetadataRef.current,
                 couponId,
                 customerEmail,
                 user_id: userId,
@@ -245,7 +248,6 @@ export function useStripeSubscriptionCheckoutSession({ checkoutMode, analyticsMe
     }, [
         activeCheckoutSessionId,
         activePlanKey,
-        analyticsMetadata,
         checkoutMode,
         configured,
         couponId,
@@ -257,7 +259,7 @@ export function useStripeSubscriptionCheckoutSession({ checkoutMode, analyticsMe
         setError,
         userId,
     ]);
-    return {
+    return useMemo(() => ({
         activeClientSecret,
         activePlanKey,
         checkoutSessionId: activeCheckoutSessionId,
@@ -275,5 +277,22 @@ export function useStripeSubscriptionCheckoutSession({ checkoutMode, analyticsMe
         setError,
         stripePromise,
         updateCheckoutSessionPlan,
-    };
+    }), [
+        activeCheckoutSessionId,
+        activeClientSecret,
+        activePlanKey,
+        configured,
+        error,
+        intentKey,
+        loading,
+        planKey,
+        prepareCardCheckout,
+        prepareWalletCheckout,
+        reset,
+        restartCardCheckout,
+        restartWalletCheckout,
+        setError,
+        stripePromise,
+        updateCheckoutSessionPlan,
+    ]);
 }

package/dist/testing/walletCheckoutSmoke.d.ts

@@ -0,0 +1,92 @@
+export type WalletCheckoutSmokeProfileId = 'mobile-safari' | 'mobile-chrome';
+export type WalletCheckoutSmokeProfile = {
+    id: WalletCheckoutSmokeProfileId;
+    name: string;
+    userAgent: string;
+    viewport: {
+        width: number;
+        height: number;
+        isMobile: boolean;
+        hasTouch: boolean;
+    };
+};
+export type WalletCheckoutSmokeSnapshot = {
+    blockingOverlayVisible: boolean;
+    cardFallbackVisible: boolean;
+    subscriptionRequestSucceeded: boolean;
+    walletSlotState: 'ready' | 'unavailable' | 'unknown';
+};
+export type WalletCheckoutSmokeEvaluation = {
+    failures: string[];
+    ok: boolean;
+};
+export type WalletCheckoutSmokeSelectors = {
+    blockingOverlay?: string;
+    cardFallback: string;
+    walletSlot: string;
+};
+export type WalletCheckoutSmokeOptions = {
+    profiles?: WalletCheckoutSmokeProfile[];
+    selectors: WalletCheckoutSmokeSelectors;
+    subscriptionRequestPath?: string;
+    timeoutMs?: number;
+    url: string;
+};
+export type WalletCheckoutSmokeProfileResult = WalletCheckoutSmokeEvaluation & {
+    profileId: WalletCheckoutSmokeProfileId;
+    snapshot: WalletCheckoutSmokeSnapshot;
+};
+export type WalletCheckoutSmokeResult = {
+    ok: boolean;
+    results: WalletCheckoutSmokeProfileResult[];
+};
+type PlaywrightPage = {
+    click: (selector: string, options?: {
+        timeout?: number;
+    }) => Promise<void>;
+    close?: () => Promise<void>;
+    goto: (url: string, options?: {
+        waitUntil?: 'domcontentloaded' | 'load' | 'networkidle';
+    }) => Promise<unknown>;
+    isVisible: (selector: string, options?: {
+        timeout?: number;
+    }) => Promise<boolean>;
+    waitForLoadState: (state?: 'domcontentloaded' | 'load' | 'networkidle', options?: {
+        timeout?: number;
+    }) => Promise<void>;
+    waitForResponse: (predicate: (response: {
+        status: () => number;
+        url: () => string;
+    }) => boolean, options?: {
+        timeout?: number;
+    }) => Promise<unknown>;
+    waitForSelector: (selector: string, options?: {
+        state?: 'attached' | 'detached' | 'hidden' | 'visible';
+        timeout?: number;
+    }) => Promise<unknown>;
+};
+type PlaywrightContext = {
+    close: () => Promise<void>;
+    newPage: () => Promise<PlaywrightPage>;
+};
+type PlaywrightBrowser = {
+    close: () => Promise<void>;
+    newContext: (options: {
+        hasTouch: boolean;
+        isMobile: boolean;
+        userAgent: string;
+        viewport: {
+            width: number;
+            height: number;
+        };
+    }) => Promise<PlaywrightContext>;
+};
+type PlaywrightChromium = {
+    launch: (options?: {
+        headless?: boolean;
+    }) => Promise<PlaywrightBrowser>;
+};
+export declare function buildWalletCheckoutSmokeProfiles(): WalletCheckoutSmokeProfile[];
+export declare function evaluateWalletCheckoutSmokeSnapshot(snapshot: WalletCheckoutSmokeSnapshot): WalletCheckoutSmokeEvaluation;
+export declare function runWalletCheckoutSmokeTest(chromium: PlaywrightChromium, options: WalletCheckoutSmokeOptions): Promise<WalletCheckoutSmokeResult>;
+export {};

package/dist/testing/walletCheckoutSmoke.js

@@ -0,0 +1,111 @@
+export function buildWalletCheckoutSmokeProfiles() {
+    return [
+        {
+            id: 'mobile-safari',
+            name: 'Mobile Safari',
+            userAgent: 'Mozilla/5.0 (iPhone; CPU iPhone OS 17_5 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.5 Mobile/15E148 Safari/604.1',
+            viewport: {
+                width: 390,
+                height: 844,
+                hasTouch: true,
+                isMobile: true,
+            },
+        },
+        {
+            id: 'mobile-chrome',
+            name: 'Mobile Chrome',
+            userAgent: 'Mozilla/5.0 (Linux; Android 14; Pixel 8) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/126.0.0.0 Mobile Safari/537.36',
+            viewport: {
+                width: 412,
+                height: 915,
+                hasTouch: true,
+                isMobile: true,
+            },
+        },
+    ];
+}
+export function evaluateWalletCheckoutSmokeSnapshot(snapshot) {
+    const failures = [];
+    if (!snapshot.subscriptionRequestSucceeded) {
+        failures.push('subscription checkout session request did not succeed');
+    }
+    if (snapshot.walletSlotState === 'unknown') {
+        failures.push('wallet slot never reached Stripe readiness or known unavailable state');
+    }
+    if (!snapshot.cardFallbackVisible) {
+        failures.push('card fallback checkout is not visible');
+    }
+    if (snapshot.blockingOverlayVisible) {
+        failures.push('a blocking loader or modal is still visible');
+    }
+    return {
+        ok: failures.length === 0,
+        failures,
+    };
+}
+export async function runWalletCheckoutSmokeTest(chromium, options) {
+    var _a, _b, _c;
+    const profiles = (_a = options.profiles) !== null && _a !== void 0 ? _a : buildWalletCheckoutSmokeProfiles();
+    const timeoutMs = (_b = options.timeoutMs) !== null && _b !== void 0 ? _b : 15000;
+    const subscriptionRequestPath = (_c = options.subscriptionRequestPath) !== null && _c !== void 0 ? _c : '/sdk/public/payments/subscriptions';
+    const browser = await chromium.launch({ headless: true });
+    try {
+        const results = [];
+        for (const profile of profiles) {
+            const context = await browser.newContext({
+                hasTouch: profile.viewport.hasTouch,
+                isMobile: profile.viewport.isMobile,
+                userAgent: profile.userAgent,
+                viewport: {
+                    width: profile.viewport.width,
+                    height: profile.viewport.height,
+                },
+            });
+            try {
+                const page = await context.newPage();
+                const subscriptionResponse = page
+                    .waitForResponse((response) => response.url().includes(subscriptionRequestPath) &&
+                    response.status() >= 200 &&
+                    response.status() < 300, { timeout: timeoutMs })
+                    .then(() => true)
+                    .catch(() => false);
+                await page.goto(options.url, { waitUntil: 'domcontentloaded' });
+                await page.waitForLoadState('networkidle', { timeout: timeoutMs }).catch(() => undefined);
+                const walletSlotResolved = await Promise.race([
+                    page.waitForSelector(`${options.selectors.walletSlot}.has-express-checkout`, {
+                        timeout: timeoutMs,
+                    }).then(() => 'ready'),
+                    page.waitForSelector(options.selectors.walletSlot, {
+                        state: 'detached',
+                        timeout: timeoutMs,
+                    }).then(() => 'unavailable'),
+                ]).catch(() => 'unknown');
+                const snapshot = {
+                    blockingOverlayVisible: options.selectors.blockingOverlay
+                        ? await page.isVisible(options.selectors.blockingOverlay, { timeout: 500 }).catch(() => false)
+                        : false,
+                    cardFallbackVisible: await page
+                        .isVisible(options.selectors.cardFallback, { timeout: timeoutMs })
+                        .catch(() => false),
+                    subscriptionRequestSucceeded: await subscriptionResponse,
+                    walletSlotState: walletSlotResolved,
+                };
+                const evaluation = evaluateWalletCheckoutSmokeSnapshot(snapshot);
+                if (snapshot.cardFallbackVisible) {
+                    await page.click(options.selectors.cardFallback, { timeout: timeoutMs }).catch(() => undefined);
+                }
+                results.push(Object.assign(Object.assign({}, evaluation), { profileId: profile.id, snapshot }));
+            }
+            finally {
+                await context.close();
+            }
+        }
+        return {
+            ok: results.every((result) => result.ok),
+            results,
+        };
+    }
+    finally {
+        await browser.close();
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@funnelsgrove/payments",
-  "version": "0.1.34",
+  "version": "0.1.36",
   "type": "module",
   "private": false,
   "main": "./dist/index.js",
@@ -23,6 +23,7 @@
     "build": "rm -rf dist && tsc -p tsconfig.build.json && node ../../scripts/fix-esm-relative-imports.mjs dist",
     "lint": "eslint .",
     "prepublishOnly": "npm run build",
+    "smoke:wallet": "npm run build && node scripts/wallet-checkout-smoke.mjs",
     "test:run": "vitest run --passWithNoTests"
   },
   "dependencies": {