@funnelsgrove/payments 0.7.20 → 0.7.22

package/README.md

@@ -32,6 +32,10 @@ Use these for new one-time paywall plans:
 - `createStripeOneTimeCheckout`
 - `SharedStripeCheckoutV2Dialog`
 
+`SharedStripeCheckoutV2Dialog` defaults to the existing full-screen `standard` surface. Pass
+`variant='compact'` for a centered desktop modal with the same Stripe-owned wallet/card flow;
+mobile remains full-screen and all checkout analytics and verified-success behavior are unchanged.
+
 Use `completeStripeOneClickPayment` for normal post-checkout one-click upsells. It delegates the charge to `funnelSdkService.chargeOneClickPayment` and owns any required Stripe confirmation. `chargeStripeOneClickPayment` remains the lower-level charge-only primitive.
 
 Solidgate browser checkout is available for controlled provider-routed funnels through
@@ -94,7 +98,7 @@ When a live funnel still uses one of these, migrate the funnel deliberately with
 - `providers/solidgate/components/*`: the official-SDK checkout dialog and canonical verification lifecycle.
 - `components/ManageSubscriptionScreen`: provider-neutral subscription management UI.
 
-Funnels should call `resolvePublishedBillingRuntime` once at their runtime-provider boundary. Screens consume its resolved view and should not parse offer sets or pricing-experiment variants themselves.
+Funnels should call `resolvePublishedBillingRuntime` once at their runtime-provider boundary. Screens consume its resolved view and should not parse offer sets or pricing-experiment variants themselves. Pass the resolved `stripePublishableKey` into shared Stripe checkout hooks so Stripe.js can load while the Checkout Session request is still in flight; the key returned by that request remains the compatibility fallback.
 
 ## Engineering Rules
 

package/dist/providers/stripe/components/SharedStripeCheckoutV2Dialog.d.ts

@@ -51,6 +51,7 @@ export type SharedStripeCheckoutV2DialogProps = {
     walletButtonLabel: string;
     originalPriceLabel: string;
     originalPriceValue: string;
+    variant?: 'standard' | 'compact';
 };
 export type SharedCheckoutSpecialOfferDialogProps = {
     buttonColor: string;
@@ -63,5 +64,5 @@ export type SharedCheckoutSpecialOfferDialogProps = {
     themeColor: string;
     title: string;
 };
-export declare function SharedStripeCheckoutV2Dialog({ checkoutAnalytics, checkoutSessionId, clientSecret, onClose, stripePromise, supportedCountries, ...props }: SharedStripeCheckoutV2DialogProps): import("react/jsx-runtime").JSX.Element;
+export declare function SharedStripeCheckoutV2Dialog({ checkoutAnalytics, checkoutSessionId, clientSecret, onClose, stripePromise, supportedCountries, variant, ...props }: SharedStripeCheckoutV2DialogProps): import("react/jsx-runtime").JSX.Element;
 export declare function SharedCheckoutSpecialOfferDialog({ buttonColor, buttonLabel, description, discountLabel, imageAlt, imageSrc, onAccept, themeColor, title, }: SharedCheckoutSpecialOfferDialogProps): import("react/jsx-runtime").JSX.Element;

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

@@ -40,6 +40,7 @@ const stripeCheckoutV2Appearance = {
         },
     },
 };
+const compactStripeCheckoutV2Appearance = Object.assign(Object.assign({}, stripeCheckoutV2Appearance), { variables: Object.assign(Object.assign({}, stripeCheckoutV2Appearance.variables), { borderRadius: '14px', colorPrimary: '#1687f8' }) });
 const isValidEmail = (value) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value);
 const formatCountdown = (remainingSeconds) => {
     const normalizedSeconds = Number.isFinite(remainingSeconds)
@@ -59,7 +60,7 @@ function getFriendlyCardErrorMessage(error) {
         ? error.message
         : 'Payment failed. Please review your card details and try again.';
 }
-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, }) {
+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, variant = 'standard', }) {
     const checkoutState = useCheckout();
     const walletPaymentMethods = usePlatformWalletPaymentMethods();
     const [selectedMethod, setSelectedMethod] = useState('wallet');
@@ -279,7 +280,7 @@ function SharedStripeCheckoutV2CheckoutSessionForm({ amountCents, buttonColor, c
         }
     };
     const visibleError = error;
-    return (_jsxs("div", { className: 'shared-checkout-v2-shell', style: checkoutStyle, children: [_jsxs("header", { className: 'shared-checkout-v2-header', children: [_jsx("button", { type: 'button', className: 'shared-checkout-v2-close', onClick: onClose, "aria-label": closeAriaLabel, children: _jsx("span", { "aria-hidden": 'true' }) }), _jsx("h2", { id: 'shared-checkout-v2-title', children: title })] }), _jsxs("section", { className: 'shared-checkout-v2-summary', children: [showPromo ? (_jsxs("p", { className: 'shared-checkout-v2-countdown', children: [discountPercent, "% ", countdownLabel, " ", countdownValue, " min"] })) : null, _jsxs("p", { className: 'shared-checkout-v2-satisfaction', children: [_jsx("strong", { children: satisfactionPercent }), " ", satisfactionLabel] }), showPromo ? (_jsxs("div", { className: 'shared-checkout-v2-price-stack', children: [_jsxs("div", { className: 'shared-checkout-v2-price-row is-muted', children: [_jsx("span", { children: originalPriceLabel }), _jsx("span", { className: 'shared-checkout-v2-strike', children: originalPriceValue })] }), _jsxs("div", { className: 'shared-checkout-v2-price-row is-discount', children: [_jsx("strong", { children: discountLabel }), _jsx("strong", { children: discountAmountLabel })] }), _jsxs("div", { className: 'shared-checkout-v2-promo', children: [_jsx("span", { children: promoCodeLabel }), _jsx("strong", { children: normalizedPromoCode })] })] })) : null, _jsxs("div", { className: [
+    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 })] }), _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',
                         ]
@@ -312,7 +313,7 @@ function SharedStripeCheckoutV2CheckoutSessionForm({ amountCents, buttonColor, c
                                                         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] })] })] })] }));
 }
-function CheckoutSessionProvider({ children, clientSecret, fixedBillingCountry, stripePromise, }) {
+function CheckoutSessionProvider({ children, clientSecret, fixedBillingCountry, stripePromise, variant, }) {
     const providerChildren = children;
     const checkoutProviderOptions = useMemo(() => (Object.assign(Object.assign({ clientSecret }, (fixedBillingCountry
         ? {
@@ -325,12 +326,14 @@ function CheckoutSessionProvider({ children, clientSecret, fixedBillingCountry,
             },
         }
         : {})), { elementsOptions: {
-            appearance: stripeCheckoutV2Appearance,
-        } })), [clientSecret, fixedBillingCountry]);
+            appearance: variant === 'compact'
+                ? compactStripeCheckoutV2Appearance
+                : stripeCheckoutV2Appearance,
+        } })), [clientSecret, fixedBillingCountry, variant]);
     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"]);
+    var { checkoutAnalytics, checkoutSessionId, clientSecret, onClose, stripePromise, supportedCountries, variant = 'standard' } = _a, props = __rest(_a, ["checkoutAnalytics", "checkoutSessionId", "clientSecret", "onClose", "stripePromise", "supportedCountries", "variant"]);
     const normalizedSupportedCountries = useMemo(() => normalizeSupportedCheckoutCountries(supportedCountries), [supportedCountries]);
     const fixedBillingCountry = getFixedSupportedBillingCountry(normalizedSupportedCountries);
     useEffect(() => {
@@ -348,7 +351,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(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 })] }));
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: 'shared-checkout-v2-overlay', children: _jsx("div", { className: 'shared-checkout-v2-dialog', "data-variant": variant, role: 'dialog', "aria-modal": 'true', "aria-labelledby": 'shared-checkout-v2-title', children: _jsx(CheckoutSessionProvider, { clientSecret: clientSecret, fixedBillingCountry: fixedBillingCountry, stripePromise: stripePromise, variant: variant, children: _jsx(SharedStripeCheckoutV2CheckoutSessionForm, Object.assign({}, props, { checkoutAnalytics: checkoutAnalytics, checkoutSessionId: checkoutSessionId, clientSecret: clientSecret, onClose: onClose, supportedCountries: normalizedSupportedCountries, variant: variant })) }) }) }), _jsx("style", { children: sharedStripeCheckoutV2Styles })] }));
 }
 function SharedCheckoutSpecialOfferGift({ discountLabel, imageAlt, imageSrc, }) {
     if (imageSrc) {
@@ -383,6 +386,68 @@ const sharedStripeCheckoutV2Styles = `
   background: #fff;
 }
 
+@media (min-width: 640px) {
+  .shared-checkout-v2-overlay:has(.shared-checkout-v2-dialog[data-variant='compact']) {
+    align-items: center;
+    padding: 24px;
+    background: rgb(0 0 0 / 48%);
+  }
+
+  .shared-checkout-v2-dialog[data-variant='compact'] {
+    width: min(100%, 520px);
+    height: auto;
+    max-height: calc(100svh - 48px);
+    border-radius: 24px;
+    box-shadow: 0 24px 70px rgb(0 0 0 / 28%);
+  }
+}
+
+.shared-checkout-v2-shell[data-variant='compact'] {
+  height: auto;
+  max-height: min(100svh, 760px);
+}
+
+.shared-checkout-v2-shell[data-variant='compact'] .shared-checkout-v2-header {
+  min-height: 88px;
+  padding: 0 72px;
+}
+
+.shared-checkout-v2-shell[data-variant='compact'] .shared-checkout-v2-header h2 {
+  font-size: 27px;
+}
+
+.shared-checkout-v2-shell[data-variant='compact'] .shared-checkout-v2-close {
+  right: 22px;
+  left: auto;
+}
+
+.shared-checkout-v2-shell[data-variant='compact'] .shared-checkout-v2-summary {
+  padding: 0 36px;
+}
+
+.shared-checkout-v2-shell[data-variant='compact'] .shared-checkout-v2-total {
+  min-height: 82px;
+  border: 1px solid #ececef;
+  border-radius: 16px;
+  padding: 0 22px;
+  background: #fbfbfc;
+}
+
+.shared-checkout-v2-shell[data-variant='compact'] .shared-checkout-v2-total svg {
+  display: none;
+}
+
+.shared-checkout-v2-shell[data-variant='compact'] .shared-checkout-v2-payment {
+  padding-right: 36px;
+  padding-left: 36px;
+}
+
+.shared-checkout-v2-shell[data-variant='compact'] .shared-checkout-v2-card-submit {
+  border-radius: 14px;
+  background: var(--shared-checkout-v2-button-color);
+  text-transform: none;
+}
+
 .shared-checkout-v2-shell {
   height: 100%;
   max-height: 100svh;

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

@@ -13,6 +13,7 @@ export type StripeOneTimeCheckoutSessionInput = {
     plan?: StripeOneTimeCheckoutPlanInput | null;
     returnUrl: string;
     runtimeConfig?: StripeRuntimeConfigOverrides;
+    stripePublishableKey?: string | null;
     userId?: string | null;
 };
 export type StripeOneTimeCheckoutPreparationOptions = {
@@ -39,10 +40,10 @@ export type StripeOneTimeCheckoutSession = {
     stripePromise: Promise<Stripe | null> | null;
 };
 export declare const buildStripeOneTimeCheckoutPreparationAnalyticsMetadata: (analyticsMetadata: Record<string, unknown> | null | undefined, options?: StripeOneTimeCheckoutPreparationOptions) => Record<string, unknown> | null | undefined;
-export type StripeOneTimeCheckoutIntentKeyInput = Pick<StripeOneTimeCheckoutSessionInput, 'checkoutMode' | 'couponId' | 'customerEmail' | 'plan' | 'returnUrl' | 'runtimeConfig' | 'userId'> & {
+export type StripeOneTimeCheckoutIntentKeyInput = Pick<StripeOneTimeCheckoutSessionInput, 'checkoutMode' | 'couponId' | 'customerEmail' | 'plan' | 'returnUrl' | 'runtimeConfig' | 'stripePublishableKey' | 'userId'> & {
     analyticsMetadata?: Record<string, unknown> | null;
 };
-export declare function buildStripeOneTimeCheckoutIntentKey({ checkoutMode, couponId, customerEmail, plan, returnUrl, runtimeConfig, userId, }: StripeOneTimeCheckoutIntentKeyInput): string;
+export declare function buildStripeOneTimeCheckoutIntentKey({ checkoutMode, couponId, customerEmail, plan, returnUrl, runtimeConfig, stripePublishableKey, userId, }: StripeOneTimeCheckoutIntentKeyInput): string;
 export declare function shouldResetStripeOneTimeCheckoutSessionForIntentKey(previousIntentKey: string | null, nextIntentKey: string): boolean;
-export declare function useStripeOneTimeCheckoutSession({ analyticsMetadata, checkoutMode, couponId, customerEmail, enabled, onError, plan, returnUrl, runtimeConfig, userId, }: StripeOneTimeCheckoutSessionInput): StripeOneTimeCheckoutSession;
+export declare function useStripeOneTimeCheckoutSession({ analyticsMetadata, checkoutMode, couponId, customerEmail, enabled, onError, plan, returnUrl, runtimeConfig, stripePublishableKey, userId, }: StripeOneTimeCheckoutSessionInput): StripeOneTimeCheckoutSession;
 export {};

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

@@ -36,13 +36,14 @@ export const buildStripeOneTimeCheckoutPreparationAnalyticsMetadata = (analytics
     const _b = analyticsMetadata !== null && analyticsMetadata !== void 0 ? analyticsMetadata : {}, { payment_method: _paymentMethod, paymentMethod: _camelCasePaymentMethod } = _b, metadata = __rest(_b, ["payment_method", "paymentMethod"]);
     return Object.assign(Object.assign(Object.assign({}, metadata), (checkoutStartSource ? { checkoutStartSource } : {})), (paymentMethod ? { payment_method: paymentMethod } : {}));
 };
-export function buildStripeOneTimeCheckoutIntentKey({ checkoutMode, couponId, customerEmail, plan, returnUrl, runtimeConfig, userId, }) {
+export function buildStripeOneTimeCheckoutIntentKey({ checkoutMode, couponId, customerEmail, plan, returnUrl, runtimeConfig, stripePublishableKey, userId, }) {
     var _a;
     const runtimeConfigSignature = [
         normalizeRuntimeConfigValue(runtimeConfig === null || runtimeConfig === void 0 ? void 0 : runtimeConfig.apiBaseUrl),
         normalizeRuntimeConfigValue(runtimeConfig === null || runtimeConfig === void 0 ? void 0 : runtimeConfig.funnelId),
         normalizeRuntimeConfigValue(runtimeConfig === null || runtimeConfig === void 0 ? void 0 : runtimeConfig.funnelVersionId),
         normalizeRuntimeConfigValue(runtimeConfig === null || runtimeConfig === void 0 ? void 0 : runtimeConfig.funnelSdkPublishableKey),
+        normalizeRuntimeConfigValue(stripePublishableKey),
     ].join('|');
     const planSignature = [
         normalizeRuntimeConfigValue(plan === null || plan === void 0 ? void 0 : plan.id),
@@ -65,7 +66,7 @@ export function buildStripeOneTimeCheckoutIntentKey({ checkoutMode, couponId, cu
 export function shouldResetStripeOneTimeCheckoutSessionForIntentKey(previousIntentKey, nextIntentKey) {
     return previousIntentKey !== null && previousIntentKey !== nextIntentKey;
 }
-export function useStripeOneTimeCheckoutSession({ analyticsMetadata, checkoutMode, couponId, customerEmail, enabled = true, onError, plan, returnUrl, runtimeConfig, userId, }) {
+export function useStripeOneTimeCheckoutSession({ analyticsMetadata, checkoutMode, couponId, customerEmail, enabled = true, onError, plan, returnUrl, runtimeConfig, stripePublishableKey, userId, }) {
     var _a, _b, _c;
     const [clientSecret, setClientSecret] = useState(null);
     const [clientSecretIntentKey, setClientSecretIntentKey] = useState(null);
@@ -77,7 +78,8 @@ export function useStripeOneTimeCheckoutSession({ analyticsMetadata, checkoutMod
     const requestIdRef = useRef(0);
     const configured = enabled &&
         (isStripeConfigured(checkoutMode) ||
-            Boolean(normalizeRuntimeConfigValue(runtimeConfig === null || runtimeConfig === void 0 ? void 0 : runtimeConfig.funnelSdkPublishableKey)));
+            Boolean(normalizeRuntimeConfigValue(runtimeConfig === null || runtimeConfig === void 0 ? void 0 : runtimeConfig.funnelSdkPublishableKey)) ||
+            Boolean(normalizeRuntimeConfigValue(stripePublishableKey)));
     const intentKey = buildStripeOneTimeCheckoutIntentKey({
         checkoutMode,
         couponId,
@@ -85,6 +87,7 @@ export function useStripeOneTimeCheckoutSession({ analyticsMetadata, checkoutMod
         plan,
         returnUrl,
         runtimeConfig,
+        stripePublishableKey,
         userId,
     });
     const planKey = [
@@ -94,7 +97,10 @@ export function useStripeOneTimeCheckoutSession({ analyticsMetadata, checkoutMod
     ].join('|');
     const activeClientSecret = clientSecretIntentKey === intentKey ? clientSecret : null;
     const activeCheckoutSessionId = clientSecretIntentKey === intentKey ? checkoutSessionId : null;
-    const stripePromise = useMemo(() => getStripePromise(checkoutMode, runtimeStripePublishableKey !== null && runtimeStripePublishableKey !== void 0 ? runtimeStripePublishableKey : runtimeConfig === null || runtimeConfig === void 0 ? void 0 : runtimeConfig.funnelSdkPublishableKey), [checkoutMode, runtimeConfig === null || runtimeConfig === void 0 ? void 0 : runtimeConfig.funnelSdkPublishableKey, runtimeStripePublishableKey]);
+    const stripePromise = useMemo(() => {
+        var _a;
+        return getStripePromise(checkoutMode, (_a = runtimeStripePublishableKey !== null && runtimeStripePublishableKey !== void 0 ? runtimeStripePublishableKey : stripePublishableKey) !== null && _a !== void 0 ? _a : runtimeConfig === null || runtimeConfig === void 0 ? void 0 : runtimeConfig.funnelSdkPublishableKey);
+    }, [checkoutMode, runtimeConfig === null || runtimeConfig === void 0 ? void 0 : runtimeConfig.funnelSdkPublishableKey, runtimeStripePublishableKey, stripePublishableKey]);
     const previousIntentKeyRef = useRef(intentKey);
     const analyticsMetadataRef = useRef(analyticsMetadata);
     useEffect(() => {

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

@@ -14,6 +14,7 @@ export type StripeSubscriptionCheckoutSessionInput = {
     plan?: PaywallPlan | null;
     returnUrl: string;
     runtimeConfig?: StripeRuntimeConfigOverrides;
+    stripePublishableKey?: string | null;
     userId?: string | null;
 };
 export type StripeSubscriptionCheckoutPreparationOptions = {
@@ -42,10 +43,10 @@ export type StripeSubscriptionCheckoutSession = {
     updateCheckoutSessionPlan: () => Promise<boolean>;
 };
 export declare const buildStripeSubscriptionCheckoutPreparationAnalyticsMetadata: (analyticsMetadata: Record<string, unknown> | null | undefined, options?: StripeSubscriptionCheckoutPreparationOptions) => Record<string, unknown> | null | undefined;
-export type StripeSubscriptionCheckoutIntentKeyInput = Pick<StripeSubscriptionCheckoutSessionInput, 'checkoutMode' | 'couponId' | 'customerEmail' | 'returnUrl' | 'runtimeConfig' | 'userId'> & {
+export type StripeSubscriptionCheckoutIntentKeyInput = Pick<StripeSubscriptionCheckoutSessionInput, 'checkoutMode' | 'couponId' | 'customerEmail' | 'returnUrl' | 'runtimeConfig' | 'stripePublishableKey' | 'userId'> & {
     analyticsMetadata?: Record<string, unknown> | null;
 };
-export declare function buildStripeSubscriptionCheckoutIntentKey({ checkoutMode, couponId, customerEmail, returnUrl, runtimeConfig, userId, }: StripeSubscriptionCheckoutIntentKeyInput): string;
+export declare function buildStripeSubscriptionCheckoutIntentKey({ checkoutMode, couponId, customerEmail, returnUrl, runtimeConfig, stripePublishableKey, userId, }: StripeSubscriptionCheckoutIntentKeyInput): string;
 export declare function shouldResetStripeSubscriptionCheckoutSessionForIntentKey(previousIntentKey: string | null, nextIntentKey: string): boolean;
 export declare function isInactiveCheckoutSessionError(message?: string | null): boolean;
-export declare function useStripeSubscriptionCheckoutSession({ checkoutMode, analyticsMetadata, couponId, customerEmail, displayPlan, enabled, onError, plan, returnUrl, runtimeConfig, userId, }: StripeSubscriptionCheckoutSessionInput): StripeSubscriptionCheckoutSession;
+export declare function useStripeSubscriptionCheckoutSession({ checkoutMode, analyticsMetadata, couponId, customerEmail, displayPlan, enabled, onError, plan, returnUrl, runtimeConfig, stripePublishableKey, userId, }: StripeSubscriptionCheckoutSessionInput): StripeSubscriptionCheckoutSession;

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

@@ -35,12 +35,13 @@ export const buildStripeSubscriptionCheckoutPreparationAnalyticsMetadata = (anal
     const _b = analyticsMetadata !== null && analyticsMetadata !== void 0 ? analyticsMetadata : {}, { payment_method: _paymentMethod, paymentMethod: _camelCasePaymentMethod } = _b, metadata = __rest(_b, ["payment_method", "paymentMethod"]);
     return Object.assign(Object.assign(Object.assign({}, metadata), (checkoutStartSource ? { checkoutStartSource } : {})), (paymentMethod ? { payment_method: paymentMethod } : {}));
 };
-export function buildStripeSubscriptionCheckoutIntentKey({ checkoutMode, couponId, customerEmail, returnUrl, runtimeConfig, userId, }) {
+export function buildStripeSubscriptionCheckoutIntentKey({ checkoutMode, couponId, customerEmail, returnUrl, runtimeConfig, stripePublishableKey, userId, }) {
     const runtimeConfigSignature = [
         normalizeRuntimeConfigValue(runtimeConfig === null || runtimeConfig === void 0 ? void 0 : runtimeConfig.apiBaseUrl),
         normalizeRuntimeConfigValue(runtimeConfig === null || runtimeConfig === void 0 ? void 0 : runtimeConfig.funnelId),
         normalizeRuntimeConfigValue(runtimeConfig === null || runtimeConfig === void 0 ? void 0 : runtimeConfig.funnelVersionId),
         normalizeRuntimeConfigValue(runtimeConfig === null || runtimeConfig === void 0 ? void 0 : runtimeConfig.funnelSdkPublishableKey),
+        normalizeRuntimeConfigValue(stripePublishableKey),
     ].join('|');
     const customerEmailSignature = normalizeRuntimeConfigValue(customerEmail);
     const userIdSignature = normalizeRuntimeConfigValue(userId);
@@ -61,7 +62,7 @@ export function isInactiveCheckoutSessionError(message) {
     var _a;
     return /\bcheckout session\b.*\bno longer active\b/i.test((_a = message === null || message === void 0 ? void 0 : message.trim()) !== null && _a !== void 0 ? _a : '');
 }
-export function useStripeSubscriptionCheckoutSession({ checkoutMode, analyticsMetadata, couponId, customerEmail, displayPlan, enabled = true, onError, plan, returnUrl, runtimeConfig, userId, }) {
+export function useStripeSubscriptionCheckoutSession({ checkoutMode, analyticsMetadata, couponId, customerEmail, displayPlan, enabled = true, onError, plan, returnUrl, runtimeConfig, stripePublishableKey, userId, }) {
     var _a, _b, _c, _d, _e;
     const [clientSecret, setClientSecret] = useState(null);
     const [clientSecretIntentKey, setClientSecretIntentKey] = useState(null);
@@ -74,13 +75,15 @@ export function useStripeSubscriptionCheckoutSession({ checkoutMode, analyticsMe
     const requestIdRef = useRef(0);
     const configured = enabled &&
         (isStripeConfigured(checkoutMode) ||
-            Boolean(normalizeRuntimeConfigValue(runtimeConfig === null || runtimeConfig === void 0 ? void 0 : runtimeConfig.funnelSdkPublishableKey)));
+            Boolean(normalizeRuntimeConfigValue(runtimeConfig === null || runtimeConfig === void 0 ? void 0 : runtimeConfig.funnelSdkPublishableKey)) ||
+            Boolean(normalizeRuntimeConfigValue(stripePublishableKey)));
     const intentKey = buildStripeSubscriptionCheckoutIntentKey({
         checkoutMode,
         couponId,
         customerEmail,
         returnUrl,
         runtimeConfig,
+        stripePublishableKey,
         userId,
     });
     const planKey = [
@@ -93,7 +96,7 @@ export function useStripeSubscriptionCheckoutSession({ checkoutMode, analyticsMe
     const activeClientSecret = clientSecretIntentKey === intentKey ? clientSecret : null;
     const activeCheckoutSessionId = clientSecretIntentKey === intentKey ? checkoutSessionId : null;
     const activePlanKey = clientSecretIntentKey === intentKey ? clientSecretPlanKey : null;
-    const stripePromise = useMemo(() => getStripePromise(checkoutMode, runtimeStripePublishableKey), [checkoutMode, runtimeStripePublishableKey]);
+    const stripePromise = useMemo(() => getStripePromise(checkoutMode, runtimeStripePublishableKey !== null && runtimeStripePublishableKey !== void 0 ? runtimeStripePublishableKey : stripePublishableKey), [checkoutMode, runtimeStripePublishableKey, stripePublishableKey]);
     const previousIntentKeyRef = useRef(intentKey);
     const analyticsMetadataRef = useRef(analyticsMetadata);
     useEffect(() => {

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

@@ -8,6 +8,7 @@ export type ResolvedPublishedBillingRuntime = {
     offerSetId: string;
     paymentProfileId: string | null;
     provider: 'stripe' | 'solidgate';
+    stripePublishableKey: string | null;
     experimentId: string | null;
     variantKey: string | null;
     experiments: readonly FunnelExperimentDefinition[];

package/dist/services/publishedBillingRuntime.service.js

@@ -2,7 +2,7 @@ import { resolveGeneratedOfferSetRuntime, resolvePublishedOfferSetSelection, res
 import { buildBillingDiscountCatalog } from './paywallOffer.service.js';
 import { buildConfigPaywallPlans, } from '../providers/stripe/services/stripe.service.js';
 export const resolvePublishedBillingRuntime = ({ config, featureFlags, mode, search = '', defaultOfferSetId, baseCatalogsByMode, fallbackDiscounts, resolvedExperiments = resolvePublishedRuntimeExperiments(config), }) => {
-    var _a, _b, _c, _d;
+    var _a, _b, _c, _d, _e, _f, _g;
     const offerSets = (_a = config === null || config === void 0 ? void 0 : config.offerSets) !== null && _a !== void 0 ? _a : [];
     const selection = resolvePublishedOfferSetSelection({
         offerSets,
@@ -22,12 +22,17 @@ export const resolvePublishedBillingRuntime = ({ config, featureFlags, mode, sea
         .map((key) => planCatalog[key])
         .filter((plan) => Boolean(plan));
     const discountList = runtime.getDiscountList(mode);
+    const provider = runtime.getPaymentProvider(mode);
+    const paymentProviderConfig = (_c = (_b = runtime.offerSet) === null || _b === void 0 ? void 0 : _b.paymentProviderConfigByMode) === null || _c === void 0 ? void 0 : _c[mode];
     return {
-        revisionId: (_b = config === null || config === void 0 ? void 0 : config.revisionId) !== null && _b !== void 0 ? _b : null,
+        revisionId: (_d = config === null || config === void 0 ? void 0 : config.revisionId) !== null && _d !== void 0 ? _d : null,
         mode,
         offerSetId: selection.offerSetId,
-        paymentProfileId: ((_d = (_c = runtime.offerSet) === null || _c === void 0 ? void 0 : _c.paymentProfileId) === null || _d === void 0 ? void 0 : _d.trim()) || null,
-        provider: runtime.getPaymentProvider(mode),
+        paymentProfileId: ((_f = (_e = runtime.offerSet) === null || _e === void 0 ? void 0 : _e.paymentProfileId) === null || _f === void 0 ? void 0 : _f.trim()) || null,
+        provider,
+        stripePublishableKey: provider === 'stripe' && (paymentProviderConfig === null || paymentProviderConfig === void 0 ? void 0 : paymentProviderConfig.provider) === 'stripe'
+            ? ((_g = paymentProviderConfig === null || paymentProviderConfig === void 0 ? void 0 : paymentProviderConfig.stripePublishableKey) === null || _g === void 0 ? void 0 : _g.trim()) || null
+            : null,
         experimentId: selection.experimentId,
         variantKey: selection.variantKey,
         experiments: resolvedExperiments.experiments,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@funnelsgrove/payments",
-  "version": "0.7.20",
+  "version": "0.7.22",
   "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.78",
-    "@funnelsgrove/runtime": "^0.7.29",
+    "@funnelsgrove/analytics": "^0.1.79",
+    "@funnelsgrove/runtime": "^0.7.30",
     "@solidgate/react-sdk": "1.34.0",
     "@stripe/react-stripe-js": "^5.6.0",
     "@stripe/stripe-js": "^8.7.0",