@funnelsgrove/payments 0.1.7 → 0.1.8

package/dist/components/shared/SharedStripeCheckoutV2Dialog.js

@@ -12,31 +12,12 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useEffect, useMemo, useState, } from 'react';
-import { CardCvcElement, CardExpiryElement, CardNumberElement, Elements, useElements, useStripe, } from '@stripe/react-stripe-js';
+import { CheckoutProvider, PaymentElement, useCheckout, } from '@stripe/react-stripe-js/checkout';
 import { PaymentBrandMark, SecurityLockIcon } from './CheckoutBrandAssets.js';
-import { StripeExpressCheckoutButton } from './StripeExpressCheckoutButton.js';
+import { StripeCheckoutExpressCheckoutButton } from './StripeCheckoutExpressCheckoutButton.js';
 import { getStripeWalletPaymentMethodOrder, usePlatformWalletPaymentMethods, } from './walletPlatform.js';
 const defaultPaymentMethodLabels = ['Visa', 'Mastercard', 'Maestro', 'Discover'];
 const isValidEmail = (value) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value);
-const normalizeBillingName = (input) => {
-    var _a, _b, _c, _d;
-    const normalizedName = ((_a = input.name) === null || _a === void 0 ? void 0 : _a.trim()) || ((_b = input.fallback) === null || _b === void 0 ? void 0 : _b.trim());
-    if (normalizedName) {
-        return normalizedName;
-    }
-    const normalizedEmail = (_c = input.email) === null || _c === void 0 ? void 0 : _c.trim();
-    if (normalizedEmail) {
-        const localPart = (_d = normalizedEmail
-            .split('@')[0]) === null || _d === void 0 ? void 0 : _d.replace(/[._-]+/g, ' ').trim();
-        if (localPart) {
-            return localPart;
-        }
-    }
-    return 'Customer';
-};
-const isSuccessfulIntentStatus = (status) => {
-    return status === 'succeeded' || status === 'processing' || status === 'requires_capture';
-};
 const formatCountdown = (remainingSeconds) => {
     const normalizedSeconds = Number.isFinite(remainingSeconds)
         ? Math.max(0, Math.floor(remainingSeconds))
@@ -45,43 +26,13 @@ const formatCountdown = (remainingSeconds) => {
     const seconds = normalizedSeconds % 60;
     return `${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;
 };
-const stripeCardElementStyle = {
-    base: {
-        color: '#303136',
-        fontFamily: 'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
-        fontSize: '18px',
-        fontSmoothing: 'antialiased',
-        fontWeight: '500',
-        '::placeholder': {
-            color: '#8c909a',
-        },
-    },
-    invalid: {
-        color: '#ff2544',
-        iconColor: '#ff2544',
-    },
-};
-const cardNumberElementOptions = {
-    placeholder: 'Credit or Debit Card Number',
-    showIcon: false,
-    style: stripeCardElementStyle,
-};
-const cardExpiryElementOptions = {
-    placeholder: 'Expiry Date',
-    style: stripeCardElementStyle,
-};
-const cardCvcElementOptions = {
-    placeholder: 'CVV/CVC',
-    style: stripeCardElementStyle,
-};
 function getFriendlyCardErrorMessage(error) {
     return error instanceof Error && error.message
         ? error.message
         : 'Payment failed. Please review your card details and try again.';
 }
-function SharedStripeCheckoutV2Form({ amountCents, buttonColor, cardSubmitLabel, clientSecret, closeAriaLabel, countdownLabel, customerEmail, customerEmailEditable = false, customerEmailLabel = 'Email', customerEmailPlaceholder = 'Enter your email', customerEmailInvalidMessage = 'Enter a valid email address.', customerName, discountAmountLabel, discountLabel, discountPercent, initialWalletAvailable, nameOnCardPlaceholder = 'Name on card', 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, }) {
-    const stripe = useStripe();
-    const elements = useElements();
+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, nameOnCardPlaceholder = 'Name on card', 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, }) {
+    const checkoutState = useCheckout();
     const walletPaymentMethods = usePlatformWalletPaymentMethods();
     const [selectedMethod, setSelectedMethod] = useState('wallet');
     const [walletAvailable, setWalletAvailable] = useState(initialWalletAvailable !== null && initialWalletAvailable !== void 0 ? initialWalletAvailable : null);
@@ -90,9 +41,6 @@ function SharedStripeCheckoutV2Form({ amountCents, buttonColor, cardSubmitLabel,
         : walletAvailable;
     const [submitting, setSubmitting] = useState(false);
     const [error, setError] = useState(null);
-    const [cardNumberError, setCardNumberError] = useState(null);
-    const [cardExpiryError, setCardExpiryError] = useState(null);
-    const [cardCvcError, setCardCvcError] = useState(null);
     const [emailDraft, setEmailDraft] = useState((customerEmail === null || customerEmail === void 0 ? void 0 : customerEmail.trim()) || '');
     const [nameOnCard, setNameOnCard] = useState((customerName === null || customerName === void 0 ? void 0 : customerName.trim()) || '');
     const cardBrandLabels = useMemo(() => paymentMethodLabels.length > 0 ? paymentMethodLabels : defaultPaymentMethodLabels, [paymentMethodLabels]);
@@ -141,6 +89,16 @@ function SharedStripeCheckoutV2Form({ amountCents, buttonColor, cardSubmitLabel,
             },
         };
     }, [walletPaymentMethods]);
+    const paymentElementOptions = useMemo(() => {
+        return {
+            layout: 'tabs',
+            wallets: {
+                applePay: 'never',
+                googlePay: 'never',
+                link: 'auto',
+            },
+        };
+    }, []);
     const setSharedError = (message) => {
         setError(message);
         onError === null || onError === void 0 ? void 0 : onError(message);
@@ -183,28 +141,15 @@ function SharedStripeCheckoutV2Form({ amountCents, buttonColor, cardSubmitLabel,
         onCustomerEmailChange === null || onCustomerEmailChange === void 0 ? void 0 : onCustomerEmailChange(nextEmail);
         return nextEmail;
     };
-    const handleFieldError = (event, setFieldError) => {
-        var _a, _b, _c;
-        setFieldError((_b = (_a = event.error) === null || _a === void 0 ? void 0 : _a.message) !== null && _b !== void 0 ? _b : null);
-        if ((_c = event.error) === null || _c === void 0 ? void 0 : _c.message) {
-            setSharedError(event.error.message);
-            return;
-        }
-        setSharedError(null);
-    };
     const handleSubmit = async (event) => {
-        var _a;
         event.preventDefault();
         if (submitting) {
             return;
         }
-        if (!stripe || !elements) {
-            setSharedError('Payment form is not ready yet.');
-            return;
-        }
-        const cardNumberElement = elements.getElement(CardNumberElement);
-        if (!cardNumberElement) {
-            setSharedError('Payment form is not ready yet.');
+        if (checkoutState.type !== 'success') {
+            setSharedError(checkoutState.type === 'error'
+                ? checkoutState.error.message
+                : 'Payment form is not ready yet.');
             return;
         }
         setSubmitting(true);
@@ -215,27 +160,17 @@ function SharedStripeCheckoutV2Form({ amountCents, buttonColor, cardSubmitLabel,
                 setSubmitting(false);
                 return;
             }
-            const result = await stripe.confirmCardPayment(clientSecret, {
-                payment_method: {
-                    card: cardNumberElement,
-                    billing_details: {
-                        email: syncedEmail || undefined,
-                        name: normalizeBillingName({
-                            email: syncedEmail,
-                            name: customerName,
-                            fallback: nameOnCard,
-                        }),
-                    },
-                },
-                return_url: returnUrl,
+            const result = await checkoutState.checkout.confirm({
+                email: syncedEmail || undefined,
+                redirect: 'if_required',
+                returnUrl,
             });
-            if (result.error) {
+            if (result.type === 'error') {
                 setSharedError(result.error.message || 'Payment failed.');
                 setSubmitting(false);
                 return;
             }
-            if (typeof window !== 'undefined' &&
-                isSuccessfulIntentStatus((_a = result.paymentIntent) === null || _a === void 0 ? void 0 : _a.status)) {
+            if (typeof window !== 'undefined') {
                 onSuccess === null || onSuccess === void 0 ? void 0 : onSuccess();
                 window.location.assign(returnUrl);
                 return;
@@ -247,7 +182,7 @@ function SharedStripeCheckoutV2Form({ amountCents, buttonColor, cardSubmitLabel,
             setSubmitting(false);
         }
     };
-    const visibleError = error || cardNumberError || cardExpiryError || cardCvcError;
+    const visibleError = error;
     return (_jsxs("div", { className: 'shared-checkout-v2-shell', style: checkoutStyle, children: [_jsxs("header", { className: 'shared-checkout-v2-header', children: [_jsx("button", { type: 'button', className: 'shared-checkout-v2-close', onClick: onClose, "aria-label": closeAriaLabel, children: _jsx("span", { "aria-hidden": 'true' }) }), _jsx("h2", { id: 'shared-checkout-v2-title', children: title })] }), _jsxs("section", { className: 'shared-checkout-v2-summary', children: [showPromo ? (_jsxs("p", { className: 'shared-checkout-v2-countdown', children: [discountPercent, "% ", countdownLabel, " ", countdownValue, " min"] })) : null, _jsxs("p", { className: 'shared-checkout-v2-satisfaction', children: [_jsx("strong", { children: satisfactionPercent }), " ", satisfactionLabel] }), showPromo ? (_jsxs("div", { className: 'shared-checkout-v2-price-stack', children: [_jsxs("div", { className: 'shared-checkout-v2-price-row is-muted', children: [_jsx("span", { children: originalPriceLabel }), _jsx("span", { className: 'shared-checkout-v2-strike', children: originalPriceValue })] }), _jsxs("div", { className: 'shared-checkout-v2-price-row is-discount', children: [_jsx("strong", { children: discountLabel }), _jsx("strong", { children: discountAmountLabel })] }), _jsxs("div", { className: 'shared-checkout-v2-promo', children: [_jsx("span", { children: promoCodeLabel }), _jsx("strong", { children: normalizedPromoCode })] })] })) : null, _jsxs("div", { className: [
                             'shared-checkout-v2-total',
                             showPromo ? '' : 'is-plain',
@@ -273,7 +208,7 @@ function SharedStripeCheckoutV2Form({ amountCents, buttonColor, cardSubmitLabel,
                             effectiveSelectedMethod === 'wallet' ? 'is-visible' : '',
                         ]
                             .filter(Boolean)
-                            .join(' '), children: [_jsxs("p", { className: 'shared-checkout-v2-secure-pill', children: [_jsx(SecurityLockIcon, { className: 'shared-checkout-v2-secure-pill-icon' }), secureLabel] }), _jsxs("div", { className: 'shared-checkout-v2-wallet-shell', "aria-label": walletAriaLabel, children: [_jsx(StripeExpressCheckoutButton, { amountCents: amountCents, availabilityPaymentMethods: walletPaymentMethods, beforeConfirm: ensureCustomerEmail, className: 'shared-checkout-v2-express-buttons', customerEmail: resolvedCustomerEmail, customerName: customerName, initialAvailable: initialWalletAvailable, keepInitialAvailableOnReady: initialWalletAvailable === true, onAvailabilityChange: handleWalletAvailabilityChange, onError: setSharedError, onSuccess: onSuccess, options: expressCheckoutOptions, returnUrl: returnUrl, summaryLabel: expressCheckoutSummaryLabel }), _jsx("span", { className: 'shared-checkout-v2-sr-only', children: walletAriaLabel })] })] }), _jsxs("div", { hidden: effectiveSelectedMethod !== 'card', className: [
+                            .join(' '), children: [_jsxs("p", { className: 'shared-checkout-v2-secure-pill', children: [_jsx(SecurityLockIcon, { className: 'shared-checkout-v2-secure-pill-icon' }), secureLabel] }), _jsxs("div", { className: 'shared-checkout-v2-wallet-shell', "aria-label": walletAriaLabel, children: [_jsx(StripeCheckoutExpressCheckoutButton, { amountCents: amountCents, availabilityPaymentMethods: walletPaymentMethods, beforeConfirm: ensureCustomerEmail, className: 'shared-checkout-v2-express-buttons', customerEmail: resolvedCustomerEmail, customerName: customerName, initialAvailable: initialWalletAvailable, keepInitialAvailableOnReady: initialWalletAvailable === true, onAvailabilityChange: handleWalletAvailabilityChange, onError: setSharedError, onSuccess: onSuccess, options: expressCheckoutOptions, returnUrl: returnUrl, summaryLabel: expressCheckoutSummaryLabel }), _jsx("span", { className: 'shared-checkout-v2-sr-only', children: walletAriaLabel })] })] }), _jsxs("div", { hidden: effectiveSelectedMethod !== 'card', className: [
                             'shared-checkout-v2-card-panel',
                             effectiveSelectedMethod === 'card' ? 'is-visible' : '',
                         ]
@@ -281,13 +216,7 @@ function SharedStripeCheckoutV2Form({ amountCents, buttonColor, cardSubmitLabel,
                             .join(' '), children: [customerEmailEditable ? (_jsxs("label", { className: 'shared-checkout-v2-email-field', children: [_jsx("span", { children: customerEmailLabel }), _jsx("input", { type: 'email', autoComplete: 'email', className: 'shared-checkout-v2-email-input', inputMode: 'email', value: emailDraft, placeholder: customerEmailPlaceholder, onChange: (event) => {
                                             setEmailDraft(event.target.value);
                                             onCustomerEmailChange === null || onCustomerEmailChange === void 0 ? void 0 : onCustomerEmailChange(event.target.value);
-                                        } })] })) : null, _jsxs("div", { className: 'shared-checkout-v2-card-box', children: [_jsx("div", { className: 'shared-checkout-v2-card-number', children: _jsx(CardNumberElement, { options: cardNumberElementOptions, onChange: (event) => {
-                                                handleFieldError(event, setCardNumberError);
-                                            } }) }), _jsxs("div", { className: 'shared-checkout-v2-card-row', children: [_jsx("div", { className: 'shared-checkout-v2-card-half', children: _jsx(CardExpiryElement, { options: cardExpiryElementOptions, onChange: (event) => {
-                                                        handleFieldError(event, setCardExpiryError);
-                                                    } }) }), _jsxs("div", { className: 'shared-checkout-v2-card-half shared-checkout-v2-card-half--cvc', children: [_jsx(CardCvcElement, { options: cardCvcElementOptions, onChange: (event) => {
-                                                            handleFieldError(event, setCardCvcError);
-                                                        } }), _jsx("span", { className: 'shared-checkout-v2-cvc-info', "aria-hidden": 'true', children: "i" })] })] })] }), _jsx("input", { type: 'text', autoComplete: 'cc-name', className: 'shared-checkout-v2-name-input', value: nameOnCard, placeholder: nameOnCardPlaceholder, onChange: (event) => setNameOnCard(event.target.value) }), 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', children: [_jsx(SecurityLockIcon, { className: 'shared-checkout-v2-secure-pill-icon' }), secureLabel] })] })] })] }));
+                                        } })] })) : null, _jsx("div", { className: 'shared-checkout-v2-card-box', children: _jsx(PaymentElement, { options: paymentElementOptions }) }), _jsx("input", { type: 'text', autoComplete: 'cc-name', className: 'shared-checkout-v2-name-input', value: nameOnCard, placeholder: nameOnCardPlaceholder, onChange: (event) => setNameOnCard(event.target.value) }), 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', 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"]);
@@ -300,7 +229,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(Elements, { stripe: stripePromise, options: {
+    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 })] }));
 }

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

@@ -0,0 +1,18 @@
+import type { AvailablePaymentMethods, StripeCheckoutExpressCheckoutElementOptions } from '@stripe/stripe-js';
+export type StripeCheckoutExpressCheckoutButtonProps = {
+    amountCents: number;
+    beforeConfirm?: () => Promise<string | null>;
+    summaryLabel: string;
+    returnUrl: string;
+    customerEmail?: string | null;
+    customerName?: string | null;
+    className?: string;
+    options?: Partial<StripeCheckoutExpressCheckoutElementOptions>;
+    availabilityPaymentMethods?: readonly (keyof AvailablePaymentMethods)[];
+    initialAvailable?: boolean | null;
+    keepInitialAvailableOnReady?: boolean;
+    onAvailabilityChange?: (available: boolean) => void;
+    onError?: (message: string | null) => void;
+    onSuccess?: () => void;
+};
+export declare function StripeCheckoutExpressCheckoutButton({ beforeConfirm, returnUrl, customerEmail, className, options, availabilityPaymentMethods, initialAvailable, keepInitialAvailableOnReady, onAvailabilityChange, onError, onSuccess, }: StripeCheckoutExpressCheckoutButtonProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/shared/StripeCheckoutExpressCheckoutButton.js

@@ -0,0 +1,116 @@
+'use client';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useState } from 'react';
+import { ExpressCheckoutElement, useCheckout, } from '@stripe/react-stripe-js/checkout';
+const buildDefaultOptions = () => ({
+    buttonHeight: 55,
+    buttonTheme: {
+        applePay: 'black',
+    },
+    buttonType: {
+        applePay: 'subscribe',
+    },
+    layout: {
+        maxColumns: 1,
+        maxRows: 1,
+        overflow: 'auto',
+    },
+    paymentMethodOrder: ['apple_pay'],
+    paymentMethods: {
+        amazonPay: 'never',
+        applePay: 'always',
+        googlePay: 'never',
+        klarna: 'never',
+        link: 'never',
+        paypal: 'never',
+    },
+});
+export function StripeCheckoutExpressCheckoutButton({ beforeConfirm, returnUrl, customerEmail, className, options, availabilityPaymentMethods = ['applePay'], initialAvailable, keepInitialAvailableOnReady = false, onAvailabilityChange, onError, onSuccess, }) {
+    const checkoutState = useCheckout();
+    const [walletAvailable, setWalletAvailable] = useState(initialAvailable !== null && initialAvailable !== void 0 ? initialAvailable : null);
+    const effectiveWalletAvailable = initialAvailable === true && walletAvailable !== false
+        ? true
+        : walletAvailable;
+    const baseOptions = useMemo(() => buildDefaultOptions(), []);
+    const resolvedOptions = useMemo(() => {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+        return Object.assign(Object.assign(Object.assign({}, baseOptions), (options !== null && options !== void 0 ? options : {})), { buttonTheme: Object.assign(Object.assign({}, ((_a = baseOptions.buttonTheme) !== null && _a !== void 0 ? _a : {})), ((_b = options === null || options === void 0 ? void 0 : options.buttonTheme) !== null && _b !== void 0 ? _b : {})), buttonType: Object.assign(Object.assign({}, ((_c = baseOptions.buttonType) !== null && _c !== void 0 ? _c : {})), ((_d = options === null || options === void 0 ? void 0 : options.buttonType) !== null && _d !== void 0 ? _d : {})), layout: Object.assign(Object.assign({}, ((_e = baseOptions.layout) !== null && _e !== void 0 ? _e : {})), ((_f = options === null || options === void 0 ? void 0 : options.layout) !== null && _f !== void 0 ? _f : {})), paymentMethods: Object.assign(Object.assign({}, ((_g = baseOptions.paymentMethods) !== null && _g !== void 0 ? _g : {})), ((_h = options === null || options === void 0 ? void 0 : options.paymentMethods) !== null && _h !== void 0 ? _h : {})), paymentMethodOrder: (_j = options === null || options === void 0 ? void 0 : options.paymentMethodOrder) !== null && _j !== void 0 ? _j : baseOptions.paymentMethodOrder });
+    }, [baseOptions, options]);
+    const handleConfirm = async (event) => {
+        if (checkoutState.type !== 'success') {
+            const message = checkoutState.type === 'error'
+                ? checkoutState.error.message
+                : 'Wallet checkout is not ready yet.';
+            onError === null || onError === void 0 ? void 0 : onError(message);
+            event.paymentFailed({ reason: 'fail', message });
+            return;
+        }
+        onError === null || onError === void 0 ? void 0 : onError(null);
+        let preparedCustomerEmail = (customerEmail === null || customerEmail === void 0 ? void 0 : customerEmail.trim()) || null;
+        if (beforeConfirm) {
+            try {
+                preparedCustomerEmail = await beforeConfirm();
+            }
+            catch (confirmError) {
+                const message = confirmError instanceof Error && confirmError.message
+                    ? confirmError.message
+                    : 'Unable to prepare wallet checkout.';
+                onError === null || onError === void 0 ? void 0 : onError(message);
+                event.paymentFailed({ reason: 'invalid_payment_data', message });
+                return;
+            }
+        }
+        if (beforeConfirm && !preparedCustomerEmail) {
+            const message = 'Email is required to continue.';
+            onError === null || onError === void 0 ? void 0 : onError(message);
+            event.paymentFailed({ reason: 'invalid_payment_data', message });
+            return;
+        }
+        const result = await checkoutState.checkout.confirm({
+            email: preparedCustomerEmail || (customerEmail === null || customerEmail === void 0 ? void 0 : customerEmail.trim()) || undefined,
+            expressCheckoutConfirmEvent: event,
+            redirect: 'if_required',
+            returnUrl,
+        });
+        if (result.type === 'error') {
+            const message = result.error.message || 'Wallet checkout failed.';
+            onError === null || onError === void 0 ? void 0 : onError(message);
+            event.paymentFailed({ reason: 'fail', message });
+            return;
+        }
+        onError === null || onError === void 0 ? void 0 : onError(null);
+        if (typeof window !== 'undefined') {
+            onSuccess === null || onSuccess === void 0 ? void 0 : onSuccess();
+            window.location.assign(returnUrl);
+        }
+    };
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: [
+                    'stripe-express-checkout-button',
+                    className !== null && className !== void 0 ? className : '',
+                    effectiveWalletAvailable === false ? 'is-hidden' : '',
+                ]
+                    .filter(Boolean)
+                    .join(' '), children: _jsx(ExpressCheckoutElement, { options: resolvedOptions, onConfirm: (event) => void handleConfirm(event), onLoadError: ({ error }) => {
+                        setWalletAvailable(false);
+                        onAvailabilityChange === null || onAvailabilityChange === void 0 ? void 0 : onAvailabilityChange(false);
+                        onError === null || onError === void 0 ? void 0 : onError(error.message || 'Unable to load wallet checkout.');
+                    }, onReady: ({ availablePaymentMethods: availablePaymentMethodsMap }) => {
+                        const available = Boolean(availabilityPaymentMethods.some((paymentMethod) => availablePaymentMethodsMap === null || availablePaymentMethodsMap === void 0 ? void 0 : availablePaymentMethodsMap[paymentMethod]));
+                        const resolvedAvailable = available || (keepInitialAvailableOnReady && initialAvailable === true);
+                        setWalletAvailable(resolvedAvailable);
+                        onAvailabilityChange === null || onAvailabilityChange === void 0 ? void 0 : onAvailabilityChange(resolvedAvailable);
+                        if (resolvedAvailable) {
+                            onError === null || onError === void 0 ? void 0 : onError(null);
+                        }
+                    } }) }), _jsx("style", { children: stripeExpressCheckoutButtonStyles })] }));
+}
+const stripeExpressCheckoutButtonStyles = `
+.stripe-express-checkout-button {
+  width: 100%;
+  min-height: 55px;
+}
+
+.stripe-express-checkout-button.is-hidden {
+  display: none;
+}
+`;

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

@@ -1,6 +1,6 @@
 import type { Appearance, Stripe } from '@stripe/stripe-js';
-import { type StripeExpressCheckoutButtonProps } from './StripeExpressCheckoutButton.js';
-export type StripeExpressCheckoutElementProps = StripeExpressCheckoutButtonProps & {
+import { type StripeCheckoutExpressCheckoutButtonProps } from './StripeCheckoutExpressCheckoutButton.js';
+export type StripeExpressCheckoutElementProps = StripeCheckoutExpressCheckoutButtonProps & {
     appearance?: Appearance;
     clientSecret: string;
     stripePromise: Promise<Stripe | null>;

package/dist/components/shared/StripeExpressCheckoutElement.js

@@ -11,9 +11,9 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Elements } from '@stripe/react-stripe-js';
-import { StripeExpressCheckoutButton, } from './StripeExpressCheckoutButton.js';
+import { CheckoutProvider } from '@stripe/react-stripe-js/checkout';
+import { StripeCheckoutExpressCheckoutButton, } from './StripeCheckoutExpressCheckoutButton.js';
 export function StripeExpressCheckoutElement(_a) {
     var { appearance, clientSecret, stripePromise } = _a, buttonProps = __rest(_a, ["appearance", "clientSecret", "stripePromise"]);
-    return (_jsx(Elements, { stripe: stripePromise, options: Object.assign({ clientSecret }, (appearance ? { appearance } : {})), children: _jsx(StripeExpressCheckoutButton, Object.assign({}, buttonProps)) }));
+    return (_jsx(CheckoutProvider, { stripe: stripePromise, options: Object.assign({ clientSecret }, (appearance ? { elementsOptions: { appearance } } : {})), children: _jsx(StripeCheckoutExpressCheckoutButton, Object.assign({}, buttonProps)) }));
 }

package/dist/index.d.ts

@@ -15,6 +15,7 @@ export * from './components/shared/SharedStripeCheckoutDialog.js';
 export * from './components/shared/SharedStripeCheckoutV2Dialog.js';
 export * from './components/shared/ApplePaySubscribeButton.js';
 export * from './components/shared/GooglePaySubscribeButton.js';
+export * from './components/shared/StripeCheckoutExpressCheckoutButton.js';
 export * from './components/shared/StripeExpressCheckoutButton.js';
 export * from './components/shared/StripeExpressCheckoutElement.js';
 export * from './components/shared/StripePlanSelector.js';

package/dist/index.js

@@ -15,6 +15,7 @@ export * from './components/shared/SharedStripeCheckoutDialog.js';
 export * from './components/shared/SharedStripeCheckoutV2Dialog.js';
 export * from './components/shared/ApplePaySubscribeButton.js';
 export * from './components/shared/GooglePaySubscribeButton.js';
+export * from './components/shared/StripeCheckoutExpressCheckoutButton.js';
 export * from './components/shared/StripeExpressCheckoutButton.js';
 export * from './components/shared/StripeExpressCheckoutElement.js';
 export * from './components/shared/StripePlanSelector.js';

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

@@ -1,7 +1,7 @@
-import type { StripeExpressCheckoutElementOptions } from '@stripe/stripe-js';
+import type { StripeCheckoutExpressCheckoutElementOptions } from '@stripe/stripe-js';
 import { type WalletSubscriptionCheckoutSlotProps } from './WalletSubscriptionCheckoutSlot.js';
 export type GooglePaySubscriptionCheckoutSlotProps = Omit<WalletSubscriptionCheckoutSlotProps, 'availabilityPaymentMethod' | 'options' | 'placeholderLabel' | 'renderPlaceholder' | 'renderPreparingPlaceholder'> & {
-    options?: StripeExpressCheckoutElementOptions;
+    options?: Partial<StripeCheckoutExpressCheckoutElementOptions>;
     placeholderLabel?: string;
 };
 export declare function GooglePaySubscriptionCheckoutSlot({ options, placeholderLabel, ...slotProps }: GooglePaySubscriptionCheckoutSlotProps): import("react/jsx-runtime").JSX.Element;

package/dist/providers/stripe/GooglePaySubscriptionCheckoutSlot.js

@@ -21,7 +21,6 @@ const googlePayExpressCheckoutOptions = {
     buttonType: {
         googlePay: 'subscribe',
     },
-    emailRequired: true,
     layout: {
         maxColumns: 1,
         maxRows: 1,

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

@@ -1,5 +1,5 @@
 import { type ReactNode } from 'react';
-import type { AvailablePaymentMethods, StripeExpressCheckoutElementOptions } from '@stripe/stripe-js';
+import type { AvailablePaymentMethods, StripeCheckoutExpressCheckoutElementOptions } from '@stripe/stripe-js';
 import type { StripeSubscriptionCheckoutSession } from './useStripeSubscriptionCheckoutSession.js';
 type WalletPlaceholderButtonProps = {
     className?: string;
@@ -20,7 +20,7 @@ export type WalletSubscriptionCheckoutSlotProps = {
     onError?: (message: string | null) => void;
     onSuccess?: () => void;
     onUnavailableClick?: () => Promise<void> | void;
-    options?: StripeExpressCheckoutElementOptions;
+    options?: Partial<StripeCheckoutExpressCheckoutElementOptions>;
     placeholderLabel: string;
     renderPreparingPlaceholder?: (props: WalletPlaceholderButtonProps) => ReactNode;
     renderPlaceholder: (props: WalletPlaceholderButtonProps) => ReactNode;

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

@@ -11,6 +11,7 @@ export type StripeSubscriptionCheckoutSessionInput = {
     enabled?: boolean;
     onError?: (message: string | null) => void;
     plan?: PaywallPlan | null;
+    returnUrl: string;
     runtimeConfig?: StripeRuntimeConfigOverrides;
     userId?: string | null;
 };
@@ -27,4 +28,4 @@ export type StripeSubscriptionCheckoutSession = {
     setError: (message: string | null) => void;
     stripePromise: Promise<Stripe | null> | null;
 };
-export declare function useStripeSubscriptionCheckoutSession({ checkoutMode, couponId, customerEmail, displayPlan, enabled, onError, plan, runtimeConfig, userId, }: StripeSubscriptionCheckoutSessionInput): StripeSubscriptionCheckoutSession;
+export declare function useStripeSubscriptionCheckoutSession({ checkoutMode, couponId, customerEmail, displayPlan, enabled, onError, plan, returnUrl, runtimeConfig, userId, }: StripeSubscriptionCheckoutSessionInput): StripeSubscriptionCheckoutSession;

package/dist/providers/stripe/useStripeSubscriptionCheckoutSession.js

@@ -9,7 +9,7 @@ const getFriendlyStripeCheckoutError = (error) => {
         : message;
 };
 const normalizeRuntimeConfigValue = (value) => (value === null || value === void 0 ? void 0 : value.trim()) || '';
-export function useStripeSubscriptionCheckoutSession({ checkoutMode, couponId, customerEmail, displayPlan, enabled = true, onError, plan, runtimeConfig, userId, }) {
+export function useStripeSubscriptionCheckoutSession({ checkoutMode, couponId, customerEmail, displayPlan, enabled = true, onError, plan, returnUrl, runtimeConfig, userId, }) {
     var _a, _b, _c, _d;
     const [clientSecret, setClientSecret] = useState(null);
     const [clientSecretIntentKey, setClientSecretIntentKey] = useState(null);
@@ -35,6 +35,7 @@ export function useStripeSubscriptionCheckoutSession({ checkoutMode, couponId, c
         (_c = displayPlan === null || displayPlan === void 0 ? void 0 : displayPlan.id) !== null && _c !== void 0 ? _c : '',
         (_d = displayPlan === null || displayPlan === void 0 ? void 0 : displayPlan.amountCents) !== null && _d !== void 0 ? _d : '',
         (couponId === null || couponId === void 0 ? void 0 : couponId.trim()) || '',
+        returnUrl.trim(),
     ].join('|');
     const activeClientSecret = clientSecretIntentKey === intentKey ? clientSecret : null;
     const stripePromise = useMemo(() => getStripePromise(checkoutMode, runtimeStripePublishableKey), [checkoutMode, runtimeStripePublishableKey]);
@@ -77,6 +78,7 @@ export function useStripeSubscriptionCheckoutSession({ checkoutMode, couponId, c
                     plan,
                     couponId,
                     customerEmail,
+                    returnUrl,
                     user_id: userId,
                     environment: checkoutMode,
                     runtimeConfig,
@@ -118,6 +120,7 @@ export function useStripeSubscriptionCheckoutSession({ checkoutMode, couponId, c
         displayPlan,
         intentKey,
         plan,
+        returnUrl,
         runtimeConfig,
         setError,
         userId,

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

@@ -68,12 +68,14 @@ type CreateSubscriptionCheckoutInput = {
     plan: CheckoutSessionPlanInput;
     couponId?: string | null;
     customerEmail?: string | null;
+    returnUrl: string;
     user_id?: string | null;
     environment?: RuntimeMode;
     runtimeConfig?: StripeRuntimeConfigOverrides;
 };
 type CreateSubscriptionCheckoutResponse = {
     clientSecret: string;
+    checkoutSessionId?: string;
     subscriptionId?: string;
     stripePublishableKey?: string;
     environment?: 'test' | 'live';

package/dist/services/stripe.service.js

@@ -577,6 +577,7 @@ export async function createStripeSubscriptionCheckout(input) {
             billingIntervalCount: recurring.intervalCount,
             couponId: ((_c = input.couponId) === null || _c === void 0 ? void 0 : _c.trim()) || undefined,
             customerEmail: ((_d = input.customerEmail) === null || _d === void 0 ? void 0 : _d.trim()) || undefined,
+            returnUrl: input.returnUrl,
             user_id: ((_e = input.user_id) === null || _e === void 0 ? void 0 : _e.trim()) || undefined,
             environment: input.environment || undefined,
         }),

package/package.json

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