@funnelsgrove/payments 0.30.0 → 0.31.0

package/README.md

@@ -76,6 +76,19 @@ 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.
 
+For a wallet-first subscription flow, set `walletFirst` on each
+`StripeSubscriptionWalletSurface` with the device payment method and an
+`onPayerEmail` callback that saves the wallet email on the current Funnel User.
+The wallet sheet opens before a Checkout Session exists; the shared surface
+prepares and confirms the session after the email is saved. Render one surface
+per visible placement and a separate card session for fallback. A Stripe
+publishable key must be available before the wallet opens; otherwise the surface
+reports the wallet unavailable so the caller can show card checkout.
+Set `walletFirst.buttonLabel` for a single funnel-styled trial CTA; without it,
+wallet-first mode renders the existing branded Apple Pay or Google Pay button.
+The regular surface without `walletFirst` keeps its existing separate wallet
+choices and card entry.
+
 `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:

package/dist/generated/package-version.d.ts

@@ -1 +1 @@
-export declare const PAYMENTS_PACKAGE_VERSION = "0.30.0";
+export declare const PAYMENTS_PACKAGE_VERSION = "0.31.0";

package/dist/generated/package-version.js

@@ -1,2 +1,2 @@
 // Generated by scripts/generate-package-version.mjs.
-export const PAYMENTS_PACKAGE_VERSION = "0.30.0";
+export const PAYMENTS_PACKAGE_VERSION = "0.31.0";

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

@@ -19,6 +19,8 @@ const defaultContent = {
     error: 'Payment could not be completed. Please try again.',
     expired: 'This checkout has expired. Start a new payment to continue.',
     retry: 'Try again',
+    existingSubscriptionTitle: 'Subscription already active',
+    existingSubscriptionContinue: 'Continue',
     resumeVerification: 'Check payment status',
     customerEmailLabel: 'Email address',
     customerEmailPlaceholder: 'you@example.com',
@@ -227,7 +229,10 @@ export function SolidgateCheckoutDialog({ open, layout = 'dialog', request, cust
             if (!controller.signal.aborted && !isAbortError(error)) {
                 const failureMessage = error instanceof SolidgateExistingSubscriptionError
                     ? error.message : copyRef.current.error;
-                setState({ state: 'recoverable_error', checkout: null, canResumeVerification: false, failureMessage });
+                setState({
+                    state: error instanceof SolidgateExistingSubscriptionError ? 'existing_subscription' : 'recoverable_error',
+                    checkout: null, canResumeVerification: false, failureMessage,
+                });
                 trackFailure(failureMessage, 'checkout_session_creation');
                 (_a = onErrorRef.current) === null || _a === void 0 ? void 0 : _a.call(onErrorRef, failureMessage, error instanceof SolidgateExistingSubscriptionError ? error.code : undefined);
             }
@@ -237,9 +242,10 @@ export function SolidgateCheckoutDialog({ open, layout = 'dialog', request, cust
     const paymentFormMounted = Boolean(view.checkout && mountedPaymentAttemptId === view.checkout.attemptId);
     const showPreparingLoader = view.state === 'loading'
         || (view.state === 'ready' && !paymentFormMounted);
+    const hasExistingSubscription = view.state === 'existing_subscription';
     useEffect(() => {
         var _a;
-        if (!open || layout === 'wallet') {
+        if (!open || (layout === 'wallet' && !hasExistingSubscription)) {
             return;
         }
         const previouslyFocused = document.activeElement instanceof HTMLElement
@@ -269,7 +275,7 @@ export function SolidgateCheckoutDialog({ open, layout = 'dialog', request, cust
             window.removeEventListener('keydown', handleKeyDown);
             previouslyFocused === null || previouslyFocused === void 0 ? void 0 : previouslyFocused.focus();
         };
-    }, [layout, open, showPreparingLoader, view.checkout]);
+    }, [hasExistingSubscription, layout, open, showPreparingLoader, view.checkout]);
     useEffect(() => () => {
         var _a, _b;
         (_a = prepareAbortRef.current) === null || _a === void 0 ? void 0 : _a.abort();
@@ -389,7 +395,7 @@ export function SolidgateCheckoutDialog({ open, layout = 'dialog', request, cust
                     ? copy.success
                     : view.state === 'expired'
                         ? copy.expired
-                        : view.state === 'recoverable_error'
+                        : view.state === 'recoverable_error' || hasExistingSubscription
                             ? view.failureMessage || copy.error
                             : null;
     const presentationStyle = presentation
@@ -397,7 +403,7 @@ export function SolidgateCheckoutDialog({ open, layout = 'dialog', request, cust
             '--solidgate-checkout-theme-color': presentation.themeColor,
         }
         : undefined;
-    const recoveryActions = (_jsxs(_Fragment, { children: [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: () => {
+    const recoveryActions = (_jsxs(_Fragment, { children: [hasExistingSubscription ? (_jsx("a", { href: successUrl, className: 'solidgate-checkout-action solidgate-checkout-action--spaced', children: copy.existingSubscriptionContinue })) : 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: () => {
                     var _a;
                     const source = checkoutType === 'subscription'
                         ? declinedAttemptRef.current || (retryAttemptId ? ((_a = view.checkout) === null || _a === void 0 ? void 0 : _a.attemptId) || retryAttemptId : null)
@@ -429,7 +435,7 @@ export function SolidgateCheckoutDialog({ open, layout = 'dialog', request, cust
             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;
-    if (layout === 'wallet') {
+    if (layout === 'wallet' && !hasExistingSubscription) {
         return (_jsxs("div", { className: 'solidgate-inline-wallet', onClick: (event) => {
                 var _a;
                 const attemptId = (_a = view.checkout) === null || _a === void 0 ? void 0 : _a.attemptId;
@@ -440,11 +446,11 @@ export function SolidgateCheckoutDialog({ open, layout = 'dialog', request, cust
                 }
             }, children: [paymentForm, statusMessage && !showPreparingLoader ? _jsx("p", { role: 'status', children: statusMessage }) : null, recoveryActions, _jsx("style", { children: solidgateCheckoutDialogStyles })] }));
     }
-    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: `solidgate-checkout-overlay${presentation ? ' is-branded' : ''}`, style: presentationStyle, children: [showPreparingLoader ? (_jsxs("div", { className: 'solidgate-checkout-loader', role: 'status', "aria-live": 'polite', children: [_jsx("span", { className: 'solidgate-checkout-spinner', "aria-hidden": 'true' }), _jsx("span", { className: 'solidgate-checkout-visually-hidden', children: copy.loading })] })) : null, view.state !== 'loading' || view.checkout ? (_jsxs("div", { role: 'dialog', "aria-modal": 'true', "aria-hidden": showPreparingLoader || undefined, "aria-labelledby": 'solidgate-checkout-title', "data-checkout-state": view.state, className: [
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: `solidgate-checkout-overlay${presentation && !hasExistingSubscription ? ' is-branded' : ''}`, style: presentationStyle, children: [showPreparingLoader ? (_jsxs("div", { className: 'solidgate-checkout-loader', role: 'status', "aria-live": 'polite', children: [_jsx("span", { className: 'solidgate-checkout-spinner', "aria-hidden": 'true' }), _jsx("span", { className: 'solidgate-checkout-visually-hidden', children: copy.loading })] })) : null, view.state !== 'loading' || view.checkout ? (_jsxs("div", { role: 'dialog', "aria-modal": 'true', "aria-hidden": showPreparingLoader || undefined, "aria-labelledby": 'solidgate-checkout-title', "data-checkout-state": view.state, className: [
                             'solidgate-checkout-dialog',
                             showPreparingLoader ? 'is-preparing' : '',
-                            presentation ? 'is-branded' : '',
-                        ].filter(Boolean).join(' '), children: [_jsxs("div", { className: 'solidgate-checkout-header', children: [_jsx("button", { ref: closeButtonRef, type: 'button', onClick: handleClose, "aria-label": copy.closeAriaLabel, className: 'solidgate-checkout-close', children: _jsx("span", { "aria-hidden": 'true' }) }), _jsx("h2", { id: 'solidgate-checkout-title', className: 'solidgate-checkout-title', children: (presentation === null || presentation === void 0 ? void 0 : presentation.title) || copy.title })] }), presentation ? _jsx(SolidgateCheckoutSummary, { presentation: presentation }) : null, view.state === 'collecting_email' ? (_jsxs("form", { className: 'solidgate-checkout-email-form', onSubmit: (event) => void commitCustomerEmail(event), children: [_jsxs("label", { className: 'solidgate-checkout-email-label', children: [copy.customerEmailLabel, _jsx("input", { type: 'email', autoComplete: 'email', inputMode: 'email', maxLength: 320, required: true, value: emailInput, onChange: (event) => {
+                            presentation && !hasExistingSubscription ? 'is-branded' : '',
+                        ].filter(Boolean).join(' '), children: [_jsxs("div", { className: 'solidgate-checkout-header', children: [_jsx("button", { ref: closeButtonRef, type: 'button', onClick: handleClose, "aria-label": copy.closeAriaLabel, className: 'solidgate-checkout-close', children: _jsx("span", { "aria-hidden": 'true' }) }), _jsx("h2", { id: 'solidgate-checkout-title', className: 'solidgate-checkout-title', children: hasExistingSubscription ? copy.existingSubscriptionTitle : (presentation === null || presentation === void 0 ? void 0 : presentation.title) || copy.title })] }), presentation && !hasExistingSubscription ? _jsx(SolidgateCheckoutSummary, { presentation: presentation }) : null, view.state === 'collecting_email' ? (_jsxs("form", { className: 'solidgate-checkout-email-form', onSubmit: (event) => void commitCustomerEmail(event), children: [_jsxs("label", { className: 'solidgate-checkout-email-label', children: [copy.customerEmailLabel, _jsx("input", { type: 'email', autoComplete: 'email', inputMode: 'email', maxLength: 320, required: true, value: emailInput, onChange: (event) => {
                                                     setEmailInput(event.target.value);
                                                     setEmailError(null);
                                                 }, placeholder: copy.customerEmailPlaceholder, "aria-invalid": Boolean(emailError), className: 'solidgate-checkout-email-input' })] }), emailError ? (_jsx("p", { role: 'alert', className: 'solidgate-checkout-alert', children: emailError })) : null, _jsx("button", { type: 'submit', disabled: emailSubmitting, className: 'solidgate-checkout-action', children: copy.customerEmailContinue })] })) : null, paymentForm, statusMessage && view.state !== 'ready' ? (_jsx("div", { className: 'solidgate-checkout-status', children: _jsx("p", { role: 'status', "aria-live": 'polite', children: statusMessage }) })) : null, recoveryActions] })) : null] }), _jsx("style", { children: solidgateCheckoutDialogStyles })] }));

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

@@ -1 +1 @@
-export declare const solidgateCheckoutDialogStyles = "\n.solidgate-checkout-overlay {\n  position: fixed;\n  inset: 0;\n  z-index: 100;\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  overflow: hidden;\n  padding: 16px;\n  background: rgb(17 24 39 / 60%);\n  backdrop-filter: blur(4px);\n}\n\n.solidgate-checkout-overlay.is-branded {\n  z-index: 110;\n  align-items: stretch;\n  padding: 0;\n  background: #fff;\n  backdrop-filter: none;\n}\n\n.solidgate-checkout-dialog {\n  box-sizing: border-box;\n  width: min(100%, 512px);\n  max-height: calc(100svh - 32px);\n  overflow-y: auto;\n  border: 1px solid var(--color-border, #d1d5db);\n  border-radius: 16px;\n  background: var(--color-surface, #fff);\n  padding: 20px;\n  color: var(--color-text, #111827);\n  box-shadow: 0 24px 80px rgb(17 24 39 / 22%);\n}\n\n.solidgate-checkout-dialog.is-branded {\n  width: min(100%, 430px);\n  height: 100svh;\n  max-height: 100svh;\n  border: 0;\n  border-radius: 0;\n  background: #fff;\n  padding: 0 17px 28px;\n  color: #303136;\n  box-shadow: none;\n  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n}\n\n.solidgate-checkout-dialog.is-preparing {\n  position: absolute;\n  opacity: 0;\n  pointer-events: none;\n}\n\n.solidgate-checkout-loader {\n  display: grid;\n  place-items: center;\n}\n\n.solidgate-checkout-spinner {\n  box-sizing: border-box;\n  width: 44px;\n  height: 44px;\n  border: 4px solid var(--color-border, #d1d5db);\n  border-top-color: var(--color-primary, #22c55e);\n  border-radius: 50%;\n  animation: solidgate-checkout-spin 720ms linear infinite;\n}\n\n.solidgate-checkout-visually-hidden {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  overflow: hidden;\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  white-space: nowrap;\n}\n\n@keyframes solidgate-checkout-spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .solidgate-checkout-spinner {\n    animation-duration: 1.6s;\n  }\n}\n\n.solidgate-checkout-header {\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 16px;\n  margin-bottom: 16px;\n}\n\n.solidgate-checkout-dialog.is-branded .solidgate-checkout-header {\n  min-height: 70px;\n  margin: 0 -17px;\n  padding: 0 56px;\n}\n\n.solidgate-checkout-title {\n  margin: 0;\n  color: var(--color-text, #111827);\n  font-size: 18px;\n  font-weight: 600;\n  line-height: 1.3;\n}\n\n.solidgate-checkout-dialog.is-branded .solidgate-checkout-title {\n  color: #020203;\n  font-size: 24px;\n  font-weight: 900;\n  line-height: 1.15;\n  text-align: center;\n}\n\n.solidgate-checkout-close {\n  position: absolute;\n  left: 0;\n  top: 50%;\n  width: 36px;\n  height: 36px;\n  flex: none;\n  border: 1px solid var(--color-border, #d1d5db);\n  border-radius: 8px;\n  background: var(--color-bg, #f9fafb);\n  color: var(--color-text, #111827);\n  font-size: 22px;\n  transform: translateY(-50%);\n  cursor: pointer;\n}\n\n.solidgate-checkout-dialog.is-branded .solidgate-checkout-close {\n  left: 16px;\n  width: 40px;\n  height: 40px;\n  border: 0;\n  border-radius: 999px;\n  background: #f2f2f3;\n  color: #aaa;\n}\n\n.solidgate-checkout-close span,\n.solidgate-checkout-close span::after {\n  position: absolute;\n  left: 50%;\n  top: 50%;\n  width: 22px;\n  height: 3px;\n  border-radius: 999px;\n  background: currentColor;\n  content: '';\n}\n\n.solidgate-checkout-close span {\n  transform: translate(-50%, -50%) rotate(45deg);\n}\n\n.solidgate-checkout-close span::after {\n  transform: translate(-50%, -50%) rotate(90deg);\n}\n\n.solidgate-checkout-close:hover {\n  background: var(--color-accent-soft, #eef2ff);\n}\n\n.solidgate-checkout-summary {\n  color: #303136;\n}\n\n.solidgate-checkout-countdown {\n  min-height: 37px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin: 0;\n  border-radius: 12px;\n  background: color-mix(in srgb, var(--solidgate-checkout-theme-color) 10%, #fff);\n  color: var(--solidgate-checkout-theme-color);\n  font-size: 16px;\n  font-weight: 900;\n  text-align: center;\n}\n\n.solidgate-checkout-satisfaction {\n  margin: 17px 0 21px;\n  color: #2f3034;\n  font-size: 19px;\n  font-weight: 800;\n  line-height: 1.15;\n  text-align: center;\n}\n\n.solidgate-checkout-satisfaction strong {\n  color: var(--solidgate-checkout-theme-color);\n}\n\n.solidgate-checkout-price-stack {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n\n.solidgate-checkout-price-row,\n.solidgate-checkout-promo,\n.solidgate-checkout-total {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 12px;\n}\n\n.solidgate-checkout-price-row {\n  font-size: 17px;\n}\n\n.solidgate-checkout-price-row.is-muted {\n  color: #9d9d9f;\n  font-weight: 500;\n}\n\n.solidgate-checkout-strike {\n  text-decoration: line-through 2px;\n}\n\n.solidgate-checkout-price-row.is-discount {\n  color: #040508;\n  font-weight: 900;\n}\n\n.solidgate-checkout-price-row.is-discount strong:last-child {\n  color: #ff2544;\n}\n\n.solidgate-checkout-promo {\n  min-height: 42px;\n  border-radius: 13px;\n  background: #f0f0f0;\n  padding: 0 14px;\n  color: #8d8d90;\n  font-size: 16px;\n}\n\n.solidgate-checkout-promo strong {\n  color: #050609;\n  font-weight: 900;\n}\n\n.solidgate-checkout-total {\n  min-height: 76px;\n  margin-top: 20px;\n  border-top: 1px solid #dedede;\n  font-size: 23px;\n  font-weight: 800;\n}\n\n.solidgate-checkout-total.is-plain {\n  margin-top: 0;\n}\n\n.solidgate-checkout-total strong {\n  font-size: 25px;\n  font-weight: 900;\n}\n\n.solidgate-checkout-total strong {\n  display: inline-flex;\n  align-items: center;\n  gap: 7px;\n}\n.solidgate-checkout-total svg {\n  width: 25px;\n  height: 25px;\n  fill: none;\n  stroke: currentColor;\n  stroke-width: 2;\n  stroke-linejoin: round;\n}\n.solidgate-checkout-saved {\n  width: fit-content;\n  min-height: 36px;\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n  margin: -8px 0 9px auto;\n  border-radius: 12px;\n  background: #ffdce3;\n  padding: 0 14px;\n  color: #ff2544;\n  font-size: 14px;\n  font-weight: 900;\n  line-height: 1.1;\n}\n\n.solidgate-checkout-email-form,\n.solidgate-checkout-email-label,\n.solidgate-checkout-wallets {\n  display: grid;\n}\n\n.solidgate-checkout-email-form {\n  gap: 16px;\n}\n\n.solidgate-checkout-email-label {\n  gap: 8px;\n  color: var(--color-text, #111827);\n  font-size: 14px;\n  font-weight: 500;\n}\n\n.solidgate-checkout-email-input {\n  box-sizing: border-box;\n  width: 100%;\n  min-height: 44px;\n  border: 1px solid var(--color-border, #d1d5db);\n  border-radius: 8px;\n  background: var(--color-bg, #fff);\n  padding: 8px 12px;\n  color: var(--color-text, #111827);\n  font: inherit;\n}\n\n.solidgate-checkout-email-input::placeholder,\n.solidgate-checkout-status,\n.solidgate-checkout-status-text {\n  color: var(--color-text-muted, #6b7280);\n}\n\n.solidgate-checkout-email-input:focus-visible,\n.solidgate-checkout-close:focus-visible,\n.solidgate-checkout-action:focus-visible {\n  outline: 2px solid var(--color-accent, #3f51b5);\n  outline-offset: 2px;\n}\n\n.solidgate-checkout-alert {\n  margin: 0;\n  color: var(--color-danger, #b91c1c);\n  font-size: 14px;\n}\n\n.solidgate-checkout-action {\n  box-sizing: border-box;\n  width: 100%;\n  min-height: 44px;\n  border: 1px solid var(--color-accent, #3f51b5);\n  border-radius: 8px;\n  background: var(--color-accent, #3f51b5);\n  padding: 8px 16px;\n  color: var(--color-primary-text, #fff);\n  font: inherit;\n  font-weight: 600;\n  cursor: pointer;\n}\n\n.solidgate-checkout-action:disabled {\n  cursor: not-allowed;\n  opacity: 0.6;\n}\n\n.solidgate-checkout-action--spaced {\n  margin-top: 16px;\n}\n\n.solidgate-checkout-wallets {\n  gap: 12px;\n}\n.solidgate-checkout-wallets > div:empty,\n.solidgate-checkout-wallets:not(:has(> div:not(:empty))) { display: none; }\n.solidgate-checkout-wallets > div:not(:empty) {\n  width: 100%;\n  height: 54px;\n}\n.solidgate-checkout-wallets apple-pay-button {\n  --apple-pay-button-width: 100%;\n  --apple-pay-button-height: 54px;\n  --apple-pay-button-border-radius: 0;\n  width: 100%;\n  height: 54px;\n}\n.solidgate-checkout-payment.is-branded {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  margin: 0 -17px;\n  padding: 9px 17px 32px;\n  background: #f2f2f3;\n}\n.solidgate-checkout-methods {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);\n  gap: 42px;\n}\n.solidgate-checkout-method {\n  min-height: 74px;\n  border: 2px solid #e6e7eb;\n  border-radius: 13px;\n  background: #fff;\n  color: #303136;\n  padding: 9px 8px;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 6px;\n  font: inherit;\n  cursor: pointer;\n}\n.solidgate-checkout-method[aria-selected='true'] { border: 3px solid #050609; }\n.solidgate-checkout-method:focus-visible { outline: 2px solid var(--solidgate-checkout-theme-color, #3f51b5); outline-offset: 2px; }\n.solidgate-checkout-method strong { font-size: 20px; font-weight: 800; line-height: 1.1; }\n.solidgate-checkout-tab-wallet { width: 58px; height: 36px; }\n.solidgate-checkout-tab-brands { display: flex; align-items: center; gap: 4px; }\n.solidgate-checkout-tab-brand { width: 24px; height: 15px; }\n.solidgate-checkout-tab-wallet svg, .solidgate-checkout-tab-brand svg { width: 100%; height: 100%; }\n.solidgate-checkout-secure {\n  min-height: 47px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 9px;\n  margin: 0;\n  border-radius: 12px;\n  background: #dcffd0;\n  color: #207733;\n  font-size: 18px;\n  font-weight: 800;\n}\n.solidgate-checkout-secure svg { width: 23px; height: 23px; }\n.solidgate-checkout-payment.is-branded .solidgate-checkout-card { padding: 10px 14px 0; }\n.solidgate-checkout-secure.is-card { width: fit-content; margin: 14px auto 0; padding: 0 14px; }\n.solidgate-sdk-card-container iframe { border: 0; }\n.solidgate-checkout-payment[hidden],\n.solidgate-checkout-wallets[hidden],\n.solidgate-checkout-card[hidden] { display: none; }\n.solidgate-inline-wallet { width: 100%; }\n.solidgate-inline-wallet .solidgate-checkout-wallets:has(> div:not(:empty)) { margin-bottom: 12px; }\n\n.solidgate-checkout-status {\n  margin-top: 12px;\n  border: 1px solid var(--color-border, #d1d5db);\n  border-radius: 12px;\n  background: var(--color-bg, #f9fafb);\n  padding: 16px;\n  font-size: 14px;\n}\n\n.solidgate-checkout-status p,\n.solidgate-checkout-status-text {\n  margin: 0;\n}\n";
+export declare const solidgateCheckoutDialogStyles = "\n.solidgate-checkout-overlay {\n  position: fixed;\n  inset: 0;\n  z-index: 100;\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  overflow: hidden;\n  padding: 16px;\n  background: rgb(17 24 39 / 60%);\n  backdrop-filter: blur(4px);\n}\n\n.solidgate-checkout-overlay.is-branded {\n  z-index: 110;\n  align-items: stretch;\n  padding: 0;\n  background: #fff;\n  backdrop-filter: none;\n}\n\n.solidgate-checkout-dialog {\n  box-sizing: border-box;\n  width: min(100%, 512px);\n  max-height: calc(100svh - 32px);\n  overflow-y: auto;\n  border: 1px solid var(--color-border, #d1d5db);\n  border-radius: 16px;\n  background: var(--color-surface, #fff);\n  padding: 20px;\n  color: var(--color-text, #111827);\n  box-shadow: 0 24px 80px rgb(17 24 39 / 22%);\n}\n\n.solidgate-checkout-dialog.is-branded {\n  width: min(100%, 430px);\n  height: 100svh;\n  max-height: 100svh;\n  border: 0;\n  border-radius: 0;\n  background: #fff;\n  padding: 0 17px 28px;\n  color: #303136;\n  box-shadow: none;\n  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n}\n\n.solidgate-checkout-dialog.is-preparing {\n  position: absolute;\n  opacity: 0;\n  pointer-events: none;\n}\n\n.solidgate-checkout-loader {\n  display: grid;\n  place-items: center;\n}\n\n.solidgate-checkout-spinner {\n  box-sizing: border-box;\n  width: 44px;\n  height: 44px;\n  border: 4px solid var(--color-border, #d1d5db);\n  border-top-color: var(--color-primary, #22c55e);\n  border-radius: 50%;\n  animation: solidgate-checkout-spin 720ms linear infinite;\n}\n\n.solidgate-checkout-visually-hidden {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  overflow: hidden;\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  white-space: nowrap;\n}\n\n@keyframes solidgate-checkout-spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .solidgate-checkout-spinner {\n    animation-duration: 1.6s;\n  }\n}\n\n.solidgate-checkout-header {\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 16px;\n  margin-bottom: 16px;\n}\n\n.solidgate-checkout-dialog.is-branded .solidgate-checkout-header {\n  min-height: 70px;\n  margin: 0 -17px;\n  padding: 0 56px;\n}\n\n.solidgate-checkout-title {\n  margin: 0;\n  color: var(--color-text, #111827);\n  font-size: 18px;\n  font-weight: 600;\n  line-height: 1.3;\n}\n\n.solidgate-checkout-dialog.is-branded .solidgate-checkout-title {\n  color: #020203;\n  font-size: 24px;\n  font-weight: 900;\n  line-height: 1.15;\n  text-align: center;\n}\n\n.solidgate-checkout-close {\n  position: absolute;\n  left: 0;\n  top: 50%;\n  width: 36px;\n  height: 36px;\n  flex: none;\n  border: 1px solid var(--color-border, #d1d5db);\n  border-radius: 8px;\n  background: var(--color-bg, #f9fafb);\n  color: var(--color-text, #111827);\n  font-size: 22px;\n  transform: translateY(-50%);\n  cursor: pointer;\n}\n\n.solidgate-checkout-dialog.is-branded .solidgate-checkout-close {\n  left: 16px;\n  width: 40px;\n  height: 40px;\n  border: 0;\n  border-radius: 999px;\n  background: #f2f2f3;\n  color: #aaa;\n}\n\n.solidgate-checkout-close span,\n.solidgate-checkout-close span::after {\n  position: absolute;\n  left: 50%;\n  top: 50%;\n  width: 22px;\n  height: 3px;\n  border-radius: 999px;\n  background: currentColor;\n  content: '';\n}\n\n.solidgate-checkout-close span {\n  transform: translate(-50%, -50%) rotate(45deg);\n}\n\n.solidgate-checkout-close span::after {\n  transform: translate(-50%, -50%) rotate(90deg);\n}\n\n.solidgate-checkout-close:hover {\n  background: var(--color-accent-soft, #eef2ff);\n}\n\n.solidgate-checkout-summary {\n  color: #303136;\n}\n\n.solidgate-checkout-countdown {\n  min-height: 37px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin: 0;\n  border-radius: 12px;\n  background: color-mix(in srgb, var(--solidgate-checkout-theme-color) 10%, #fff);\n  color: var(--solidgate-checkout-theme-color);\n  font-size: 16px;\n  font-weight: 900;\n  text-align: center;\n}\n\n.solidgate-checkout-satisfaction {\n  margin: 17px 0 21px;\n  color: #2f3034;\n  font-size: 19px;\n  font-weight: 800;\n  line-height: 1.15;\n  text-align: center;\n}\n\n.solidgate-checkout-satisfaction strong {\n  color: var(--solidgate-checkout-theme-color);\n}\n\n.solidgate-checkout-price-stack {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n\n.solidgate-checkout-price-row,\n.solidgate-checkout-promo,\n.solidgate-checkout-total {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 12px;\n}\n\n.solidgate-checkout-price-row {\n  font-size: 17px;\n}\n\n.solidgate-checkout-price-row.is-muted {\n  color: #9d9d9f;\n  font-weight: 500;\n}\n\n.solidgate-checkout-strike {\n  text-decoration: line-through 2px;\n}\n\n.solidgate-checkout-price-row.is-discount {\n  color: #040508;\n  font-weight: 900;\n}\n\n.solidgate-checkout-price-row.is-discount strong:last-child {\n  color: #ff2544;\n}\n\n.solidgate-checkout-promo {\n  min-height: 42px;\n  border-radius: 13px;\n  background: #f0f0f0;\n  padding: 0 14px;\n  color: #8d8d90;\n  font-size: 16px;\n}\n\n.solidgate-checkout-promo strong {\n  color: #050609;\n  font-weight: 900;\n}\n\n.solidgate-checkout-total {\n  min-height: 76px;\n  margin-top: 20px;\n  border-top: 1px solid #dedede;\n  font-size: 23px;\n  font-weight: 800;\n}\n\n.solidgate-checkout-total.is-plain {\n  margin-top: 0;\n}\n\n.solidgate-checkout-total strong {\n  font-size: 25px;\n  font-weight: 900;\n}\n\n.solidgate-checkout-total strong {\n  display: inline-flex;\n  align-items: center;\n  gap: 7px;\n}\n.solidgate-checkout-total svg {\n  width: 25px;\n  height: 25px;\n  fill: none;\n  stroke: currentColor;\n  stroke-width: 2;\n  stroke-linejoin: round;\n}\n.solidgate-checkout-saved {\n  width: fit-content;\n  min-height: 36px;\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n  margin: -8px 0 9px auto;\n  border-radius: 12px;\n  background: #ffdce3;\n  padding: 0 14px;\n  color: #ff2544;\n  font-size: 14px;\n  font-weight: 900;\n  line-height: 1.1;\n}\n\n.solidgate-checkout-email-form,\n.solidgate-checkout-email-label,\n.solidgate-checkout-wallets {\n  display: grid;\n}\n\n.solidgate-checkout-email-form {\n  gap: 16px;\n}\n\n.solidgate-checkout-email-label {\n  gap: 8px;\n  color: var(--color-text, #111827);\n  font-size: 14px;\n  font-weight: 500;\n}\n\n.solidgate-checkout-email-input {\n  box-sizing: border-box;\n  width: 100%;\n  min-height: 44px;\n  border: 1px solid var(--color-border, #d1d5db);\n  border-radius: 8px;\n  background: var(--color-bg, #fff);\n  padding: 8px 12px;\n  color: var(--color-text, #111827);\n  font: inherit;\n}\n\n.solidgate-checkout-email-input::placeholder,\n.solidgate-checkout-status,\n.solidgate-checkout-status-text {\n  color: var(--color-text-muted, #6b7280);\n}\n\n.solidgate-checkout-email-input:focus-visible,\n.solidgate-checkout-close:focus-visible,\n.solidgate-checkout-action:focus-visible {\n  outline: 2px solid var(--color-accent, #3f51b5);\n  outline-offset: 2px;\n}\n\n.solidgate-checkout-alert {\n  margin: 0;\n  color: var(--color-danger, #b91c1c);\n  font-size: 14px;\n}\n\n.solidgate-checkout-action {\n  display: block;\n  box-sizing: border-box;\n  text-align: center;\n  text-decoration: none;\n  width: 100%;\n  min-height: 44px;\n  border: 1px solid var(--color-accent, #3f51b5);\n  border-radius: 8px;\n  background: var(--color-accent, #3f51b5);\n  padding: 8px 16px;\n  color: var(--color-primary-text, #fff);\n  font: inherit;\n  font-weight: 600;\n  cursor: pointer;\n}\n\n.solidgate-checkout-action:disabled {\n  cursor: not-allowed;\n  opacity: 0.6;\n}\n\n.solidgate-checkout-action--spaced {\n  margin-top: 16px;\n}\n\n.solidgate-checkout-wallets {\n  gap: 12px;\n}\n.solidgate-checkout-wallets > div:empty,\n.solidgate-checkout-wallets:not(:has(> div:not(:empty))) { display: none; }\n.solidgate-checkout-wallets > div:not(:empty) {\n  width: 100%;\n  height: 54px;\n}\n.solidgate-checkout-wallets apple-pay-button {\n  --apple-pay-button-width: 100%;\n  --apple-pay-button-height: 54px;\n  --apple-pay-button-border-radius: 0;\n  width: 100%;\n  height: 54px;\n}\n.solidgate-checkout-payment.is-branded {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  margin: 0 -17px;\n  padding: 9px 17px 32px;\n  background: #f2f2f3;\n}\n.solidgate-checkout-methods {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);\n  gap: 42px;\n}\n.solidgate-checkout-method {\n  min-height: 74px;\n  border: 2px solid #e6e7eb;\n  border-radius: 13px;\n  background: #fff;\n  color: #303136;\n  padding: 9px 8px;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 6px;\n  font: inherit;\n  cursor: pointer;\n}\n.solidgate-checkout-method[aria-selected='true'] { border: 3px solid #050609; }\n.solidgate-checkout-method:focus-visible { outline: 2px solid var(--solidgate-checkout-theme-color, #3f51b5); outline-offset: 2px; }\n.solidgate-checkout-method strong { font-size: 20px; font-weight: 800; line-height: 1.1; }\n.solidgate-checkout-tab-wallet { width: 58px; height: 36px; }\n.solidgate-checkout-tab-brands { display: flex; align-items: center; gap: 4px; }\n.solidgate-checkout-tab-brand { width: 24px; height: 15px; }\n.solidgate-checkout-tab-wallet svg, .solidgate-checkout-tab-brand svg { width: 100%; height: 100%; }\n.solidgate-checkout-secure {\n  min-height: 47px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 9px;\n  margin: 0;\n  border-radius: 12px;\n  background: #dcffd0;\n  color: #207733;\n  font-size: 18px;\n  font-weight: 800;\n}\n.solidgate-checkout-secure svg { width: 23px; height: 23px; }\n.solidgate-checkout-payment.is-branded .solidgate-checkout-card { padding: 10px 14px 0; }\n.solidgate-checkout-secure.is-card { width: fit-content; margin: 14px auto 0; padding: 0 14px; }\n.solidgate-sdk-card-container iframe { border: 0; }\n.solidgate-checkout-payment[hidden],\n.solidgate-checkout-wallets[hidden],\n.solidgate-checkout-card[hidden] { display: none; }\n.solidgate-inline-wallet { width: 100%; }\n.solidgate-inline-wallet .solidgate-checkout-wallets:has(> div:not(:empty)) { margin-bottom: 12px; }\n\n.solidgate-checkout-status {\n  margin-top: 12px;\n  border: 1px solid var(--color-border, #d1d5db);\n  border-radius: 12px;\n  background: var(--color-bg, #f9fafb);\n  padding: 16px;\n  font-size: 14px;\n}\n\n.solidgate-checkout-status p,\n.solidgate-checkout-status-text {\n  margin: 0;\n}\n";

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

@@ -350,7 +350,10 @@ export const solidgateCheckoutDialogStyles = `
 }
 
 .solidgate-checkout-action {
+  display: block;
   box-sizing: border-box;
+  text-align: center;
+  text-decoration: none;
   width: 100%;
   min-height: 44px;
   border: 1px solid var(--color-accent, #3f51b5);

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

@@ -1,7 +1,7 @@
 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 SolidgateCheckoutDialogState = 'collecting_email' | 'loading' | 'ready' | 'submitting' | 'verifying' | 'success' | 'existing_subscription' | 'recoverable_error' | 'expired';
 export type SolidgateCheckoutDialogContent = {
     title: string;
     closeAriaLabel: string;
@@ -12,6 +12,8 @@ export type SolidgateCheckoutDialogContent = {
     error: string;
     expired: string;
     retry: string;
+    existingSubscriptionTitle: string;
+    existingSubscriptionContinue: string;
     resumeVerification: string;
     customerEmailLabel: string;
     customerEmailPlaceholder: string;

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

@@ -0,0 +1,15 @@
+import type { StripeSubscriptionCheckoutSession } from '../hooks/useStripeSubscriptionCheckoutSession.js';
+import { type StripeWalletSurfaceProps } from './StripeWalletSurface.internal.js';
+export type StripeSubscriptionWalletFirstOptions = {
+    paymentMethod: 'applePay' | 'googlePay';
+    buttonLabel?: string;
+    onPayerEmail: (email: string) => Promise<string>;
+    merchantCountry?: string;
+};
+type Props = Omit<StripeWalletSurfaceProps, 'session'> & {
+    currency: string;
+    session: StripeSubscriptionCheckoutSession;
+    walletFirst: StripeSubscriptionWalletFirstOptions;
+};
+export declare function StripeSubscriptionWalletFirstSurface({ amountCents, checkoutAnalytics, className, containerClassName, currency, disabled, onAvailabilityChange, onCancel, onError, onPaymentInfoSubmitted, onSuccess, onUnavailableClick, returnUrl, session, summaryLabel, surfaceId, suspended, walletFirst, }: Props): import("react/jsx-runtime").JSX.Element | null;
+export {};

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

@@ -0,0 +1,50 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef } from 'react';
+import { useStripeSubscriptionWalletFirstRequest } from '../hooks/useStripeSubscriptionWalletFirstRequest.js';
+import { buildStripeWalletSurfaceCheckoutAnalytics } from './StripeWalletSurface.internal.js';
+import { ApplePaySubscribeButton } from './ApplePaySubscribeButton.js';
+import { GooglePaySubscribeButton } from './GooglePaySubscribeButton.js';
+export function StripeSubscriptionWalletFirstSurface({ amountCents, checkoutAnalytics, className, containerClassName, currency, disabled, onAvailabilityChange, onCancel, onError, onPaymentInfoSubmitted, onSuccess, onUnavailableClick, returnUrl, session, summaryLabel, surfaceId, suspended, walletFirst, }) {
+    var _a;
+    const { paymentMethod, onPayerEmail, merchantCountry } = walletFirst;
+    const reportedAvailability = useRef(null);
+    const request = useStripeSubscriptionWalletFirstRequest({
+        amountCents,
+        checkoutAnalytics: buildStripeWalletSurfaceCheckoutAnalytics(checkoutAnalytics, surfaceId),
+        currency,
+        merchantCountry,
+        onError: (message) => onError === null || onError === void 0 ? void 0 : onError(message, { paymentMethod, surfaceId }),
+        onCancel,
+        onPayerEmail,
+        onPaymentInfoSubmitted,
+        onSuccess: (result) => onSuccess === null || onSuccess === void 0 ? void 0 : onSuccess(result),
+        paymentMethod,
+        returnUrl,
+        session,
+        summaryLabel,
+    });
+    useEffect(() => {
+        if (request.available === null)
+            return;
+        const signature = `${session.intentKey}:${paymentMethod}:${request.available}`;
+        if (reportedAvailability.current === signature)
+            return;
+        reportedAvailability.current = signature;
+        onAvailabilityChange === null || onAvailabilityChange === void 0 ? void 0 : onAvailabilityChange({
+            anyAvailable: request.available,
+            methods: { [paymentMethod]: request.available },
+            resolved: true,
+        });
+    }, [onAvailabilityChange, paymentMethod, request.available, session.intentKey]);
+    if (!request.available || suspended)
+        return null;
+    const Button = paymentMethod === 'applePay'
+        ? ApplePaySubscribeButton : GooglePaySubscribeButton;
+    const buttonLabel = (_a = walletFirst.buttonLabel) === null || _a === void 0 ? void 0 : _a.trim();
+    const launch = () => {
+        if (!request.launch())
+            void (onUnavailableClick === null || onUnavailableClick === void 0 ? void 0 : onUnavailableClick());
+    };
+    return (_jsx("div", { className: containerClassName, "data-wallet-surface-id": surfaceId, children: buttonLabel ? (_jsx("button", { type: 'button', className: className, disabled: disabled || request.busy, "aria-label": buttonLabel, "aria-busy": request.busy, onClick: launch, children: buttonLabel })) : (_jsx(Button, { className: className, disabled: disabled || request.busy, onClick: launch })) }));
+}

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

@@ -1,5 +1,6 @@
 import { type StripeSubscriptionCheckoutSessionInput } from '../hooks/useStripeSubscriptionCheckoutSession.js';
 import { applyStripeWalletSurfaceMethodAvailability as applyStripeSubscriptionWalletSurfaceMethodAvailability, buildStripeWalletSurfaceAnalyticsMetadata as buildStripeSubscriptionWalletSurfaceAnalyticsMetadata, buildStripeWalletSurfaceAvailability as buildStripeSubscriptionWalletSurfaceAvailability, buildStripeWalletSurfaceCheckoutAnalytics as buildStripeSubscriptionWalletSurfaceCheckoutAnalytics, getStripeWalletSurfaceMethodAvailability as getStripeSubscriptionWalletSurfaceMethodAvailability, getStripeWalletSurfaceVisibleMethods as getStripeSubscriptionWalletSurfaceVisibleMethods, normalizeStripeWalletSurfaceMethods as normalizeStripeSubscriptionWalletSurfaceMethods, resolveStripeWalletSurfaceError as resolveStripeSubscriptionWalletSurfaceError, shouldRenderStripeWalletSurface as shouldRenderStripeSubscriptionWalletSurface, type StripeWalletSurfaceAvailability as StripeSubscriptionWalletSurfaceAvailability, type StripeWalletSurfaceAvailabilityState as StripeSubscriptionWalletSurfaceAvailabilityState, type StripeWalletSurfaceErrorContext as StripeSubscriptionWalletSurfaceErrorContext, type StripeWalletSurfaceErrorEmission as StripeSubscriptionWalletSurfaceErrorEmission, type StripeWalletSurfaceErrorState as StripeSubscriptionWalletSurfaceErrorState, type StripeWalletSurfaceProps, type StripeWalletSurfaceRenderStateInput as StripeSubscriptionWalletSurfaceRenderStateInput } from './StripeWalletSurface.internal.js';
+import { type StripeSubscriptionWalletFirstOptions } from './StripeSubscriptionWalletFirstSurface.js';
 export { applyStripeSubscriptionWalletSurfaceMethodAvailability, buildStripeSubscriptionWalletSurfaceAnalyticsMetadata, buildStripeSubscriptionWalletSurfaceAvailability, buildStripeSubscriptionWalletSurfaceCheckoutAnalytics, getStripeSubscriptionWalletSurfaceMethodAvailability, getStripeSubscriptionWalletSurfaceVisibleMethods, normalizeStripeSubscriptionWalletSurfaceMethods, resolveStripeSubscriptionWalletSurfaceError, shouldRenderStripeSubscriptionWalletSurface, };
 export type { StripeSubscriptionWalletSurfaceAvailability, StripeSubscriptionWalletSurfaceAvailabilityState, StripeSubscriptionWalletSurfaceErrorContext, StripeSubscriptionWalletSurfaceErrorEmission, StripeSubscriptionWalletSurfaceErrorState, StripeSubscriptionWalletSurfaceRenderStateInput, };
 export type StripeSubscriptionWalletSurfaceCheckoutInput = Omit<StripeSubscriptionCheckoutSessionInput, 'onError'> & {
@@ -7,5 +8,6 @@ export type StripeSubscriptionWalletSurfaceCheckoutInput = Omit<StripeSubscripti
 };
 export type StripeSubscriptionWalletSurfaceProps = Omit<StripeWalletSurfaceProps, 'customerEmail' | 'customerName' | 'returnUrl' | 'session'> & {
     checkout: StripeSubscriptionWalletSurfaceCheckoutInput;
+    walletFirst?: StripeSubscriptionWalletFirstOptions;
 };
-export declare function StripeSubscriptionWalletSurface({ checkout, surfaceId, ...surfaceProps }: StripeSubscriptionWalletSurfaceProps): import("react/jsx-runtime").JSX.Element;
+export declare function StripeSubscriptionWalletSurface({ checkout, surfaceId, walletFirst, ...surfaceProps }: StripeSubscriptionWalletSurfaceProps): import("react/jsx-runtime").JSX.Element;

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

@@ -14,12 +14,17 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useMemo } from 'react';
 import { useStripeSubscriptionCheckoutSession, } from '../hooks/useStripeSubscriptionCheckoutSession.js';
 import { StripeWalletSurface, applyStripeWalletSurfaceMethodAvailability as applyStripeSubscriptionWalletSurfaceMethodAvailability, buildStripeWalletSurfaceAnalyticsMetadata as buildStripeSubscriptionWalletSurfaceAnalyticsMetadata, buildStripeWalletSurfaceAvailability as buildStripeSubscriptionWalletSurfaceAvailability, buildStripeWalletSurfaceCheckoutAnalytics as buildStripeSubscriptionWalletSurfaceCheckoutAnalytics, getStripeWalletSurfaceMethodAvailability as getStripeSubscriptionWalletSurfaceMethodAvailability, getStripeWalletSurfaceVisibleMethods as getStripeSubscriptionWalletSurfaceVisibleMethods, normalizeStripeWalletSurfaceMethods as normalizeStripeSubscriptionWalletSurfaceMethods, resolveStripeWalletSurfaceError as resolveStripeSubscriptionWalletSurfaceError, shouldRenderStripeWalletSurface as shouldRenderStripeSubscriptionWalletSurface, } from './StripeWalletSurface.internal.js';
+import { StripeSubscriptionWalletFirstSurface, } from './StripeSubscriptionWalletFirstSurface.js';
 export { applyStripeSubscriptionWalletSurfaceMethodAvailability, buildStripeSubscriptionWalletSurfaceAnalyticsMetadata, buildStripeSubscriptionWalletSurfaceAvailability, buildStripeSubscriptionWalletSurfaceCheckoutAnalytics, getStripeSubscriptionWalletSurfaceMethodAvailability, getStripeSubscriptionWalletSurfaceVisibleMethods, normalizeStripeSubscriptionWalletSurfaceMethods, resolveStripeSubscriptionWalletSurfaceError, shouldRenderStripeSubscriptionWalletSurface, };
 export function StripeSubscriptionWalletSurface(_a) {
-    var { checkout, surfaceId } = _a, surfaceProps = __rest(_a, ["checkout", "surfaceId"]);
+    var _b, _c;
+    var { checkout, surfaceId, walletFirst } = _a, surfaceProps = __rest(_a, ["checkout", "surfaceId", "walletFirst"]);
     const normalizedSurfaceId = surfaceId.trim();
     const { customerName } = checkout, checkoutSessionInput = __rest(checkout, ["customerName"]);
     const surfaceAnalyticsMetadata = useMemo(() => buildStripeSubscriptionWalletSurfaceAnalyticsMetadata(checkout.analyticsMetadata, normalizedSurfaceId), [checkout.analyticsMetadata, normalizedSurfaceId]);
     const session = useStripeSubscriptionCheckoutSession(Object.assign(Object.assign({}, checkoutSessionInput), { analyticsMetadata: surfaceAnalyticsMetadata, checkoutAnalytics: surfaceProps.checkoutAnalytics }));
+    if (walletFirst) {
+        return (_jsx(StripeSubscriptionWalletFirstSurface, Object.assign({}, surfaceProps, { currency: (_c = (_b = checkout.plan) === null || _b === void 0 ? void 0 : _b.currency) !== null && _c !== void 0 ? _c : 'USD', customerEmail: checkout.customerEmail, customerName: customerName, returnUrl: checkout.returnUrl, session: session, surfaceId: normalizedSurfaceId, walletFirst: walletFirst })));
+    }
     return (_jsx(StripeWalletSurface, Object.assign({}, surfaceProps, { customerEmail: checkout.customerEmail, customerName: customerName, returnUrl: checkout.returnUrl, session: session, surfaceId: normalizedSurfaceId })));
 }

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

@@ -0,0 +1,14 @@
+export type CheckoutPreparationFailure = {
+    intentKey: string;
+    count: number;
+    until: number;
+};
+export declare const recordCheckoutPreparationFailure: (previous: CheckoutPreparationFailure | null, failure: {
+    intentKey: string;
+    retryAfterMs?: number | null;
+}, now: number) => CheckoutPreparationFailure;
+export declare const blocksCheckoutPreparation: (failure: CheckoutPreparationFailure | null, request: {
+    intentKey: string;
+    source?: string;
+    forceNew?: boolean;
+}, now: number) => boolean;

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

@@ -0,0 +1,17 @@
+const BASE_WINDOW_MS = 2000;
+const MAX_WINDOW_MS = 30000;
+const MAX_RETRY_AFTER_MS = 60000;
+const AUTOMATIC_SOURCES = new Set(['checkout_render', 'wallet_render']);
+export const recordCheckoutPreparationFailure = (previous, failure, now) => {
+    var _a;
+    const count = (previous === null || previous === void 0 ? void 0 : previous.intentKey) === failure.intentKey ? previous.count + 1 : 1;
+    const windowMs = Math.max(Math.min((_a = failure.retryAfterMs) !== null && _a !== void 0 ? _a : 0, MAX_RETRY_AFTER_MS), Math.min(BASE_WINDOW_MS * 2 ** (count - 1), MAX_WINDOW_MS));
+    return { intentKey: failure.intentKey, count, until: now + windowMs };
+};
+export const blocksCheckoutPreparation = (failure, request, now) => {
+    var _a;
+    return !request.forceNew
+        && AUTOMATIC_SOURCES.has((_a = request.source) !== null && _a !== void 0 ? _a : '')
+        && (failure === null || failure === void 0 ? void 0 : failure.intentKey) === request.intentKey
+        && now < failure.until;
+};

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

@@ -19,6 +19,7 @@ import { toAnalyticsPaymentMethod } from '../../../services/paymentMethodAnalyti
 import { resolveCheckoutObservabilityAnalyticsContext, trackCheckoutFailureShown, } from '../../../services/checkoutObservability.service.js';
 import { resolveStripeCheckoutAttempt, } from './checkoutAttempt.js';
 import { isStripeCheckoutIdentityReady } from './checkoutIdentity.js';
+import { blocksCheckoutPreparation, recordCheckoutPreparationFailure, } from './checkoutPreparationBackoff.js';
 export { isStripeCheckoutIdentityReady as isStripeOneTimeCheckoutIdentityReady, } from './checkoutIdentity.js';
 export function resolveStripeOneTimeCheckoutPreparationOptions(source, options = {}) {
     var _a, _b;
@@ -94,6 +95,8 @@ export function useStripeOneTimeCheckoutSession({ runtimeConfigRevisionId: nextR
     const creatingIntentRef = useRef(null);
     const requestIdRef = useRef(0);
     const attemptRef = useRef(null);
+    const preparationFailureRef = useRef(null);
+    const recoveredIntentKeyRef = useRef(null);
     const anonymousUserIdRef = useRef(null);
     const checkoutIdentityReady = isStripeCheckoutIdentityReady({
         runtimeConfig,
@@ -142,7 +145,8 @@ export function useStripeOneTimeCheckoutSession({ runtimeConfigRevisionId: nextR
         setCheckoutSessionId(null);
     }, []);
     const setError = useCallback((message) => {
-        if (isInactiveCheckoutSessionError(message)) {
+        if (isInactiveCheckoutSessionError(message) && recoveredIntentKeyRef.current !== intentKey) {
+            recoveredIntentKeyRef.current = intentKey;
             clearActiveCheckoutSession();
             setErrorState(null);
             onError === null || onError === void 0 ? void 0 : onError(null);
@@ -150,10 +154,12 @@ export function useStripeOneTimeCheckoutSession({ runtimeConfigRevisionId: nextR
         }
         setErrorState(message);
         onError === null || onError === void 0 ? void 0 : onError(message);
-    }, [clearActiveCheckoutSession, onError]);
+    }, [clearActiveCheckoutSession, intentKey, onError]);
     const reset = useCallback(() => {
         preparedSelectionRef.current = null;
         attemptRef.current = null;
+        preparationFailureRef.current = null;
+        recoveredIntentKeyRef.current = null;
         clearActiveCheckoutSession();
         setLoading(createEmptyCheckoutPreparationLoading());
         setRuntimeStripePublishableKey(null);
@@ -232,6 +238,7 @@ export function useStripeOneTimeCheckoutSession({ runtimeConfigRevisionId: nextR
                 if (publishableKey) {
                     setRuntimeStripePublishableKey(publishableKey);
                 }
+                preparationFailureRef.current = null;
                 setClientSecret(response.clientSecret);
                 setClientSecretIntentKey(requestKey);
                 setCheckoutSessionId(((_d = response.checkoutSessionId) === null || _d === void 0 ? void 0 : _d.trim()) || null);
@@ -260,6 +267,11 @@ export function useStripeOneTimeCheckoutSession({ runtimeConfigRevisionId: nextR
                             checkoutRequestId: failure.checkoutRequestId,
                         });
                     }
+                    // The first inactive-session error per intent clears silently so the
+                    // caller can prepare a fresh session at once; a repeat is shown.
+                    if (!isInactiveCheckoutSessionError(message) || recoveredIntentKeyRef.current === requestKey) {
+                        preparationFailureRef.current = recordCheckoutPreparationFailure(preparationFailureRef.current, { intentKey: requestKey, retryAfterMs: failure.retryAfterMs }, Date.now());
+                    }
                     setError(message);
                 }
                 return null;
@@ -300,6 +312,15 @@ export function useStripeOneTimeCheckoutSession({ runtimeConfigRevisionId: nextR
         if (!configured || !plan) {
             return null;
         }
+        const preparationOptions = resolveStripeOneTimeCheckoutPreparationOptions(source, options);
+        // No state change here: a blocked call keeps the visible error as it is.
+        if (blocksCheckoutPreparation(preparationFailureRef.current, {
+            intentKey,
+            source: preparationOptions.checkoutStartSource,
+            forceNew: options.forceNew,
+        }, Date.now())) {
+            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) {
@@ -308,7 +329,7 @@ export function useStripeOneTimeCheckoutSession({ runtimeConfigRevisionId: nextR
         setSourceLoading(source, true);
         setError(null);
         try {
-            return await createCheckoutSession(Object.assign({}, resolveStripeOneTimeCheckoutPreparationOptions(source, options)));
+            return await createCheckoutSession(preparationOptions);
         }
         finally {
             setSourceLoading(source, false);
@@ -317,6 +338,7 @@ export function useStripeOneTimeCheckoutSession({ runtimeConfigRevisionId: nextR
         activeClientSecret,
         configured,
         createCheckoutSession,
+        intentKey,
         plan,
         onPreparationStart,
         setError,

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

@@ -28,6 +28,7 @@ export type StripeSubscriptionCheckoutSessionInput = {
 };
 export type StripeSubscriptionCheckoutPreparationOptions = {
     checkoutStartSource?: 'card_click' | 'checkout_render' | 'wallet_click' | 'wallet_render' | (string & {});
+    customerEmail?: string;
     forceNew?: boolean;
     paymentMethod?: unknown;
 };

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

@@ -18,6 +18,7 @@ import { toAnalyticsPaymentMethod } from '../../../services/paymentMethodAnalyti
 import { resolveCheckoutObservabilityAnalyticsContext, trackCheckoutFailureShown, } from '../../../services/checkoutObservability.service.js';
 import { resolveStripeCheckoutAttempt, } from './checkoutAttempt.js';
 import { isStripeCheckoutIdentityReady } from './checkoutIdentity.js';
+import { blocksCheckoutPreparation, recordCheckoutPreparationFailure, } from './checkoutPreparationBackoff.js';
 export { isStripeCheckoutIdentityReady as isStripeSubscriptionCheckoutIdentityReady, } from './checkoutIdentity.js';
 export function resolveStripeSubscriptionCheckoutPreparationOptions(source, options = {}) {
     var _a, _b;
@@ -97,6 +98,7 @@ export function useStripeSubscriptionCheckoutSession({ checkoutMode: nextCheckou
     const requestIdRef = useRef(0);
     const attemptRef = useRef(null);
     const recoveredIntentKeyRef = useRef(null);
+    const preparationFailureRef = useRef(null);
     const handledRecoveryRequestRef = useRef(0);
     const anonymousUserIdRef = useRef(null);
     const checkoutIdentityReady = isStripeCheckoutIdentityReady({
@@ -169,6 +171,7 @@ export function useStripeSubscriptionCheckoutSession({ checkoutMode: nextCheckou
         preparedSelectionRef.current = null;
         attemptRef.current = null;
         recoveredIntentKeyRef.current = null;
+        preparationFailureRef.current = null;
         handledRecoveryRequestRef.current = recoveryRequest;
         clearActiveCheckoutSession();
         setLoading(createEmptyCheckoutPreparationLoading());
@@ -192,33 +195,48 @@ export function useStripeSubscriptionCheckoutSession({ checkoutMode: nextCheckou
             : Object.assign(Object.assign({}, current), { [source]: value }));
     }, []);
     const createCheckoutSubscription = useCallback(async (options = {}) => {
-        var _a, _b;
+        var _a, _b, _c;
         const forceNew = options.forceNew === true;
+        const preparedCustomerEmail = (_a = options.customerEmail) !== null && _a !== void 0 ? _a : customerEmail;
         if (!configured || !plan || !displayPlan) {
             return null;
         }
         if (!forceNew && activeClientSecret) {
             return activeClientSecret;
         }
-        if (!forceNew && ((_a = creatingIntentRef.current) === null || _a === void 0 ? void 0 : _a.key) === intentKey) {
+        if (!forceNew && ((_b = creatingIntentRef.current) === null || _b === void 0 ? void 0 : _b.key) === intentKey) {
             return creatingIntentRef.current.promise;
         }
         if (forceNew) {
             clearActiveCheckoutSession();
             attemptRef.current = null;
         }
+        const requestKey = options.customerEmail === undefined
+            ? intentKey
+            : buildStripeSubscriptionCheckoutIntentKey({
+                checkoutMode,
+                couponId,
+                customerEmail: preparedCustomerEmail,
+                paymentProfileId,
+                planKey,
+                provider,
+                returnUrl,
+                runtimeConfig,
+                runtimeConfigRevisionId,
+                stripePublishableKey,
+                userId,
+            });
         attemptRef.current = resolveStripeCheckoutAttempt({
             current: attemptRef.current,
             forceNew,
-            intentKey,
+            intentKey: requestKey,
             paymentsApiVersion: runtimeConfig === null || runtimeConfig === void 0 ? void 0 : runtimeConfig.paymentsApiVersion,
             createId: () => crypto.randomUUID(),
         });
-        const idempotencyKey = (_b = attemptRef.current) === null || _b === void 0 ? void 0 : _b.id;
+        const idempotencyKey = (_c = attemptRef.current) === null || _c === void 0 ? void 0 : _c.id;
         if (idempotencyKey && !userId && !anonymousUserIdRef.current) {
             anonymousUserIdRef.current = `anonymous_${crypto.randomUUID()}`;
         }
-        const requestKey = intentKey;
         const requestPlanKey = planKey;
         const requestId = requestIdRef.current + 1;
         requestIdRef.current = requestId;
@@ -229,7 +247,7 @@ export function useStripeSubscriptionCheckoutSession({ checkoutMode: nextCheckou
                     plan,
                     analyticsMetadata: buildStripeSubscriptionCheckoutPreparationAnalyticsMetadata(analyticsMetadataRef.current, options),
                     couponId,
-                    customerEmail,
+                    customerEmail: preparedCustomerEmail,
                     returnUrl,
                     user_id: userId,
                     environment: checkoutMode,
@@ -250,6 +268,7 @@ export function useStripeSubscriptionCheckoutSession({ checkoutMode: nextCheckou
                 }
                 anonymousUserIdRef.current = ((_d = response.anonymousUserId) === null || _d === void 0 ? void 0 : _d.trim())
                     || anonymousUserIdRef.current;
+                preparationFailureRef.current = null;
                 setClientSecret(response.clientSecret);
                 setClientSecretIntentKey(requestKey);
                 setCheckoutSessionId(((_e = response.checkoutSessionId) === null || _e === void 0 ? void 0 : _e.trim()) || null);
@@ -280,6 +299,7 @@ export function useStripeSubscriptionCheckoutSession({ checkoutMode: nextCheckou
                             checkoutRequestId: failure.checkoutRequestId,
                         });
                     }
+                    preparationFailureRef.current = recordCheckoutPreparationFailure(preparationFailureRef.current, { intentKey: requestKey, retryAfterMs: failure.retryAfterMs }, Date.now());
                     setError(message);
                 }
                 return null;
@@ -315,6 +335,7 @@ export function useStripeSubscriptionCheckoutSession({ checkoutMode: nextCheckou
         paymentProfileId,
         provider,
         setError,
+        stripePublishableKey,
         userId,
     ]);
     const prepareCheckout = useCallback(async (source, options = {}) => {
@@ -322,6 +343,15 @@ export function useStripeSubscriptionCheckoutSession({ checkoutMode: nextCheckou
         if (!configured || !plan || !displayPlan) {
             return null;
         }
+        const preparationOptions = resolveStripeSubscriptionCheckoutPreparationOptions(source, options);
+        // No state change here: a blocked call keeps the visible error as it is.
+        if (blocksCheckoutPreparation(preparationFailureRef.current, {
+            intentKey,
+            source: preparationOptions.checkoutStartSource,
+            forceNew: options.forceNew,
+        }, Date.now())) {
+            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) {
@@ -330,7 +360,7 @@ export function useStripeSubscriptionCheckoutSession({ checkoutMode: nextCheckou
         setSourceLoading(source, true);
         setError(null);
         try {
-            return await createCheckoutSubscription(Object.assign({}, resolveStripeSubscriptionCheckoutPreparationOptions(source, options)));
+            return await createCheckoutSubscription(preparationOptions);
         }
         finally {
             setSourceLoading(source, false);
@@ -340,6 +370,7 @@ export function useStripeSubscriptionCheckoutSession({ checkoutMode: nextCheckou
         configured,
         createCheckoutSubscription,
         displayPlan,
+        intentKey,
         plan,
         onPreparationStart,
         setError,

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

@@ -0,0 +1,26 @@
+import { type StripeSubscriptionCheckoutAnalyticsContext } from '../services/checkoutCompletionAnalytics.service.js';
+import type { StripeSubscriptionCheckoutSession } from './useStripeSubscriptionCheckoutSession.js';
+type StripeSubscriptionWalletFirstRequestInput = {
+    amountCents: number;
+    checkoutAnalytics: StripeSubscriptionCheckoutAnalyticsContext | null;
+    currency?: string;
+    merchantCountry?: string;
+    onError: (message: string | null) => void;
+    onCancel?: () => void;
+    onPayerEmail: (email: string) => Promise<string>;
+    onPaymentInfoSubmitted?: () => void | Promise<void>;
+    onSuccess: (result: {
+        checkoutSessionId: string | null;
+    }) => void | Promise<void>;
+    paymentMethod: 'applePay' | 'googlePay';
+    returnUrl: string;
+    session: StripeSubscriptionCheckoutSession;
+    summaryLabel: string;
+};
+type StripeSubscriptionWalletFirstRequest = {
+    available: boolean | null;
+    launch: () => boolean;
+    busy: boolean;
+};
+export declare function useStripeSubscriptionWalletFirstRequest({ amountCents, checkoutAnalytics, currency, merchantCountry, onError, onCancel, onSuccess, onPayerEmail, onPaymentInfoSubmitted, paymentMethod, returnUrl, session, summaryLabel, }: StripeSubscriptionWalletFirstRequestInput): StripeSubscriptionWalletFirstRequest;
+export {};

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

@@ -0,0 +1,229 @@
+'use client';
+import { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { queueStripeSubscriptionCheckoutStarted, trackStripeSubscriptionPaymentInfoSubmitted, trackPaidStripeSubscriptionCheckoutCompleted, } from '../services/checkoutCompletionAnalytics.service.js';
+import { isValidCheckoutEmail, isCheckoutEmailError } from '../../../services/checkoutEmail.js';
+const normalizeCurrency = (currency) => currency.trim().toLowerCase() || 'usd';
+export function useStripeSubscriptionWalletFirstRequest({ amountCents, checkoutAnalytics, currency = 'usd', merchantCountry = 'US', onError, onCancel, onSuccess, onPayerEmail, onPaymentInfoSubmitted, paymentMethod, returnUrl, session, summaryLabel, }) {
+    const requestKey = [session.planKey, paymentMethod, currency, merchantCountry, amountCents].join('|');
+    const [availability, setAvailability] = useState({ requestKey: '', stripePromise: null, value: null });
+    const [busy, setBusy] = useState(false);
+    const busyRef = useRef(false);
+    const confirmingRef = useRef(false);
+    const requestRef = useRef(null);
+    const callbacksRef = useRef({ onError, onCancel, onSuccess, onPayerEmail, onPaymentInfoSubmitted, session, checkoutAnalytics, returnUrl });
+    useLayoutEffect(() => {
+        callbacksRef.current = { onError, onCancel, onSuccess, onPayerEmail, onPaymentInfoSubmitted, session, checkoutAnalytics, returnUrl };
+    }, [onError, onCancel, onSuccess, onPayerEmail, onPaymentInfoSubmitted, session, checkoutAnalytics, returnUrl]);
+    useEffect(() => {
+        let disposed = false;
+        let request = null;
+        let stripe = null;
+        requestRef.current = null;
+        if (!session.configured || !session.stripePromise) {
+            return () => {
+                disposed = true;
+            };
+        }
+        const handlePaymentMethod = async (event) => {
+            var _a, _b, _c, _d;
+            if (!stripe || disposed || confirmingRef.current) {
+                event.complete('fail');
+                return;
+            }
+            confirmingRef.current = true;
+            busyRef.current = true;
+            setBusy(true);
+            let callbacks = callbacksRef.current;
+            let completed = false;
+            const completeWallet = (result) => {
+                if (completed)
+                    return;
+                completed = true;
+                event.complete(result);
+            };
+            try {
+                callbacks.onError(null);
+                const payerEmail = ((_a = event.payerEmail) === null || _a === void 0 ? void 0 : _a.trim())
+                    || ((_c = (_b = event.paymentMethod.billing_details) === null || _b === void 0 ? void 0 : _b.email) === null || _c === void 0 ? void 0 : _c.trim())
+                    || '';
+                if (!isValidCheckoutEmail(payerEmail)) {
+                    completeWallet('invalid_payer_email');
+                    throw new Error('Enter a valid email address to continue.');
+                }
+                const savedEmail = await callbacks.onPayerEmail(payerEmail);
+                if (!isValidCheckoutEmail(savedEmail)) {
+                    completeWallet('invalid_payer_email');
+                    throw new Error('Enter a valid email address to continue.');
+                }
+                callbacks = callbacksRef.current;
+                if (disposed) {
+                    completeWallet('fail');
+                    return;
+                }
+                const clientSecret = await callbacks.session.prepareWalletCheckout({
+                    checkoutStartSource: 'wallet_click', customerEmail: savedEmail,
+                    forceNew: true, paymentMethod,
+                });
+                if (!clientSecret) {
+                    completeWallet('fail');
+                    return;
+                }
+                if (disposed) {
+                    completeWallet('fail');
+                    return;
+                }
+                const checkout = stripe.initCheckout({ clientSecret });
+                const loaded = await checkout.loadActions();
+                if (loaded.type === 'error')
+                    throw new Error(loaded.error.message);
+                if (disposed) {
+                    completeWallet('fail');
+                    return;
+                }
+                const checkoutSession = loaded.actions.getSession();
+                const checkoutAmount = checkoutSession.total.total.minorUnitsAmount;
+                const checkoutCurrency = checkoutSession.currency;
+                const checkoutDivisor = checkoutSession.minorUnitsAmountDivisor;
+                if (checkoutAmount !== amountCents
+                    || checkoutCurrency.toLowerCase() !== normalizeCurrency(currency)
+                    || checkoutDivisor !== 100) {
+                    throw new Error('The checkout price changed. Please refresh and try again.');
+                }
+                const checkoutSessionId = checkoutSession.id;
+                if (callbacks.checkoutAnalytics) {
+                    queueStripeSubscriptionCheckoutStarted(Object.assign(Object.assign({}, callbacks.checkoutAnalytics), { checkoutSessionId, checkoutStartSource: 'wallet_click', paymentMethod }));
+                    await trackStripeSubscriptionPaymentInfoSubmitted(Object.assign(Object.assign({}, callbacks.checkoutAnalytics), { checkoutSessionId })).catch(() => 'analytics_rejected');
+                }
+                await ((_d = callbacks.onPaymentInfoSubmitted) === null || _d === void 0 ? void 0 : _d.call(callbacks));
+                const confirmation = await loaded.actions.confirm({
+                    paymentMethod: event.paymentMethod.id,
+                    redirect: 'if_required',
+                });
+                if (confirmation.type === 'error')
+                    throw new Error(isCheckoutEmailError(confirmation.error)
+                        ? 'Enter a valid email address to continue.' : confirmation.error.message);
+                if (confirmation.session.status.type !== 'complete'
+                    || confirmation.session.status.paymentStatus !== 'paid') {
+                    throw new Error('Payment is not confirmed yet. Please check its status before trying again.');
+                }
+                completeWallet('success');
+                if (callbacks.checkoutAnalytics) {
+                    await trackPaidStripeSubscriptionCheckoutCompleted(Object.assign(Object.assign({}, callbacks.checkoutAnalytics), { checkoutSessionId })).catch(() => 'analytics_rejected');
+                }
+                await callbacks.onSuccess({ checkoutSessionId });
+                window.location.assign(callbacks.returnUrl);
+            }
+            catch (error) {
+                completeWallet('fail');
+                callbacks.onError(error instanceof Error ? error.message : 'Wallet checkout failed.');
+            }
+            finally {
+                confirmingRef.current = false;
+                busyRef.current = false;
+                setBusy(false);
+            }
+        };
+        const handleCancel = () => {
+            var _a, _b;
+            if (confirmingRef.current)
+                return;
+            busyRef.current = false;
+            setBusy(false);
+            callbacksRef.current.onError(null);
+            (_b = (_a = callbacksRef.current).onCancel) === null || _b === void 0 ? void 0 : _b.call(_a);
+        };
+        void session.stripePromise.then(async (resolvedStripe) => {
+            if (disposed)
+                return;
+            if (!resolvedStripe) {
+                setAvailability({ requestKey, stripePromise: session.stripePromise, value: false });
+                return;
+            }
+            stripe = resolvedStripe;
+            request = resolvedStripe.paymentRequest({
+                country: merchantCountry.trim().toUpperCase() || 'US',
+                currency: normalizeCurrency(currency),
+                total: {
+                    label: summaryLabel.trim() || 'Selected plan',
+                    amount: amountCents,
+                },
+                displayItems: [{
+                        label: summaryLabel.trim() || 'Selected plan',
+                        amount: amountCents,
+                    }],
+                requestPayerEmail: true,
+                requestPayerName: true,
+                disableWallets: paymentMethod === 'applePay'
+                    ? ['googlePay', 'link', 'browserCard']
+                    : ['applePay', 'link', 'browserCard'],
+            });
+            request.on('paymentmethod', handlePaymentMethod);
+            request.on('cancel', handleCancel);
+            const availability = await request.canMakePayment().catch(() => null);
+            if (disposed)
+                return;
+            const methodAvailable = Boolean(availability === null || availability === void 0 ? void 0 : availability[paymentMethod]);
+            requestRef.current = methodAvailable ? request : null;
+            setAvailability({ requestKey, stripePromise: session.stripePromise, value: methodAvailable });
+        }).catch(() => {
+            if (!disposed)
+                setAvailability({ requestKey, stripePromise: session.stripePromise, value: false });
+        });
+        return () => {
+            disposed = true;
+            if (request) {
+                if (!confirmingRef.current && busyRef.current) {
+                    if (request.isShowing())
+                        request.abort();
+                    busyRef.current = false;
+                    setBusy(false);
+                }
+                request.off('paymentmethod', handlePaymentMethod);
+                request.off('cancel', handleCancel);
+            }
+            requestRef.current = null;
+        };
+    }, [
+        amountCents,
+        currency,
+        merchantCountry,
+        paymentMethod,
+        session.configured,
+        requestKey,
+        session.stripePromise,
+        summaryLabel,
+    ]);
+    const launch = useCallback(() => {
+        const request = requestRef.current;
+        if (busyRef.current || (request === null || request === void 0 ? void 0 : request.isShowing()))
+            return true;
+        if (!request)
+            return false;
+        callbacksRef.current.onError(null);
+        try {
+            busyRef.current = true;
+            setBusy(true);
+            request.show();
+            return true;
+        }
+        catch (error) {
+            busyRef.current = false;
+            setBusy(false);
+            callbacksRef.current.onError(error instanceof Error && error.message
+                ? error.message
+                : 'Unable to open wallet checkout.');
+            return false;
+        }
+    }, []);
+    const available = !session.configured ? null
+        : !session.stripePromise ? false
+            : availability.requestKey === requestKey
+                && availability.stripePromise === session.stripePromise
+                ? availability.value
+                : null;
+    return {
+        available,
+        busy,
+        launch,
+    };
+}

package/dist/providers/stripe/services/stripeCheckoutFailure.d.ts

@@ -3,5 +3,6 @@ export type StripeCheckoutFailure = {
     errorCode?: string;
     message: string;
     providerErrorCode?: string;
+    retryAfterMs?: number;
 };
 export declare const describeStripeCheckoutFailure: (error: unknown) => StripeCheckoutFailure;

package/dist/providers/stripe/services/stripeCheckoutFailure.js

@@ -1,4 +1,15 @@
 import { FunnelSdkHttpError } from '@funnelsgrove/runtime';
+const readRetryAfterMs = (retryAfter) => {
+    const value = retryAfter === null || retryAfter === void 0 ? void 0 : retryAfter.trim();
+    if (!value) {
+        return null;
+    }
+    if (/^\d+$/.test(value)) {
+        return Number(value) * 1000;
+    }
+    const date = Date.parse(value);
+    return Number.isFinite(date) ? Math.max(0, date - Date.now()) : null;
+};
 export const describeStripeCheckoutFailure = (error) => {
     const errorCode = error instanceof FunnelSdkHttpError
         ? error.code || undefined
@@ -14,8 +25,11 @@ export const describeStripeCheckoutFailure = (error) => {
         : rawMessage === 'Internal server error'
             ? 'Unable to initialize checkout. Stripe settings may be missing for this funnel.'
             : rawMessage;
-    return Object.assign(Object.assign({}, (error instanceof FunnelSdkHttpError && error.checkoutRequestId
+    const retryAfterMs = error instanceof FunnelSdkHttpError
+        ? readRetryAfterMs(error.retryAfter)
+        : null;
+    return Object.assign(Object.assign(Object.assign({}, (error instanceof FunnelSdkHttpError && error.checkoutRequestId
         ? { checkoutRequestId: error.checkoutRequestId } : {})), { errorCode,
         message,
-        providerErrorCode });
+        providerErrorCode }), (retryAfterMs !== null ? { retryAfterMs } : {}));
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@funnelsgrove/payments",
-  "version": "0.30.0",
+  "version": "0.31.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/The-Solid-Grove/funnelsgrove.git",