@funnelsgrove/payments 0.15.7 → 0.15.10

package/dist/providers/stripe/components/SharedStripeCheckoutV2Form.internal.d.ts

@@ -0,0 +1,7 @@
+import type { SharedStripeCheckoutV2DialogProps } from './SharedStripeCheckoutV2Dialog.js';
+export declare const getFixedSupportedBillingCountry: (supportedCountries: readonly string[]) => string | null;
+type SharedStripeCheckoutV2FormProps = Omit<SharedStripeCheckoutV2DialogProps, 'stripePromise' | 'onClose'> & {
+    onClose: () => void;
+};
+export declare function SharedStripeCheckoutV2CheckoutSessionForm({ amountCents, buttonColor, cardSubmitLabel, closeAriaLabel, countdownLabel, checkoutAnalytics, checkoutSessionId, customerEmail, customerEmailEditable: allowEmailEditing, customerEmailLabel, customerEmailPlaceholder, customerEmailInvalidMessage, customerName, discountAmountLabel, discountLabel, discountPercent, initialWalletAvailable, onClose, onCustomerEmailChange, onCustomerEmailCommit, onError, onInactiveCheckoutSession, onPaymentInfoSubmitted, onSuccess, paymentMethodLabels, promoActive, processingLabel, promoCode, promoCodeLabel, remainingSeconds, returnUrl, savedLabel, secureLabel, satisfactionLabel, satisfactionPercent, summaryLabel, supportedCountries, themeColor, title, totalLabel, totalValue, unsupportedCountryMessage, walletButtonLabel, originalPriceLabel, originalPriceValue, variant, }: SharedStripeCheckoutV2FormProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/providers/stripe/components/SharedStripeCheckoutV2Form.internal.js

@@ -0,0 +1,272 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { PaymentElement, useCheckout } from '@stripe/react-stripe-js/checkout';
+import { isValidCheckoutEmail as isValidEmail, isCheckoutEmailError } from '../../../services/checkoutEmail.js';
+import { PaymentBrandMark, SecurityLockIcon } from './CheckoutBrandAssets.js';
+import { StripeCheckoutExpressCheckoutButton } from './StripeCheckoutExpressCheckoutButton.js';
+import { getUnsupportedCheckoutCountryMessage, normalizeSupportedCheckoutCountries } from './checkoutCountries.js';
+import { isInactiveCheckoutSessionError } from '../hooks/useStripeSubscriptionCheckoutSession.js';
+import { getStripeWalletPaymentMethodOrder, usePlatformWalletPaymentMethods } from './walletPlatform.js';
+import { trackPaidStripeSubscriptionCheckoutCompleted, trackStripeSubscriptionPaymentInfoSubmitted } from '../services/checkoutCompletionAnalytics.service.js';
+import { trackCheckoutFailureShown } from '../../../services/checkoutObservability.service.js';
+import { SharedStripeCheckoutV2Summary } from './SharedStripeCheckoutV2Summary.internal.js';
+import { useCheckoutEmail } from './useCheckoutEmail.internal.js';
+const defaultPaymentMethodLabels = ['Visa', 'Mastercard', 'Maestro', 'Discover'];
+export const getFixedSupportedBillingCountry = (supportedCountries) => supportedCountries.length === 1 ? supportedCountries[0] : null;
+const checkoutCountryLabels = {
+    US: 'United States',
+};
+const getCheckoutCountryLabel = (countryCode) => { var _a; return (_a = checkoutCountryLabels[countryCode]) !== null && _a !== void 0 ? _a : countryCode; };
+function getFriendlyCardErrorMessage(error) {
+    return error instanceof Error && error.message
+        ? error.message
+        : 'Payment failed. Please review your card details and try again.';
+}
+export function SharedStripeCheckoutV2CheckoutSessionForm({ amountCents, buttonColor, cardSubmitLabel, closeAriaLabel, countdownLabel, checkoutAnalytics, checkoutSessionId, customerEmail, customerEmailEditable: allowEmailEditing = 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, variant = 'standard', }) {
+    const checkoutState = useCheckout();
+    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 submitInFlightRef = useRef(false);
+    const [paymentElementReady, setPaymentElementReady] = useState(false);
+    const [paymentElementComplete, setPaymentElementComplete] = useState(false);
+    const [error, setError] = useState(null);
+    const [billingCountry, setBillingCountry] = useState(null);
+    const { initialCustomerEmail, resolvedCustomerEmail, customerEmailEditable, emailDraft, setEmailDraft, rejectedEmail, setRejectedEmail, emailSaving, emailSessionChanged, commitEmailDraftIfValid, ensureCustomerEmail } = useCheckoutEmail({
+        customerEmail, allowEmailEditing, customerEmailInvalidMessage,
+        onCustomerEmailCommit, onCustomerEmailChange, onError: (message) => setSharedError(message),
+    });
+    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 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'
+        && !emailSessionChanged && isValidEmail(initialCustomerEmail) && rejectedEmail === null
+        && resolvedCustomerEmail === initialCustomerEmail ? 'wallet' : 'card';
+    const expressCheckoutOptions = useMemo(() => {
+        return {
+            buttonHeight: 55,
+            buttonTheme: {
+                applePay: 'black',
+                googlePay: 'black',
+            },
+            buttonType: {
+                applePay: 'subscribe',
+                googlePay: 'subscribe',
+            },
+            layout: {
+                maxColumns: 1,
+                maxRows: 2,
+                overflow: 'auto',
+            },
+            paymentMethodOrder: getStripeWalletPaymentMethodOrder(walletPaymentMethods),
+            paymentMethods: {
+                amazonPay: 'never',
+                applePay: walletPaymentMethods.includes('applePay') ? 'always' : 'never',
+                googlePay: walletPaymentMethods.includes('googlePay') ? 'always' : 'never',
+                klarna: 'never',
+                link: 'never',
+                paypal: 'never',
+            },
+        };
+    }, [walletPaymentMethods]);
+    const paymentElementOptions = useMemo(() => {
+        return {
+            fields: {
+                billingDetails: {
+                    name: 'never',
+                    email: 'never',
+                    address: {
+                        country: fixedBillingCountry ? 'never' : 'auto',
+                    },
+                },
+            },
+            layout: 'tabs',
+            wallets: {
+                applePay: 'never',
+                googlePay: 'never',
+                link: 'never',
+            },
+        };
+    }, [fixedBillingCountry]);
+    const handleInactiveCheckoutSession = () => {
+        setError(null);
+        onInactiveCheckoutSession === null || onInactiveCheckoutSession === void 0 ? void 0 : onInactiveCheckoutSession();
+    };
+    const setSharedError = (message, alreadyTracked = false, providerError) => {
+        if (isCheckoutEmailError(providerError) || isCheckoutEmailError(message)) {
+            setRejectedEmail(initialCustomerEmail);
+            setSelectedMethod('card');
+        }
+        if (isInactiveCheckoutSessionError(message)) {
+            handleInactiveCheckoutSession();
+            return;
+        }
+        if (message && checkoutAnalytics && !alreadyTracked) {
+            trackCheckoutFailureShown({
+                analytics: checkoutAnalytics,
+                checkoutSessionId,
+                errorMessage: message,
+                failureStage: 'card_form',
+                paymentMethod: 'card',
+                provider: 'stripe',
+                providerDeclineCode: providerError === null || providerError === void 0 ? void 0 : providerError.decline_code,
+                providerErrorCode: providerError === null || providerError === void 0 ? void 0 : providerError.code,
+                providerErrorType: providerError === null || providerError === void 0 ? void 0 : providerError.type,
+            });
+        }
+        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;
+        setPaymentElementComplete(event.complete);
+        setBillingCountry((_b = (_a = event.value.billingDetails) === null || _a === void 0 ? void 0 : _a.address.country) !== null && _b !== void 0 ? _b : fixedBillingCountry);
+    };
+    const trackCheckoutSuccess = async () => {
+        if (checkoutAnalytics) {
+            await trackPaidStripeSubscriptionCheckoutCompleted(Object.assign({ checkoutSessionId }, checkoutAnalytics));
+        }
+        await (onSuccess === null || onSuccess === void 0 ? void 0 : onSuccess());
+    };
+    const trackPaymentInfoSubmitted = async () => {
+        if (checkoutAnalytics) {
+            await trackStripeSubscriptionPaymentInfoSubmitted(Object.assign({ checkoutSessionId }, checkoutAnalytics)).catch(() => 'analytics_rejected');
+        }
+        await (onPaymentInfoSubmitted === null || onPaymentInfoSubmitted === void 0 ? void 0 : onPaymentInfoSubmitted());
+    };
+    useEffect(() => {
+        if (effectiveSelectedMethod !== 'card' || typeof window === 'undefined') {
+            return;
+        }
+        const resizeTimer = window.setTimeout(() => {
+            window.dispatchEvent(new Event('resize'));
+        }, 0);
+        return () => window.clearTimeout(resizeTimer);
+    }, [effectiveSelectedMethod]);
+    const handleSubmit = async (event) => {
+        event.preventDefault();
+        if (submitInFlightRef.current || emailSessionChanged) {
+            return;
+        }
+        const billingCountryError = getBillingCountryError(billingCountry !== null && billingCountry !== void 0 ? billingCountry : fixedBillingCountry);
+        if (billingCountryError) {
+            setSharedError(billingCountryError);
+            return;
+        }
+        if (checkoutState.type !== 'success') {
+            setSharedError(checkoutState.type === 'error'
+                ? checkoutState.error.message
+                : 'Payment form is not ready yet.');
+            return;
+        }
+        if (!paymentElementReady) {
+            setSharedError('Payment form is not ready yet.', true);
+            return;
+        }
+        submitInFlightRef.current = true;
+        setSubmitting(true);
+        setSharedError(null);
+        const finishSubmitting = () => {
+            submitInFlightRef.current = false;
+            setSubmitting(false);
+        };
+        try {
+            const syncedEmail = await ensureCustomerEmail();
+            if (!syncedEmail) {
+                finishSubmitting();
+                return;
+            }
+            if (paymentElementComplete) {
+                await trackPaymentInfoSubmitted();
+            }
+            const result = await checkoutState.checkout.confirm({
+                redirect: 'if_required',
+            });
+            if (result.type === 'error') {
+                const message = result.error.message || 'Payment failed.';
+                setSharedError(message, false, result.error);
+                finishSubmitting();
+                return;
+            }
+            if (typeof window !== 'undefined') {
+                await trackCheckoutSuccess();
+                window.location.assign(returnUrl);
+                return;
+            }
+            finishSubmitting();
+        }
+        catch (submitError) {
+            setSharedError(getFriendlyCardErrorMessage(submitError));
+            finishSubmitting();
+        }
+    };
+    const visibleError = error;
+    return (_jsxs("div", { className: 'shared-checkout-v2-shell', "data-variant": variant, 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 })] }), _jsx(SharedStripeCheckoutV2Summary, { discountPercent, countdownLabel, remainingSeconds, variant, satisfactionPercent, satisfactionLabel, originalPriceLabel, originalPriceValue, discountLabel, discountAmountLabel, promoCodeLabel, promoCode, totalLabel, totalValue, savedLabel, showPromo }), _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(StripeCheckoutExpressCheckoutButton, { amountCents: amountCents, availabilityPaymentMethods: walletPaymentMethods, beforeConfirm: ensureCustomerEmail, checkoutAnalytics: checkoutAnalytics, checkoutSessionId: checkoutSessionId, className: 'shared-checkout-v2-express-buttons', confirmEmail: false, customerEmail: resolvedCustomerEmail, customerName: customerName, initialAvailable: initialWalletAvailable, keepInitialAvailableOnReady: initialWalletAvailable === true, onAvailabilityChange: handleWalletAvailabilityChange, onError: (message) => setSharedError(message, true), onPaymentInfoSubmitted: onPaymentInfoSubmitted, onPaymentRejected: () => setSelectedMethod('card'), onSuccess: trackCheckoutSuccess, options: expressCheckoutOptions, returnUrl: returnUrl, summaryLabel: expressCheckoutSummaryLabel, supportedCountries: normalizedSupportedCountries, unsupportedCountryMessage: unsupportedCountryMessage }), _jsx("span", { className: 'shared-checkout-v2-sr-only', children: walletAriaLabel })] })] }), _jsxs("div", { hidden: effectiveSelectedMethod !== 'card', className: [
+                            'shared-checkout-v2-card-panel',
+                            effectiveSelectedMethod === 'card' ? 'is-visible' : '',
+                        ]
+                            .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 || emailSaving, 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);
+                                                    } }) })] }), _jsx(PaymentElement, { options: paymentElementOptions, onChange: handlePaymentElementChange, onReady: () => setPaymentElementReady(true) }), 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 || emailSaving || emailSessionChanged || !paymentElementReady, children: [_jsx(SecurityLockIcon, { className: 'shared-checkout-v2-card-submit-icon' }), submitting || emailSaving || emailSessionChanged ? 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] })] })] })] }));
+}

package/dist/providers/stripe/components/SharedStripeCheckoutV2Summary.internal.d.ts

@@ -0,0 +1,6 @@
+import type { SharedStripeCheckoutV2DialogProps } from './SharedStripeCheckoutV2Dialog.js';
+type SummaryProps = Pick<SharedStripeCheckoutV2DialogProps, 'discountPercent' | 'countdownLabel' | 'remainingSeconds' | 'variant' | 'satisfactionPercent' | 'satisfactionLabel' | 'originalPriceLabel' | 'originalPriceValue' | 'discountLabel' | 'discountAmountLabel' | 'promoCodeLabel' | 'promoCode' | 'totalLabel' | 'totalValue' | 'savedLabel'> & {
+    showPromo: boolean;
+};
+export declare function SharedStripeCheckoutV2Summary({ discountPercent, countdownLabel, remainingSeconds, variant, satisfactionPercent, satisfactionLabel, originalPriceLabel, originalPriceValue, discountLabel, discountAmountLabel, promoCodeLabel, promoCode, totalLabel, totalValue, savedLabel, showPromo }: SummaryProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/providers/stripe/components/SharedStripeCheckoutV2Summary.internal.js

@@ -0,0 +1,19 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+const formatCountdown = (remainingSeconds) => {
+    const normalizedSeconds = Number.isFinite(remainingSeconds)
+        ? Math.max(0, Math.floor(remainingSeconds))
+        : 0;
+    const minutes = Math.floor(normalizedSeconds / 60);
+    const seconds = normalizedSeconds % 60;
+    return `${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;
+};
+export function SharedStripeCheckoutV2Summary({ discountPercent, countdownLabel, remainingSeconds, variant, satisfactionPercent, satisfactionLabel, originalPriceLabel, originalPriceValue, discountLabel, discountAmountLabel, promoCodeLabel, promoCode, totalLabel, totalValue, savedLabel, showPromo }) {
+    const countdownValue = formatCountdown(remainingSeconds);
+    const normalizedPromoCode = promoCode.trim();
+    return (_jsxs("section", { className: 'shared-checkout-v2-summary', children: [showPromo ? (_jsxs("p", { className: 'shared-checkout-v2-countdown', children: [discountPercent, "% ", countdownLabel, " ", countdownValue, " min"] })) : null, variant === 'standard' ? (_jsxs("p", { className: 'shared-checkout-v2-satisfaction', children: [_jsx("strong", { children: satisfactionPercent }), " ", satisfactionLabel] })) : null, 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] }));
+}

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

@@ -1,5 +1,6 @@
 'use client';
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { isValidCheckoutEmail, isCheckoutEmailError } from '../../../services/checkoutEmail.js';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { ExpressCheckoutElement, useCheckout, } from '@stripe/react-stripe-js/checkout';
 import { queueStripeSubscriptionCheckoutStarted, trackPaidStripeSubscriptionCheckoutCompleted, trackStripeSubscriptionPaymentInfoSubmitted, } from '../services/checkoutCompletionAnalytics.service.js';
@@ -188,7 +189,7 @@ export function StripeCheckoutExpressCheckoutButton({ beforeConfirm, checkoutAna
                 providerErrorType: providerError === null || providerError === void 0 ? void 0 : providerError.type,
             });
         }
-        onError === null || onError === void 0 ? void 0 : onError(message);
+        onError === null || onError === void 0 ? void 0 : onError(isCheckoutEmailError(providerError) ? 'Enter a valid email address to continue.' : message);
     };
     const handleConfirm = async (event) => {
         var _a, _b, _c, _d, _e, _f;
@@ -235,8 +236,8 @@ export function StripeCheckoutExpressCheckoutButton({ beforeConfirm, checkoutAna
                 return;
             }
         }
-        if (beforeConfirm && !preparedCustomerEmail) {
-            const message = 'Email is required to continue.';
+        if (!isValidCheckoutEmail(preparedCustomerEmail)) {
+            const message = 'Enter a valid email address to continue.';
             if (checkoutAnalytics) {
                 trackCheckoutCanceled({
                     analytics: checkoutAnalytics,
@@ -250,6 +251,12 @@ export function StripeCheckoutExpressCheckoutButton({ beforeConfirm, checkoutAna
             event.paymentFailed({ reason: 'invalid_payment_data', message });
             return;
         }
+        if ((preparedCustomerEmail === null || preparedCustomerEmail === void 0 ? void 0 : preparedCustomerEmail.trim()) !== (customerEmail === null || customerEmail === void 0 ? void 0 : customerEmail.trim())) {
+            const message = 'Your email was updated. Please select your payment method again.';
+            event.paymentFailed({ reason: 'invalid_payment_data', message });
+            onError === null || onError === void 0 ? void 0 : onError(message);
+            return;
+        }
         if (checkoutAnalytics) {
             await trackStripeSubscriptionPaymentInfoSubmitted(Object.assign({ checkoutSessionId }, checkoutAnalytics)).catch(() => 'analytics_rejected');
         }

package/dist/providers/stripe/components/StripeWalletSurface.internal.d.ts

@@ -1,3 +1,4 @@
+import { type CheckoutEmailDialogProps } from '../../../components/CheckoutEmailDialog.js';
 import type { StripeWalletCheckoutSuccess } from './StripeCheckoutExpressCheckoutButton.js';
 import { type ReactNode } from 'react';
 import type { Appearance, StripeCheckoutExpressCheckoutElementOptions } from '@stripe/stripe-js';
@@ -57,6 +58,9 @@ export type StripeWalletSurfaceProps = {
     className?: string;
     containerClassName?: string;
     customerEmail?: string | null;
+    onCustomerEmailCommit?: CheckoutEmailDialogProps['onSave'];
+    onResolveCustomerEmail?: () => Promise<string | null>;
+    emailDialogContent?: Pick<CheckoutEmailDialogProps, 'title' | 'description' | 'emailLabel' | 'placeholder' | 'invalidMessage' | 'continueLabel' | 'cancelLabel'>;
     customerName?: string | null;
     disabled?: boolean;
     googlePayOptions?: Partial<StripeCheckoutExpressCheckoutElementOptions>;
@@ -80,4 +84,4 @@ export type StripeWalletSurfaceProps = {
     surfaceId: string;
     suspended?: boolean;
 };
-export declare function StripeWalletSurface({ amountCents, appearance, applePayOptions, applePayPlaceholderLabel, beforeConfirm, checkoutAnalytics, className, containerClassName, customerEmail, customerName, disabled, googlePayOptions, googlePayPlaceholderLabel, onAvailabilityChange, onCancel, onError, onPaymentInfoSubmitted, onSuccess, onUnavailableClick, paymentMethods, renderHeader, resolveMethodClassName, resolveMethodWrapperClassName, returnUrl, session, slotClassName, summaryLabel, surfaceId, suspended, }: StripeWalletSurfaceProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function StripeWalletSurface({ amountCents, appearance, applePayOptions, applePayPlaceholderLabel, beforeConfirm, checkoutAnalytics, className, containerClassName, customerEmail, onCustomerEmailCommit, onResolveCustomerEmail, emailDialogContent, customerName, disabled, googlePayOptions, googlePayPlaceholderLabel, onAvailabilityChange, onCancel, onError, onPaymentInfoSubmitted, onSuccess, onUnavailableClick, paymentMethods, renderHeader, resolveMethodClassName, resolveMethodWrapperClassName, returnUrl, session, slotClassName, summaryLabel, surfaceId, suspended, }: StripeWalletSurfaceProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/providers/stripe/components/StripeWalletSurface.internal.js

@@ -1,5 +1,7 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CheckoutEmailDialog } from '../../../components/CheckoutEmailDialog.js';
+import { isCheckoutEmailError, isValidCheckoutEmail, normalizeCheckoutEmailResult } from '../../../services/checkoutEmail.js';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { usePlatformWalletPaymentMethods, } from './walletPlatform.js';
 import { ApplePaySubscriptionCheckoutSlot } from './ApplePaySubscriptionCheckoutSlot.js';
@@ -74,8 +76,41 @@ function buildAvailabilitySignature(availability) {
             .join(','),
     ].join('|');
 }
-export function StripeWalletSurface({ amountCents, appearance, applePayOptions, applePayPlaceholderLabel, beforeConfirm, checkoutAnalytics, className, containerClassName, customerEmail, customerName, disabled, googlePayOptions, googlePayPlaceholderLabel, onAvailabilityChange, onCancel, onError, onPaymentInfoSubmitted, onSuccess, onUnavailableClick, paymentMethods, renderHeader, resolveMethodClassName, resolveMethodWrapperClassName, returnUrl, session, slotClassName, summaryLabel, surfaceId, suspended = false, }) {
-    var _a;
+export function StripeWalletSurface({ amountCents, appearance, applePayOptions, applePayPlaceholderLabel, beforeConfirm, checkoutAnalytics, className, containerClassName, customerEmail, onCustomerEmailCommit, onResolveCustomerEmail, emailDialogContent, customerName, disabled, googlePayOptions, googlePayPlaceholderLabel, onAvailabilityChange, onCancel, onError, onPaymentInfoSubmitted, onSuccess, onUnavailableClick, paymentMethods, renderHeader, resolveMethodClassName, resolveMethodWrapperClassName, returnUrl, session, slotClassName, summaryLabel, surfaceId, suspended = false, }) {
+    var _a, _b, _c;
+    const [emailDialogOpen, setEmailDialogOpen] = useState(false);
+    const [rejectedEmail, setRejectedEmail] = useState(null);
+    const [savedEmail, setSavedEmail] = useState(null);
+    const normalizedEmail = (_a = customerEmail === null || customerEmail === void 0 ? void 0 : customerEmail.trim()) !== null && _a !== void 0 ? _a : '';
+    const needsEmail = !isValidCheckoutEmail(normalizedEmail)
+        || rejectedEmail === normalizedEmail
+        || (savedEmail !== null && savedEmail !== normalizedEmail);
+    const [resolvingEmail, setResolvingEmail] = useState(false);
+    useEffect(() => {
+        if (savedEmail === normalizedEmail)
+            setSavedEmail(null);
+    }, [normalizedEmail, savedEmail]);
+    const openEmailDialog = async () => {
+        if (resolvingEmail)
+            return;
+        if (!onCustomerEmailCommit) {
+            await (onUnavailableClick === null || onUnavailableClick === void 0 ? void 0 : onUnavailableClick());
+            return;
+        }
+        setResolvingEmail(true);
+        try {
+            const resolved = await (onResolveCustomerEmail === null || onResolveCustomerEmail === void 0 ? void 0 : onResolveCustomerEmail());
+            if (isValidCheckoutEmail(resolved) && (resolved === null || resolved === void 0 ? void 0 : resolved.trim()) !== rejectedEmail)
+                return;
+            setEmailDialogOpen(true);
+        }
+        catch (_a) {
+            setEmailDialogOpen(true);
+        }
+        finally {
+            setResolvingEmail(false);
+        }
+    };
     const platformWalletPaymentMethods = usePlatformWalletPaymentMethods();
     const walletPaymentMethods = normalizeStripeWalletSurfaceMethods(paymentMethods !== null && paymentMethods !== void 0 ? paymentMethods : platformWalletPaymentMethods);
     const normalizedSurfaceId = surfaceId.trim();
@@ -92,6 +127,10 @@ export function StripeWalletSurface({ amountCents, appearance, applePayOptions,
         surfaceMessage: null,
     });
     const emitError = useCallback((message, paymentMethod) => {
+        if (isCheckoutEmailError(message)) {
+            setRejectedEmail(normalizedEmail);
+            setEmailDialogOpen(true);
+        }
         const emission = resolveStripeWalletSurfaceError({
             errorState: errorStateRef.current,
             message,
@@ -103,7 +142,7 @@ export function StripeWalletSurface({ amountCents, appearance, applePayOptions,
         }
         errorStateRef.current = emission.errorState;
         onError === null || onError === void 0 ? void 0 : onError(emission.message, emission.context);
-    }, [normalizedSurfaceId, onError]);
+    }, [normalizedEmail, normalizedSurfaceId, onError]);
     useEffect(() => {
         if (reportedAvailabilitySignatureRef.current === availabilitySignature) {
             return;
@@ -152,6 +191,16 @@ export function StripeWalletSurface({ amountCents, appearance, applePayOptions,
         resolved: availability.resolved,
         suspended,
     });
+    if (needsEmail && session.configured && !suspended && walletPaymentMethods.length > 0) {
+        return (_jsxs("div", { className: containerClassName, "data-wallet-surface-id": normalizedSurfaceId, children: [_jsx("button", { type: 'button', className: ['bg-card text-foreground border-border', className].filter(Boolean).join(' '), style: { minHeight: 55, width: '100%', borderRadius: 12, font: 'inherit', cursor: 'pointer' }, disabled: disabled || resolvingEmail, onClick: () => void openEmailDialog(), children: (_b = emailDialogContent === null || emailDialogContent === void 0 ? void 0 : emailDialogContent.continueLabel) !== null && _b !== void 0 ? _b : 'Continue' }), emailDialogOpen && onCustomerEmailCommit ? (_jsx(CheckoutEmailDialog, Object.assign({}, emailDialogContent, { customerEmail: normalizedEmail, rejectedEmail: rejectedEmail, onClose: () => setEmailDialogOpen(false), onSave: async (email) => {
+                        const saved = await onCustomerEmailCommit(email);
+                        const nextEmail = normalizeCheckoutEmailResult(saved, email, emailDialogContent === null || emailDialogContent === void 0 ? void 0 : emailDialogContent.invalidMessage);
+                        setSavedEmail(nextEmail);
+                        setRejectedEmail(null);
+                        session.setError(null);
+                        return nextEmail;
+                    } }))) : null] }));
+    }
     if (!shouldRenderSurface) {
         return null;
     }
@@ -160,7 +209,7 @@ export function StripeWalletSurface({ amountCents, appearance, applePayOptions,
             containerClassName !== null && containerClassName !== void 0 ? containerClassName : '',
         ]
             .filter(Boolean)
-            .join(' '), "data-wallet-surface-id": normalizedSurfaceId, children: [(_a = renderHeader === null || renderHeader === void 0 ? void 0 : renderHeader({ availability })) !== null && _a !== void 0 ? _a : null, visibleWalletPaymentMethods.map((method) => {
+            .join(' '), "data-wallet-surface-id": normalizedSurfaceId, children: [(_c = renderHeader === null || renderHeader === void 0 ? void 0 : renderHeader({ availability })) !== null && _c !== void 0 ? _c : null, visibleWalletPaymentMethods.map((method) => {
                 var _a;
                 return (_jsx("div", { className: [
                         'stripe-subscription-wallet-surface__method',

package/dist/providers/stripe/components/useCheckoutEmail.internal.d.ts

@@ -0,0 +1,20 @@
+import type { SharedStripeCheckoutV2DialogProps } from './SharedStripeCheckoutV2Dialog.js';
+type EmailInput = Pick<SharedStripeCheckoutV2DialogProps, 'customerEmail' | 'onCustomerEmailCommit' | 'onCustomerEmailChange'> & {
+    allowEmailEditing: boolean;
+    customerEmailInvalidMessage: string;
+    onError: (message: string) => void;
+};
+export declare function useCheckoutEmail({ customerEmail, allowEmailEditing, customerEmailInvalidMessage, onCustomerEmailCommit, onCustomerEmailChange, onError }: EmailInput): {
+    initialCustomerEmail: string;
+    resolvedCustomerEmail: string;
+    customerEmailEditable: boolean;
+    emailDraft: string;
+    setEmailDraft: import("react").Dispatch<import("react").SetStateAction<string>>;
+    rejectedEmail: string | null;
+    setRejectedEmail: import("react").Dispatch<import("react").SetStateAction<string | null>>;
+    emailSaving: boolean;
+    emailSessionChanged: boolean;
+    commitEmailDraftIfValid: (value: string) => void;
+    ensureCustomerEmail: () => Promise<string | null>;
+};
+export {};

package/dist/providers/stripe/components/useCheckoutEmail.internal.js

@@ -0,0 +1,74 @@
+'use client';
+import { useRef, useState } from 'react';
+import { isValidCheckoutEmail as isValidEmail, normalizeCheckoutEmailResult } from '../../../services/checkoutEmail.js';
+export function useCheckoutEmail({ customerEmail, allowEmailEditing, customerEmailInvalidMessage, onCustomerEmailCommit, onCustomerEmailChange, onError }) {
+    const initialCustomerEmail = (customerEmail === null || customerEmail === void 0 ? void 0 : customerEmail.trim()) || '';
+    const sessionCustomerEmail = useRef(initialCustomerEmail).current;
+    const emailSessionChanged = sessionCustomerEmail !== initialCustomerEmail;
+    const [emailDraft, setEmailDraft] = useState(initialCustomerEmail);
+    const [rejectedEmail, setRejectedEmail] = useState(null);
+    const customerEmailEditable = allowEmailEditing || !isValidEmail(initialCustomerEmail) || rejectedEmail !== null;
+    const resolvedCustomerEmail = customerEmailEditable
+        ? emailDraft.trim()
+        : initialCustomerEmail;
+    const emailCommitRef = useRef(null);
+    const [emailSaving, setEmailSaving] = useState(false);
+    const commitCustomerEmail = async (normalizedEmail) => {
+        if (emailCommitRef.current)
+            return emailCommitRef.current;
+        if ((rejectedEmail === null || rejectedEmail === void 0 ? void 0 : rejectedEmail.toLowerCase()) === normalizedEmail.toLowerCase()) {
+            throw new Error(customerEmailInvalidMessage);
+        }
+        if (normalizedEmail === initialCustomerEmail)
+            return normalizedEmail;
+        if (!onCustomerEmailCommit)
+            throw new Error('Unable to save your email. Please try again.');
+        setEmailSaving(true);
+        const pending = (async () => {
+            const committedEmail = await onCustomerEmailCommit(normalizedEmail);
+            const nextEmail = normalizeCheckoutEmailResult(committedEmail, normalizedEmail, customerEmailInvalidMessage);
+            setEmailDraft(nextEmail);
+            setRejectedEmail(null);
+            onCustomerEmailChange === null || onCustomerEmailChange === void 0 ? void 0 : onCustomerEmailChange(nextEmail);
+            return nextEmail;
+        })();
+        emailCommitRef.current = pending;
+        try {
+            return await pending;
+        }
+        finally {
+            emailCommitRef.current = null;
+            setEmailSaving(false);
+        }
+    };
+    const commitEmailDraftIfValid = (value) => {
+        const normalizedEmail = value.trim();
+        if (!customerEmailEditable || !onCustomerEmailCommit) {
+            return;
+        }
+        if (!normalizedEmail || !isValidEmail(normalizedEmail)) {
+            return;
+        }
+        void commitCustomerEmail(normalizedEmail).catch((commitError) => {
+            onError(commitError instanceof Error ? commitError.message : 'Unable to save your email. Please try again.');
+        });
+    };
+    const ensureCustomerEmail = async () => {
+        if (emailSessionChanged)
+            return null;
+        const normalizedEmail = resolvedCustomerEmail.trim();
+        if (!normalizedEmail || !isValidEmail(normalizedEmail)) {
+            onError(customerEmailInvalidMessage);
+            return null;
+        }
+        if (emailCommitRef.current || normalizedEmail !== initialCustomerEmail || rejectedEmail !== null) {
+            await commitCustomerEmail(normalizedEmail);
+            // Saving can switch Funnel User and replace this Checkout Session. Require a fresh action.
+            return null;
+        }
+        return normalizedEmail;
+    };
+    return { initialCustomerEmail, resolvedCustomerEmail, customerEmailEditable,
+        emailDraft, setEmailDraft, rejectedEmail, setRejectedEmail, emailSaving,
+        emailSessionChanged, commitEmailDraftIfValid, ensureCustomerEmail };
+}

package/dist/services/checkoutEmail.d.ts

@@ -0,0 +1,3 @@
+export declare const isValidCheckoutEmail: (value?: string | null) => boolean;
+export declare const isCheckoutEmailError: (error: unknown) => boolean;
+export declare const normalizeCheckoutEmailResult: (result: string | null | void, submittedEmail: string, invalidMessage?: string) => string;

package/dist/services/checkoutEmail.js

@@ -0,0 +1,20 @@
+export const isValidCheckoutEmail = (value) => { var _a; return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test((_a = value === null || value === void 0 ? void 0 : value.trim()) !== null && _a !== void 0 ? _a : ''); };
+export const isCheckoutEmailError = (error) => {
+    const record = error && typeof error === 'object'
+        ? error
+        : null;
+    if ((record === null || record === void 0 ? void 0 : record.code) === 'email_invalid' || (record === null || record === void 0 ? void 0 : record.code) === 'stripe_email_invalid') {
+        return true;
+    }
+    const message = typeof error === 'string' ? error : record === null || record === void 0 ? void 0 : record.message;
+    return typeof message === 'string'
+        && /(?:invalid email|valid email address|email (?:address )?is (?:invalid|required))/i.test(message);
+};
+export const normalizeCheckoutEmailResult = (result, submittedEmail, invalidMessage = 'Enter a valid email address.') => {
+    if (result === null)
+        throw new Error('Unable to save your email. Please try again.');
+    const email = typeof result === 'string' ? result.trim() : submittedEmail.trim();
+    if (!isValidCheckoutEmail(email))
+        throw new Error(invalidMessage);
+    return email;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@funnelsgrove/payments",
-  "version": "0.15.7",
+  "version": "0.15.10",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/The-Solid-Grove/funnelsgrove.git",
@@ -32,8 +32,8 @@
     "test:run": "vitest run --passWithNoTests"
   },
   "dependencies": {
-    "@funnelsgrove/analytics": "0.1.104",
-    "@funnelsgrove/runtime": "0.14.2",
+    "@funnelsgrove/analytics": "0.1.105",
+    "@funnelsgrove/runtime": "0.14.3",
     "@solidgate/react-sdk": "1.34.0",
     "@stripe/react-stripe-js": "^5.6.0",
     "@stripe/stripe-js": "^8.7.0",