@funnelsgrove/payments 0.22.6 → 0.23.2

package/README.md

@@ -68,6 +68,23 @@ unchanged. Set `errorMessagePolicy: 'content'` to render load/cancel failures fr
 the content's `errorMessages`. The default `'server'` policy preserves existing
 error rendering independently of the selected labels.
 
+## Checkout email prompt
+
+When the access email is missing or invalid, wallet surfaces render nothing.
+The funnel's primary payment CTA (such as Get My Plan) opens `CheckoutEmailDialog`
+and saves the email through the existing caller-owned identity update. Once the
+caller adopts the saved email, wallet controls can mount. Provider email rejections
+still open the surface's repair dialog; saving never confirms the old session.
+
+`CheckoutEmailDialog` defaults to a light surface regardless of the browser or
+ancestor theme. It inherits the funnel font. Set inherited `--checkout-email-*`
+CSS variables on the funnel root or `.checkout-email-dialog` to customize it:
+`background`, `foreground`, `muted`, `border`, `input-background`,
+`button-background`, `button-foreground`, `focus`, and `error`.
+For example, `--checkout-email-button-background: var(--color-primary)` uses the
+funnel accent. Set foreground/background pairs together for custom dark surfaces.
+Existing `dialog.checkout-email-dialog` CSS overrides continue to work.
+
 ## Advanced Wallet Primitives
 
 `ApplePaySubscriptionCheckoutSlot`, `GooglePaySubscriptionCheckoutSlot`, and `WalletSubscriptionCheckoutSlot` stay exported and runtime-compatible. They are backward-compatible advanced low-level primitives: reach for them only when a placement needs wiring the shared wallet surfaces do not cover. Never share one checkout hook result across placements; give each visible placement its own session.
@@ -194,3 +211,13 @@ including legacy wallet launchers. Mount it before wallet launch, persist throug
 `isValidCheckoutEmail` and `isCheckoutEmailError` share validation and recovery
 classification. `onCustomerEmailChange` in the card dialog reports a committed
 email, not each draft keystroke, so typing cannot prepare sessions for unsaved input.
+
+## Offer price money
+
+Published plans expose optional `money: ProviderMoney`; new mappings supply it. Discount presentation and purchase analytics use its amount, currency and exponent. `amountCents` remains a legacy wire alias and does not define the scale of structured money. Independent plans can use different currencies. Currency is selected by the provider price, not by an Offer Set setting.
+
+### Published offer selection and checkout attempts
+
+Use `resolvePublishedBillingRuntimeState` with configuration, browser locale and experiment assignments that are ready. Its result is `pending`, `resolved` or `error`. Pending/error states must not prepare Stripe card/wallet or Solidgate checkout; the maintained templates render an inert zero-plan state rather than a starter catalog.
+
+`usePinnedPublishedBillingRuntime` holds the complete resolved catalog at the first payment preparation. Wire its `pin` callback to preparation and release both the payment session and this snapshot on explicit reset. Displayed prices, provider, revision, source version, locale and experiment assignment then remain consistent through background updates. The visitor can still choose another plan within the pinned offer set. A new attempt after reset can adopt the latest configuration.

package/dist/components/CheckoutEmailDialog.js

@@ -47,20 +47,19 @@ export function CheckoutEmailDialog({ customerEmail, rejectedEmail, onSave, onCl
             if (!busyRef.current)
                 onClose();
         }, children: [_jsxs("form", { onSubmit: submit, noValidate: true, "aria-busy": busy, children: [_jsx("h2", { id: titleId, children: title }), _jsx("p", { children: description }), _jsxs("label", { children: [emailLabel, _jsx("input", { type: 'email', autoComplete: 'email', inputMode: 'email', autoFocus: true, className: 'bg-background text-foreground border-border', value: draft, placeholder: placeholder, disabled: busy, "aria-invalid": Boolean(error), "aria-describedby": error ? errorId : undefined, onChange: (event) => { setDraft(event.target.value); setError(null); } })] }), error ? _jsx("p", { id: errorId, role: 'alert', children: error }) : null, _jsxs("div", { className: 'checkout-email-dialog-actions', children: [_jsx("button", { type: 'button', className: 'bg-background text-foreground border-border', disabled: busy, onClick: onClose, children: cancelLabel }), _jsx("button", { type: 'submit', className: 'bg-accent text-foreground border-border', disabled: busy, children: busy ? 'Saving…' : continueLabel })] })] }), _jsx("style", { children: `
-        .checkout-email-dialog { color-scheme: light dark; box-sizing: border-box; width: min(420px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow-y: auto; margin: auto; padding: 24px; border: 1px solid GrayText; border-radius: 20px; background: Canvas; color: CanvasText; font: inherit; }
-        .dark .checkout-email-dialog, [data-theme=dark] .checkout-email-dialog { color-scheme: dark; }
-        .light .checkout-email-dialog, [data-theme=light] .checkout-email-dialog { color-scheme: light; }
-        .checkout-email-dialog::backdrop { background: rgb(0 0 0 / 45%); }
-        .checkout-email-dialog h2 { color: inherit; margin: 0 0 12px; font-size: 24px; line-height: 1.2; }
-        .checkout-email-dialog p { margin: 0 0 20px; line-height: 1.5; }
-        .checkout-email-dialog label { display: grid; gap: 8px; }
-        .checkout-email-dialog input { box-sizing: border-box; width: 100%; min-height: 48px; padding: 12px; border: 1px solid GrayText; border-radius: 10px; background: Canvas; color: CanvasText; font: inherit; font-size: 16px; }
-        .checkout-email-dialog input::placeholder { color: GrayText; }
-        .checkout-email-dialog [role=alert] { margin-top: 12px; font-weight: 600; }
+        .checkout-email-dialog { color-scheme: light; box-sizing: border-box; width: min(420px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow-y: auto; margin: auto; padding: 24px; border: 1px solid var(--checkout-email-border, #e3e6ed); border-radius: 24px; background: var(--checkout-email-background, #fff); color: var(--checkout-email-foreground, #252936); box-shadow: 0 24px 64px rgb(0 0 0 / 18%), 0 4px 16px rgb(0 0 0 / 6%); font: inherit; }
+        .checkout-email-dialog::backdrop { background: rgb(0 0 0 / 35%); }
+        .checkout-email-dialog h2 { color: inherit; margin: 0 0 8px; font-size: 24px; line-height: 1.2; }
+        .checkout-email-dialog p { color: var(--checkout-email-muted, #626978); margin: 0 0 20px; line-height: 1.5; }
+        .checkout-email-dialog label { display: grid; gap: 8px; font-weight: 600; }
+        .checkout-email-dialog input { box-sizing: border-box; width: 100%; min-height: 48px; padding: 12px; border: 1px solid var(--checkout-email-border, #e3e6ed); border-radius: 12px; background: var(--checkout-email-input-background, #f7f8fb); color: inherit; font: inherit; font-size: 16px; }
+        .checkout-email-dialog input::placeholder { color: var(--checkout-email-muted, #626978); }
+        .checkout-email-dialog [role=alert] { margin-top: 12px; color: var(--checkout-email-error, #b42318); font-weight: 600; }
         .checkout-email-dialog-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
-        .checkout-email-dialog button { flex: 1; padding: 12px; min-height: 48px; border: 1px solid GrayText; border-radius: 10px; background: Canvas; color: CanvasText; font: inherit; cursor: pointer; }
-        .checkout-email-dialog button[type=submit] { font-weight: 700; border: 2px solid CanvasText; }
+        .checkout-email-dialog button { flex: 1; padding: 12px; min-height: 48px; border: 1px solid var(--checkout-email-border, #e3e6ed); border-radius: 12px; background: var(--checkout-email-background, #fff); color: inherit; font: inherit; cursor: pointer; }
+        .checkout-email-dialog button[type=submit] { font-weight: 700; border-color: transparent; background: var(--checkout-email-button-background, #3156d3); color: var(--checkout-email-button-foreground, #fff); }
+        .checkout-email-dialog button:hover:not(:disabled) { filter: brightness(.96); }
         .checkout-email-dialog button:disabled { opacity: .6; cursor: wait; }
-        .checkout-email-dialog :focus-visible { outline: 2px solid Highlight; outline-offset: 3px; }
+        .checkout-email-dialog :focus-visible { outline: 2px solid var(--checkout-email-focus, #3156d3); outline-offset: 3px; }
       ` })] }));
 }

package/dist/config/billing.config.d.ts

@@ -1,3 +1,4 @@
+import type { ProviderMoney } from '@funnelsgrove/runtime';
 export type BillingPlanComparison = {
     perDay: string;
     perWeek: string;
@@ -16,6 +17,8 @@ export type BillingPlanConfig = {
     featuredTag?: string;
     perDayAmount: string;
     amountCents: number;
+    money?: ProviderMoney;
+    currency?: string;
     analyticsPurchaseValue?: number;
     checkoutSummaryLabel?: string;
     followUpProviderPlanId?: string;

package/dist/index.d.ts

@@ -5,6 +5,7 @@ export * from './services/planCatalog.service.js';
 export * from './services/paywallPlans.service.js';
 export * from './services/runtimeBillingPlanCatalog.service.js';
 export * from './services/publishedBillingRuntime.service.js';
+export * from './services/usePinnedPublishedBillingRuntime.js';
 export * from './services/paywallOffer.service.js';
 export * from './services/paymentMethodAnalytics.service.js';
 export * from './services/checkoutObservability.service.js';

package/dist/index.js

@@ -6,6 +6,7 @@ export * from './services/planCatalog.service.js';
 export * from './services/paywallPlans.service.js';
 export * from './services/runtimeBillingPlanCatalog.service.js';
 export * from './services/publishedBillingRuntime.service.js';
+export * from './services/usePinnedPublishedBillingRuntime.js';
 export * from './services/paywallOffer.service.js';
 export * from './services/paymentMethodAnalytics.service.js';
 export * from './services/checkoutObservability.service.js';

package/dist/providers/solidgate/components/SolidgateCheckoutDialog.d.ts

@@ -1,3 +1,3 @@
 import type { SolidgateCheckoutDialogProps } from './SolidgateCheckoutDialog.types.js';
 export type { SolidgateCheckoutDialogState, SolidgateCheckoutDialogContent, SolidgateCheckoutDialogPresentation, SolidgateCheckoutDialogProps, SolidgateCheckoutAnalyticsContext, } from './SolidgateCheckoutDialog.types.js';
-export declare function SolidgateCheckoutDialog({ open, request, customerEmail, checkoutAnalytics, content, presentation, onClose, onCustomerEmailCommit, onSuccess, onRetry, onError, onStateChange, }: SolidgateCheckoutDialogProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function SolidgateCheckoutDialog({ open, request, customerEmail, checkoutAnalytics, content, presentation, onClose, onCustomerEmailCommit, onSuccess, onRetry, onError, onPreparationStart, onStateChange, }: SolidgateCheckoutDialogProps): import("react/jsx-runtime").JSX.Element | null;

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

@@ -65,7 +65,7 @@ const trackSolidgateCheckoutEvent = async (eventName, attemptId, context) => {
     }
 };
 const isAbortError = (error) => (error instanceof DOMException && error.name === 'AbortError');
-export function SolidgateCheckoutDialog({ open, request, customerEmail, checkoutAnalytics, content, presentation, onClose, onCustomerEmailCommit, onSuccess, onRetry, onError, onStateChange, }) {
+export function SolidgateCheckoutDialog({ open, request, customerEmail, checkoutAnalytics, content, presentation, onClose, onCustomerEmailCommit, onSuccess, onRetry, onError, onPreparationStart, onStateChange, }) {
     const copy = useMemo(() => (Object.assign(Object.assign({}, defaultContent), content)), [content]);
     const [view, setView] = useState(initialView);
     const [retryRequest, setRetryRequest] = useState(null);
@@ -76,6 +76,7 @@ export function SolidgateCheckoutDialog({ open, request, customerEmail, checkout
     const [emailSubmitting, setEmailSubmitting] = useState(false);
     const [mountedPaymentAttemptId, setMountedPaymentAttemptId] = useState(null);
     const prepareAbortRef = useRef(null);
+    const preparedRequestRef = useRef(null);
     const statusAbortRef = useRef(null);
     const successAttemptRef = useRef(null);
     const paymentInfoAttemptRef = useRef(null);
@@ -146,6 +147,8 @@ export function SolidgateCheckoutDialog({ open, request, customerEmail, checkout
         runtimeFunnelId,
         successUrl,
     ]);
+    const latestRequestRef = useRef(normalizedRequest);
+    latestRequestRef.current = normalizedRequest;
     const setState = useCallback((nextView) => {
         var _a;
         setView(nextView);
@@ -167,8 +170,9 @@ export function SolidgateCheckoutDialog({ open, request, customerEmail, checkout
     }, []);
     const requiresEmailCommit = Boolean(onCustomerEmailCommit);
     useEffect(() => {
-        var _a, _b, _c, _d, _e, _f;
+        var _a, _b, _c, _d, _e, _f, _g;
         if (!open) {
+            preparedRequestRef.current = null;
             (_a = prepareAbortRef.current) === null || _a === void 0 ? void 0 : _a.abort();
             (_b = statusAbortRef.current) === null || _b === void 0 ? void 0 : _b.abort();
             return;
@@ -184,8 +188,10 @@ export function SolidgateCheckoutDialog({ open, request, customerEmail, checkout
             return;
         }
         const controller = new AbortController();
-        (_e = prepareAbortRef.current) === null || _e === void 0 ? void 0 : _e.abort();
-        (_f = statusAbortRef.current) === null || _f === void 0 ? void 0 : _f.abort();
+        onPreparationStart === null || onPreparationStart === void 0 ? void 0 : onPreparationStart();
+        const preparedRequest = (_e = preparedRequestRef.current) !== null && _e !== void 0 ? _e : (preparedRequestRef.current = latestRequestRef.current);
+        (_f = prepareAbortRef.current) === null || _f === void 0 ? void 0 : _f.abort();
+        (_g = statusAbortRef.current) === null || _g === void 0 ? void 0 : _g.abort();
         prepareAbortRef.current = controller;
         successAttemptRef.current = null;
         paymentInfoAttemptRef.current = null;
@@ -195,7 +201,7 @@ export function SolidgateCheckoutDialog({ open, request, customerEmail, checkout
                 setState(initialView);
             }
         });
-        void prepareSolidgateCheckout(Object.assign(Object.assign({}, normalizedRequest), { signal: controller.signal }))
+        void prepareSolidgateCheckout(Object.assign(Object.assign({}, preparedRequest), { signal: controller.signal }))
             .then((checkout) => {
             if (!controller.signal.aborted) {
                 setState({ state: 'ready', checkout, canResumeVerification: false });
@@ -211,7 +217,7 @@ export function SolidgateCheckoutDialog({ open, request, customerEmail, checkout
             }
         });
         return () => controller.abort();
-    }, [committedEmail, normalizedRequest, open, requiresEmailCommit, setState, trackFailure]);
+    }, [checkoutKey, committedEmail, onPreparationStart, open, requiresEmailCommit, setState, trackFailure]);
     const paymentFormMounted = Boolean(view.checkout && mountedPaymentAttemptId === view.checkout.attemptId);
     const showPreparingLoader = view.state === 'loading'
         || (view.state === 'ready' && !paymentFormMounted);
@@ -395,8 +401,11 @@ export function SolidgateCheckoutDialog({ open, request, customerEmail, checkout
                                     setState(Object.assign(Object.assign({}, view), { state: 'recoverable_error', canResumeVerification: false }));
                                     trackFailure(copyRef.current.error, 'payment_form', (_a = view.checkout) === null || _a === void 0 ? void 0 : _a.attemptId);
                                     (_b = onErrorRef.current) === null || _b === void 0 ? void 0 : _b.call(onErrorRef, copyRef.current.error);
-                                } }, view.checkout.attemptId)) : null, presentation && view.checkout && showForm ? (_jsx("p", { className: 'solidgate-checkout-secure', children: presentation.secureLabel })) : null, statusMessage && view.state !== 'ready' ? (_jsx("div", { className: 'solidgate-checkout-status', children: _jsx("p", { role: 'status', "aria-live": 'polite', children: statusMessage }) })) : null, view.canResumeVerification ? (_jsx("button", { type: 'button', onClick: () => void verifyCanonicalStatus(), className: 'solidgate-checkout-action solidgate-checkout-action--spaced', children: copy.resumeVerification })) : null, (view.state === 'recoverable_error' || view.state === 'expired') && !view.canResumeVerification ? (_jsx("button", { type: 'button', onClick: onRetry || (() => setRetryRequest({
-                                    originalKey: idempotencyKey,
-                                    key: crypto.randomUUID(),
-                                })), className: 'solidgate-checkout-action solidgate-checkout-action--spaced', children: copy.retry })) : null] })) : null] }), _jsx("style", { children: solidgateCheckoutDialogStyles })] }));
+                                } }, view.checkout.attemptId)) : null, presentation && view.checkout && showForm ? (_jsx("p", { className: 'solidgate-checkout-secure', children: presentation.secureLabel })) : null, statusMessage && view.state !== 'ready' ? (_jsx("div", { className: 'solidgate-checkout-status', children: _jsx("p", { role: 'status', "aria-live": 'polite', children: statusMessage }) })) : null, view.canResumeVerification ? (_jsx("button", { type: 'button', onClick: () => void verifyCanonicalStatus(), className: 'solidgate-checkout-action solidgate-checkout-action--spaced', children: copy.resumeVerification })) : null, (view.state === 'recoverable_error' || view.state === 'expired') && !view.canResumeVerification ? (_jsx("button", { type: 'button', onClick: onRetry || (() => {
+                                    preparedRequestRef.current = null;
+                                    setRetryRequest({
+                                        originalKey: idempotencyKey,
+                                        key: crypto.randomUUID(),
+                                    });
+                                }), className: 'solidgate-checkout-action solidgate-checkout-action--spaced', children: copy.retry })) : null] })) : null] }), _jsx("style", { children: solidgateCheckoutDialogStyles })] }));
 }

package/dist/providers/solidgate/components/SolidgateCheckoutDialog.types.d.ts

@@ -1,4 +1,5 @@
 import type { FunnelSdkRuntimeConfigOverrides, FunnelStepType, RuntimeMode } from '@funnelsgrove/runtime';
+import type { PublicAnalyticsFeatureFlags } from '@funnelsgrove/analytics';
 import type { PrepareSolidgateCheckoutInput, SolidgateCheckoutPreparation } from '../services/solidgate.service.js';
 export type SolidgateCheckoutDialogState = 'collecting_email' | 'loading' | 'ready' | 'submitting' | 'verifying' | 'success' | 'recoverable_error' | 'expired';
 export type SolidgateCheckoutDialogContent = {
@@ -52,11 +53,12 @@ export type SolidgateCheckoutDialogProps = {
     onSuccess?: (checkout: SolidgateCheckoutPreparation) => void | Promise<void>;
     onRetry?: () => void;
     onError?: (message: string) => void;
+    onPreparationStart?: () => void;
     onStateChange?: (state: SolidgateCheckoutDialogState) => void;
 };
 export type SolidgateCheckoutAnalyticsContext = {
     environment?: RuntimeMode;
-    featureFlags?: Record<string, string | null | undefined>;
+    featureFlags?: PublicAnalyticsFeatureFlags;
     metadata?: Record<string, unknown> | null;
     runtimeConfig?: FunnelSdkRuntimeConfigOverrides;
     stepId: string;

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

@@ -59,6 +59,7 @@ export type StripeWalletSurfaceProps = {
     containerClassName?: string;
     customerEmail?: string | null;
     onCustomerEmailCommit?: CheckoutEmailDialogProps['onSave'];
+    /** @deprecated Resolve the email from the funnel's primary payment CTA instead. */
     onResolveCustomerEmail?: () => Promise<string | null>;
     emailDialogContent?: Pick<CheckoutEmailDialogProps, 'title' | 'description' | 'emailLabel' | 'placeholder' | 'invalidMessage' | 'continueLabel' | 'cancelLabel'>;
     customerName?: string | null;
@@ -84,4 +85,4 @@ export type StripeWalletSurfaceProps = {
     surfaceId: string;
     suspended?: boolean;
 };
-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;
+export declare function StripeWalletSurface({ amountCents, appearance, applePayOptions, applePayPlaceholderLabel, beforeConfirm, checkoutAnalytics, className, containerClassName, customerEmail, onCustomerEmailCommit, 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

@@ -76,8 +76,8 @@ function buildAvailabilitySignature(availability) {
             .join(','),
     ].join('|');
 }
-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;
+export function StripeWalletSurface({ amountCents, appearance, applePayOptions, applePayPlaceholderLabel, beforeConfirm, checkoutAnalytics, className, containerClassName, customerEmail, onCustomerEmailCommit, 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;
     const [emailDialogOpen, setEmailDialogOpen] = useState(false);
     const [rejectedEmail, setRejectedEmail] = useState(null);
     const [savedEmail, setSavedEmail] = useState(null);
@@ -85,32 +85,10 @@ export function StripeWalletSurface({ amountCents, appearance, applePayOptions,
     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();
@@ -192,14 +170,16 @@ export function StripeWalletSurface({ amountCents, appearance, applePayOptions,
         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 (!emailDialogOpen || !onCustomerEmailCommit)
+            return null;
+        return (_jsx("div", { className: containerClassName, "data-wallet-surface-id": normalizedSurfaceId, children: _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;
+                } })) }));
     }
     if (!shouldRenderSurface) {
         return null;
@@ -209,7 +189,7 @@ export function StripeWalletSurface({ amountCents, appearance, applePayOptions,
             containerClassName !== null && containerClassName !== void 0 ? containerClassName : '',
         ]
             .filter(Boolean)
-            .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) => {
+            .join(' '), "data-wallet-surface-id": normalizedSurfaceId, children: [(_b = renderHeader === null || renderHeader === void 0 ? void 0 : renderHeader({ availability })) !== null && _b !== void 0 ? _b : null, visibleWalletPaymentMethods.map((method) => {
                 var _a;
                 return (_jsx("div", { className: [
                         'stripe-subscription-wallet-surface__method',

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

@@ -15,6 +15,8 @@ export type StripeOneTimeCheckoutSessionInput = {
     couponId?: string | null;
     customerEmail?: string | null;
     enabled?: boolean;
+    onPreparationStart?: () => void;
+    onReset?: () => void;
     onError?: (message: string | null) => void;
     plan?: StripeOneTimeCheckoutPlanInput | null;
     returnUrl: string;
@@ -52,4 +54,4 @@ export type StripeOneTimeCheckoutIntentKeyInput = Pick<StripeOneTimeCheckoutSess
 };
 export declare function buildStripeOneTimeCheckoutIntentKey({ runtimeConfigRevisionId, paymentProfileId, provider, checkoutMode, couponId, customerEmail, plan, returnUrl, runtimeConfig, stripePublishableKey, userId, }: StripeOneTimeCheckoutIntentKeyInput): string;
 export declare function shouldResetStripeOneTimeCheckoutSessionForIntentKey(previousIntentKey: string | null, nextIntentKey: string): boolean;
-export declare function useStripeOneTimeCheckoutSession({ runtimeConfigRevisionId, paymentProfileId, provider, analyticsMetadata, checkoutAnalytics, checkoutMode, couponId, customerEmail, enabled, onError, plan, returnUrl, runtimeConfig, stripePublishableKey, stripeLocale, userId, }: StripeOneTimeCheckoutSessionInput): StripeOneTimeCheckoutSession;
+export declare function useStripeOneTimeCheckoutSession({ runtimeConfigRevisionId: nextRuntimeConfigRevisionId, paymentProfileId: nextPaymentProfileId, provider: nextProvider, analyticsMetadata, checkoutAnalytics, checkoutMode: nextCheckoutMode, couponId, customerEmail, enabled, onError, onPreparationStart, onReset, plan, returnUrl, runtimeConfig: nextRuntimeConfig, stripePublishableKey: nextStripePublishableKey, stripeLocale, userId, }: StripeOneTimeCheckoutSessionInput): StripeOneTimeCheckoutSession;

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

@@ -71,8 +71,20 @@ export function buildStripeOneTimeCheckoutIntentKey({ runtimeConfigRevisionId, p
 export function shouldResetStripeOneTimeCheckoutSessionForIntentKey(previousIntentKey, nextIntentKey) {
     return previousIntentKey !== null && previousIntentKey !== nextIntentKey;
 }
-export function useStripeOneTimeCheckoutSession({ runtimeConfigRevisionId, paymentProfileId, provider, analyticsMetadata, checkoutAnalytics, checkoutMode, couponId, customerEmail, enabled = true, onError, plan, returnUrl, runtimeConfig, stripePublishableKey, stripeLocale, userId, }) {
-    var _a, _b, _c;
+export function useStripeOneTimeCheckoutSession({ runtimeConfigRevisionId: nextRuntimeConfigRevisionId, paymentProfileId: nextPaymentProfileId, provider: nextProvider, analyticsMetadata, checkoutAnalytics, checkoutMode: nextCheckoutMode, couponId, customerEmail, enabled = true, onError, onPreparationStart, onReset, plan, returnUrl, runtimeConfig: nextRuntimeConfig, stripePublishableKey: nextStripePublishableKey, stripeLocale, userId, }) {
+    var _a, _b, _c, _d, _e;
+    const preparedSelectionRef = useRef(null);
+    const nextSelection = {
+        checkoutMode: nextCheckoutMode,
+        runtimeConfig: nextRuntimeConfig,
+        runtimeConfigRevisionId: nextRuntimeConfigRevisionId,
+        paymentProfileId: nextPaymentProfileId,
+        provider: nextProvider,
+        stripePublishableKey: nextStripePublishableKey,
+    };
+    const latestSelectionRef = useRef(nextSelection);
+    latestSelectionRef.current = nextSelection;
+    const { checkoutMode, runtimeConfig, runtimeConfigRevisionId, paymentProfileId, provider, stripePublishableKey, } = (_a = preparedSelectionRef.current) !== null && _a !== void 0 ? _a : nextSelection;
     const [clientSecret, setClientSecret] = useState(null);
     const [clientSecretIntentKey, setClientSecretIntentKey] = useState(null);
     const [checkoutSessionId, setCheckoutSessionId] = useState(null);
@@ -106,9 +118,10 @@ export function useStripeOneTimeCheckoutSession({ runtimeConfigRevisionId, payme
         userId,
     });
     const planKey = [
-        (_a = plan === null || plan === void 0 ? void 0 : plan.id) !== null && _a !== void 0 ? _a : '',
-        (_b = plan === null || plan === void 0 ? void 0 : plan.providerPlanId) !== null && _b !== void 0 ? _b : '',
-        (_c = plan === null || plan === void 0 ? void 0 : plan.amountCents) !== null && _c !== void 0 ? _c : '',
+        (_b = plan === null || plan === void 0 ? void 0 : plan.offerSetId) !== null && _b !== void 0 ? _b : '',
+        (_c = plan === null || plan === void 0 ? void 0 : plan.id) !== null && _c !== void 0 ? _c : '',
+        (_d = plan === null || plan === void 0 ? void 0 : plan.providerPlanId) !== null && _d !== void 0 ? _d : '',
+        (_e = plan === null || plan === void 0 ? void 0 : plan.amountCents) !== null && _e !== void 0 ? _e : '',
     ].join('|');
     const activeClientSecret = clientSecretIntentKey === intentKey ? clientSecret : null;
     const activeCheckoutSessionId = clientSecretIntentKey === intentKey ? checkoutSessionId : null;
@@ -139,12 +152,17 @@ export function useStripeOneTimeCheckoutSession({ runtimeConfigRevisionId, payme
         onError === null || onError === void 0 ? void 0 : onError(message);
     }, [clearActiveCheckoutSession, onError]);
     const reset = useCallback(() => {
+        preparedSelectionRef.current = null;
         attemptRef.current = null;
         clearActiveCheckoutSession();
         setLoading(createEmptyCheckoutPreparationLoading());
         setRuntimeStripePublishableKey(null);
         setError(null);
     }, [clearActiveCheckoutSession, setError]);
+    const releaseAndReset = useCallback(() => {
+        reset();
+        onReset === null || onReset === void 0 ? void 0 : onReset();
+    }, [onReset, reset]);
     useIsomorphicLayoutEffect(() => {
         const previousIntentKey = previousIntentKeyRef.current;
         previousIntentKeyRef.current = intentKey;
@@ -278,9 +296,12 @@ export function useStripeOneTimeCheckoutSession({ runtimeConfigRevisionId, payme
         userId,
     ]);
     const prepareCheckout = useCallback(async (source, options = {}) => {
+        var _a;
         if (!configured || !plan) {
             return null;
         }
+        onPreparationStart === null || onPreparationStart === void 0 ? void 0 : onPreparationStart();
+        (_a = preparedSelectionRef.current) !== null && _a !== void 0 ? _a : (preparedSelectionRef.current = latestSelectionRef.current);
         if (!options.forceNew && activeClientSecret) {
             return activeClientSecret;
         }
@@ -297,6 +318,7 @@ export function useStripeOneTimeCheckoutSession({ runtimeConfigRevisionId, payme
         configured,
         createCheckoutSession,
         plan,
+        onPreparationStart,
         setError,
         setSourceLoading,
     ]);
@@ -314,7 +336,7 @@ export function useStripeOneTimeCheckoutSession({ runtimeConfigRevisionId, payme
         prepareCardCheckout,
         prepareWalletCheckout,
         provider: 'stripe',
-        reset,
+        reset: releaseAndReset,
         restartCardCheckout,
         restartWalletCheckout,
         planKey,
@@ -330,7 +352,7 @@ export function useStripeOneTimeCheckoutSession({ runtimeConfigRevisionId, payme
         planKey,
         prepareCardCheckout,
         prepareWalletCheckout,
-        reset,
+        releaseAndReset,
         restartCardCheckout,
         restartWalletCheckout,
         setError,

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

@@ -13,6 +13,8 @@ export type StripeSubscriptionCheckoutSessionInput = {
     customerEmail?: string | null;
     displayPlan?: PaywallDisplayPlan | null;
     enabled?: boolean;
+    onPreparationStart?: () => void;
+    onReset?: () => void;
     onError?: (message: string | null) => void;
     plan?: PaywallPlan | null;
     returnUrl: string;
@@ -59,4 +61,4 @@ export declare function shouldResetStripeSubscriptionCheckoutSessionForIntentKey
 export declare function isInactiveCheckoutSessionError(message?: string | null): boolean;
 export declare function shouldAutoRecoverStripeSubscriptionCheckoutSession(message: string | null | undefined, alreadyRecovered: boolean): boolean;
 export declare const shouldReportStripeCheckoutFailureShown: (message: string) => boolean;
-export declare function useStripeSubscriptionCheckoutSession({ checkoutMode, analyticsMetadata, checkoutAnalytics, couponId, customerEmail, displayPlan, enabled, onError, plan, returnUrl, runtimeConfig, runtimeConfigRevisionId, paymentProfileId, provider, stripePublishableKey, stripeLocale, userId, }: StripeSubscriptionCheckoutSessionInput): StripeSubscriptionCheckoutSession;
+export declare function useStripeSubscriptionCheckoutSession({ checkoutMode: nextCheckoutMode, analyticsMetadata, checkoutAnalytics, couponId, customerEmail, displayPlan, enabled, onError, onPreparationStart, onReset, plan, returnUrl, runtimeConfig: nextRuntimeConfig, runtimeConfigRevisionId: nextRuntimeConfigRevisionId, paymentProfileId: nextPaymentProfileId, provider: nextProvider, stripePublishableKey: nextStripePublishableKey, stripeLocale, userId, }: StripeSubscriptionCheckoutSessionInput): StripeSubscriptionCheckoutSession;

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

@@ -71,8 +71,20 @@ export function shouldAutoRecoverStripeSubscriptionCheckoutSession(message, alre
     return !alreadyRecovered && isInactiveCheckoutSessionError(message);
 }
 export const shouldReportStripeCheckoutFailureShown = (message) => !isInactiveCheckoutSessionError(message);
-export function useStripeSubscriptionCheckoutSession({ checkoutMode, analyticsMetadata, checkoutAnalytics, couponId, customerEmail, displayPlan, enabled = true, onError, plan, returnUrl, runtimeConfig, runtimeConfigRevisionId, paymentProfileId, provider, stripePublishableKey, stripeLocale, userId, }) {
-    var _a, _b, _c, _d, _e;
+export function useStripeSubscriptionCheckoutSession({ checkoutMode: nextCheckoutMode, analyticsMetadata, checkoutAnalytics, couponId, customerEmail, displayPlan, enabled = true, onError, onPreparationStart, onReset, plan, returnUrl, runtimeConfig: nextRuntimeConfig, runtimeConfigRevisionId: nextRuntimeConfigRevisionId, paymentProfileId: nextPaymentProfileId, provider: nextProvider, stripePublishableKey: nextStripePublishableKey, stripeLocale, userId, }) {
+    var _a, _b, _c, _d, _e, _f, _g;
+    const preparedSelectionRef = useRef(null);
+    const nextSelection = {
+        checkoutMode: nextCheckoutMode,
+        runtimeConfig: nextRuntimeConfig,
+        runtimeConfigRevisionId: nextRuntimeConfigRevisionId,
+        paymentProfileId: nextPaymentProfileId,
+        provider: nextProvider,
+        stripePublishableKey: nextStripePublishableKey,
+    };
+    const latestSelectionRef = useRef(nextSelection);
+    latestSelectionRef.current = nextSelection;
+    const { checkoutMode, runtimeConfig, runtimeConfigRevisionId, paymentProfileId, provider, stripePublishableKey, } = (_a = preparedSelectionRef.current) !== null && _a !== void 0 ? _a : nextSelection;
     const [clientSecret, setClientSecret] = useState(null);
     const [clientSecretIntentKey, setClientSecretIntentKey] = useState(null);
     const [checkoutSessionId, setCheckoutSessionId] = useState(null);
@@ -97,11 +109,12 @@ export function useStripeSubscriptionCheckoutSession({ checkoutMode, analyticsMe
             Boolean(normalizeRuntimeConfigValue(runtimeConfig === null || runtimeConfig === void 0 ? void 0 : runtimeConfig.funnelSdkPublishableKey)) ||
             Boolean(normalizeRuntimeConfigValue(stripePublishableKey)));
     const planKey = [
-        (_a = plan === null || plan === void 0 ? void 0 : plan.id) !== null && _a !== void 0 ? _a : '',
-        (_b = plan === null || plan === void 0 ? void 0 : plan.providerPlanId) !== null && _b !== void 0 ? _b : '',
-        (_c = plan === null || plan === void 0 ? void 0 : plan.amountCents) !== null && _c !== void 0 ? _c : '',
-        (_d = displayPlan === null || displayPlan === void 0 ? void 0 : displayPlan.id) !== null && _d !== void 0 ? _d : '',
-        (_e = displayPlan === null || displayPlan === void 0 ? void 0 : displayPlan.amountCents) !== null && _e !== void 0 ? _e : '',
+        (_b = plan === null || plan === void 0 ? void 0 : plan.offerSetId) !== null && _b !== void 0 ? _b : '',
+        (_c = plan === null || plan === void 0 ? void 0 : plan.id) !== null && _c !== void 0 ? _c : '',
+        (_d = plan === null || plan === void 0 ? void 0 : plan.providerPlanId) !== null && _d !== void 0 ? _d : '',
+        (_e = plan === null || plan === void 0 ? void 0 : plan.amountCents) !== null && _e !== void 0 ? _e : '',
+        (_f = displayPlan === null || displayPlan === void 0 ? void 0 : displayPlan.id) !== null && _f !== void 0 ? _f : '',
+        (_g = displayPlan === null || displayPlan === void 0 ? void 0 : displayPlan.amountCents) !== null && _g !== void 0 ? _g : '',
     ].join('|');
     const intentKey = buildStripeSubscriptionCheckoutIntentKey({
         checkoutMode,
@@ -153,6 +166,7 @@ export function useStripeSubscriptionCheckoutSession({ checkoutMode, analyticsMe
         onError === null || onError === void 0 ? void 0 : onError(message);
     }, [clearActiveCheckoutSession, intentKey, onError]);
     const reset = useCallback(() => {
+        preparedSelectionRef.current = null;
         attemptRef.current = null;
         recoveredIntentKeyRef.current = null;
         handledRecoveryRequestRef.current = recoveryRequest;
@@ -161,6 +175,10 @@ export function useStripeSubscriptionCheckoutSession({ checkoutMode, analyticsMe
         setRuntimeStripePublishableKey(null);
         setError(null);
     }, [clearActiveCheckoutSession, recoveryRequest, setError]);
+    const releaseAndReset = useCallback(() => {
+        reset();
+        onReset === null || onReset === void 0 ? void 0 : onReset();
+    }, [onReset, reset]);
     useIsomorphicLayoutEffect(() => {
         const previousIntentKey = previousIntentKeyRef.current;
         previousIntentKeyRef.current = intentKey;
@@ -300,9 +318,12 @@ export function useStripeSubscriptionCheckoutSession({ checkoutMode, analyticsMe
         userId,
     ]);
     const prepareCheckout = useCallback(async (source, options = {}) => {
+        var _a;
         if (!configured || !plan || !displayPlan) {
             return null;
         }
+        onPreparationStart === null || onPreparationStart === void 0 ? void 0 : onPreparationStart();
+        (_a = preparedSelectionRef.current) !== null && _a !== void 0 ? _a : (preparedSelectionRef.current = latestSelectionRef.current);
         if (!options.forceNew && activeClientSecret) {
             return activeClientSecret;
         }
@@ -320,6 +341,7 @@ export function useStripeSubscriptionCheckoutSession({ checkoutMode, analyticsMe
         createCheckoutSubscription,
         displayPlan,
         plan,
+        onPreparationStart,
         setError,
         setSourceLoading,
     ]);
@@ -416,7 +438,7 @@ export function useStripeSubscriptionCheckoutSession({ checkoutMode, analyticsMe
         prepareCardCheckout,
         prepareWalletCheckout,
         provider: 'stripe',
-        reset,
+        reset: releaseAndReset,
         restartCardCheckout,
         restartWalletCheckout,
         planKey,
@@ -434,7 +456,7 @@ export function useStripeSubscriptionCheckoutSession({ checkoutMode, analyticsMe
         planKey,
         prepareCardCheckout,
         prepareWalletCheckout,
-        reset,
+        releaseAndReset,
         restartCardCheckout,
         restartWalletCheckout,
         setError,