@funnelsgrove/payments 0.33.0 → 0.35.0

package/README.md

@@ -41,6 +41,17 @@ mobile remains full-screen and all checkout analytics and verified-success behav
 
 Pass `presentation='inline'` to embed a card-only form in the paywall. The host owns the offer summary and renewal disclosure. Inline checkout has no modal semantics, close button, Escape dismissal, or shared wallet session; analytics and verified-success callbacks are unchanged.
 
+For a mixed Stripe/PayPal Offer Set, pass the selected binding's `PayPalCheckout`
+as `paypalCheckout` to `SharedStripeCheckoutV2Dialog`. It appears in the checkout
+wallet group alongside Apple Pay and Google Pay, with card as a separate tab.
+Set `showSummary={false}` on `PayPalCheckout` to omit its repeated plan caption.
+The mixed wallet group omits the Stripe-only price/discount summary; native approval
+sheets retain each provider’s actual terms. Forward `onPendingChange`
+to `paypalPending` so an unresolved PayPal purchase keeps its selected method.
+This slot applies only to dialog presentation. A PayPal-only Offer Set
+uses `PayPalCheckoutDialog` around the same native checkout, without creating a
+Stripe session. The funnel owns opening the dialog and post-success navigation.
+
 Use `completeStripeOneClickPayment` for normal post-checkout one-click upsells. It delegates the charge to `funnelSdkService.chargeOneClickPayment` and owns any required Stripe confirmation. Pass its optional `checkoutAnalytics` context to let the shared package emit `checkout_completed` only after `succeeded`, including after required confirmation. The context uses `StripeSubscriptionCheckoutAnalyticsContext`; completion is deduplicated by PaymentIntent ID, and analytics failures do not fail the payment. Funnel code supplies the context and completes its step; the shared package owns the analytics callback. `chargeStripeOneClickPayment` remains the lower-level charge-only primitive.
 
 Solidgate browser checkout is available for controlled provider-routed funnels through

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

@@ -1 +1 @@
-export declare const PAYMENTS_PACKAGE_VERSION = "0.33.0";
+export declare const PAYMENTS_PACKAGE_VERSION = "0.35.0";

package/dist/generated/package-version.js

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

package/dist/index.d.ts

@@ -15,5 +15,6 @@ export * from './providers/solidgate/index.js';
 export { ManageSubscriptionScreen, type ManageSubscriptionContent, type ManageSubscriptionScreenProps, type ManageSubscriptionLabels, } from './components/ManageSubscriptionScreen.js';
 export { isCheckoutEmailError, isValidCheckoutEmail } from './services/checkoutEmail.js';
 export * from './components/CheckoutEmailDialog.js';
+export { PayPalCheckoutDialog } from './providers/paypal/PayPalCheckoutDialog.js';
 export { PayPalCheckout, type PayPalCheckoutProps } from './providers/paypal/PayPalCheckout.js';
 export { readPendingPayPalCheckout } from './providers/paypal/paypalCheckout.service.js';

package/dist/index.js

@@ -18,5 +18,6 @@ export * from './providers/solidgate/index.js';
 export { ManageSubscriptionScreen, } from './components/ManageSubscriptionScreen.js';
 export { isCheckoutEmailError, isValidCheckoutEmail } from './services/checkoutEmail.js';
 export * from './components/CheckoutEmailDialog.js';
+export { PayPalCheckoutDialog } from './providers/paypal/PayPalCheckoutDialog.js';
 export { PayPalCheckout } from './providers/paypal/PayPalCheckout.js';
 export { readPendingPayPalCheckout } from './providers/paypal/paypalCheckout.service.js';

package/dist/providers/paypal/PayPalCheckout.d.ts

@@ -1,6 +1,8 @@
 import { type PayPalCheckoutInput } from './paypalCheckout.service.js';
 export type PayPalCheckoutProps = PayPalCheckoutInput & {
     onSuccess: () => void;
+    /** Hide the repeated plan caption when the native button shares a wallet group. */
+    showSummary?: boolean;
     onPreparationStart?: () => void;
     onPendingChange?: (pending: boolean) => void;
 };

package/dist/providers/paypal/PayPalCheckout.js

@@ -205,6 +205,6 @@ export function PayPalCheckout(props) {
         }
         return () => { controller.abort(); verifyRef.current = null; void (button === null || button === void 0 ? void 0 : button.close().catch(() => undefined)); };
     }, [inputKey, retry]);
-    return _jsxs("section", { "aria-label": 'PayPal payment', className: 'space-y-3', children: [_jsxs("p", { className: 'text-sm', children: ["PayPal \u00B7 ", summary] }), _jsx("div", { ref: container, hidden: state === 'blocked' || state === 'pending' || state === 'verifying' || state === 'success' }), state === 'loading' ? _jsx("p", { role: 'status', children: "Loading PayPal\u2026" }) : null, state === 'verifying' ? _jsx("p", { role: 'status', children: "Confirming your subscription\u2026" }) : null, state === 'success' ? _jsx("p", { role: 'status', children: "Subscription confirmed." }) : null, error ? _jsx("p", { role: 'alert', children: error }) : null, state === 'pending' ? _jsx("button", { type: 'button', onClick: () => { var _a; return void ((_a = verifyRef.current) === null || _a === void 0 ? void 0 : _a.call(verifyRef)); }, children: "Check payment status" })
+    return _jsxs("section", { "aria-label": 'PayPal payment', className: 'space-y-3', children: [props.showSummary !== false ? _jsxs("p", { className: 'text-sm', children: ["PayPal \u00B7 ", summary] }) : null, _jsx("div", { ref: container, hidden: state === 'blocked' || state === 'pending' || state === 'verifying' || state === 'success' }), state === 'loading' ? _jsx("p", { role: 'status', children: "Loading PayPal\u2026" }) : null, state === 'verifying' ? _jsx("p", { role: 'status', children: "Confirming your subscription\u2026" }) : null, state === 'success' ? _jsx("p", { role: 'status', children: "Subscription confirmed." }) : null, error ? _jsx("p", { role: 'alert', children: error }) : null, state === 'pending' ? _jsx("button", { type: 'button', onClick: () => { var _a; return void ((_a = verifyRef.current) === null || _a === void 0 ? void 0 : _a.call(verifyRef)); }, children: "Check payment status" })
                 : error && state !== 'blocked' ? _jsx("button", { type: 'button', onClick: () => setRetry(value => value + 1), children: "Retry PayPal" }) : null] });
 }

package/dist/providers/paypal/PayPalCheckoutDialog.d.ts

@@ -0,0 +1,8 @@
+import { type ReactNode } from 'react';
+/** The same checkout surface for an Offer Set with only a PayPal binding. */
+export declare function PayPalCheckoutDialog({ children, title, closeAriaLabel, onClose }: {
+    children: ReactNode;
+    title: string;
+    closeAriaLabel: string;
+    onClose: () => void;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/providers/paypal/PayPalCheckoutDialog.js

@@ -0,0 +1,16 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useId } from 'react';
+import { sharedStripeCheckoutV2Styles } from '../stripe/components/SharedStripeCheckoutV2.styles.js';
+import { PaymentBrandMark } from '../stripe/components/CheckoutBrandAssets.js';
+/** The same checkout surface for an Offer Set with only a PayPal binding. */
+export function PayPalCheckoutDialog({ children, title, closeAriaLabel, onClose }) {
+    const titleId = useId();
+    useEffect(() => {
+        const handleKey = (event) => { if (event.key === 'Escape')
+            onClose(); };
+        window.addEventListener('keydown', handleKey);
+        return () => window.removeEventListener('keydown', handleKey);
+    }, [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": titleId, children: _jsxs("div", { className: 'shared-checkout-v2-shell', children: [_jsxs("header", { className: 'shared-checkout-v2-header', children: [_jsx("button", { type: 'button', className: 'shared-checkout-v2-close', "aria-label": closeAriaLabel, onClick: onClose, children: _jsx("span", { "aria-hidden": 'true' }) }), _jsx("h2", { id: titleId, children: title })] }), _jsxs("div", { className: 'shared-checkout-v2-payment', children: [_jsxs("div", { className: 'shared-checkout-v2-method is-selected', "aria-label": 'PayPal', children: [_jsx(PaymentBrandMark, { label: 'PayPal', className: 'shared-checkout-v2-tab-wallet' }), _jsx("span", { children: "PayPal" })] }), children] })] }) }) }), _jsx("style", { children: sharedStripeCheckoutV2Styles })] });
+}

package/dist/providers/stripe/components/SharedCheckoutPaymentMethods.internal.d.ts

@@ -0,0 +1,16 @@
+import type { PlatformWalletPaymentMethod } from './walletPlatform.js';
+type Props = {
+    showWalletMethod: boolean;
+    showPayPalMethod: boolean;
+    selectedMethod: 'wallet' | 'card';
+    disabled: boolean;
+    paymentMethodLabel: string;
+    cardLabel: string;
+    walletAriaLabel: string;
+    walletPaymentMethods: readonly PlatformWalletPaymentMethod[];
+    cardBrandLabels: readonly string[];
+    onWalletSelect: () => void;
+    onCardSelect: () => void;
+};
+export declare function SharedCheckoutPaymentMethods({ showWalletMethod, showPayPalMethod, selectedMethod, disabled, paymentMethodLabel, cardLabel, walletAriaLabel, walletPaymentMethods, cardBrandLabels, onWalletSelect, onCardSelect }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/providers/stripe/components/SharedCheckoutPaymentMethods.internal.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { PaymentBrandMark } from './CheckoutBrandAssets.js';
+export function SharedCheckoutPaymentMethods({ showWalletMethod, showPayPalMethod, selectedMethod, disabled, paymentMethodLabel, cardLabel, walletAriaLabel, walletPaymentMethods, cardBrandLabels, onWalletSelect, onCardSelect }) {
+    return (_jsxs("div", { className: 'shared-checkout-v2-methods', "data-paypal": showPayPalMethod ? 'true' : undefined, role: 'tablist', "aria-label": paymentMethodLabel, children: [showWalletMethod ? _jsxs("button", { type: 'button', disabled: disabled, className: [
+                    'shared-checkout-v2-method',
+                    selectedMethod === 'wallet' ? 'is-selected' : '',
+                ]
+                    .filter(Boolean)
+                    .join(' '), onClick: onWalletSelect, role: 'tab', "aria-selected": selectedMethod === 'wallet', children: [_jsxs("span", { className: 'shared-checkout-v2-tab-wallets', "aria-hidden": 'true', children: [showPayPalMethod ? _jsx(PaymentBrandMark, { label: 'PayPal', className: 'shared-checkout-v2-tab-wallet' }) : null, 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: [
+                    'shared-checkout-v2-method',
+                    selectedMethod === 'card' ? 'is-selected' : '',
+                ]
+                    .filter(Boolean)
+                    .join(' '), disabled: disabled, onClick: onCardSelect, role: 'tab', "aria-selected": selectedMethod === 'card', children: [_jsx("strong", { children: cardLabel }), _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))) })] })] }));
+}

package/dist/providers/stripe/components/SharedStripeCheckoutV2.styles.d.ts

@@ -1 +1 @@
-export declare const sharedStripeCheckoutV2Styles = "\n.shared-checkout-v2-overlay {\n  position: fixed;\n  inset: 0;\n  z-index: 110;\n  display: flex;\n  align-items: stretch;\n  justify-content: center;\n  overflow: hidden;\n  background: #fff;\n}\n\n.shared-checkout-v2-dialog {\n  width: min(100%, 430px);\n  height: 100svh;\n  max-height: 100svh;\n  overflow: hidden;\n  background: #fff;\n}\n\n@media (min-width: 640px) {\n  .shared-checkout-v2-overlay:has(.shared-checkout-v2-dialog[data-variant='compact']) {\n    align-items: center;\n    padding: 24px;\n    background: rgb(0 0 0 / 48%);\n  }\n\n  .shared-checkout-v2-dialog[data-variant='compact'] {\n    width: min(100%, 520px);\n    height: auto;\n    max-height: calc(100svh - 48px);\n    border-radius: 24px;\n    box-shadow: 0 24px 70px rgb(0 0 0 / 28%);\n  }\n}\n\n.shared-checkout-v2-shell[data-variant='compact'] {\n  height: auto;\n  max-height: min(100svh, 760px);\n}\n\n.shared-checkout-v2-shell[data-variant='compact'] .shared-checkout-v2-header {\n  min-height: 88px;\n  padding: 0 72px;\n}\n\n.shared-checkout-v2-shell[data-variant='compact'] .shared-checkout-v2-header h2 {\n  font-size: 27px;\n}\n\n.shared-checkout-v2-shell[data-variant='compact'] .shared-checkout-v2-close {\n  right: 22px;\n  left: auto;\n}\n\n.shared-checkout-v2-shell[data-variant='compact'] .shared-checkout-v2-summary {\n  padding: 0 36px;\n}\n\n.shared-checkout-v2-shell[data-variant='compact'] .shared-checkout-v2-total {\n  min-height: 82px;\n  border: 1px solid #ececef;\n  border-radius: 16px;\n  padding: 0 22px;\n  background: #fbfbfc;\n}\n\n.shared-checkout-v2-shell[data-variant='compact'] .shared-checkout-v2-total svg {\n  display: none;\n}\n\n.shared-checkout-v2-shell[data-variant='compact'] .shared-checkout-v2-payment {\n  padding-right: 36px;\n  padding-left: 36px;\n}\n\n.shared-checkout-v2-shell[data-variant='compact'] .shared-checkout-v2-card-submit {\n  border-radius: 14px;\n  background: var(--shared-checkout-v2-button-color);\n  text-transform: none;\n}\n\n.shared-checkout-v2-shell {\n  height: 100%;\n  max-height: 100svh;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  overflow-y: auto;\n  overflow-x: hidden;\n  -webkit-overflow-scrolling: touch;\n  background: #fff;\n  color: #303136;\n  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n}\n\n.shared-checkout-v2-verifying,\n.shared-checkout-v2-confirmed {\n  box-sizing: border-box;\n  min-height: 100%;\n  margin: 0;\n  padding: 32px 24px;\n  background: #fff;\n  color: #303136;\n  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n  font-size: 16px;\n  line-height: 1.5;\n}\n\n.shared-checkout-v2-verifying p {\n  margin: 0 0 24px;\n}\n\n.shared-checkout-v2-status-button {\n  min-height: 48px;\n  border: 0;\n  border-radius: 11px;\n  padding: 12px 18px;\n  background: var(--shared-checkout-v2-button-color);\n  color: #fff;\n  font: inherit;\n  font-weight: 700;\n  cursor: pointer;\n}\n\n.shared-checkout-v2-status-button:disabled {\n  cursor: wait;\n  opacity: 0.72;\n}\n\n.shared-checkout-v2-header {\n  position: relative;\n  min-height: 70px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0 56px;\n  background: #fff;\n}\n\n.shared-checkout-v2-header h2 {\n  margin: 0;\n  color: #020203;\n  font-size: 24px;\n  font-weight: 900;\n  line-height: 1.15;\n  letter-spacing: 0;\n  text-align: center;\n}\n\n.shared-checkout-v2-close {\n  position: absolute;\n  left: 16px;\n  top: 50%;\n  width: 40px;\n  height: 40px;\n  border: 0;\n  border-radius: 999px;\n  background: #f2f2f3;\n  color: #aaa;\n  transform: translateY(-50%);\n  cursor: pointer;\n}\n\n.shared-checkout-v2-close span,\n.shared-checkout-v2-close span::after {\n  position: absolute;\n  left: 50%;\n  top: 50%;\n  width: 28px;\n  height: 4px;\n  border-radius: 999px;\n  background: currentColor;\n  content: '';\n}\n\n.shared-checkout-v2-close span {\n  transform: translate(-50%, -50%) rotate(45deg);\n}\n\n.shared-checkout-v2-close span::after {\n  transform: translate(-50%, -50%) rotate(90deg);\n}\n\n.shared-checkout-v2-summary {\n  padding: 0 17px 0;\n  background: #fff;\n}\n\n.shared-checkout-v2-countdown {\n  margin: 0;\n  min-height: 37px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 12px;\n  background: color-mix(in srgb, var(--shared-checkout-v2-theme-color) 10%, #fff);\n  color: var(--shared-checkout-v2-theme-color);\n  font-size: 16px;\n  font-weight: 900;\n  line-height: 1.2;\n  letter-spacing: 0;\n  text-align: center;\n}\n\n.shared-checkout-v2-satisfaction {\n  margin: 17px 0 21px;\n  color: #2f3034;\n  font-size: 19px;\n  font-weight: 800;\n  line-height: 1.15;\n  letter-spacing: 0;\n  text-align: center;\n}\n\n.shared-checkout-v2-satisfaction strong {\n  color: var(--shared-checkout-v2-theme-color);\n}\n\n.shared-checkout-v2-price-stack {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n\n.shared-checkout-v2-price-row {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 12px;\n  font-size: 18px;\n  line-height: 1.2;\n  letter-spacing: 0;\n}\n\n.shared-checkout-v2-price-row.is-muted {\n  color: #9d9d9f;\n  font-size: 17px;\n  font-weight: 500;\n}\n\n.shared-checkout-v2-strike {\n  text-decoration-line: line-through;\n  text-decoration-thickness: 2px;\n}\n\n.shared-checkout-v2-price-row.is-discount {\n  color: #040508;\n  font-size: 17px;\n  font-weight: 900;\n}\n\n.shared-checkout-v2-price-row.is-discount strong:last-child {\n  color: #ff2544;\n}\n\n.shared-checkout-v2-promo {\n  min-height: 42px;\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 12px;\n  border-radius: 13px;\n  background: #f0f0f0;\n  padding: 0 14px;\n  color: #8d8d90;\n  font-size: 16px;\n  font-weight: 500;\n  line-height: 1.1;\n}\n\n.shared-checkout-v2-promo strong {\n  color: #050609;\n  font-weight: 900;\n}\n\n.shared-checkout-v2-total {\n  margin-top: 20px;\n  min-height: 76px;\n  border-top: 1px solid #dedede;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 16px;\n  color: #303136;\n}\n\n.shared-checkout-v2-total span {\n  font-size: 23px;\n  font-weight: 800;\n  line-height: 1;\n}\n\n.shared-checkout-v2-total strong {\n  display: inline-flex;\n  align-items: center;\n  gap: 7px;\n  color: #303136;\n  font-size: 25px;\n  font-weight: 900;\n  line-height: 1;\n}\n\n.shared-checkout-v2-total svg {\n  width: 25px;\n  height: 25px;\n  fill: none;\n  stroke: currentColor;\n  stroke-width: 2;\n  stroke-linejoin: round;\n}\n\n.shared-checkout-v2-total.is-plain {\n  margin-top: 0;\n}\n\n.shared-checkout-v2-saved {\n  width: fit-content;\n  min-height: 36px;\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n  margin: -8px 0 9px auto;\n  border-radius: 12px;\n  background: #ffdce3;\n  padding: 0 14px;\n  color: #ff2544;\n  font-size: 14px;\n  font-weight: 900;\n  line-height: 1.1;\n  letter-spacing: 0;\n}\n\n.shared-checkout-v2-payment {\n  min-height: 0;\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  background: #f2f2f3;\n  padding: 9px 17px 32px;\n}\n\n.shared-checkout-v2-methods {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);\n  gap: 42px;\n}\n\n.shared-checkout-v2-method {\n  min-width: 0;\n  min-height: 74px;\n  box-sizing: border-box;\n  border: 2px solid #e6e7eb;\n  border-radius: 13px;\n  background: #fff;\n  color: #344376;\n  padding: 9px 8px;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 6px;\n  cursor: pointer;\n}\n\n.shared-checkout-v2-method.is-selected {\n  border: 3px solid #050505;\n}\n\n.shared-checkout-v2-tab-wallet {\n  width: 58px;\n  height: 36px;\n}\n\n.shared-checkout-v2-tab-wallet svg {\n  display: block;\n  width: 100%;\n  height: 100%;\n}\n\n.shared-checkout-v2-tab-wallets {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n}\n\n.shared-checkout-v2-method strong {\n  color: #344376;\n  font-size: 20px;\n  font-weight: 900;\n  line-height: 1;\n  letter-spacing: 0;\n}\n\n.shared-checkout-v2-tab-brands {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  max-width: 100%;\n  gap: 4px;\n}\n\n.shared-checkout-v2-tab-brand {\n  min-width: 0;\n  width: 24px;\n  height: 15px;\n}\n\n.shared-checkout-v2-tab-brand svg {\n  display: block;\n  width: 100%;\n  height: 100%;\n}\n\n.shared-checkout-v2-wallet-panel,\n.shared-checkout-v2-card-panel {\n  display: flex;\n  flex-direction: column;\n  height: 0;\n  overflow: hidden;\n  opacity: 0;\n  pointer-events: none;\n}\n\n.shared-checkout-v2-wallet-panel[hidden],\n.shared-checkout-v2-card-panel[hidden] {\n  display: none;\n}\n\n.shared-checkout-v2-wallet-panel {\n  align-items: center;\n  gap: 22px;\n  padding-top: 5px;\n}\n\n.shared-checkout-v2-secure-pill {\n  width: fit-content;\n  min-height: 47px;\n  box-sizing: border-box;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 12px;\n  margin: 0 auto;\n  border-radius: 12px;\n  background: #dcffd0;\n  padding: 0 22px;\n  color: #207733;\n  font-size: 18px;\n  font-weight: 600;\n  line-height: 1.1;\n  letter-spacing: 0;\n}\n\n.shared-checkout-v2-secure-pill-icon {\n  width: 24px;\n  height: 24px;\n  flex: none;\n  color: #147232;\n}\n\n.shared-checkout-v2-wallet-shell {\n  width: 100%;\n  min-height: 124px;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n}\n\n.shared-checkout-v2-express-buttons {\n  width: 100%;\n}\n\n.shared-checkout-v2-card-panel {\n  position: relative;\n  gap: 10px;\n  margin-inline: -17px;\n  background: #f2f2f3;\n  padding: 16px 32px 92px;\n}\n\n.shared-checkout-v2-wallet-panel.is-visible,\n.shared-checkout-v2-card-panel.is-visible {\n  height: auto;\n  overflow: visible;\n  opacity: 1;\n  pointer-events: auto;\n}\n\n.shared-checkout-v2-wallet-panel:not(.is-visible),\n.shared-checkout-v2-card-panel:not(.is-visible) {\n  padding-top: 0;\n  padding-bottom: 0;\n}\n\n.shared-checkout-v2-email-field {\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  gap: 7px;\n  border: 0;\n  border-radius: 0;\n  background: transparent;\n  margin-bottom: 14px;\n  padding: 0;\n  color: #303136;\n  font-size: 14px;\n  font-weight: 400;\n  line-height: 1.2;\n}\n\n.shared-checkout-v2-email-field.is-disabled {\n  cursor: default;\n}\n\n.shared-checkout-v2-email-label {\n  padding: 0 14px;\n  color: #303136;\n  font-size: 14px;\n  font-weight: 400;\n  line-height: 1.2;\n}\n\n.shared-checkout-v2-email-control {\n  min-height: 50px;\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  border: 1px solid #dedede;\n  background: #fff;\n  box-shadow: 0 1px 2px rgb(16 24 40 / 8%);\n  padding: 0 14px;\n}\n\n.shared-checkout-v2-email-input {\n  width: 100%;\n  min-height: 48px;\n  box-sizing: border-box;\n  border: 0;\n  background: transparent;\n  padding: 0;\n  color: #303136;\n  font: inherit;\n  font-size: 18px;\n  font-weight: 400;\n  line-height: 1.2;\n  outline: none;\n}\n\n.shared-checkout-v2-email-input:disabled {\n  color: #74767c;\n  opacity: 1;\n  -webkit-text-fill-color: #74767c;\n}\n\n.shared-checkout-v2-email-input::placeholder {\n  color: #8c909a;\n}\n\n.shared-checkout-v2-card-box {\n  overflow: visible;\n  border: 0;\n  border-radius: 6px;\n  background: transparent;\n  box-shadow: none;\n}\n\n.shared-checkout-v2-country-field {\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  gap: 7px;\n  margin: 14px 0 0;\n  color: #303136;\n  font-size: 14px;\n  font-weight: 400;\n  line-height: 1.2;\n}\n\n.shared-checkout-v2-country-label {\n  padding: 0 14px;\n}\n\n.shared-checkout-v2-country-control {\n  position: relative;\n  display: block;\n}\n\n.shared-checkout-v2-country-control::after {\n  position: absolute;\n  right: 17px;\n  top: 50%;\n  width: 8px;\n  height: 8px;\n  border-right: 2px solid #6f7380;\n  border-bottom: 2px solid #6f7380;\n  content: '';\n  pointer-events: none;\n  transform: translateY(-65%) rotate(45deg);\n}\n\n.shared-checkout-v2-country-select {\n  width: 100%;\n  min-height: 50px;\n  box-sizing: border-box;\n  appearance: none;\n  border: 1px solid #dedede;\n  border-radius: 0;\n  background: #fff;\n  box-shadow: 0 1px 2px rgb(16 24 40 / 8%);\n  color: #303136;\n  font: inherit;\n  font-size: 18px;\n  font-weight: 400;\n  line-height: 1.2;\n  outline: none;\n  padding: 0 44px 0 14px;\n}\n\n.shared-checkout-v2-error {\n  margin: 0;\n  color: #c43737;\n  font-size: 13px;\n  font-weight: 600;\n  line-height: 1.35;\n}\n\n.shared-checkout-v2-card-submit {\n  min-height: 60px;\n  border: 0;\n  border-radius: 11px;\n  background: var(--shared-checkout-v2-button-color);\n  color: #fff;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 14px;\n  font-size: 22px;\n  font-weight: 900;\n  line-height: 1;\n  letter-spacing: 0;\n  cursor: pointer;\n}\n\n.shared-checkout-v2-card-submit:disabled {\n  cursor: wait;\n  opacity: 0.72;\n}\n\n.shared-checkout-v2-card-submit-icon {\n  width: 26px;\n  height: 26px;\n}\n\n.shared-checkout-v2-card-brands {\n  min-height: 34px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 12px;\n  opacity: 0.95;\n}\n\n.shared-checkout-v2-card-brand {\n  width: 42px;\n  height: 25px;\n}\n\n.shared-checkout-v2-secure-pill--card {\n  position: absolute;\n  left: 50%;\n  bottom: 16px;\n  transform: translateX(-50%);\n  white-space: nowrap;\n}\n\n.shared-checkout-v2-sr-only {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border: 0;\n}\n\n.shared-checkout-special-offer-overlay {\n  position: fixed;\n  inset: 0;\n  z-index: 120;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  padding: 22px;\n  background: rgb(0 0 0 / 48%);\n}\n\n.shared-checkout-special-offer-dialog {\n  width: min(100%, 386px);\n  box-sizing: border-box;\n  border-radius: 14px;\n  background: #fff;\n  padding: 55px 26px 28px;\n  color: #303136;\n  text-align: center;\n  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n}\n\n.shared-checkout-special-offer-gift {\n  display: block;\n  width: min(100%, 260px);\n  height: auto;\n  margin: 0 auto 22px;\n}\n\n.shared-checkout-special-offer-gift--image {\n  position: relative;\n  width: min(100%, 250px);\n  aspect-ratio: 1;\n}\n\n.shared-checkout-special-offer-gift-image {\n  display: block;\n  width: 100%;\n  height: 100%;\n  background-position: center;\n  background-repeat: no-repeat;\n  background-size: contain;\n  user-select: none;\n}\n\n.shared-checkout-special-offer-image-discount {\n  position: absolute;\n  top: 69%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  color: #1f8f4d;\n  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n  font-size: 34px;\n  font-weight: 900;\n  line-height: 1;\n  letter-spacing: 0;\n  pointer-events: none;\n  white-space: nowrap;\n}\n\n.shared-checkout-special-offer-dialog h2 {\n  margin: 0;\n  color: #303136;\n  font-size: 36px;\n  font-weight: 900;\n  line-height: 1.1;\n  letter-spacing: 0;\n}\n\n.shared-checkout-special-offer-dialog p {\n  margin: 26px 0 32px;\n  color: #77787e;\n  font-size: 24px;\n  font-weight: 500;\n  line-height: 1.18;\n  letter-spacing: 0;\n}\n\n.shared-checkout-special-offer-button {\n  width: 100%;\n  min-height: 76px;\n  border: 0;\n  border-radius: 12px;\n  background: var(--shared-checkout-v2-button-color);\n  color: #fff;\n  font-size: 23px;\n  font-weight: 900;\n  line-height: 1;\n  letter-spacing: 0;\n  cursor: pointer;\n}\n\n@media (max-width: 429px) {\n  .shared-checkout-v2-header {\n    min-height: 64px;\n  }\n\n  .shared-checkout-v2-header h2 {\n    font-size: 24px;\n  }\n\n  .shared-checkout-v2-summary {\n    padding-inline: 17px;\n  }\n\n  .shared-checkout-v2-satisfaction {\n    font-size: 19px;\n  }\n\n  .shared-checkout-v2-methods {\n    gap: 42px;\n  }\n\n  .shared-checkout-v2-method strong {\n    font-size: 19px;\n  }\n\n  .shared-checkout-v2-card-panel {\n    padding-inline: 32px;\n  }\n}\n\n.shared-checkout-v2-inline { width: 100%; min-width: 0; }\n.shared-checkout-v2-inline .shared-checkout-v2-shell {\n  height: auto; max-height: none; overflow: visible; background: #fff; color: #303136;\n}\n.shared-checkout-v2-inline .shared-checkout-v2-shell .shared-checkout-v2-payment {\n  padding: 0; margin: 0; background: #fff;\n}\n.shared-checkout-v2-inline .shared-checkout-v2-card-submit {\n  border-radius: 12px; background: var(--shared-checkout-v2-button-color); text-transform: none;\n}\n\n.shared-checkout-v2-inline .shared-checkout-v2-card-panel {\n  margin: 0; padding: 0; background: #fff;\n}\n.shared-checkout-v2-inline .shared-checkout-v2-email-control { border-radius: 12px; }\n.shared-checkout-v2-inline .shared-checkout-v2-email-input { font-size: 14px; }\n.shared-checkout-v2-inline .shared-checkout-v2-secure-pill { font-size: 11px; min-height: 32px; position: static; transform: none; align-self: center; white-space: normal; }\n";
+export declare const sharedStripeCheckoutV2Styles = "\n.shared-checkout-v2-overlay {\n  position: fixed;\n  inset: 0;\n  z-index: 110;\n  display: flex;\n  align-items: stretch;\n  justify-content: center;\n  overflow: hidden;\n  background: #fff;\n}\n\n.shared-checkout-v2-dialog {\n  width: min(100%, 430px);\n  height: 100svh;\n  max-height: 100svh;\n  overflow: hidden;\n  background: #fff;\n}\n\n@media (min-width: 640px) {\n  .shared-checkout-v2-overlay:has(.shared-checkout-v2-dialog[data-variant='compact']) {\n    align-items: center;\n    padding: 24px;\n    background: rgb(0 0 0 / 48%);\n  }\n\n  .shared-checkout-v2-dialog[data-variant='compact'] {\n    width: min(100%, 520px);\n    height: auto;\n    max-height: calc(100svh - 48px);\n    border-radius: 24px;\n    box-shadow: 0 24px 70px rgb(0 0 0 / 28%);\n  }\n}\n\n.shared-checkout-v2-shell[data-variant='compact'] {\n  height: auto;\n  max-height: min(100svh, 760px);\n}\n\n.shared-checkout-v2-shell[data-variant='compact'] .shared-checkout-v2-header {\n  min-height: 88px;\n  padding: 0 72px;\n}\n\n.shared-checkout-v2-shell[data-variant='compact'] .shared-checkout-v2-header h2 {\n  font-size: 27px;\n}\n\n.shared-checkout-v2-shell[data-variant='compact'] .shared-checkout-v2-close {\n  right: 22px;\n  left: auto;\n}\n\n.shared-checkout-v2-shell[data-variant='compact'] .shared-checkout-v2-summary {\n  padding: 0 36px;\n}\n\n.shared-checkout-v2-shell[data-variant='compact'] .shared-checkout-v2-total {\n  min-height: 82px;\n  border: 1px solid #ececef;\n  border-radius: 16px;\n  padding: 0 22px;\n  background: #fbfbfc;\n}\n\n.shared-checkout-v2-shell[data-variant='compact'] .shared-checkout-v2-total svg {\n  display: none;\n}\n\n.shared-checkout-v2-shell[data-variant='compact'] .shared-checkout-v2-payment {\n  padding-right: 36px;\n  padding-left: 36px;\n}\n\n.shared-checkout-v2-shell[data-variant='compact'] .shared-checkout-v2-card-submit {\n  border-radius: 14px;\n  background: var(--shared-checkout-v2-button-color);\n  text-transform: none;\n}\n\n.shared-checkout-v2-shell {\n  height: 100%;\n  max-height: 100svh;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  overflow-y: auto;\n  overflow-x: hidden;\n  -webkit-overflow-scrolling: touch;\n  background: #fff;\n  color: #303136;\n  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n}\n\n.shared-checkout-v2-verifying,\n.shared-checkout-v2-confirmed {\n  box-sizing: border-box;\n  min-height: 100%;\n  margin: 0;\n  padding: 32px 24px;\n  background: #fff;\n  color: #303136;\n  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n  font-size: 16px;\n  line-height: 1.5;\n}\n\n.shared-checkout-v2-verifying p {\n  margin: 0 0 24px;\n}\n\n.shared-checkout-v2-status-button {\n  min-height: 48px;\n  border: 0;\n  border-radius: 11px;\n  padding: 12px 18px;\n  background: var(--shared-checkout-v2-button-color);\n  color: #fff;\n  font: inherit;\n  font-weight: 700;\n  cursor: pointer;\n}\n\n.shared-checkout-v2-status-button:disabled {\n  cursor: wait;\n  opacity: 0.72;\n}\n\n.shared-checkout-v2-header {\n  position: relative;\n  min-height: 70px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0 56px;\n  background: #fff;\n}\n\n.shared-checkout-v2-header h2 {\n  margin: 0;\n  color: #020203;\n  font-size: 24px;\n  font-weight: 900;\n  line-height: 1.15;\n  letter-spacing: 0;\n  text-align: center;\n}\n\n.shared-checkout-v2-close {\n  position: absolute;\n  left: 16px;\n  top: 50%;\n  width: 40px;\n  height: 40px;\n  border: 0;\n  border-radius: 999px;\n  background: #f2f2f3;\n  color: #aaa;\n  transform: translateY(-50%);\n  cursor: pointer;\n}\n\n.shared-checkout-v2-close span,\n.shared-checkout-v2-close span::after {\n  position: absolute;\n  left: 50%;\n  top: 50%;\n  width: 28px;\n  height: 4px;\n  border-radius: 999px;\n  background: currentColor;\n  content: '';\n}\n\n.shared-checkout-v2-close span {\n  transform: translate(-50%, -50%) rotate(45deg);\n}\n\n.shared-checkout-v2-close span::after {\n  transform: translate(-50%, -50%) rotate(90deg);\n}\n\n.shared-checkout-v2-summary {\n  padding: 0 17px 0;\n  background: #fff;\n}\n\n.shared-checkout-v2-countdown {\n  margin: 0;\n  min-height: 37px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 12px;\n  background: color-mix(in srgb, var(--shared-checkout-v2-theme-color) 10%, #fff);\n  color: var(--shared-checkout-v2-theme-color);\n  font-size: 16px;\n  font-weight: 900;\n  line-height: 1.2;\n  letter-spacing: 0;\n  text-align: center;\n}\n\n.shared-checkout-v2-satisfaction {\n  margin: 17px 0 21px;\n  color: #2f3034;\n  font-size: 19px;\n  font-weight: 800;\n  line-height: 1.15;\n  letter-spacing: 0;\n  text-align: center;\n}\n\n.shared-checkout-v2-satisfaction strong {\n  color: var(--shared-checkout-v2-theme-color);\n}\n\n.shared-checkout-v2-price-stack {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n\n.shared-checkout-v2-price-row {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 12px;\n  font-size: 18px;\n  line-height: 1.2;\n  letter-spacing: 0;\n}\n\n.shared-checkout-v2-price-row.is-muted {\n  color: #9d9d9f;\n  font-size: 17px;\n  font-weight: 500;\n}\n\n.shared-checkout-v2-strike {\n  text-decoration-line: line-through;\n  text-decoration-thickness: 2px;\n}\n\n.shared-checkout-v2-price-row.is-discount {\n  color: #040508;\n  font-size: 17px;\n  font-weight: 900;\n}\n\n.shared-checkout-v2-price-row.is-discount strong:last-child {\n  color: #ff2544;\n}\n\n.shared-checkout-v2-promo {\n  min-height: 42px;\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 12px;\n  border-radius: 13px;\n  background: #f0f0f0;\n  padding: 0 14px;\n  color: #8d8d90;\n  font-size: 16px;\n  font-weight: 500;\n  line-height: 1.1;\n}\n\n.shared-checkout-v2-promo strong {\n  color: #050609;\n  font-weight: 900;\n}\n\n.shared-checkout-v2-total {\n  margin-top: 20px;\n  min-height: 76px;\n  border-top: 1px solid #dedede;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 16px;\n  color: #303136;\n}\n\n.shared-checkout-v2-total span {\n  font-size: 23px;\n  font-weight: 800;\n  line-height: 1;\n}\n\n.shared-checkout-v2-total strong {\n  display: inline-flex;\n  align-items: center;\n  gap: 7px;\n  color: #303136;\n  font-size: 25px;\n  font-weight: 900;\n  line-height: 1;\n}\n\n.shared-checkout-v2-total svg {\n  width: 25px;\n  height: 25px;\n  fill: none;\n  stroke: currentColor;\n  stroke-width: 2;\n  stroke-linejoin: round;\n}\n\n.shared-checkout-v2-total.is-plain {\n  margin-top: 0;\n}\n\n.shared-checkout-v2-saved {\n  width: fit-content;\n  min-height: 36px;\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n  margin: -8px 0 9px auto;\n  border-radius: 12px;\n  background: #ffdce3;\n  padding: 0 14px;\n  color: #ff2544;\n  font-size: 14px;\n  font-weight: 900;\n  line-height: 1.1;\n  letter-spacing: 0;\n}\n\n.shared-checkout-v2-payment {\n  min-height: 0;\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  background: #f2f2f3;\n  padding: 9px 17px 32px;\n}\n\n.shared-checkout-v2-methods {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);\n  gap: 42px;\n}\n\n.shared-checkout-v2-methods[data-paypal='true'] {\n  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);\n  gap: 10px;\n}\n\n.shared-checkout-v2-methods[data-paypal='true'] .shared-checkout-v2-tab-wallets {\n  max-width: 100%;\n  flex-wrap: wrap;\n  gap: 2px;\n}\n\n.shared-checkout-v2-method:disabled { cursor: default; opacity: 0.6; }\n\n.shared-checkout-v2-method {\n  min-width: 0;\n  min-height: 74px;\n  box-sizing: border-box;\n  border: 2px solid #e6e7eb;\n  border-radius: 13px;\n  background: #fff;\n  color: #344376;\n  padding: 9px 8px;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 6px;\n  cursor: pointer;\n}\n\n.shared-checkout-v2-method.is-selected {\n  border: 3px solid #050505;\n}\n\n.shared-checkout-v2-tab-wallet {\n  width: 58px;\n  height: 36px;\n}\n\n.shared-checkout-v2-tab-wallet svg {\n  display: block;\n  width: 100%;\n  height: 100%;\n}\n\n.shared-checkout-v2-tab-wallets {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n}\n\n.shared-checkout-v2-method strong {\n  color: #344376;\n  font-size: 20px;\n  font-weight: 900;\n  line-height: 1;\n  letter-spacing: 0;\n}\n\n.shared-checkout-v2-tab-brands {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  max-width: 100%;\n  gap: 4px;\n}\n\n.shared-checkout-v2-tab-brand {\n  min-width: 0;\n  width: 24px;\n  height: 15px;\n}\n\n.shared-checkout-v2-tab-brand svg {\n  display: block;\n  width: 100%;\n  height: 100%;\n}\n\n.shared-checkout-v2-wallet-panel,\n.shared-checkout-v2-card-panel {\n  display: flex;\n  flex-direction: column;\n  height: 0;\n  overflow: hidden;\n  opacity: 0;\n  pointer-events: none;\n}\n\n.shared-checkout-v2-wallet-panel[hidden],\n.shared-checkout-v2-card-panel[hidden] {\n  display: none;\n}\n\n.shared-checkout-v2-wallet-panel {\n  align-items: center;\n  gap: 22px;\n  padding-top: 5px;\n}\n\n.shared-checkout-v2-secure-pill {\n  width: fit-content;\n  min-height: 47px;\n  box-sizing: border-box;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 12px;\n  margin: 0 auto;\n  border-radius: 12px;\n  background: #dcffd0;\n  padding: 0 22px;\n  color: #207733;\n  font-size: 18px;\n  font-weight: 600;\n  line-height: 1.1;\n  letter-spacing: 0;\n}\n\n.shared-checkout-v2-secure-pill-icon {\n  width: 24px;\n  height: 24px;\n  flex: none;\n  color: #147232;\n}\n\n.shared-checkout-v2-wallet-shell {\n  width: 100%;\n  min-height: 124px;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n}\n\n.shared-checkout-v2-wallet-shell[hidden] { display: none; }\n\n.shared-checkout-v2-paypal-button { width: 100%; }\n\n.shared-checkout-v2-paypal-button[inert],\n.shared-checkout-v2-wallet-shell[inert] { opacity: 0.6; }\n\n.shared-checkout-v2-express-buttons {\n  width: 100%;\n}\n\n.shared-checkout-v2-card-panel {\n  position: relative;\n  gap: 10px;\n  margin-inline: -17px;\n  background: #f2f2f3;\n  padding: 16px 32px 92px;\n}\n\n.shared-checkout-v2-wallet-panel.is-visible,\n.shared-checkout-v2-card-panel.is-visible {\n  height: auto;\n  overflow: visible;\n  opacity: 1;\n  pointer-events: auto;\n}\n\n.shared-checkout-v2-wallet-panel:not(.is-visible),\n.shared-checkout-v2-card-panel:not(.is-visible) {\n  padding-top: 0;\n  padding-bottom: 0;\n}\n\n.shared-checkout-v2-email-field {\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  gap: 7px;\n  border: 0;\n  border-radius: 0;\n  background: transparent;\n  margin-bottom: 14px;\n  padding: 0;\n  color: #303136;\n  font-size: 14px;\n  font-weight: 400;\n  line-height: 1.2;\n}\n\n.shared-checkout-v2-email-field.is-disabled {\n  cursor: default;\n}\n\n.shared-checkout-v2-email-label {\n  padding: 0 14px;\n  color: #303136;\n  font-size: 14px;\n  font-weight: 400;\n  line-height: 1.2;\n}\n\n.shared-checkout-v2-email-control {\n  min-height: 50px;\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  border: 1px solid #dedede;\n  background: #fff;\n  box-shadow: 0 1px 2px rgb(16 24 40 / 8%);\n  padding: 0 14px;\n}\n\n.shared-checkout-v2-email-input {\n  width: 100%;\n  min-height: 48px;\n  box-sizing: border-box;\n  border: 0;\n  background: transparent;\n  padding: 0;\n  color: #303136;\n  font: inherit;\n  font-size: 18px;\n  font-weight: 400;\n  line-height: 1.2;\n  outline: none;\n}\n\n.shared-checkout-v2-email-input:disabled {\n  color: #74767c;\n  opacity: 1;\n  -webkit-text-fill-color: #74767c;\n}\n\n.shared-checkout-v2-email-input::placeholder {\n  color: #8c909a;\n}\n\n.shared-checkout-v2-card-box {\n  overflow: visible;\n  border: 0;\n  border-radius: 6px;\n  background: transparent;\n  box-shadow: none;\n}\n\n.shared-checkout-v2-country-field {\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  gap: 7px;\n  margin: 14px 0 0;\n  color: #303136;\n  font-size: 14px;\n  font-weight: 400;\n  line-height: 1.2;\n}\n\n.shared-checkout-v2-country-label {\n  padding: 0 14px;\n}\n\n.shared-checkout-v2-country-control {\n  position: relative;\n  display: block;\n}\n\n.shared-checkout-v2-country-control::after {\n  position: absolute;\n  right: 17px;\n  top: 50%;\n  width: 8px;\n  height: 8px;\n  border-right: 2px solid #6f7380;\n  border-bottom: 2px solid #6f7380;\n  content: '';\n  pointer-events: none;\n  transform: translateY(-65%) rotate(45deg);\n}\n\n.shared-checkout-v2-country-select {\n  width: 100%;\n  min-height: 50px;\n  box-sizing: border-box;\n  appearance: none;\n  border: 1px solid #dedede;\n  border-radius: 0;\n  background: #fff;\n  box-shadow: 0 1px 2px rgb(16 24 40 / 8%);\n  color: #303136;\n  font: inherit;\n  font-size: 18px;\n  font-weight: 400;\n  line-height: 1.2;\n  outline: none;\n  padding: 0 44px 0 14px;\n}\n\n.shared-checkout-v2-error {\n  margin: 0;\n  color: #c43737;\n  font-size: 13px;\n  font-weight: 600;\n  line-height: 1.35;\n}\n\n.shared-checkout-v2-card-submit {\n  min-height: 60px;\n  border: 0;\n  border-radius: 11px;\n  background: var(--shared-checkout-v2-button-color);\n  color: #fff;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 14px;\n  font-size: 22px;\n  font-weight: 900;\n  line-height: 1;\n  letter-spacing: 0;\n  cursor: pointer;\n}\n\n.shared-checkout-v2-card-submit:disabled {\n  cursor: wait;\n  opacity: 0.72;\n}\n\n.shared-checkout-v2-card-submit-icon {\n  width: 26px;\n  height: 26px;\n}\n\n.shared-checkout-v2-card-brands {\n  min-height: 34px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 12px;\n  opacity: 0.95;\n}\n\n.shared-checkout-v2-card-brand {\n  width: 42px;\n  height: 25px;\n}\n\n.shared-checkout-v2-secure-pill--card {\n  position: absolute;\n  left: 50%;\n  bottom: 16px;\n  transform: translateX(-50%);\n  white-space: nowrap;\n}\n\n.shared-checkout-v2-sr-only {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border: 0;\n}\n\n.shared-checkout-special-offer-overlay {\n  position: fixed;\n  inset: 0;\n  z-index: 120;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  padding: 22px;\n  background: rgb(0 0 0 / 48%);\n}\n\n.shared-checkout-special-offer-dialog {\n  width: min(100%, 386px);\n  box-sizing: border-box;\n  border-radius: 14px;\n  background: #fff;\n  padding: 55px 26px 28px;\n  color: #303136;\n  text-align: center;\n  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n}\n\n.shared-checkout-special-offer-gift {\n  display: block;\n  width: min(100%, 260px);\n  height: auto;\n  margin: 0 auto 22px;\n}\n\n.shared-checkout-special-offer-gift--image {\n  position: relative;\n  width: min(100%, 250px);\n  aspect-ratio: 1;\n}\n\n.shared-checkout-special-offer-gift-image {\n  display: block;\n  width: 100%;\n  height: 100%;\n  background-position: center;\n  background-repeat: no-repeat;\n  background-size: contain;\n  user-select: none;\n}\n\n.shared-checkout-special-offer-image-discount {\n  position: absolute;\n  top: 69%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  color: #1f8f4d;\n  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n  font-size: 34px;\n  font-weight: 900;\n  line-height: 1;\n  letter-spacing: 0;\n  pointer-events: none;\n  white-space: nowrap;\n}\n\n.shared-checkout-special-offer-dialog h2 {\n  margin: 0;\n  color: #303136;\n  font-size: 36px;\n  font-weight: 900;\n  line-height: 1.1;\n  letter-spacing: 0;\n}\n\n.shared-checkout-special-offer-dialog p {\n  margin: 26px 0 32px;\n  color: #77787e;\n  font-size: 24px;\n  font-weight: 500;\n  line-height: 1.18;\n  letter-spacing: 0;\n}\n\n.shared-checkout-special-offer-button {\n  width: 100%;\n  min-height: 76px;\n  border: 0;\n  border-radius: 12px;\n  background: var(--shared-checkout-v2-button-color);\n  color: #fff;\n  font-size: 23px;\n  font-weight: 900;\n  line-height: 1;\n  letter-spacing: 0;\n  cursor: pointer;\n}\n\n@media (max-width: 429px) {\n  .shared-checkout-v2-header {\n    min-height: 64px;\n  }\n\n  .shared-checkout-v2-header h2 {\n    font-size: 24px;\n  }\n\n  .shared-checkout-v2-summary {\n    padding-inline: 17px;\n  }\n\n  .shared-checkout-v2-satisfaction {\n    font-size: 19px;\n  }\n\n  .shared-checkout-v2-methods {\n    gap: 42px;\n  }\n\n  .shared-checkout-v2-method strong {\n    font-size: 19px;\n  }\n\n  .shared-checkout-v2-card-panel {\n    padding-inline: 32px;\n  }\n}\n\n.shared-checkout-v2-inline { width: 100%; min-width: 0; }\n.shared-checkout-v2-inline .shared-checkout-v2-shell {\n  height: auto; max-height: none; overflow: visible; background: #fff; color: #303136;\n}\n.shared-checkout-v2-inline .shared-checkout-v2-shell .shared-checkout-v2-payment {\n  padding: 0; margin: 0; background: #fff;\n}\n.shared-checkout-v2-inline .shared-checkout-v2-card-submit {\n  border-radius: 12px; background: var(--shared-checkout-v2-button-color); text-transform: none;\n}\n\n.shared-checkout-v2-inline .shared-checkout-v2-card-panel {\n  margin: 0; padding: 0; background: #fff;\n}\n.shared-checkout-v2-inline .shared-checkout-v2-email-control { border-radius: 12px; }\n.shared-checkout-v2-inline .shared-checkout-v2-email-input { font-size: 14px; }\n.shared-checkout-v2-inline .shared-checkout-v2-secure-pill { font-size: 11px; min-height: 32px; position: static; transform: none; align-self: center; white-space: normal; }\n";

package/dist/providers/stripe/components/SharedStripeCheckoutV2.styles.js

@@ -349,6 +349,19 @@ export const sharedStripeCheckoutV2Styles = `
   gap: 42px;
 }
 
+.shared-checkout-v2-methods[data-paypal='true'] {
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+  gap: 10px;
+}
+
+.shared-checkout-v2-methods[data-paypal='true'] .shared-checkout-v2-tab-wallets {
+  max-width: 100%;
+  flex-wrap: wrap;
+  gap: 2px;
+}
+
+.shared-checkout-v2-method:disabled { cursor: default; opacity: 0.6; }
+
 .shared-checkout-v2-method {
   min-width: 0;
   min-height: 74px;
@@ -471,6 +484,13 @@ export const sharedStripeCheckoutV2Styles = `
   justify-content: center;
 }
 
+.shared-checkout-v2-wallet-shell[hidden] { display: none; }
+
+.shared-checkout-v2-paypal-button { width: 100%; }
+
+.shared-checkout-v2-paypal-button[inert],
+.shared-checkout-v2-wallet-shell[inert] { opacity: 0.6; }
+
 .shared-checkout-v2-express-buttons {
   width: 100%;
 }

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

@@ -1,4 +1,4 @@
-import { type CSSProperties } from 'react';
+import { type CSSProperties, type ReactNode } from 'react';
 import type { Stripe } from '@stripe/stripe-js';
 import { type StripeSubscriptionCheckoutAnalyticsContext } from '../services/checkoutCompletionAnalytics.service.js';
 import type { SharedStripeCheckoutV2Copy } from './checkout-v2.content.js';
@@ -38,6 +38,9 @@ export type SharedStripeCheckoutV2DialogProps = {
     onPaymentInfoSubmitted?: () => void | Promise<void>;
     onSuccess?: () => void | Promise<void>;
     paymentMethodLabels?: readonly string[];
+    /** Native PayPal checkout for the selected Offer Set binding, alongside Apple Pay and Google Pay. */
+    paypalCheckout?: ReactNode;
+    paypalPending?: boolean;
     paypalButtonLabel: string;
     paypalLabel: string;
     promoActive?: boolean;

package/dist/providers/stripe/components/SharedStripeCheckoutV2Form.internal.d.ts

@@ -3,5 +3,5 @@ export declare const getFixedSupportedBillingCountry: (supportedCountries: reado
 type SharedStripeCheckoutV2FormProps = Omit<SharedStripeCheckoutV2DialogProps, 'stripePromise' | 'onClose'> & {
     onClose: () => void;
 };
-export declare function SharedStripeCheckoutV2CheckoutSessionForm({ copy, amountCents, buttonColor, cardSubmitLabel, closeAriaLabel, countdownLabel, checkoutAnalytics, checkoutSessionId, customerEmail, customerEmailEditable: allowEmailEditing, customerEmailLabel, customerEmailPlaceholder, customerEmailInvalidMessage, customerName, discountAmountLabel, discountLabel, discountPercent, initialWalletAvailable, onClose, onWalletCancel, onCustomerEmailChange, onCustomerEmailCommit, onError, onInactiveCheckoutSession, onPaymentInfoSubmitted, onSuccess, paymentMethodLabels, promoActive, processingLabel, promoCode, promoCodeLabel, remainingSeconds, returnUrl, savedLabel, secureLabel, satisfactionLabel, satisfactionPercent, summaryLabel, supportedCountries, themeColor, title, totalLabel, totalValue, unsupportedCountryMessage, walletButtonLabel, originalPriceLabel, originalPriceValue, variant, presentation, }: SharedStripeCheckoutV2FormProps): import("react/jsx-runtime").JSX.Element;
+export declare function SharedStripeCheckoutV2CheckoutSessionForm({ copy, amountCents, buttonColor, cardSubmitLabel, closeAriaLabel, countdownLabel, checkoutAnalytics, checkoutSessionId, customerEmail, customerEmailEditable: allowEmailEditing, customerEmailLabel, customerEmailPlaceholder, customerEmailInvalidMessage, customerName, discountAmountLabel, discountLabel, discountPercent, initialWalletAvailable, onClose, onWalletCancel, onCustomerEmailChange, onCustomerEmailCommit, onError, onInactiveCheckoutSession, onPaymentInfoSubmitted, onSuccess, paymentMethodLabels, paypalCheckout, paypalPending, paypalLabel, promoActive, processingLabel, promoCode, promoCodeLabel, remainingSeconds, returnUrl, savedLabel, secureLabel, satisfactionLabel, satisfactionPercent, summaryLabel, supportedCountries, themeColor, title, totalLabel, totalValue, unsupportedCountryMessage, walletButtonLabel, originalPriceLabel, originalPriceValue, variant, presentation, }: SharedStripeCheckoutV2FormProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/providers/stripe/components/SharedStripeCheckoutV2Form.internal.js

@@ -11,6 +11,7 @@ import { isInactiveCheckoutSessionError } from '../hooks/useStripeSubscriptionCh
 import { getStripeWalletPaymentMethodOrder, usePlatformWalletPaymentMethods } from './walletPlatform.js';
 import { trackPaidStripeSubscriptionCheckoutCompleted, trackStripeSubscriptionPaymentInfoSubmitted } from '../services/checkoutCompletionAnalytics.service.js';
 import { trackCheckoutFailureShown } from '../../../services/checkoutObservability.service.js';
+import { SharedCheckoutPaymentMethods } from './SharedCheckoutPaymentMethods.internal.js';
 import { SharedStripeCheckoutV2Summary } from './SharedStripeCheckoutV2Summary.internal.js';
 import { useCheckoutEmail } from './useCheckoutEmail.internal.js';
 import { defaultCheckoutV2Copy } from './checkout-v2.content.js';
@@ -22,7 +23,7 @@ function getFriendlyCardErrorMessage(error, fallback) {
         ? error.message
         : fallback;
 }
-export function SharedStripeCheckoutV2CheckoutSessionForm({ copy = defaultCheckoutV2Copy, amountCents, buttonColor, cardSubmitLabel, closeAriaLabel, countdownLabel, checkoutAnalytics, checkoutSessionId, customerEmail, customerEmailEditable: allowEmailEditing = false, customerEmailLabel = 'Email', customerEmailPlaceholder = 'Enter your email', customerEmailInvalidMessage = 'Enter a valid email address.', customerName, discountAmountLabel, discountLabel, discountPercent, initialWalletAvailable, onClose, onWalletCancel, onCustomerEmailChange, onCustomerEmailCommit, onError, onInactiveCheckoutSession, onPaymentInfoSubmitted, onSuccess, paymentMethodLabels = defaultPaymentMethodLabels, promoActive, processingLabel, promoCode, promoCodeLabel, remainingSeconds, returnUrl, savedLabel, secureLabel, satisfactionLabel, satisfactionPercent, summaryLabel, supportedCountries, themeColor, title, totalLabel, totalValue, unsupportedCountryMessage, walletButtonLabel, originalPriceLabel, originalPriceValue, variant = 'standard', presentation = 'dialog', }) {
+export function SharedStripeCheckoutV2CheckoutSessionForm({ copy = defaultCheckoutV2Copy, amountCents, buttonColor, cardSubmitLabel, closeAriaLabel, countdownLabel, checkoutAnalytics, checkoutSessionId, customerEmail, customerEmailEditable: allowEmailEditing = false, customerEmailLabel = 'Email', customerEmailPlaceholder = 'Enter your email', customerEmailInvalidMessage = 'Enter a valid email address.', customerName, discountAmountLabel, discountLabel, discountPercent, initialWalletAvailable, onClose, onWalletCancel, onCustomerEmailChange, onCustomerEmailCommit, onError, onInactiveCheckoutSession, onPaymentInfoSubmitted, onSuccess, paymentMethodLabels = defaultPaymentMethodLabels, paypalCheckout, paypalPending = false, paypalLabel, promoActive, processingLabel, promoCode, promoCodeLabel, remainingSeconds, returnUrl, savedLabel, secureLabel, satisfactionLabel, satisfactionPercent, summaryLabel, supportedCountries, themeColor, title, totalLabel, totalValue, unsupportedCountryMessage, walletButtonLabel, originalPriceLabel, originalPriceValue, variant = 'standard', presentation = 'dialog', }) {
     const checkoutState = useCheckout();
     const walletPaymentMethods = usePlatformWalletPaymentMethods();
     const [selectedMethod, setSelectedMethod] = useState('wallet');
@@ -31,6 +32,7 @@ export function SharedStripeCheckoutV2CheckoutSessionForm({ copy = defaultChecko
         ? true
         : walletAvailable;
     const [submitting, setSubmitting] = useState(false);
+    const [walletConfirming, setWalletConfirming] = useState(false);
     const [completed, setCompleted] = useState(false);
     const [providerConfirmed, setProviderConfirmed] = useState(false);
     const submitInFlightRef = useRef(false);
@@ -61,14 +63,17 @@ export function SharedStripeCheckoutV2CheckoutSessionForm({ copy = defaultChecko
         '--shared-checkout-v2-button-color': buttonColor,
     };
     const expressCheckoutSummaryLabel = (summaryLabel === null || summaryLabel === void 0 ? void 0 : summaryLabel.trim()) || discountLabel || title;
-    const walletAriaLabel = walletPaymentMethods
-        .map((method) => method === 'applePay' ? walletButtonLabel : 'Google Pay')
-        .join(' / ');
+    const showPayPalMethod = presentation === 'dialog' && Boolean(paypalCheckout);
+    const walletAriaLabel = [
+        ...(showPayPalMethod ? [paypalLabel] : []),
+        ...walletPaymentMethods.map((method) => method === 'applePay' ? walletButtonLabel : 'Google Pay'),
+    ].join(' / ');
     const walletEmailReady = !emailSessionChanged && isValidEmail(initialCustomerEmail)
         && rejectedEmail === null && resolvedCustomerEmail === initialCustomerEmail;
-    const showWalletMethod = presentation !== 'inline' && walletEmailReady
+    const showPlatformWallets = presentation !== 'inline' && walletEmailReady
         && effectiveWalletAvailable !== false && walletPaymentMethods.length > 0;
-    const effectiveSelectedMethod = showWalletMethod && selectedMethod === 'wallet' ? 'wallet' : 'card';
+    const showWalletMethod = showPlatformWallets || showPayPalMethod;
+    const effectiveSelectedMethod = showWalletMethod && (paypalPending || selectedMethod === 'wallet') ? 'wallet' : 'card';
     const expressCheckoutOptions = useMemo(() => {
         return {
             buttonHeight: 55,
@@ -145,14 +150,15 @@ export function SharedStripeCheckoutV2CheckoutSessionForm({ copy = defaultChecko
         onError === null || onError === void 0 ? void 0 : onError(message);
     };
     const selectWalletMethod = () => {
-        if (showWalletMethod) {
+        if (showWalletMethod && !paypalPending && !submitting) {
             setSelectedMethod('wallet');
         }
     };
-    const selectCardMethod = () => setSelectedMethod('card');
+    const selectCardMethod = () => { if (!paypalPending && !submitting)
+        setSelectedMethod('card'); };
     const handleWalletAvailabilityChange = (available) => {
         setWalletAvailable(available);
-        if (!available && selectedMethod === 'wallet') {
+        if (!available && !showPayPalMethod && selectedMethod === 'wallet') {
             setSelectedMethod('card');
         }
     };
@@ -190,6 +196,8 @@ export function SharedStripeCheckoutV2CheckoutSessionForm({ copy = defaultChecko
     }, [effectiveSelectedMethod]);
     const handleSubmit = async (event) => {
         event.preventDefault();
+        if (paypalPending)
+            return;
         if (submitInFlightRef.current || (emailSessionChanged && !providerConfirmed)) {
             return;
         }
@@ -263,22 +271,20 @@ export function SharedStripeCheckoutV2CheckoutSessionForm({ copy = defaultChecko
         return _jsxs("form", { onSubmit: handleSubmit, className: 'shared-checkout-v2-verifying', style: checkoutStyle, children: [_jsx("p", { role: error ? 'alert' : 'status', children: error || copy.verifyingPayment }), _jsx("button", { type: 'submit', disabled: submitting, className: 'shared-checkout-v2-status-button', children: copy.checkPaymentStatus })] });
     if (completed)
         return _jsx("div", { role: 'status', className: 'shared-checkout-v2-confirmed', style: checkoutStyle, children: copy.paymentConfirmed });
-    return (_jsxs("div", { className: 'shared-checkout-v2-shell', "data-variant": variant, style: checkoutStyle, children: [presentation === 'dialog' ? _jsxs(_Fragment, { 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 })] }), _jsx(SharedStripeCheckoutV2Summary, { countdownUnit: copy.countdownUnit, discountPercent, countdownLabel, remainingSeconds, variant, satisfactionPercent, satisfactionLabel, originalPriceLabel, originalPriceValue, discountLabel, discountAmountLabel, promoCodeLabel, promoCode, totalLabel, totalValue, savedLabel, showPromo })] }) : 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": copy.paymentMethodLabel, 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 })] }), _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: copy.cardLabel }), _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, presentation === 'dialog' ? _jsxs("div", { hidden: effectiveSelectedMethod !== 'wallet', className: [
+    return (_jsxs("div", { className: 'shared-checkout-v2-shell', "data-variant": variant, style: checkoutStyle, children: [presentation === 'dialog' ? _jsxs(_Fragment, { 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 })] }), !(showPayPalMethod && effectiveSelectedMethod === 'wallet') ? _jsx(SharedStripeCheckoutV2Summary, { countdownUnit: copy.countdownUnit, discountPercent, countdownLabel, remainingSeconds, variant, satisfactionPercent, satisfactionLabel, originalPriceLabel, originalPriceValue, discountLabel, discountAmountLabel, promoCodeLabel, promoCode, totalLabel, totalValue, savedLabel, showPromo }) : null] }) : null, _jsxs("form", { className: 'shared-checkout-v2-payment', onSubmit: (event) => void handleSubmit(event), children: [showWalletMethod || showPayPalMethod ? (_jsx(SharedCheckoutPaymentMethods, { showWalletMethod: showWalletMethod, showPayPalMethod: showPayPalMethod, selectedMethod: effectiveSelectedMethod, disabled: paypalPending || submitting || walletConfirming, paymentMethodLabel: copy.paymentMethodLabel, cardLabel: copy.cardLabel, walletAriaLabel: walletAriaLabel, walletPaymentMethods: walletPaymentMethods, cardBrandLabels: cardBrandLabels, onWalletSelect: selectWalletMethod, onCardSelect: selectCardMethod })) : null, presentation === 'dialog' ? _jsxs("div", { hidden: effectiveSelectedMethod !== 'wallet', className: [
                             'shared-checkout-v2-wallet-panel',
                             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(StripeCheckoutExpressCheckoutButton, { amountCents: amountCents, availabilityPaymentMethods: walletPaymentMethods, beforeConfirm: ensureCustomerEmail, checkoutAnalytics: checkoutAnalytics, checkoutSessionId: checkoutSessionId, className: 'shared-checkout-v2-express-buttons', confirmEmail: false, customerEmail: resolvedCustomerEmail, customerName: customerName, initialAvailable: initialWalletAvailable, keepInitialAvailableOnReady: initialWalletAvailable === true, onAvailabilityChange: handleWalletAvailabilityChange, onCancel: onWalletCancel, onError: (message) => setSharedError(message, true), onPaymentInfoSubmitted: onPaymentInfoSubmitted, onPaymentRejected: () => setSelectedMethod('card'), onSuccess: () => trackCheckoutSuccess(), onEmbeddedComplete: () => setCompleted(true), onVerificationPending: () => setProviderConfirmed(true), options: expressCheckoutOptions, returnUrl: returnUrl, summaryLabel: expressCheckoutSummaryLabel, supportedCountries: normalizedSupportedCountries, unsupportedCountryMessage: unsupportedCountryMessage }), _jsx("span", { className: 'shared-checkout-v2-sr-only', children: walletAriaLabel })] })] }) : null, _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] }), showPayPalMethod && effectiveSelectedMethod === 'wallet' ? _jsx("div", { className: 'shared-checkout-v2-paypal-button', "aria-label": paypalLabel, inert: walletConfirming || submitting, children: paypalCheckout }) : null, _jsxs("div", { inert: paypalPending, hidden: !showPlatformWallets, className: 'shared-checkout-v2-wallet-shell', "aria-label": walletAriaLabel, children: [_jsx(StripeCheckoutExpressCheckoutButton, { amountCents: amountCents, availabilityPaymentMethods: walletPaymentMethods, beforeConfirm: async () => {
+                                            if (paypalPending)
+                                                return null;
+                                            setWalletConfirming(true);
+                                            const email = await ensureCustomerEmail();
+                                            if (!email)
+                                                setWalletConfirming(false);
+                                            return email;
+                                        }, checkoutAnalytics: checkoutAnalytics, checkoutSessionId: checkoutSessionId, className: 'shared-checkout-v2-express-buttons', confirmEmail: false, customerEmail: resolvedCustomerEmail, customerName: customerName, initialAvailable: initialWalletAvailable, keepInitialAvailableOnReady: initialWalletAvailable === true, onAvailabilityChange: handleWalletAvailabilityChange, onCancel: () => { setWalletConfirming(false); onWalletCancel === null || onWalletCancel === void 0 ? void 0 : onWalletCancel(); }, onError: (message) => setSharedError(message, true), onPaymentInfoSubmitted: onPaymentInfoSubmitted, onPaymentRejected: () => { setWalletConfirming(false); setSelectedMethod('card'); }, onSuccess: () => trackCheckoutSuccess(), onEmbeddedComplete: () => setCompleted(true), onVerificationPending: () => setProviderConfirmed(true), options: expressCheckoutOptions, returnUrl: returnUrl, summaryLabel: expressCheckoutSummaryLabel, supportedCountries: normalizedSupportedCountries, unsupportedCountryMessage: unsupportedCountryMessage }), _jsx("span", { className: 'shared-checkout-v2-sr-only', children: walletAriaLabel })] })] }) : null, _jsxs("div", { hidden: effectiveSelectedMethod !== 'card', className: [
                             'shared-checkout-v2-card-panel',
                             effectiveSelectedMethod === 'card' ? 'is-visible' : '',
                         ]

package/package.json

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