@funnelsgrove/payments 0.34.0 → 0.35.0

package/README.md

@@ -43,10 +43,12 @@ Pass `presentation='inline'` to embed a card-only form in the paywall. The host
 
 For a mixed Stripe/PayPal Offer Set, pass the selected binding's `PayPalCheckout`
 as `paypalCheckout` to `SharedStripeCheckoutV2Dialog`. It appears in the checkout
-method picker alongside available wallets and card. Forward `onPendingChange`
+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.
-The PayPal panel shows its native billing terms and hides the Stripe discount
-summary. This slot applies only to dialog presentation. A PayPal-only Offer Set
+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.
 

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

@@ -1 +1 @@
-export declare const PAYMENTS_PACKAGE_VERSION = "0.34.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.34.0";
+export const PAYMENTS_PACKAGE_VERSION = "0.35.0";

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/stripe/components/SharedCheckoutPaymentMethods.internal.d.ts

@@ -2,17 +2,15 @@ import type { PlatformWalletPaymentMethod } from './walletPlatform.js';
 type Props = {
     showWalletMethod: boolean;
     showPayPalMethod: boolean;
-    selectedMethod: 'wallet' | 'card' | 'paypal';
+    selectedMethod: 'wallet' | 'card';
     disabled: boolean;
     paymentMethodLabel: string;
     cardLabel: string;
-    paypalLabel: string;
     walletAriaLabel: string;
     walletPaymentMethods: readonly PlatformWalletPaymentMethod[];
     cardBrandLabels: readonly string[];
     onWalletSelect: () => void;
     onCardSelect: () => void;
-    onPayPalSelect: () => void;
 };
-export declare function SharedCheckoutPaymentMethods({ showWalletMethod, showPayPalMethod, selectedMethod, disabled, paymentMethodLabel, cardLabel, paypalLabel, walletAriaLabel, walletPaymentMethods, cardBrandLabels, onWalletSelect, onCardSelect, onPayPalSelect }: Props): import("react/jsx-runtime").JSX.Element;
+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

@@ -1,12 +1,12 @@
 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, paypalLabel, walletAriaLabel, walletPaymentMethods, cardBrandLabels, onWalletSelect, onCardSelect, onPayPalSelect }) {
+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: [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, showPayPalMethod ? _jsxs("button", { type: 'button', role: 'tab', "aria-label": paypalLabel, "aria-selected": selectedMethod === 'paypal', disabled: disabled, onClick: onPayPalSelect, className: `shared-checkout-v2-method ${selectedMethod === 'paypal' ? 'is-selected' : ''}`, children: [_jsx(PaymentBrandMark, { label: 'PayPal', className: 'shared-checkout-v2-tab-wallet' }), _jsx("span", { children: paypalLabel })] }) : null, _jsxs("button", { type: 'button', className: [
+                    .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' : '',
                 ]

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-methods[data-paypal='true'] {\n  grid-template-columns: none;\n  grid-auto-columns: minmax(0, 1fr);\n  grid-auto-flow: column;\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-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

@@ -350,9 +350,7 @@ export const sharedStripeCheckoutV2Styles = `
 }
 
 .shared-checkout-v2-methods[data-paypal='true'] {
-  grid-template-columns: none;
-  grid-auto-columns: minmax(0, 1fr);
-  grid-auto-flow: column;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
   gap: 10px;
 }
 
@@ -486,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

@@ -38,7 +38,7 @@ export type SharedStripeCheckoutV2DialogProps = {
     onPaymentInfoSubmitted?: () => void | Promise<void>;
     onSuccess?: () => void | Promise<void>;
     paymentMethodLabels?: readonly string[];
-    /** Native PayPal checkout for the selected Offer Set binding, inside the method picker. */
+    /** Native PayPal checkout for the selected Offer Set binding, alongside Apple Pay and Google Pay. */
     paypalCheckout?: ReactNode;
     paypalPending?: boolean;
     paypalButtonLabel: string;

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

@@ -26,7 +26,7 @@ function getFriendlyCardErrorMessage(error, 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, 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(paypalPending ? 'paypal' : 'wallet');
+    const [selectedMethod, setSelectedMethod] = useState('wallet');
     const [walletAvailable, setWalletAvailable] = useState(initialWalletAvailable !== null && initialWalletAvailable !== void 0 ? initialWalletAvailable : null);
     const effectiveWalletAvailable = initialWalletAvailable === true && walletAvailable !== false
         ? true
@@ -63,16 +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 showPayPalMethod = presentation === 'dialog' && Boolean(paypalCheckout);
-    const effectiveSelectedMethod = showPayPalMethod && (paypalPending || selectedMethod === 'paypal') ? 'paypal'
-        : showWalletMethod && selectedMethod === 'wallet' ? 'wallet' : 'card';
+    const showWalletMethod = showPlatformWallets || showPayPalMethod;
+    const effectiveSelectedMethod = showWalletMethod && (paypalPending || selectedMethod === 'wallet') ? 'wallet' : 'card';
     const expressCheckoutOptions = useMemo(() => {
         return {
             buttonHeight: 55,
@@ -157,7 +158,7 @@ export function SharedStripeCheckoutV2CheckoutSessionForm({ copy = defaultChecko
         setSelectedMethod('card'); };
     const handleWalletAvailabilityChange = (available) => {
         setWalletAvailable(available);
-        if (!available && selectedMethod === 'wallet') {
+        if (!available && !showPayPalMethod && selectedMethod === 'wallet') {
             setSelectedMethod('card');
         }
     };
@@ -195,7 +196,7 @@ export function SharedStripeCheckoutV2CheckoutSessionForm({ copy = defaultChecko
     }, [effectiveSelectedMethod]);
     const handleSubmit = async (event) => {
         event.preventDefault();
-        if (effectiveSelectedMethod === 'paypal')
+        if (paypalPending)
             return;
         if (submitInFlightRef.current || (emailSessionChanged && !providerConfirmed)) {
             return;
@@ -270,12 +271,14 @@ 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 })] }), effectiveSelectedMethod !== 'paypal' ? _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, paypalLabel: paypalLabel, walletAriaLabel: walletAriaLabel, walletPaymentMethods: walletPaymentMethods, cardBrandLabels: cardBrandLabels, onWalletSelect: selectWalletMethod, onCardSelect: selectCardMethod, onPayPalSelect: () => setSelectedMethod('paypal') })) : null, effectiveSelectedMethod === 'paypal' ? _jsx("div", { role: 'tabpanel', "aria-label": paypalLabel, children: paypalCheckout }) : 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: async () => {
+                            .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)

package/package.json

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