@funnelsgrove/payments 0.1.12 → 0.1.14

package/dist/components/shared/SharedStripeCheckoutV2Dialog.d.ts

@@ -21,6 +21,7 @@ export type SharedStripeCheckoutV2DialogProps = {
     onCustomerEmailChange?: (value: string) => void;
     onCustomerEmailCommit?: (email: string) => Promise<string | null | void>;
     onError?: (message: string | null) => void;
+    onInactiveCheckoutSession?: () => void;
     onSuccess?: () => void;
     paymentMethodLabels?: readonly string[];
     paypalButtonLabel: string;

package/dist/components/shared/SharedStripeCheckoutV2Dialog.js

@@ -15,8 +15,29 @@ import { useEffect, useMemo, useState, } from 'react';
 import { CheckoutProvider, PaymentElement, useCheckout, } from '@stripe/react-stripe-js/checkout';
 import { PaymentBrandMark, SecurityLockIcon } from './CheckoutBrandAssets.js';
 import { StripeCheckoutExpressCheckoutButton } from './StripeCheckoutExpressCheckoutButton.js';
+import { isInactiveCheckoutSessionError } from '../../providers/stripe/useStripeSubscriptionCheckoutSession.js';
 import { getStripeWalletPaymentMethodOrder, usePlatformWalletPaymentMethods, } from './walletPlatform.js';
 const defaultPaymentMethodLabels = ['Visa', 'Mastercard', 'Maestro', 'Discover'];
+const stripeCheckoutV2Appearance = {
+    labels: 'above',
+    inputs: 'spaced',
+    variables: {
+        borderRadius: '0px',
+        colorBackground: '#fff',
+        colorText: '#303136',
+        colorTextPlaceholder: '#8c909a',
+        gridColumnSpacing: '12px',
+        gridRowSpacing: '14px',
+        spacingUnit: '5px',
+    },
+    rules: {
+        '.Label': {
+            paddingLeft: '14px',
+            paddingRight: '14px',
+            marginBottom: '6px',
+        },
+    },
+};
 const isValidEmail = (value) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value);
 const formatCountdown = (remainingSeconds) => {
     const normalizedSeconds = Number.isFinite(remainingSeconds)
@@ -31,7 +52,7 @@ function getFriendlyCardErrorMessage(error) {
         ? error.message
         : 'Payment failed. Please review your card details and try again.';
 }
-function SharedStripeCheckoutV2Form({ amountCents, buttonColor, cardSubmitLabel, closeAriaLabel, countdownLabel, customerEmail, customerEmailEditable = false, customerEmailLabel = 'Email', customerEmailPlaceholder = 'Enter your email', customerEmailInvalidMessage = 'Enter a valid email address.', customerName, discountAmountLabel, discountLabel, discountPercent, initialWalletAvailable, onClose, onCustomerEmailChange, onCustomerEmailCommit, onError, onSuccess, paymentMethodLabels = defaultPaymentMethodLabels, promoActive, processingLabel, promoCode, promoCodeLabel, remainingSeconds, returnUrl, savedLabel, secureLabel, satisfactionLabel, satisfactionPercent, summaryLabel, themeColor, title, totalLabel, totalValue, walletButtonLabel, originalPriceLabel, originalPriceValue, }) {
+function SharedStripeCheckoutV2Form({ amountCents, buttonColor, cardSubmitLabel, closeAriaLabel, countdownLabel, 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, onSuccess, paymentMethodLabels = defaultPaymentMethodLabels, promoActive, processingLabel, promoCode, promoCodeLabel, remainingSeconds, returnUrl, savedLabel, secureLabel, satisfactionLabel, satisfactionPercent, summaryLabel, themeColor, title, totalLabel, totalValue, walletButtonLabel, originalPriceLabel, originalPriceValue, }) {
     const checkoutState = useCheckout();
     const walletPaymentMethods = usePlatformWalletPaymentMethods();
     const [selectedMethod, setSelectedMethod] = useState('wallet');
@@ -112,7 +133,15 @@ function SharedStripeCheckoutV2Form({ amountCents, buttonColor, cardSubmitLabel,
             },
         };
     }, []);
+    const handleInactiveCheckoutSession = () => {
+        setError(null);
+        onInactiveCheckoutSession === null || onInactiveCheckoutSession === void 0 ? void 0 : onInactiveCheckoutSession();
+    };
     const setSharedError = (message) => {
+        if (isInactiveCheckoutSessionError(message)) {
+            handleInactiveCheckoutSession();
+            return;
+        }
         setError(message);
         onError === null || onError === void 0 ? void 0 : onError(message);
     };
@@ -128,11 +157,6 @@ function SharedStripeCheckoutV2Form({ amountCents, buttonColor, cardSubmitLabel,
             setSelectedMethod('card');
         }
     };
-    useEffect(() => {
-        if (!customerEmailEditable) {
-            setEmailDraft(initialCustomerEmail);
-        }
-    }, [customerEmailEditable, initialCustomerEmail]);
     useEffect(() => {
         if (effectiveSelectedMethod !== 'card' || typeof window === 'undefined') {
             return;
@@ -184,7 +208,8 @@ function SharedStripeCheckoutV2Form({ amountCents, buttonColor, cardSubmitLabel,
                 returnUrl,
             });
             if (result.type === 'error') {
-                setSharedError(result.error.message || 'Payment failed.');
+                const message = result.error.message || 'Payment failed.';
+                setSharedError(message);
                 setSubmitting(false);
                 return;
             }
@@ -206,22 +231,17 @@ function SharedStripeCheckoutV2Form({ amountCents, buttonColor, cardSubmitLabel,
                             showPromo ? '' : 'is-plain',
                         ]
                             .filter(Boolean)
-                            .join(' '), children: [_jsx("span", { children: totalLabel }), _jsxs("strong", { children: [_jsx("svg", { viewBox: '0 0 24 24', "aria-hidden": 'true', children: _jsx("path", { d: 'M20.6 13.4 12.4 21.6a2.2 2.2 0 0 1-3.1 0L2.4 14.7a2.2 2.2 0 0 1-.6-1.6V5.4a2 2 0 0 1 2-2h7.7a2.2 2.2 0 0 1 1.6.6l7.5 7.5a1.4 1.4 0 0 1 0 1.9ZM7.2 8.1a1.2 1.2 0 1 0 0-2.4 1.2 1.2 0 0 0 0 2.4Z' }) }), totalValue] })] }), showPromo ? (_jsxs("p", { className: 'shared-checkout-v2-saved', children: [_jsx("span", { "aria-hidden": 'true', children: "\uD83D\uDD25" }), savedLabel] })) : null] }), _jsxs("form", { className: 'shared-checkout-v2-payment', onSubmit: (event) => void handleSubmit(event), children: [_jsxs("div", { className: [
-                            'shared-checkout-v2-methods',
-                            showWalletMethod ? '' : 'has-card-only',
-                        ]
-                            .filter(Boolean)
-                            .join(' '), role: 'tablist', "aria-label": 'Payment method', children: [showWalletMethod ? (_jsxs("button", { type: 'button', className: [
+                            .join(' '), children: [_jsx("span", { children: totalLabel }), _jsxs("strong", { children: [_jsx("svg", { viewBox: '0 0 24 24', "aria-hidden": 'true', children: _jsx("path", { d: 'M20.6 13.4 12.4 21.6a2.2 2.2 0 0 1-3.1 0L2.4 14.7a2.2 2.2 0 0 1-.6-1.6V5.4a2 2 0 0 1 2-2h7.7a2.2 2.2 0 0 1 1.6.6l7.5 7.5a1.4 1.4 0 0 1 0 1.9ZM7.2 8.1a1.2 1.2 0 1 0 0-2.4 1.2 1.2 0 0 0 0 2.4Z' }) }), totalValue] })] }), showPromo ? (_jsxs("p", { className: 'shared-checkout-v2-saved', children: [_jsx("span", { "aria-hidden": 'true', children: "\uD83D\uDD25" }), savedLabel] })) : null] }), _jsxs("form", { className: 'shared-checkout-v2-payment', onSubmit: (event) => void handleSubmit(event), children: [showWalletMethod ? (_jsxs("div", { className: 'shared-checkout-v2-methods', role: 'tablist', "aria-label": 'Payment method', children: [_jsxs("button", { type: 'button', className: [
                                     'shared-checkout-v2-method',
                                     effectiveSelectedMethod === 'wallet' ? 'is-selected' : '',
                                 ]
                                     .filter(Boolean)
-                                    .join(' '), onClick: selectWalletMethod, role: 'tab', "aria-selected": effectiveSelectedMethod === 'wallet', children: [_jsxs("span", { className: 'shared-checkout-v2-tab-wallets', "aria-hidden": 'true', children: [walletPaymentMethods.includes('applePay') ? (_jsx(PaymentBrandMark, { label: 'Apple Pay', className: 'shared-checkout-v2-tab-wallet' })) : null, walletPaymentMethods.includes('googlePay') ? (_jsx(PaymentBrandMark, { label: 'Google Pay', className: 'shared-checkout-v2-tab-wallet' })) : null] }), _jsx("span", { className: 'shared-checkout-v2-sr-only', children: walletAriaLabel })] })) : null, _jsxs("button", { type: 'button', className: [
+                                    .join(' '), onClick: selectWalletMethod, role: 'tab', "aria-selected": effectiveSelectedMethod === 'wallet', children: [_jsxs("span", { className: 'shared-checkout-v2-tab-wallets', "aria-hidden": 'true', children: [walletPaymentMethods.includes('applePay') ? (_jsx(PaymentBrandMark, { label: 'Apple Pay', className: 'shared-checkout-v2-tab-wallet' })) : null, walletPaymentMethods.includes('googlePay') ? (_jsx(PaymentBrandMark, { label: 'Google Pay', className: 'shared-checkout-v2-tab-wallet' })) : null] }), _jsx("span", { className: 'shared-checkout-v2-sr-only', children: walletAriaLabel })] }), _jsxs("button", { type: 'button', className: [
                                     'shared-checkout-v2-method',
                                     effectiveSelectedMethod === 'card' ? 'is-selected' : '',
                                 ]
                                     .filter(Boolean)
-                                    .join(' '), onClick: selectCardMethod, role: 'tab', "aria-selected": effectiveSelectedMethod === 'card', children: [_jsx("strong", { children: "Credit card" }), _jsx("span", { className: 'shared-checkout-v2-tab-brands', "aria-hidden": 'true', children: cardBrandLabels.slice(0, 4).map((label) => (_jsx(PaymentBrandMark, { label: label, className: 'shared-checkout-v2-tab-brand' }, label))) })] })] }), _jsxs("div", { hidden: effectiveSelectedMethod !== 'wallet', className: [
+                                    .join(' '), onClick: selectCardMethod, role: 'tab', "aria-selected": effectiveSelectedMethod === 'card', children: [_jsx("strong", { children: "Credit card" }), _jsx("span", { className: 'shared-checkout-v2-tab-brands', "aria-hidden": 'true', children: cardBrandLabels.slice(0, 4).map((label) => (_jsx(PaymentBrandMark, { label: label, className: 'shared-checkout-v2-tab-brand' }, label))) })] })] })) : null, _jsxs("div", { hidden: effectiveSelectedMethod !== 'wallet', className: [
                             'shared-checkout-v2-wallet-panel',
                             effectiveSelectedMethod === 'wallet' ? 'is-visible' : '',
                         ]
@@ -231,16 +251,22 @@ function SharedStripeCheckoutV2Form({ amountCents, buttonColor, cardSubmitLabel,
                             effectiveSelectedMethod === 'card' ? 'is-visible' : '',
                         ]
                             .filter(Boolean)
-                            .join(' '), children: [_jsxs("div", { className: 'shared-checkout-v2-card-box', children: [_jsxs("label", { className: emailFieldClassName, children: [_jsx("span", { children: customerEmailLabel }), _jsx("input", { type: 'email', autoComplete: 'email', className: 'shared-checkout-v2-email-input', disabled: !customerEmailEditable, inputMode: 'email', readOnly: !customerEmailEditable, value: emailDraft, placeholder: customerEmailPlaceholder, onChange: (event) => {
-                                                    if (!customerEmailEditable) {
-                                                        return;
-                                                    }
-                                                    setEmailDraft(event.target.value);
-                                                    onCustomerEmailChange === null || onCustomerEmailChange === void 0 ? void 0 : onCustomerEmailChange(event.target.value);
-                                                } })] }), _jsx(PaymentElement, { options: paymentElementOptions })] }), 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] })] })] })] }));
+                            .join(' '), children: [_jsxs("div", { className: 'shared-checkout-v2-card-box', children: [_jsxs("label", { className: emailFieldClassName, children: [_jsx("span", { className: 'shared-checkout-v2-email-label', children: customerEmailLabel }), _jsx("span", { className: 'shared-checkout-v2-email-control', children: _jsx("input", { type: 'email', autoComplete: 'email', className: 'shared-checkout-v2-email-input', disabled: !customerEmailEditable, inputMode: 'email', readOnly: !customerEmailEditable, value: customerEmailEditable ? emailDraft : initialCustomerEmail, placeholder: customerEmailPlaceholder, onChange: (event) => {
+                                                        if (!customerEmailEditable) {
+                                                            return;
+                                                        }
+                                                        setEmailDraft(event.target.value);
+                                                        onCustomerEmailChange === null || onCustomerEmailChange === void 0 ? void 0 : onCustomerEmailChange(event.target.value);
+                                                    } }) })] }), _jsx(PaymentElement, { options: paymentElementOptions })] }), visibleError ? _jsx("p", { className: 'shared-checkout-v2-error', children: visibleError }) : null, _jsxs("button", { type: 'submit', className: 'shared-checkout-v2-card-submit', disabled: submitting, children: [_jsx(SecurityLockIcon, { className: 'shared-checkout-v2-card-submit-icon' }), submitting ? processingLabel : cardSubmitLabel] }), _jsx("div", { className: 'shared-checkout-v2-card-brands', "aria-hidden": 'true', children: cardBrandLabels.map((label) => (_jsx(PaymentBrandMark, { label: label, className: 'shared-checkout-v2-card-brand' }, label))) }), _jsxs("p", { className: 'shared-checkout-v2-secure-pill shared-checkout-v2-secure-pill--card', children: [_jsx(SecurityLockIcon, { className: 'shared-checkout-v2-secure-pill-icon' }), secureLabel] })] })] })] }));
 }
 export function SharedStripeCheckoutV2Dialog(_a) {
     var { clientSecret, onClose, stripePromise } = _a, props = __rest(_a, ["clientSecret", "onClose", "stripePromise"]);
+    const checkoutProviderOptions = useMemo(() => ({
+        clientSecret,
+        elementsOptions: {
+            appearance: stripeCheckoutV2Appearance,
+        },
+    }), [clientSecret]);
     useEffect(() => {
         const handleKeyDown = (event) => {
             if (event.key === 'Escape') {
@@ -250,9 +276,7 @@ export function SharedStripeCheckoutV2Dialog(_a) {
         window.addEventListener('keydown', handleKeyDown);
         return () => window.removeEventListener('keydown', handleKeyDown);
     }, [onClose]);
-    return (_jsxs(_Fragment, { children: [_jsx("div", { className: 'shared-checkout-v2-overlay', children: _jsx("div", { className: 'shared-checkout-v2-dialog', role: 'dialog', "aria-modal": 'true', "aria-labelledby": 'shared-checkout-v2-title', children: _jsx(CheckoutProvider, { stripe: stripePromise, options: {
-                            clientSecret,
-                        }, children: _jsx(SharedStripeCheckoutV2Form, Object.assign({}, props, { clientSecret: clientSecret, onClose: onClose })) }) }) }), _jsx("style", { children: sharedStripeCheckoutV2Styles })] }));
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: 'shared-checkout-v2-overlay', children: _jsx("div", { className: 'shared-checkout-v2-dialog', role: 'dialog', "aria-modal": 'true', "aria-labelledby": 'shared-checkout-v2-title', children: _jsx(CheckoutProvider, { stripe: stripePromise, options: checkoutProviderOptions, children: _jsx(SharedStripeCheckoutV2Form, Object.assign({}, props, { clientSecret: clientSecret, onClose: onClose })) }, clientSecret) }) }), _jsx("style", { children: sharedStripeCheckoutV2Styles })] }));
 }
 function SharedCheckoutSpecialOfferGift({ discountLabel, imageAlt, imageSrc, }) {
     if (imageSrc) {
@@ -522,11 +546,6 @@ const sharedStripeCheckoutV2Styles = `
   gap: 42px;
 }
 
-.shared-checkout-v2-methods.has-card-only {
-  grid-template-columns: minmax(0, 1fr);
-  gap: 0;
-}
-
 .shared-checkout-v2-method {
   min-width: 0;
   min-height: 74px;
@@ -648,9 +667,9 @@ const sharedStripeCheckoutV2Styles = `
 .shared-checkout-v2-card-panel {
   position: relative;
   gap: 10px;
-  margin-bottom: 42px;
+  margin-inline: -17px;
   background: #f2f2f3;
-  padding: 16px 15px 58px;
+  padding: 16px 32px 92px;
 }
 
 .shared-checkout-v2-wallet-panel.is-visible,
@@ -668,36 +687,54 @@ const sharedStripeCheckoutV2Styles = `
 }
 
 .shared-checkout-v2-email-field {
-  min-height: 64px;
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
-  justify-content: center;
+  gap: 7px;
   border: 0;
-  border-bottom: 1px solid #dadde4;
   border-radius: 0;
-  background: #fff;
-  padding: 8px 14px;
-  color: #647087;
+  background: transparent;
+  margin-bottom: 14px;
+  padding: 0;
+  color: #303136;
   font-size: 14px;
-  font-weight: 500;
-  line-height: 1;
+  font-weight: 400;
+  line-height: 1.2;
 }
 
 .shared-checkout-v2-email-field.is-disabled {
   cursor: default;
 }
 
+.shared-checkout-v2-email-label {
+  padding: 0 14px;
+  color: #303136;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 1.2;
+}
+
+.shared-checkout-v2-email-control {
+  min-height: 50px;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  border: 1px solid #dedede;
+  background: #fff;
+  box-shadow: 0 1px 2px rgb(16 24 40 / 8%);
+  padding: 0 14px;
+}
+
 .shared-checkout-v2-email-input {
   width: 100%;
-  min-height: 30px;
+  min-height: 48px;
   box-sizing: border-box;
   border: 0;
   background: transparent;
   padding: 0;
   color: #303136;
   font: inherit;
-  font-size: 20px;
+  font-size: 18px;
   font-weight: 400;
   line-height: 1.2;
   outline: none;
@@ -714,11 +751,11 @@ const sharedStripeCheckoutV2Styles = `
 }
 
 .shared-checkout-v2-card-box {
-  overflow: hidden;
-  border: 1px solid #dadde4;
+  overflow: visible;
+  border: 0;
   border-radius: 6px;
-  background: #fff;
-  box-shadow: 0 1px 2px rgb(16 24 40 / 10%);
+  background: transparent;
+  box-shadow: none;
 }
 
 .shared-checkout-v2-error {
@@ -773,7 +810,7 @@ const sharedStripeCheckoutV2Styles = `
 .shared-checkout-v2-secure-pill--card {
   position: absolute;
   left: 50%;
-  bottom: -33px;
+  bottom: 16px;
   transform: translateX(-50%);
   white-space: nowrap;
 }
@@ -908,7 +945,7 @@ const sharedStripeCheckoutV2Styles = `
   }
 
   .shared-checkout-v2-card-panel {
-    padding-inline: 15px;
+    padding-inline: 32px;
   }
 }
 `;

package/dist/providers/stripe/ApplePaySubscriptionCheckoutSlot.js

@@ -12,10 +12,8 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx } from "react/jsx-runtime";
 import { ApplePaySubscribeButton } from '../../components/shared/ApplePaySubscribeButton.js';
-import { useApplePayExpressCheckoutAllowed } from '../../components/shared/SharedStripeCheckoutDialog.js';
 import { WalletSubscriptionCheckoutLoadingPlaceholder, WalletSubscriptionCheckoutSlot, } from './WalletSubscriptionCheckoutSlot.js';
 export function ApplePaySubscriptionCheckoutSlot(_a) {
     var { placeholderLabel = 'Subscribe with Apple Pay' } = _a, slotProps = __rest(_a, ["placeholderLabel"]);
-    const allowApplePayExpressCheckout = useApplePayExpressCheckoutAllowed();
-    return (_jsx(WalletSubscriptionCheckoutSlot, Object.assign({}, slotProps, { availabilityPaymentMethod: 'applePay', expressCheckoutAllowed: allowApplePayExpressCheckout, placeholderLabel: placeholderLabel, renderPreparingPlaceholder: (placeholderProps) => (_jsx(WalletSubscriptionCheckoutLoadingPlaceholder, Object.assign({}, placeholderProps, { label: 'Loading Apple Pay' }))), renderPlaceholder: (placeholderProps) => (_jsx(ApplePaySubscribeButton, Object.assign({}, placeholderProps))) })));
+    return (_jsx(WalletSubscriptionCheckoutSlot, Object.assign({}, slotProps, { availabilityPaymentMethod: 'applePay', placeholderLabel: placeholderLabel, renderPreparingPlaceholder: (placeholderProps) => (_jsx(WalletSubscriptionCheckoutLoadingPlaceholder, Object.assign({}, placeholderProps, { label: 'Loading Apple Pay' }))), renderPlaceholder: (placeholderProps) => (_jsx(ApplePaySubscribeButton, Object.assign({}, placeholderProps))) })));
 }

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

@@ -1,6 +1,6 @@
 import { type ReactNode } from 'react';
 import type { AvailablePaymentMethods, StripeCheckoutExpressCheckoutElementOptions } from '@stripe/stripe-js';
-import type { StripeSubscriptionCheckoutSession } from './useStripeSubscriptionCheckoutSession.js';
+import { type StripeSubscriptionCheckoutSession } from './useStripeSubscriptionCheckoutSession.js';
 type WalletPlaceholderButtonProps = {
     className?: string;
     disabled: boolean;

package/dist/providers/stripe/WalletSubscriptionCheckoutSlot.js

@@ -2,6 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { StripeExpressCheckoutElement } from '../../components/shared/StripeExpressCheckoutElement.js';
+import { isInactiveCheckoutSessionError, } from './useStripeSubscriptionCheckoutSession.js';
 export function WalletSubscriptionCheckoutLoadingPlaceholder({ className, label, }) {
     return (_jsxs("div", { className: [
             'wallet-subscription-checkout-slot__loading',
@@ -65,6 +66,14 @@ export function WalletSubscriptionCheckoutSlot({ amountCents, availabilityPaymen
         walletAvailable,
     ]);
     const handleError = (message) => {
+        if (isInactiveCheckoutSessionError(message)) {
+            setWalletAvailability({
+                available: null,
+                intentKey: session.intentKey,
+            });
+            void session.restartWalletCheckout();
+            return;
+        }
         session.setError(message);
         onError === null || onError === void 0 ? void 0 : onError(message);
     };
@@ -96,7 +105,7 @@ export function WalletSubscriptionCheckoutSlot({ amountCents, availabilityPaymen
                     .filter(Boolean)
                     .join(' '), "aria-busy": placeholderIsPreparing || undefined, children: [shouldRenderExpressCheckout &&
                         session.activeClientSecret &&
-                        session.stripePromise ? (_jsx(StripeExpressCheckoutElement, { amountCents: amountCents, availabilityPaymentMethods: [availabilityPaymentMethod], beforeConfirm: beforeConfirm, className: className, clientSecret: session.activeClientSecret, customerEmail: customerEmail, customerName: customerName, onAvailabilityChange: handleAvailabilityChange, onError: handleError, onSuccess: onSuccess, options: options, returnUrl: returnUrl, stripePromise: session.stripePromise, summaryLabel: summaryLabel })) : null, shouldRenderPlaceholder ? (_jsx("div", { className: 'wallet-subscription-checkout-slot__placeholder', children: (renderPreparingPlaceholder !== null && renderPreparingPlaceholder !== void 0 ? renderPreparingPlaceholder : renderPlaceholder)({
+                        session.stripePromise ? (_jsx(StripeExpressCheckoutElement, { amountCents: amountCents, availabilityPaymentMethods: [availabilityPaymentMethod], beforeConfirm: beforeConfirm, className: className, clientSecret: session.activeClientSecret, customerEmail: customerEmail, customerName: customerName, onAvailabilityChange: handleAvailabilityChange, onError: handleError, onSuccess: onSuccess, options: options, returnUrl: returnUrl, stripePromise: session.stripePromise, summaryLabel: summaryLabel }, session.activeClientSecret)) : null, shouldRenderPlaceholder ? (_jsx("div", { className: 'wallet-subscription-checkout-slot__placeholder', children: (renderPreparingPlaceholder !== null && renderPreparingPlaceholder !== void 0 ? renderPreparingPlaceholder : renderPlaceholder)({
                             className,
                             disabled: slotDisabled,
                             label: placeholderLabel,

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

@@ -25,7 +25,10 @@ export type StripeSubscriptionCheckoutSession = {
     prepareWalletCheckout: () => Promise<string | null>;
     provider: 'stripe';
     reset: () => void;
+    restartCardCheckout: () => Promise<string | null>;
+    restartWalletCheckout: () => Promise<string | null>;
     setError: (message: string | null) => void;
     stripePromise: Promise<Stripe | null> | null;
 };
+export declare function isInactiveCheckoutSessionError(message?: string | null): boolean;
 export declare function useStripeSubscriptionCheckoutSession({ checkoutMode, couponId, customerEmail, displayPlan, enabled, onError, plan, returnUrl, runtimeConfig, userId, }: StripeSubscriptionCheckoutSessionInput): StripeSubscriptionCheckoutSession;

package/dist/providers/stripe/useStripeSubscriptionCheckoutSession.js

@@ -9,6 +9,10 @@ const getFriendlyStripeCheckoutError = (error) => {
         : message;
 };
 const normalizeRuntimeConfigValue = (value) => (value === null || value === void 0 ? void 0 : value.trim()) || '';
+export function isInactiveCheckoutSessionError(message) {
+    var _a;
+    return /\bcheckout session\b.*\bno longer active\b/i.test((_a = message === null || message === void 0 ? void 0 : message.trim()) !== null && _a !== void 0 ? _a : '');
+}
 export function useStripeSubscriptionCheckoutSession({ checkoutMode, couponId, customerEmail, displayPlan, enabled = true, onError, plan, returnUrl, runtimeConfig, userId, }) {
     var _a, _b, _c, _d;
     const [clientSecret, setClientSecret] = useState(null);
@@ -17,6 +21,7 @@ export function useStripeSubscriptionCheckoutSession({ checkoutMode, couponId, c
     const [loading, setLoading] = useState(createEmptyCheckoutPreparationLoading);
     const [runtimeStripePublishableKey, setRuntimeStripePublishableKey] = useState(null);
     const creatingIntentRef = useRef(null);
+    const requestIdRef = useRef(0);
     const runtimeConfigSignature = [
         normalizeRuntimeConfigValue(runtimeConfig === null || runtimeConfig === void 0 ? void 0 : runtimeConfig.apiBaseUrl),
         normalizeRuntimeConfigValue(runtimeConfig === null || runtimeConfig === void 0 ? void 0 : runtimeConfig.funnelId),
@@ -39,18 +44,28 @@ export function useStripeSubscriptionCheckoutSession({ checkoutMode, couponId, c
     ].join('|');
     const activeClientSecret = clientSecretIntentKey === intentKey ? clientSecret : null;
     const stripePromise = useMemo(() => getStripePromise(checkoutMode, runtimeStripePublishableKey), [checkoutMode, runtimeStripePublishableKey]);
+    const clearActiveCheckoutSession = useCallback(() => {
+        requestIdRef.current += 1;
+        creatingIntentRef.current = null;
+        setClientSecret(null);
+        setClientSecretIntentKey(null);
+    }, []);
     const setError = useCallback((message) => {
+        if (isInactiveCheckoutSessionError(message)) {
+            clearActiveCheckoutSession();
+            setErrorState(null);
+            onError === null || onError === void 0 ? void 0 : onError(null);
+            return;
+        }
         setErrorState(message);
         onError === null || onError === void 0 ? void 0 : onError(message);
-    }, [onError]);
+    }, [clearActiveCheckoutSession, onError]);
     const reset = useCallback(() => {
-        creatingIntentRef.current = null;
-        setClientSecret(null);
-        setClientSecretIntentKey(null);
+        clearActiveCheckoutSession();
         setLoading(createEmptyCheckoutPreparationLoading());
         setRuntimeStripePublishableKey(null);
         setError(null);
-    }, [setError]);
+    }, [clearActiveCheckoutSession, setError]);
     useEffect(() => {
         reset();
     }, [intentKey, reset]);
@@ -59,20 +74,25 @@ export function useStripeSubscriptionCheckoutSession({ checkoutMode, couponId, c
             ? current
             : Object.assign(Object.assign({}, current), { [source]: value }));
     }, []);
-    const createCheckoutSubscription = useCallback(async () => {
+    const createCheckoutSubscription = useCallback(async (forceNew = false) => {
         var _a;
         if (!configured || !plan || !displayPlan) {
             return null;
         }
-        if (activeClientSecret) {
+        if (!forceNew && activeClientSecret) {
             return activeClientSecret;
         }
-        if (((_a = creatingIntentRef.current) === null || _a === void 0 ? void 0 : _a.key) === intentKey) {
+        if (!forceNew && ((_a = creatingIntentRef.current) === null || _a === void 0 ? void 0 : _a.key) === intentKey) {
             return creatingIntentRef.current.promise;
         }
+        if (forceNew) {
+            clearActiveCheckoutSession();
+        }
         const requestKey = intentKey;
+        const requestId = requestIdRef.current + 1;
+        requestIdRef.current = requestId;
         const subscriptionRequest = (async () => {
-            var _a, _b, _c, _d;
+            var _a, _b, _c, _d, _e, _f, _g;
             try {
                 const response = await createStripeSubscriptionCheckout({
                     plan,
@@ -83,10 +103,11 @@ export function useStripeSubscriptionCheckoutSession({ checkoutMode, couponId, c
                     environment: checkoutMode,
                     runtimeConfig,
                 });
-                if (((_a = creatingIntentRef.current) === null || _a === void 0 ? void 0 : _a.key) !== requestKey) {
+                if (((_a = creatingIntentRef.current) === null || _a === void 0 ? void 0 : _a.key) !== requestKey ||
+                    ((_b = creatingIntentRef.current) === null || _b === void 0 ? void 0 : _b.id) !== requestId) {
                     return response.clientSecret;
                 }
-                const publishableKey = (_b = response.stripePublishableKey) === null || _b === void 0 ? void 0 : _b.trim();
+                const publishableKey = (_c = response.stripePublishableKey) === null || _c === void 0 ? void 0 : _c.trim();
                 if (publishableKey) {
                     setRuntimeStripePublishableKey(publishableKey);
                 }
@@ -95,18 +116,21 @@ export function useStripeSubscriptionCheckoutSession({ checkoutMode, couponId, c
                 return response.clientSecret;
             }
             catch (subscriptionError) {
-                if (((_c = creatingIntentRef.current) === null || _c === void 0 ? void 0 : _c.key) === requestKey) {
+                if (((_d = creatingIntentRef.current) === null || _d === void 0 ? void 0 : _d.key) === requestKey &&
+                    ((_e = creatingIntentRef.current) === null || _e === void 0 ? void 0 : _e.id) === requestId) {
                     setError(getFriendlyStripeCheckoutError(subscriptionError));
                 }
                 return null;
             }
             finally {
-                if (((_d = creatingIntentRef.current) === null || _d === void 0 ? void 0 : _d.key) === requestKey) {
+                if (((_f = creatingIntentRef.current) === null || _f === void 0 ? void 0 : _f.key) === requestKey &&
+                    ((_g = creatingIntentRef.current) === null || _g === void 0 ? void 0 : _g.id) === requestId) {
                     creatingIntentRef.current = null;
                 }
             }
         })();
         creatingIntentRef.current = {
+            id: requestId,
             key: requestKey,
             promise: subscriptionRequest,
         };
@@ -114,6 +138,7 @@ export function useStripeSubscriptionCheckoutSession({ checkoutMode, couponId, c
     }, [
         activeClientSecret,
         checkoutMode,
+        clearActiveCheckoutSession,
         configured,
         couponId,
         customerEmail,
@@ -125,17 +150,17 @@ export function useStripeSubscriptionCheckoutSession({ checkoutMode, couponId, c
         setError,
         userId,
     ]);
-    const prepareCheckout = useCallback(async (source) => {
+    const prepareCheckout = useCallback(async (source, options = {}) => {
         if (!configured || !plan || !displayPlan) {
             return null;
         }
-        if (activeClientSecret) {
+        if (!options.forceNew && activeClientSecret) {
             return activeClientSecret;
         }
         setSourceLoading(source, true);
         setError(null);
         try {
-            return await createCheckoutSubscription();
+            return await createCheckoutSubscription(options.forceNew === true);
         }
         finally {
             setSourceLoading(source, false);
@@ -151,6 +176,8 @@ export function useStripeSubscriptionCheckoutSession({ checkoutMode, couponId, c
     ]);
     const prepareCardCheckout = useCallback(() => prepareCheckout('card'), [prepareCheckout]);
     const prepareWalletCheckout = useCallback(() => prepareCheckout('wallet'), [prepareCheckout]);
+    const restartCardCheckout = useCallback(() => prepareCheckout('card', { forceNew: true }), [prepareCheckout]);
+    const restartWalletCheckout = useCallback(() => prepareCheckout('wallet', { forceNew: true }), [prepareCheckout]);
     return {
         activeClientSecret,
         configured,
@@ -161,6 +188,8 @@ export function useStripeSubscriptionCheckoutSession({ checkoutMode, couponId, c
         prepareWalletCheckout,
         provider: 'stripe',
         reset,
+        restartCardCheckout,
+        restartWalletCheckout,
         setError,
         stripePromise,
     };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@funnelsgrove/payments",
-  "version": "0.1.12",
+  "version": "0.1.14",
   "type": "module",
   "private": false,
   "main": "./dist/index.js",