@funnelsgrove/payments 0.1.49 → 0.1.51

package/README.md

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

package/dist/components/shared/SharedStripeCheckoutV2Dialog.js

@@ -59,7 +59,7 @@ function getFriendlyCardErrorMessage(error) {
         ? error.message
         : 'Payment failed. Please review your card details and try again.';
 }
-function SharedStripeCheckoutV2Form({ amountCents, buttonColor, cardSubmitLabel, closeAriaLabel, countdownLabel, checkoutAnalytics, checkoutSessionId, customerEmail, customerEmailEditable = false, customerEmailLabel = 'Email', customerEmailPlaceholder = 'Enter your email', customerEmailInvalidMessage = 'Enter a valid email address.', customerName, discountAmountLabel, discountLabel, discountPercent, initialWalletAvailable, onClose, onCustomerEmailChange, onCustomerEmailCommit, onError, onInactiveCheckoutSession, onPaymentInfoSubmitted, onSuccess, paymentMethodLabels = defaultPaymentMethodLabels, promoActive, processingLabel, promoCode, promoCodeLabel, remainingSeconds, returnUrl, savedLabel, secureLabel, satisfactionLabel, satisfactionPercent, summaryLabel, supportedCountries, themeColor, title, totalLabel, totalValue, unsupportedCountryMessage, walletButtonLabel, originalPriceLabel, originalPriceValue, }) {
+function SharedStripeCheckoutV2CheckoutSessionForm({ amountCents, buttonColor, cardSubmitLabel, closeAriaLabel, countdownLabel, checkoutAnalytics, checkoutSessionId, customerEmail, customerEmailEditable = false, customerEmailLabel = 'Email', customerEmailPlaceholder = 'Enter your email', customerEmailInvalidMessage = 'Enter a valid email address.', customerName, discountAmountLabel, discountLabel, discountPercent, initialWalletAvailable, onClose, onCustomerEmailChange, onCustomerEmailCommit, onError, onInactiveCheckoutSession, onPaymentInfoSubmitted, onSuccess, paymentMethodLabels = defaultPaymentMethodLabels, promoActive, processingLabel, promoCode, promoCodeLabel, remainingSeconds, returnUrl, savedLabel, secureLabel, satisfactionLabel, satisfactionPercent, summaryLabel, supportedCountries, themeColor, title, totalLabel, totalValue, unsupportedCountryMessage, walletButtonLabel, originalPriceLabel, originalPriceValue, }) {
     const checkoutState = useCheckout();
     const walletPaymentMethods = usePlatformWalletPaymentMethods();
     const [selectedMethod, setSelectedMethod] = useState('wallet');
@@ -306,10 +306,8 @@ function SharedStripeCheckoutV2Form({ amountCents, buttonColor, cardSubmitLabel,
                                                         onCustomerEmailChange === null || onCustomerEmailChange === void 0 ? void 0 : onCustomerEmailChange(event.target.value);
                                                     } }) })] }), _jsx(PaymentElement, { options: paymentElementOptions, onChange: handlePaymentElementChange }), fixedBillingCountry && fixedBillingCountryLabel ? (_jsxs("label", { className: 'shared-checkout-v2-country-field', children: [_jsx("span", { className: 'shared-checkout-v2-country-label', children: "Country" }), _jsx("span", { className: 'shared-checkout-v2-country-control', children: _jsx("select", { "aria-label": 'Country', className: 'shared-checkout-v2-country-select', value: fixedBillingCountry, onChange: () => setBillingCountry(fixedBillingCountry), children: _jsx("option", { value: fixedBillingCountry, children: fixedBillingCountryLabel }) }) })] })) : null] }), visibleError ? _jsx("p", { className: 'shared-checkout-v2-error', children: visibleError }) : null, _jsxs("button", { type: 'submit', className: 'shared-checkout-v2-card-submit', disabled: submitting, children: [_jsx(SecurityLockIcon, { className: 'shared-checkout-v2-card-submit-icon' }), submitting ? processingLabel : cardSubmitLabel] }), _jsx("div", { className: 'shared-checkout-v2-card-brands', "aria-hidden": 'true', children: cardBrandLabels.map((label) => (_jsx(PaymentBrandMark, { label: label, className: 'shared-checkout-v2-card-brand' }, label))) }), _jsxs("p", { className: 'shared-checkout-v2-secure-pill shared-checkout-v2-secure-pill--card', children: [_jsx(SecurityLockIcon, { className: 'shared-checkout-v2-secure-pill-icon' }), secureLabel] })] })] })] }));
 }
-export function SharedStripeCheckoutV2Dialog(_a) {
-    var { checkoutAnalytics, checkoutSessionId, clientSecret, onClose, stripePromise, supportedCountries } = _a, props = __rest(_a, ["checkoutAnalytics", "checkoutSessionId", "clientSecret", "onClose", "stripePromise", "supportedCountries"]);
-    const normalizedSupportedCountries = useMemo(() => normalizeSupportedCheckoutCountries(supportedCountries), [supportedCountries]);
-    const fixedBillingCountry = getFixedSupportedBillingCountry(normalizedSupportedCountries);
+function CheckoutSessionProvider({ children, clientSecret, fixedBillingCountry, stripePromise, }) {
+    const providerChildren = children;
     const checkoutProviderOptions = useMemo(() => (Object.assign(Object.assign({ clientSecret }, (fixedBillingCountry
         ? {
             defaultValues: {
@@ -323,6 +321,12 @@ export function SharedStripeCheckoutV2Dialog(_a) {
         : {})), { elementsOptions: {
             appearance: stripeCheckoutV2Appearance,
         } })), [clientSecret, fixedBillingCountry]);
+    return (_jsx(CheckoutProvider, { stripe: stripePromise, options: checkoutProviderOptions, children: providerChildren }, clientSecret));
+}
+export function SharedStripeCheckoutV2Dialog(_a) {
+    var { checkoutAnalytics, checkoutSessionId, clientSecret, onClose, stripePromise, supportedCountries } = _a, props = __rest(_a, ["checkoutAnalytics", "checkoutSessionId", "clientSecret", "onClose", "stripePromise", "supportedCountries"]);
+    const normalizedSupportedCountries = useMemo(() => normalizeSupportedCheckoutCountries(supportedCountries), [supportedCountries]);
+    const fixedBillingCountry = getFixedSupportedBillingCountry(normalizedSupportedCountries);
     useEffect(() => {
         if (!checkoutAnalytics) {
             return;
@@ -338,7 +342,7 @@ export function SharedStripeCheckoutV2Dialog(_a) {
         window.addEventListener('keydown', handleKeyDown);
         return () => window.removeEventListener('keydown', handleKeyDown);
     }, [onClose]);
-    return (_jsxs(_Fragment, { children: [_jsx("div", { className: 'shared-checkout-v2-overlay', children: _jsx("div", { className: 'shared-checkout-v2-dialog', role: 'dialog', "aria-modal": 'true', "aria-labelledby": 'shared-checkout-v2-title', children: _jsx(CheckoutProvider, { stripe: stripePromise, options: checkoutProviderOptions, children: _jsx(SharedStripeCheckoutV2Form, Object.assign({}, props, { checkoutAnalytics: checkoutAnalytics, checkoutSessionId: checkoutSessionId, clientSecret: clientSecret, onClose: onClose, supportedCountries: normalizedSupportedCountries })) }, clientSecret) }) }), _jsx("style", { children: sharedStripeCheckoutV2Styles })] }));
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: 'shared-checkout-v2-overlay', children: _jsx("div", { className: 'shared-checkout-v2-dialog', role: 'dialog', "aria-modal": 'true', "aria-labelledby": 'shared-checkout-v2-title', children: _jsx(CheckoutSessionProvider, { clientSecret: clientSecret, fixedBillingCountry: fixedBillingCountry, stripePromise: stripePromise, children: _jsx(SharedStripeCheckoutV2CheckoutSessionForm, Object.assign({}, props, { checkoutAnalytics: checkoutAnalytics, checkoutSessionId: checkoutSessionId, clientSecret: clientSecret, onClose: onClose, supportedCountries: normalizedSupportedCountries })) }) }) }), _jsx("style", { children: sharedStripeCheckoutV2Styles })] }));
 }
 function SharedCheckoutSpecialOfferGift({ discountLabel, imageAlt, imageSrc, }) {
     if (imageSrc) {

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

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

package/dist/providers/stripe/ApplePaySubscriptionCheckoutSlot.js

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

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

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

package/dist/providers/stripe/WalletSubscriptionCheckoutSlot.js

@@ -28,12 +28,13 @@ export function WalletSubscriptionCheckoutLoadingPlaceholder({ className, label,
             .filter(Boolean)
             .join(' '), "aria-label": label, role: 'status', children: [_jsx("span", { className: 'wallet-subscription-checkout-slot__loading-bar' }), _jsx("style", { children: walletSubscriptionCheckoutLoadingPlaceholderStyles })] }));
 }
-export function WalletSubscriptionCheckoutSlot({ amountCents, availabilityPaymentMethod, beforeConfirm, checkoutAnalytics, className, customerEmail, customerName, disabled = false, expressCheckoutAllowed = true, onAvailabilityChange, onCancel, onError, onPaymentInfoSubmitted, onSuccess, onUnavailableClick, options, placeholderLabel, renderPreparingPlaceholder, renderPlaceholder, returnUrl, session, summaryLabel, suspended = false, }) {
+export function WalletSubscriptionCheckoutSlot({ amountCents, appearance, availabilityPaymentMethod, beforeConfirm, checkoutAnalytics, className, customerEmail, customerName, disabled = false, expressCheckoutAllowed = true, onAvailabilityChange, onCancel, onError, onPaymentInfoSubmitted, onSuccess, onUnavailableClick, options, placeholderLabel, renderPreparingPlaceholder, renderPlaceholder, returnUrl, session, slotClassName, summaryLabel, suspended = false, }) {
     const [walletAvailability, setWalletAvailability] = useState({
         available: null,
         intentKey: session.intentKey,
     });
     const [walletCheckoutStartedAfterClickIntentKey, setWalletCheckoutStartedAfterClickIntentKey] = useState(null);
+    const autoWalletPreparationIntentKeyRef = useRef(null);
     const walletCheckoutStartedAfterClickSessionIdRef = useRef(null);
     const slotDisabled = disabled || !session.configured;
     const walletAvailable = walletAvailability.intentKey === session.intentKey
@@ -67,6 +68,39 @@ export function WalletSubscriptionCheckoutSlot({ amountCents, availabilityPaymen
                 intentKey,
             });
     }, []);
+    useEffect(() => {
+        if (slotDisabled ||
+            suspended ||
+            !expressCheckoutAllowed ||
+            walletAvailable === false ||
+            session.loading.wallet ||
+            session.activeClientSecret) {
+            return;
+        }
+        if (autoWalletPreparationIntentKeyRef.current === session.intentKey) {
+            return;
+        }
+        autoWalletPreparationIntentKeyRef.current = session.intentKey;
+        void session
+            .prepareWalletCheckout({
+            checkoutStartSource: 'wallet_render',
+        })
+            .then((readyClientSecret) => {
+            if (!readyClientSecret) {
+                reportWalletPreparationFailure(session.intentKey);
+            }
+        });
+    }, [
+        expressCheckoutAllowed,
+        reportWalletPreparationFailure,
+        session.activeClientSecret,
+        session.intentKey,
+        session.loading.wallet,
+        session.prepareWalletCheckout,
+        slotDisabled,
+        suspended,
+        walletAvailable,
+    ]);
     useEffect(() => {
         if (!walletCheckoutStartedAfterClickIntentKey ||
             walletCheckoutStartedAfterClickIntentKey !== session.intentKey ||
@@ -91,7 +125,9 @@ export function WalletSubscriptionCheckoutSlot({ amountCents, availabilityPaymen
                 available: null,
                 intentKey: session.intentKey,
             });
-            void session.restartWalletCheckout();
+            void session.restartWalletCheckout({
+                checkoutStartSource: 'wallet_render',
+            });
             return;
         }
         session.setError(message);
@@ -109,7 +145,9 @@ export function WalletSubscriptionCheckoutSlot({ amountCents, availabilityPaymen
             return;
         }
         setWalletCheckoutStartedAfterClickIntentKey(session.intentKey);
-        const readyClientSecret = await session.prepareWalletCheckout();
+        const readyClientSecret = await session.prepareWalletCheckout({
+            checkoutStartSource: 'wallet_render',
+        });
         if (!readyClientSecret) {
             setWalletCheckoutStartedAfterClickIntentKey(null);
             reportWalletPreparationFailure(session.intentKey);
@@ -120,13 +158,14 @@ export function WalletSubscriptionCheckoutSlot({ amountCents, availabilityPaymen
         : renderPlaceholder;
     return (_jsxs(_Fragment, { children: [shouldRenderPlaceholder || shouldRenderExpressCheckout ? (_jsxs("div", { className: [
                     'wallet-subscription-checkout-slot',
+                    slotClassName !== null && slotClassName !== void 0 ? slotClassName : '',
                     placeholderIsPreparing ? 'is-loading' : '',
                     shouldRenderExpressCheckout ? 'has-express-checkout' : '',
                 ]
                     .filter(Boolean)
                     .join(' '), "aria-busy": placeholderIsPreparing || undefined, children: [shouldRenderExpressCheckout &&
                         session.activeClientSecret &&
-                        session.stripePromise ? (_jsx(StripeExpressCheckoutElement, { amountCents: amountCents, availabilityPaymentMethods: [availabilityPaymentMethod], beforeConfirm: beforeConfirm, checkoutAnalytics: checkoutAnalytics, checkoutSessionId: session.checkoutSessionId, className: className, clientSecret: session.activeClientSecret, customerEmail: customerEmail, customerName: customerName, onAvailabilityChange: handleAvailabilityChange, onCancel: onCancel, onError: handleError, onPaymentInfoSubmitted: onPaymentInfoSubmitted, onSuccess: onSuccess, options: options, returnUrl: returnUrl, serverUpdateKey: serverUpdateKey, stripePromise: session.stripePromise, summaryLabel: summaryLabel, onServerUpdate: session.updateCheckoutSessionPlan })) : null, shouldRenderPlaceholder ? (_jsx("div", { className: 'wallet-subscription-checkout-slot__placeholder', children: placeholderRenderer({
+                        session.stripePromise ? (_jsx(StripeExpressCheckoutElement, { amountCents: amountCents, appearance: appearance, availabilityPaymentMethods: [availabilityPaymentMethod], beforeConfirm: beforeConfirm, checkoutAnalytics: checkoutAnalytics, checkoutSessionId: session.checkoutSessionId, className: className, clientSecret: session.activeClientSecret, customerEmail: customerEmail, customerName: customerName, onAvailabilityChange: handleAvailabilityChange, onCancel: onCancel, onError: handleError, onPaymentInfoSubmitted: onPaymentInfoSubmitted, onSuccess: onSuccess, options: options, returnUrl: returnUrl, serverUpdateKey: serverUpdateKey, stripePromise: session.stripePromise, summaryLabel: summaryLabel, onServerUpdate: session.updateCheckoutSessionPlan })) : null, shouldRenderPlaceholder ? (_jsx("div", { className: 'wallet-subscription-checkout-slot__placeholder', children: placeholderRenderer({
                             className,
                             disabled: slotDisabled,
                             label: placeholderLabel,

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

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

package/dist/providers/stripe/useStripeSubscriptionCheckoutSession.js

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

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

@@ -60,6 +60,26 @@ type CreatePaymentIntentResponse = {
     stripePublishableKey?: string;
     environment?: 'test' | 'live';
 };
+type CreateOneTimeCheckoutInput = {
+    plan: CheckoutSessionPlanInput;
+    couponId?: string | null;
+    analyticsMetadata?: Record<string, unknown> | null;
+    customerEmail?: string | null;
+    returnUrl: string;
+    user_id?: string | null;
+    environment?: RuntimeMode;
+    runtimeConfig?: StripeRuntimeConfigOverrides;
+};
+type CreateOneTimeCheckoutResponse = {
+    clientSecret: string;
+    checkoutSessionId?: string;
+    stripePublishableKey?: string;
+    environment?: 'test' | 'live';
+};
+export declare function createStripeOneTimeCheckout(input: CreateOneTimeCheckoutInput): Promise<CreateOneTimeCheckoutResponse>;
+/**
+ * @deprecated Use createStripeOneTimeCheckout for one-time paywall checkout.
+ */
 export declare function createStripePaymentIntent(input: CreatePaymentIntentInput): Promise<CreatePaymentIntentResponse>;
 type ChargeOneClickPaymentInput = {
     planId: string;

package/dist/services/stripe.service.js

@@ -531,6 +531,26 @@ const normalizeCheckoutAnalyticsMetadata = (metadata, plan) => {
     }
     return Object.assign(Object.assign({}, (normalized !== null && normalized !== void 0 ? normalized : {})), { analyticsPurchaseValue });
 };
+export async function createStripeOneTimeCheckout(input) {
+    var _a, _b, _c, _d, _e;
+    return funnelSdkService.createOneTimeCheckout({
+        planId: getPaywallPlanSelectionValue(input.plan),
+        providerPlanId: ((_a = input.plan.providerPlanId) === null || _a === void 0 ? void 0 : _a.trim()) || undefined,
+        title: input.plan.title,
+        description: ((_b = input.plan.description) === null || _b === void 0 ? void 0 : _b.trim()) || undefined,
+        amountCents: input.plan.amountCents,
+        couponId: ((_c = input.couponId) === null || _c === void 0 ? void 0 : _c.trim()) || undefined,
+        analyticsMetadata: normalizeCheckoutAnalyticsMetadata(input.analyticsMetadata, input.plan),
+        customerEmail: ((_d = input.customerEmail) === null || _d === void 0 ? void 0 : _d.trim()) || undefined,
+        returnUrl: input.returnUrl,
+        userId: ((_e = input.user_id) === null || _e === void 0 ? void 0 : _e.trim()) || undefined,
+        environment: input.environment,
+        runtimeConfig: input.runtimeConfig,
+    });
+}
+/**
+ * @deprecated Use createStripeOneTimeCheckout for one-time paywall checkout.
+ */
 export async function createStripePaymentIntent(input) {
     var _a, _b;
     return funnelSdkService.createOneTimePaymentIntent({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@funnelsgrove/payments",
-  "version": "0.1.49",
+  "version": "0.1.51",
   "type": "module",
   "private": false,
   "main": "./dist/index.js",
@@ -28,7 +28,7 @@
   },
   "dependencies": {
     "@funnelsgrove/analytics": "^0.1.28",
-    "@funnelsgrove/runtime": "^0.1.46",
+    "@funnelsgrove/runtime": "^0.1.54",
     "@stripe/react-stripe-js": "^5.6.0",
     "@stripe/stripe-js": "^8.7.0",
     "react": "19.2.3",