@funnelsgrove/payments 0.1.12 → 0.1.13

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,41 @@ 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',
+        focusBoxShadow: 'none',
+        focusOutline: 'none',
+        gridColumnSpacing: '12px',
+        gridRowSpacing: '14px',
+        spacingUnit: '5px',
+    },
+    rules: {
+        '.Input': {
+            backgroundColor: '#fff',
+            border: '0',
+            boxShadow: 'none',
+            paddingLeft: '14px',
+            paddingRight: '14px',
+        },
+        '.Input:focus': {
+            border: '0',
+            boxShadow: 'none',
+            outline: 'none',
+        },
+        '.Input--invalid': {
+            boxShadow: 'none',
+        },
+    },
+};
 const isValidEmail = (value) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value);
 const formatCountdown = (remainingSeconds) => {
     const normalizedSeconds = Number.isFinite(remainingSeconds)
@@ -31,7 +64,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 +145,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 +169,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 +220,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;
             }
@@ -231,7 +268,7 @@ 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) => {
+                            .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: customerEmailEditable ? emailDraft : initialCustomerEmail, placeholder: customerEmailPlaceholder, onChange: (event) => {
                                                     if (!customerEmailEditable) {
                                                         return;
                                                     }
@@ -241,6 +278,12 @@ function SharedStripeCheckoutV2Form({ amountCents, buttonColor, cardSubmitLabel,
 }
 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 +293,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) {
@@ -648,9 +689,8 @@ const sharedStripeCheckoutV2Styles = `
 .shared-checkout-v2-card-panel {
   position: relative;
   gap: 10px;
-  margin-bottom: 42px;
   background: #f2f2f3;
-  padding: 16px 15px 58px;
+  padding: 16px 15px 92px;
 }
 
 .shared-checkout-v2-wallet-panel.is-visible,
@@ -674,9 +714,9 @@ const sharedStripeCheckoutV2Styles = `
   flex-direction: column;
   justify-content: center;
   border: 0;
-  border-bottom: 1px solid #dadde4;
   border-radius: 0;
   background: #fff;
+  margin-bottom: 14px;
   padding: 8px 14px;
   color: #647087;
   font-size: 14px;
@@ -773,7 +813,7 @@ const sharedStripeCheckoutV2Styles = `
 .shared-checkout-v2-secure-pill--card {
   position: absolute;
   left: 50%;
-  bottom: -33px;
+  bottom: 16px;
   transform: translateX(-50%);
   white-space: nowrap;
 }

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.13",
   "type": "module",
   "private": false,
   "main": "./dist/index.js",