@funnelsgrove/payments 0.7.19 → 0.7.21

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

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/components/WalletSubscriptionCheckoutSlot.js

@@ -75,37 +75,40 @@ export function WalletSubscriptionCheckoutSlot({ amountCents, appearance, availa
                 intentKey,
             });
     }, []);
+    const autoWalletClientSecret = session.activeClientSecret;
+    const autoWalletIntentKey = session.intentKey;
+    const autoWalletLoading = session.loading.wallet;
+    const prepareWalletCheckout = session.prepareWalletCheckout;
     useEffect(() => {
         if (slotDisabled ||
             suspended ||
             !expressCheckoutAllowed ||
             walletAvailable === false ||
-            session.loading.wallet ||
-            session.activeClientSecret) {
+            autoWalletLoading ||
+            autoWalletClientSecret) {
             return;
         }
-        if (autoWalletPreparationIntentKeyRef.current === session.intentKey) {
+        if (autoWalletPreparationIntentKeyRef.current === autoWalletIntentKey) {
             return;
         }
-        autoWalletPreparationIntentKeyRef.current = session.intentKey;
-        void session
-            .prepareWalletCheckout({
+        autoWalletPreparationIntentKeyRef.current = autoWalletIntentKey;
+        void prepareWalletCheckout({
             checkoutStartSource: 'wallet_render',
             paymentMethod: analyticsPaymentMethod,
         })
             .then((readyClientSecret) => {
             if (!readyClientSecret) {
-                reportWalletPreparationFailure(session.intentKey);
+                reportWalletPreparationFailure(autoWalletIntentKey);
             }
         });
     }, [
         analyticsPaymentMethod,
+        autoWalletClientSecret,
+        autoWalletIntentKey,
+        autoWalletLoading,
         expressCheckoutAllowed,
+        prepareWalletCheckout,
         reportWalletPreparationFailure,
-        session.activeClientSecret,
-        session.intentKey,
-        session.loading.wallet,
-        session.prepareWalletCheckout,
         slotDisabled,
         suspended,
         walletAvailable,
@@ -136,7 +139,7 @@ export function WalletSubscriptionCheckoutSlot({ amountCents, appearance, availa
                 intentKey: session.intentKey,
             });
             void session.restartWalletCheckout({
-                checkoutStartSource: 'wallet_render',
+                checkoutStartSource: 'wallet_click',
                 paymentMethod: analyticsPaymentMethod,
             });
             return;
@@ -157,7 +160,7 @@ export function WalletSubscriptionCheckoutSlot({ amountCents, appearance, availa
         }
         setWalletCheckoutStartedAfterClickIntentKey(session.intentKey);
         const readyClientSecret = await session.prepareWalletCheckout({
-            checkoutStartSource: 'wallet_render',
+            checkoutStartSource: 'wallet_click',
             paymentMethod: analyticsPaymentMethod,
         });
         if (!readyClientSecret) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@funnelsgrove/payments",
-  "version": "0.7.19",
+  "version": "0.7.21",
   "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.67",
-    "@funnelsgrove/runtime": "^0.7.19",
+    "@funnelsgrove/analytics": "^0.1.78",
+    "@funnelsgrove/runtime": "^0.7.29",
     "@solidgate/react-sdk": "1.34.0",
     "@stripe/react-stripe-js": "^5.6.0",
     "@stripe/stripe-js": "^8.7.0",