@funnelsgrove/payments 0.1.0 → 0.1.1

package/README.md

@@ -7,30 +7,59 @@ Shared billing and checkout helpers for funnels.
 - Build distributable output with `npm run build --workspace @funnelsgrove/payments`.
 - Publish from the repo root with `npm publish --workspace @funnelsgrove/payments --access public`.
 - The package pins `@funnelsgrove/runtime` to the same exact version and the build resolves against the runtime package's emitted `dist` contract.
+- The build normalizes generated relative ESM imports to explicit `.js` files for published package consumers.
 
 ## Use This Package For
 
 - Stripe plan loading and checkout integration
 - global funnel billing catalog contracts
-- reusable plan-selector and checkout UI
+- reusable plan-selector UI
+- reusable shared embedded checkout dialogs
+- reusable Stripe Express Checkout wrappers for funnels that need native Apple Pay or Google Pay controls outside the shared dialogs
+- provider-ready checkout session primitives that keep paywalls from owning provider SDK setup, client-secret preparation, or wallet-button replacement logic
+- compatibility exports for saved builder paywall drafts, including the Apple Pay subscribe fallback button
 - billing catalog types and runtime helpers
+- reusable paywall offer helpers for timed discounts, discounted display plans, promo labels, and renewal disclaimer text
 
 ## Responsibilities
 
 - keep paywall behavior consistent across funnels
 - define the shared billing types used by funnel-local catalogs
 - expose one ordered funnel-local billing catalog contract
+- keep the public checkout identity contract aligned on `user_id` for payment intents and any remaining hosted-checkout fallbacks
+- keep reusable discount math and display-plan shaping out of funnel step files
+- keep provider-specific implementation under `src/providers/<provider>` so funnels can consume stable payment slots while future providers add their own adapters
 
 ## What Belongs Here
 
 - billing catalog types and normalization helpers
 - Stripe SDK wiring
-- checkout/plan-selector components
+- shared checkout/plan-selector components
+- generic paywall offer helpers that accept funnel-provided plans and discount catalogs
+- the default embedded Stripe checkout dialog UX that funnels can feed with their own copy, pricing summary rows, guarantee note, and an optional editable customer email that is committed before card or wallet confirmation
+- the `StripeExpressCheckoutElement` wrapper, which keeps `Elements` provider ownership inside this package so catalog funnels with their own dependency installs do not pass Stripe promises across duplicate local Stripe type copies
+- `src/providers/paymentProvider.types.ts` for provider-neutral checkout preparation state and provider ids
+- `src/providers/stripe/useStripeSubscriptionCheckoutSession.ts` for Stripe SDK initialization, publishable-key resolution, subscription client-secret preparation, card/wallet loading state, and friendly checkout errors
+- `src/providers/stripe/ApplePaySubscriptionCheckoutSlot.tsx` and `src/providers/stripe/GooglePaySubscriptionCheckoutSlot.tsx` for placeholder-first wallet slots that prepare Stripe Express Checkout on load and swap in Stripe's real wallet controls when available
+- Stripe subscription checkout sessions reuse the active client secret across card checkout and paywall wallet checkout for the same intent key, so opening the embedded checkout after a paywall wallet button is ready does not create a second subscription session.
+- Stripe Express Checkout elements must stay mounted and measurable until Stripe reports availability; only hide the container after `onReady` or `onLoadError` reports that the requested wallet method is unavailable.
+- Shared checkout dialogs must switch to card checkout when Stripe reports no requested wallet availability, so an unavailable Apple Pay or Google Pay shell never leaves a fake wallet tab blocking the card form.
+- Wallet slots should show placeholder wallet CTAs only while availability is unknown; after Stripe reports unavailable, the placeholder must disappear instead of opening a card checkout under wallet branding.
+- Checkout v2 owns only real Stripe Elements for card and wallet collection: Stripe controls the card-field placeholders, Stripe's `ExpressCheckoutElement` controls Apple Pay / Google Pay availability, desktop web can expose both wallet icons, and mobile narrows to Apple Pay on iOS or Google Pay on Android.
+- Checkout v2 can receive a paywall-confirmed wallet availability hint and seed its wallet tab from that state, letting a checkout reopen keep Apple Pay or Google Pay visible while its own Express Checkout element remounts against the same client secret.
+- Checkout v2 renders the wallet tab icons from the active platform wallet list and keeps Apple Pay / Google Pay marks large enough to read inside the tab.
+- Checkout v2 keeps the fixed mobile dialog viewport-bound and scrolls the inner checkout shell so card fields, wallet controls, trust copy, and bottom actions remain reachable on short screens.
+- Checkout v2 renders an editable email field when a funnel opens card checkout without a stored customer email, so direct preview paywall QA can complete Stripe confirmation instead of failing validation invisibly.
+- The shared special-offer dialog can render a funnel-provided gift image while keeping the discount label overlaid and retaining the inline SVG fallback for funnels without a custom asset.
+- the shared large-format Apple Pay and Google Pay subscribe CTAs, QR-code handoff link support, and the compact Visa / Mastercard / G Pay / Apple Pay image row used by the embedded checkout shell trust footer
+- the Google Pay fallback CTA uses the downloaded Google Pay `G` mark paths, keeps at least 8px clear space, and matches Apple Pay's roughly 27px rendered subscribe text size until Stripe replaces it with the real wallet control
 
 ## What Does Not Belong Here
 
 - funnel routing
 - funnel analytics
-- step-specific copy or layout
+- funnel-owned step layout outside the shared checkout shell
 - funnel-owned billing catalog entries
+- funnel-specific decisions about when to activate or upgrade an offer
 - manifest validation
+- direct provider SDK calls inside funnel paywall steps; add provider adapters here first, then wire the funnel to the shared session or slot

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

@@ -0,0 +1,15 @@
+import type { MouseEvent } from 'react';
+type ApplePaySubscribeButtonProps = {
+    className?: string;
+    decorative?: boolean;
+    disabled?: boolean;
+    href?: string;
+    label?: string;
+    onClick?: (event: MouseEvent<HTMLAnchorElement> | MouseEvent<HTMLButtonElement>) => void;
+    rel?: string;
+    target?: string;
+    type?: 'button' | 'submit' | 'reset';
+};
+export declare const APPLE_PAY_QR_CODE_URL = "https://applepay.cdn-apple.com/jsapi/v1.3.2/applepaycode/index.html?newWin=true&origin=https%3A%2F%2Fb.stripecdn.com";
+export declare function ApplePaySubscribeButton({ className, decorative, disabled, href, label, onClick, rel, target, type, }: ApplePaySubscribeButtonProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/shared/ApplePaySubscribeButton.js

@@ -0,0 +1,76 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+export const APPLE_PAY_QR_CODE_URL = 'https://applepay.cdn-apple.com/jsapi/v1.3.2/applepaycode/index.html?newWin=true&origin=https%3A%2F%2Fb.stripecdn.com';
+function ApplePaySubscribeMark() {
+    return (_jsx("svg", { className: 'apple-pay-subscribe-button__mark', viewBox: '0 0 163.56 28.571', "aria-hidden": 'true', children: _jsxs("g", { children: [_jsx("text", { x: '12.5', y: '19.5', style: { letterSpacing: '0.22px' }, textLength: '102.36', children: "Subscribe with" }), _jsx("svg", { x: '124.06', y: '7.92', width: '35', height: '15', viewBox: '0 0 105 43', "aria-hidden": 'true', children: _jsxs("g", { fill: 'currentColor', children: [_jsx("path", { d: 'M19.4028,5.5674 C20.6008,4.0684 21.4138,2.0564 21.1998,0.0004 C19.4458,0.0874 17.3058,1.1574 16.0668,2.6564 C14.9538,3.9414 13.9688,6.0374 14.2258,8.0074 C16.1948,8.1784 18.1618,7.0244 19.4028,5.5674' }), _jsx("path", { d: 'M21.1772,8.3926 C18.3182,8.2226 15.8872,10.0156 14.5212,10.0156 C13.1552,10.0156 11.0642,8.4786 8.8022,8.5196 C5.8592,8.5626 3.1282,10.2276 1.6342,12.8746 C-1.4378,18.1696 0.8232,26.0246 3.8112,30.3376 C5.2622,32.4716 7.0102,34.8206 9.3142,34.7366 C11.4912,34.6506 12.3442,33.3266 14.9902,33.3266 C17.6352,33.3266 18.4042,34.7366 20.7082,34.6936 C23.0972,34.6506 24.5922,32.5586 26.0422,30.4226 C27.7072,27.9906 28.3882,25.6426 28.4312,25.5126 C28.3882,25.4706 23.8232,23.7186 23.7812,18.4676 C23.7382,14.0706 27.3652,11.9786 27.5362,11.8496 C25.4882,8.8196 22.2872,8.4786 21.1772,8.3926' }), _jsx("path", { d: 'M85.5508,43.0381 L85.5508,39.1991 C85.8628,39.2421 86.6158,39.2871 87.0158,39.2871 C89.2138,39.2871 90.4558,38.3551 91.2108,35.9581 L91.6548,34.5371 L83.2428,11.2321 L88.4368,11.2321 L94.2958,30.1421 L94.4068,30.1421 L100.2668,11.2321 L105.3278,11.2321 L96.6048,35.7141 C94.6078,41.3291 92.3208,43.1721 87.4828,43.1721 C87.1048,43.1721 85.8838,43.1271 85.5508,43.0381' }), _jsx("path", { d: 'M42.6499,19.3555 L48.3549,19.3555 C52.6829,19.3555 55.1469,17.0255 55.1469,12.9855 C55.1469,8.9455 52.6829,6.6375 48.3769,6.6375 L42.6499,6.6375 L42.6499,19.3555 Z M49.6869,2.4425 C55.9009,2.4425 60.2289,6.7265 60.2289,12.9625 C60.2289,19.2225 55.8129,23.5285 49.5309,23.5285 L42.6499,23.5285 L42.6499,34.4705 L37.6779,34.4705 L37.6779,2.4425 L49.6869,2.4425 Z' }), _jsx("path", { d: 'M76.5547,25.7705 L76.5547,23.9715 L71.0287,24.3275 C67.9207,24.5275 66.3007,25.6815 66.3007,27.7015 C66.3007,29.6545 67.9887,30.9195 70.6287,30.9195 C74.0027,30.9195 76.5547,28.7665 76.5547,25.7705 M61.4617,27.8345 C61.4617,23.7285 64.5917,21.3755 70.3627,21.0205 L76.5547,20.6425 L76.5547,18.8675 C76.5547,16.2705 74.8457,14.8495 71.8057,14.8495 C69.2967,14.8495 67.4777,16.1375 67.0997,18.1125 L62.6167,18.1125 C62.7497,13.9615 66.6567,10.9435 71.9387,10.9435 C77.6207,10.9435 81.3267,13.9175 81.3267,18.5345 L81.3267,34.4705 L76.7327,34.4705 L76.7327,30.6305 L76.6217,30.6305 C75.3127,33.1395 72.4267,34.7145 69.2967,34.7145 C64.6807,34.7145 61.4617,31.9625 61.4617,27.8345' })] }) })] }) }));
+}
+export function ApplePaySubscribeButton({ className, decorative = false, disabled = false, href, label = 'Subscribe with Apple Pay', onClick, rel, target, type = 'button', }) {
+    const resolvedClassName = ['apple-pay-subscribe-button', decorative ? 'is-decorative' : '', className !== null && className !== void 0 ? className : '']
+        .filter(Boolean)
+        .join(' ');
+    const content = (_jsxs(_Fragment, { children: [_jsx(ApplePaySubscribeMark, {}), !decorative ? _jsx("span", { className: 'apple-pay-subscribe-button__sr-only', children: label }) : null, _jsx("style", { children: applePaySubscribeButtonStyles })] }));
+    if (decorative) {
+        return (_jsx("div", { className: resolvedClassName, "aria-hidden": 'true', children: content }));
+    }
+    if (href && !disabled) {
+        return (_jsx("a", { className: resolvedClassName, href: href, target: target, rel: rel, onClick: (event) => onClick === null || onClick === void 0 ? void 0 : onClick(event), "aria-label": label, children: content }));
+    }
+    return (_jsx("button", { type: type, className: resolvedClassName, onClick: (event) => onClick === null || onClick === void 0 ? void 0 : onClick(event), disabled: disabled, "aria-label": label, children: content }));
+}
+const applePaySubscribeButtonStyles = `
+.apple-pay-subscribe-button {
+  position: relative;
+  display: inline-flex;
+  width: 100%;
+  box-sizing: border-box;
+  height: 64px;
+  min-height: 64px;
+  align-items: center;
+  justify-content: center;
+  border: 0;
+  border-radius: 16px;
+  background: #000;
+  color: #fff;
+  padding: 6px 24px;
+}
+
+.apple-pay-subscribe-button:not(.is-decorative) {
+  cursor: pointer;
+  text-decoration: none;
+}
+
+.apple-pay-subscribe-button:disabled {
+  cursor: not-allowed;
+  opacity: 0.68;
+}
+
+.apple-pay-subscribe-button.is-decorative {
+  pointer-events: none;
+}
+
+.apple-pay-subscribe-button__mark {
+  display: block;
+  width: min(calc(100% - 24px), 292px);
+  height: auto;
+  overflow: visible;
+}
+
+.apple-pay-subscribe-button__mark text {
+  fill: currentColor;
+  font-family: -apple-system, apple-pay-btn-en-US, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  font-size: 15px;
+  font-weight: 500;
+}
+
+.apple-pay-subscribe-button__sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+`;

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

@@ -0,0 +1,12 @@
+type CheckoutBrandAssetProps = {
+    className?: string;
+    label: string;
+};
+export declare function PaymentBrandMark({ className, label }: CheckoutBrandAssetProps): import("react/jsx-runtime").JSX.Element;
+export declare function SecurityLockIcon({ className }: {
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function StripeWordmark({ className }: {
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/shared/CheckoutBrandAssets.js

@@ -0,0 +1,56 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const normalizePaymentBrandLabel = (label) => {
+    return label.trim().toLowerCase().replace(/[^a-z0-9]+/g, '');
+};
+function VisaMark() {
+    return (_jsxs("svg", { viewBox: '0 0 32 20', fill: 'none', "aria-hidden": 'true', children: [_jsx("path", { d: 'M30 0.325H2C1.07492 0.325 0.325 1.07492 0.325 2V18C0.325 18.9251 1.07492 19.675 2 19.675H30C30.9251 19.675 31.675 18.9251 31.675 18V2C31.675 1.07492 30.9251 0.325 30 0.325Z', fill: 'white' }), _jsx("path", { fillRule: 'evenodd', clipRule: 'evenodd', d: 'M11.1253 13.2159H9.40884L8.12171 8.16105C8.06062 7.92853 7.9309 7.72296 7.74009 7.62607C7.2639 7.3826 6.73918 7.18883 6.16675 7.0911V6.89648H8.93182C9.31343 6.89648 9.59965 7.18883 9.64735 7.52835L10.3152 11.1746L12.0308 6.89648H13.6995L11.1253 13.2159ZM14.654 13.2159H13.033L14.3678 6.89648H15.9888L14.654 13.2159ZM18.0854 8.64643C18.1331 8.30606 18.4193 8.11145 18.7532 8.11145C19.2779 8.06259 19.8495 8.16032 20.3265 8.40295L20.6127 7.04234C20.1357 6.84773 19.611 6.75 19.1348 6.75C17.5615 6.75 16.4166 7.62534 16.4166 8.8402C16.4166 9.7644 17.2275 10.2497 17.8 10.542C18.4193 10.8335 18.6578 11.0281 18.6101 11.3196C18.6101 11.7569 18.1331 11.9515 17.6569 11.9515C17.0844 11.9515 16.512 11.8057 15.9881 11.5623L15.7019 12.9237C16.2743 13.1663 16.8936 13.2641 17.4661 13.2641C19.2302 13.3121 20.3265 12.4376 20.3265 11.125C20.3265 9.47206 18.0854 9.37517 18.0854 8.64643ZM26 13.2159L24.7129 6.89648H23.3303C23.0441 6.89648 22.7579 7.0911 22.6625 7.3826L20.2791 13.2159H21.9478L22.2809 12.2926H24.3313L24.5221 13.2159H26ZM23.5693 8.59766L24.0455 10.9794H22.7107L23.5693 8.59766Z', fill: '#172B85' }), _jsx("path", { d: 'M30 0.325H2C1.07492 0.325 0.325 1.07492 0.325 2V18C0.325 18.9251 1.07492 19.675 2 19.675H30C30.9251 19.675 31.675 18.9251 31.675 18V2C31.675 1.07492 30.9251 0.325 30 0.325Z', stroke: 'black', strokeWidth: '0.65' })] }));
+}
+function MastercardMark() {
+    return (_jsxs("svg", { viewBox: '0 0 32 20', fill: 'none', "aria-hidden": 'true', children: [_jsx("path", { d: 'M30 0.325H2C1.07492 0.325 0.325 1.07492 0.325 2V18C0.325 18.9251 1.07492 19.675 2 19.675H30C30.9251 19.675 31.675 18.9251 31.675 18V2C31.675 1.07492 30.9251 0.325 30 0.325Z', fill: 'white' }), _jsx("path", { fillRule: 'evenodd', clipRule: 'evenodd', d: 'M16.3156 14.0245C15.3289 14.8561 14.0491 15.3581 12.6506 15.3581C9.52985 15.3581 7 12.8583 7 9.77474C7 6.69115 9.52985 4.19141 12.6506 4.19141C14.0491 4.19141 15.3289 4.69342 16.3156 5.52502C17.3023 4.69342 18.5821 4.19141 19.9807 4.19141C23.1014 4.19141 25.6312 6.69115 25.6312 9.77474C25.6312 12.8583 23.1014 15.3581 19.9807 15.3581C18.5821 15.3581 17.3023 14.8561 16.3156 14.0245Z', fill: '#ED0006' }), _jsx("path", { fillRule: 'evenodd', clipRule: 'evenodd', d: 'M16.3157 14.0245C17.5307 13.0004 18.3012 11.4765 18.3012 9.77474C18.3012 8.07302 17.5307 6.54911 16.3157 5.52502C17.3024 4.69342 18.5822 4.19141 19.9807 4.19141C23.1014 4.19141 25.6313 6.69115 25.6313 9.77474C25.6313 12.8583 23.1014 15.3581 19.9807 15.3581C18.5822 15.3581 17.3024 14.8561 16.3157 14.0245Z', fill: '#F9A000' }), _jsx("path", { fillRule: 'evenodd', clipRule: 'evenodd', d: 'M16.3156 14.0245C17.5307 13.0004 18.3012 11.4765 18.3012 9.77474C18.3012 8.07302 17.5307 6.54911 16.3156 5.52502C15.1006 6.54911 14.3301 8.07302 14.3301 9.77474C14.3301 11.4765 15.1006 13.0004 16.3156 14.0245Z', fill: '#FF5E00' }), _jsx("path", { d: 'M30 0.325H2C1.07492 0.325 0.325 1.07492 0.325 2V18C0.325 18.9251 1.07492 19.675 2 19.675H30C30.9251 19.675 31.675 18.9251 31.675 18V2C31.675 1.07492 30.9251 0.325 30 0.325Z', stroke: 'black', strokeWidth: '0.65' })] }));
+}
+function PayPalMark() {
+    return (_jsxs("svg", { viewBox: '0 0 34 24', fill: 'none', "aria-hidden": 'true', children: [_jsx("path", { d: 'M30 0.5H4C2.067 0.5 0.5 2.06701 0.5 4V20C0.5 21.933 2.067 23.5 4 23.5H30C31.933 23.5 33.5 21.933 33.5 20V4C33.5 2.06701 31.933 0.5 30 0.5Z', fill: 'white', stroke: '#D9D9D9' }), _jsx("path", { fillRule: 'evenodd', clipRule: 'evenodd', d: 'M14.615 18.4493L14.836 17.0002L14.344 16.9883H11.996L13.628 6.29468C13.633 6.2623 13.649 6.23224 13.673 6.21085C13.697 6.18947 13.728 6.17774 13.76 6.17774H17.719C19.034 6.17774 19.941 6.46037 20.414 7.01832C20.636 7.28006 20.778 7.55365 20.846 7.85462C20.918 8.17049 20.919 8.54783 20.849 9.00813L20.844 9.04161V9.33662L21.066 9.46662C21.253 9.56912 21.402 9.68642 21.515 9.82072C21.705 10.0446 21.828 10.3291 21.88 10.6662C21.934 11.013 21.916 11.4258 21.828 11.893C21.727 12.4305 21.563 12.8986 21.342 13.2815C21.139 13.6344 20.879 13.9272 20.572 14.154C20.278 14.3696 19.929 14.5332 19.534 14.6379C19.152 14.7408 18.716 14.7927 18.238 14.7927H17.929C17.709 14.7927 17.495 14.8747 17.327 15.0217C17.159 15.1718 17.047 15.3768 17.013 15.601L16.99 15.7315L16.6 18.2858L16.582 18.3795C16.578 18.4092 16.57 18.424 16.558 18.434C16.547 18.4432 16.532 18.4493 16.517 18.4493H14.615Z', fill: '#28356A' }), _jsx("path", { fillRule: 'evenodd', clipRule: 'evenodd', d: 'M21.276 9.07618C21.264 9.15426 21.251 9.23405 21.236 9.31602C20.714 12.0866 18.927 13.0438 16.646 13.0438H15.484C15.205 13.0438 14.97 13.2531 14.927 13.5376L14.164 18.5408C14.136 18.7277 14.275 18.8959 14.457 18.8959H16.517C16.761 18.8959 16.968 18.7127 17.007 18.4641L17.027 18.3559L17.415 15.8117L17.44 15.6722C17.478 15.4227 17.686 15.2394 17.929 15.2394H18.238C20.234 15.2394 21.796 14.4018 22.253 11.978C22.443 10.9655 22.345 10.12 21.84 9.52552C21.687 9.34622 21.498 9.19739 21.276 9.07618Z', fill: '#298FC2' }), _jsx("path", { fillRule: 'evenodd', clipRule: 'evenodd', d: 'M20.729 8.84798C20.649 8.82391 20.567 8.80216 20.482 8.78248C20.397 8.7633 20.31 8.74631 20.221 8.73141C19.908 8.67911 19.565 8.6543 19.197 8.6543H16.094C16.018 8.6543 15.945 8.67214 15.88 8.7044C15.737 8.77552 15.631 8.91555 15.605 9.08699L14.945 13.4085L14.926 13.5345C14.969 13.25 15.204 13.0407 15.483 13.0407H16.645C18.926 13.0407 20.712 12.083 21.234 9.31292C21.25 9.23094 21.263 9.15115 21.275 9.07306C21.143 9.0006 21 8.93865 20.846 8.88586C20.808 8.87279 20.768 8.8602 20.729 8.84798Z', fill: '#22284F' }), _jsx("path", { fillRule: 'evenodd', clipRule: 'evenodd', d: 'M15.605 9.08716C15.63 8.91572 15.737 8.77569 15.88 8.70506C15.945 8.67268 16.017 8.65484 16.094 8.65484H19.197C19.564 8.65484 19.908 8.67977 20.221 8.73207C20.31 8.74685 20.397 8.76396 20.482 8.78314C20.566 8.80269 20.649 8.82457 20.729 8.84852C20.768 8.86074 20.807 8.87344 20.846 8.88603C21 8.93882 21.143 9.00126 21.275 9.07323C21.43 8.04936 21.274 7.35224 20.738 6.72099C20.148 6.02594 19.082 5.72852 17.718 5.72852H13.759C13.481 5.72852 13.243 5.93784 13.2 6.2228L11.551 17.0264C11.519 17.2401 11.678 17.4329 11.887 17.4329H14.331L15.605 9.08716Z', fill: '#28356A' })] }));
+}
+function GooglePayMark() {
+    return (_jsxs("svg", { viewBox: '0 0 38 20', fill: 'none', "aria-hidden": 'true', children: [_jsx("path", { d: 'M27.635 0H10.035C4.53504 0 0.0350342 4.5 0.0350342 10C0.0350342 15.5 4.53504 20 10.035 20H27.635C33.135 20 37.635 15.5 37.635 10C37.635 4.5 33.135 0 27.635 0Z', fill: 'white' }), _jsx("path", { d: 'M27.635 0.81C28.87 0.81 30.07 1.055 31.2 1.535C32.295 2 33.275 2.665 34.125 3.51C34.97 4.355 35.635 5.34 36.1 6.435C36.58 7.565 36.825 8.765 36.825 10C36.825 11.235 36.58 12.435 36.1 13.565C35.635 14.66 34.97 15.64 34.125 16.49C33.28 17.335 32.295 18 31.2 18.465C30.07 18.945 28.87 19.19 27.635 19.19H10.035C8.80004 19.19 7.60003 18.945 6.47003 18.465C5.37503 18 4.39503 17.335 3.54503 16.49C2.70003 15.645 2.03503 14.66 1.57003 13.565C1.09003 12.435 0.845034 11.235 0.845034 10C0.845034 8.765 1.09003 7.565 1.57003 6.435C2.03503 5.34 2.70003 4.36 3.54503 3.51C4.39003 2.665 5.37503 2 6.47003 1.535C7.60003 1.055 8.80004 0.81 10.035 0.81H27.635ZM27.635 0H10.035C4.53504 0 0.0350342 4.5 0.0350342 10C0.0350342 15.5 4.53504 20 10.035 20H27.635C33.135 20 37.635 15.5 37.635 10C37.635 4.5 33.135 0 27.635 0Z', fill: '#3C4043' }), _jsx("path", { d: 'M17.965 10.71V13.735H17.005V6.26501H19.55C20.195 6.26501 20.745 6.48002 21.195 6.91002C21.655 7.34002 21.885 7.86502 21.885 8.48502C21.885 9.12002 21.655 9.64502 21.195 10.07C20.75 10.495 20.2 10.705 19.55 10.705H17.965V10.71ZM17.965 7.18502V9.79001H19.57C19.95 9.79001 20.27 9.66002 20.52 9.40502C20.775 9.15002 20.905 8.84001 20.905 8.49001C20.905 8.14501 20.775 7.84002 20.52 7.58502C20.27 7.32002 19.955 7.19001 19.57 7.19001H17.965V7.18502Z', fill: '#3C4043' }), _jsx("path", { d: 'M24.395 8.45502C25.105 8.45502 25.665 8.64502 26.075 9.02502C26.485 9.40502 26.69 9.92502 26.69 10.585V13.735H25.775V13.025H25.735C25.34 13.61 24.81 13.9 24.15 13.9C23.585 13.9 23.115 13.735 22.735 13.4C22.355 13.065 22.165 12.65 22.165 12.15C22.165 11.62 22.365 11.2 22.765 10.89C23.165 10.575 23.7 10.42 24.365 10.42C24.935 10.42 25.405 10.525 25.77 10.735V10.515C25.77 10.18 25.64 9.90002 25.375 9.66502C25.11 9.43002 24.8 9.31502 24.445 9.31502C23.91 9.31502 23.485 9.54002 23.175 9.99502L22.33 9.46502C22.795 8.79002 23.485 8.45502 24.395 8.45502ZM23.155 12.165C23.155 12.415 23.26 12.625 23.475 12.79C23.685 12.955 23.935 13.04 24.22 13.04C24.625 13.04 24.985 12.89 25.3 12.59C25.615 12.29 25.775 11.94 25.775 11.535C25.475 11.3 25.06 11.18 24.525 11.18C24.135 11.18 23.81 11.275 23.55 11.46C23.285 11.655 23.155 11.89 23.155 12.165Z', fill: '#3C4043' }), _jsx("path", { d: 'M31.91 8.62003L28.71 15.98H27.7201L28.91 13.405L26.8 8.62003H27.8451L29.365 12.29H29.385L30.865 8.62003H31.91Z', fill: '#3C4043' }), _jsx("path", { d: 'M14.1465 10.1C14.1465 9.78699 14.1185 9.48749 14.0665 9.19949H10.0425V10.8495L12.36 10.85C12.266 11.399 11.9635 11.867 11.5 12.179V13.2495H12.8795C13.685 12.504 14.1465 11.402 14.1465 10.1Z', fill: '#4285F4' }), _jsx("path", { d: 'M11.5005 12.179C11.1165 12.438 10.622 12.5895 10.0435 12.5895C8.92595 12.5895 7.97795 11.8365 7.63845 10.8215H6.21545V11.9255C6.92045 13.3245 8.36945 14.2845 10.0435 14.2845C11.2005 14.2845 12.1725 13.904 12.88 13.249L11.5005 12.179Z', fill: '#34A853' }), _jsx("path", { d: 'M7.50451 10.0025C7.50451 9.71751 7.55201 9.44201 7.63851 9.18301V8.07901H6.21551C5.92401 8.65751 5.76001 9.31051 5.76001 10.0025C5.76001 10.6945 5.92451 11.3475 6.21551 11.926L7.63851 10.822C7.55201 10.563 7.50451 10.2875 7.50451 10.0025Z', fill: '#FABB05' }), _jsx("path", { d: 'M10.0435 7.415C10.675 7.415 11.2405 7.6325 11.687 8.0575L12.9095 6.836C12.167 6.1445 11.199 5.72 10.0435 5.72C8.36995 5.72 6.92045 6.68 6.21545 8.079L7.63845 9.183C7.97795 8.168 8.92595 7.415 10.0435 7.415Z', fill: '#E94235' })] }));
+}
+function ApplePayMark() {
+    return (_jsxs("svg", { viewBox: '0 0 32 20', fill: 'none', "aria-hidden": 'true', children: [_jsx("path", { d: 'M28.443 0H2.79775C2.69094 0 2.58394 0 2.47732 0.000622847C2.3872 0.00126457 2.29728 0.0022649 2.20736 0.00471853C2.01126 0.0100222 1.81348 0.021592 1.61983 0.0563959C1.42309 0.0918038 1.24001 0.149559 1.0614 0.240494C0.885816 0.329788 0.725064 0.446581 0.585756 0.585948C0.446388 0.725314 0.329595 0.885801 0.24032 1.06158C0.149365 1.24018 0.0915728 1.42332 0.0564103 1.62021C0.0214195 1.81392 0.00977227 2.01166 0.00448752 2.20756C0.00207163 2.29747 0.00103544 2.38739 0.00044845 2.47729C-0.000174397 2.58413 3.32184e-05 2.6909 3.32184e-05 2.79794V17.2023C3.32184e-05 17.3093 -0.000174397 17.4159 0.00044845 17.5229C0.00103544 17.6128 0.00207163 17.7028 0.00448752 17.7927C0.00977227 17.9884 0.0214195 18.1861 0.0564103 18.3798C0.0915728 18.5768 0.149365 18.7598 0.24032 18.9384C0.329595 19.1142 0.446388 19.2749 0.585756 19.4141C0.725064 19.5537 0.885816 19.6704 1.0614 19.7595C1.24001 19.8507 1.42309 19.9085 1.61983 19.9438C1.81348 19.9784 2.01126 19.9902 2.20736 19.9955C2.29728 19.9975 2.3872 19.9988 2.47732 19.9992C2.58394 20 2.69094 20 2.79775 20H28.443C28.5496 20 28.6566 20 28.7632 19.9992C28.8531 19.9988 28.943 19.9975 29.0333 19.9955C29.229 19.9902 29.4268 19.9784 29.6209 19.9438C29.8174 19.9085 30.0005 19.8507 30.1791 19.7595C30.3549 19.6704 30.5152 19.5537 30.6548 19.4141C30.7939 19.2749 30.9107 19.1142 31.0002 18.9384C31.0914 18.7598 31.1491 18.5768 31.1841 18.3798C31.2191 18.1861 31.2305 17.9884 31.2358 17.7927C31.2382 17.7028 31.2394 17.6128 31.2398 17.5229C31.2407 17.4159 31.2407 17.3093 31.2407 17.2023V2.79794C31.2407 2.6909 31.2407 2.58413 31.2398 2.47729C31.2394 2.38739 31.2382 2.29747 31.2358 2.20756C31.2305 2.01166 31.2191 1.81392 31.1841 1.62021C31.1491 1.42332 31.0914 1.24018 31.0002 1.06158C30.9107 0.885801 30.7939 0.725314 30.6548 0.585948C30.5152 0.446581 30.3549 0.329788 30.1791 0.240494C30.0005 0.149559 29.8174 0.0918038 29.6209 0.0563959C29.4268 0.021592 29.229 0.0100222 29.0333 0.00471853C28.943 0.0022649 28.8531 0.00126457 28.7632 0.000622847C28.6566 0 28.5496 0 28.443 0Z', fill: 'black' }), _jsx("path", { d: 'M28.4429 0.666626L28.7584 0.66723C28.8439 0.667834 28.9293 0.668759 29.0153 0.671099C29.1648 0.675138 29.3396 0.683235 29.5026 0.712452C29.6443 0.73797 29.7631 0.776775 29.8772 0.834832C29.9898 0.89204 30.0929 0.967008 30.183 1.05694C30.2734 1.14748 30.3485 1.2508 30.4064 1.36463C30.4642 1.47778 30.5027 1.59605 30.5281 1.73877C30.5572 1.89999 30.5653 2.07533 30.5694 2.22574C30.5717 2.31064 30.5728 2.39553 30.5732 2.48245C30.574 2.58756 30.574 2.69261 30.574 2.79793V17.2023C30.574 17.3076 30.574 17.4124 30.5732 17.5198C30.5728 17.6047 30.5717 17.6896 30.5694 17.7746C30.5653 17.9248 30.5572 18.1 30.5277 18.2632C30.5027 18.4039 30.4642 18.5222 30.4061 18.6359C30.3483 18.7495 30.2734 18.8527 30.1834 18.9427C30.0928 19.0333 29.99 19.108 29.8761 19.1657C29.7629 19.2235 29.6442 19.2623 29.5039 19.2875C29.3377 19.3172 29.1555 19.3253 29.0182 19.329C28.9319 19.331 28.846 19.3321 28.758 19.3326C28.6531 19.3334 28.5478 19.3334 28.4429 19.3334H2.79772H2.79355C2.68986 19.3334 2.58596 19.3334 2.48037 19.3325C2.39429 19.3321 2.30839 19.331 2.22535 19.3291C2.085 19.3253 1.90269 19.3172 1.73775 19.2877C1.59625 19.2623 1.47763 19.2235 1.36295 19.165C1.2501 19.1078 1.14737 19.0331 1.05675 18.9423C0.966838 18.8526 0.892115 18.7497 0.834342 18.636C0.776511 18.5224 0.737819 18.4037 0.712379 18.2613C0.682971 18.0985 0.674893 17.9239 0.670856 17.7747C0.668551 17.6893 0.667589 17.604 0.667041 17.5191L0.666626 17.2684L0.666645 17.2023V2.79793L0.666626 2.73176L0.667022 2.48166C0.667589 2.39625 0.668551 2.31087 0.670856 2.22554C0.674893 2.07622 0.682971 1.9016 0.712622 1.73743C0.737838 1.59627 0.776511 1.47763 0.834644 1.36346C0.891964 1.25061 0.966819 1.1476 1.05721 1.05723C1.14724 0.967159 1.25031 0.892285 1.36387 0.83453C1.47733 0.776757 1.59618 0.73797 1.73768 0.712509C1.90071 0.683216 2.07569 0.675138 2.22555 0.67108C2.31098 0.668759 2.3964 0.667834 2.48119 0.667249L2.79772 0.666626H28.4429Z', fill: 'white' }), _jsx("path", { d: 'M8.52856 6.72685C8.79605 6.39228 8.97757 5.94304 8.92969 5.48398C8.53812 5.50345 8.06029 5.74231 7.78364 6.07715C7.53525 6.36388 7.3154 6.83193 7.37271 7.27175C7.81227 7.30988 8.25142 7.05204 8.52856 6.72685Z', fill: 'black' }), _jsx("path", { d: 'M8.92465 7.35762C8.28631 7.3196 7.74356 7.71991 7.43872 7.71991C7.13371 7.71991 6.6669 7.37678 6.162 7.38603C5.50485 7.39568 4.89508 7.76724 4.5616 8.35819C3.8757 9.5404 4.38059 11.294 5.0476 12.2568C5.37152 12.7332 5.76189 13.2577 6.27626 13.2388C6.76226 13.2198 6.95275 12.9242 7.5435 12.9242C8.13382 12.9242 8.30541 13.2388 8.81987 13.2293C9.35338 13.2198 9.68691 12.7527 10.0108 12.2759C10.3824 11.7329 10.5345 11.2086 10.5441 11.1798C10.5345 11.1703 9.51535 10.7793 9.5059 9.60692C9.49627 8.62527 10.3061 8.15834 10.3442 8.12939C9.88688 7.45304 9.17236 7.37678 8.92465 7.35762Z', fill: 'black' }), _jsx("path", { d: 'M14.4828 6.02912C15.8702 6.02912 16.8364 6.98548 16.8364 8.37788C16.8364 9.77525 15.8504 10.7366 14.448 10.7366H12.9119V13.1795H11.802V6.02911L14.4828 6.02912ZM12.9119 9.80498H14.1854C15.1517 9.80498 15.7016 9.28474 15.7016 8.38285C15.7016 7.48106 15.1517 6.9657 14.1903 6.9657H12.9119V9.80498Z', fill: 'black' }), _jsx("path", { d: 'M17.1263 11.6979C17.1263 10.7861 17.825 10.2262 19.0639 10.1568L20.4909 10.0726V9.67127C20.4909 9.09149 20.0994 8.74463 19.4455 8.74463C18.8259 8.74463 18.4394 9.04188 18.3454 9.50774H17.3345C17.394 8.56618 18.1966 7.87247 19.4851 7.87247C20.7486 7.87247 21.5563 8.54143 21.5563 9.58697V13.1795H20.5305V12.3223H20.5058C20.2036 12.902 19.5445 13.2687 18.8607 13.2687C17.8399 13.2687 17.1263 12.6344 17.1263 11.6979ZM20.4909 11.2272V10.8159L19.2075 10.8952C18.5683 10.9398 18.2066 11.2222 18.2066 11.6682C18.2066 12.124 18.5832 12.4214 19.158 12.4214C19.9062 12.4214 20.4909 11.906 20.4909 11.2272Z', fill: 'black' }), _jsx("path", { d: 'M22.5246 15.0972V14.23C22.6038 14.2498 22.7821 14.2498 22.8714 14.2498C23.3669 14.2498 23.6345 14.0417 23.798 13.5066C23.798 13.4966 23.8922 13.1895 23.8922 13.1845L22.0093 7.96661H23.1687L24.4869 12.2083H24.5066L25.8248 7.96661H26.9546L25.0021 13.452C24.5563 14.7157 24.0409 15.122 22.9607 15.122C22.8714 15.122 22.6038 15.112 22.5246 15.0972Z', fill: 'black' })] }));
+}
+function MaestroMark() {
+    return (_jsxs("svg", { viewBox: '0 0 32 20', fill: 'none', "aria-hidden": 'true', children: [_jsx("path", { d: 'M30 0.325H2C1.07492 0.325 0.325 1.07492 0.325 2V18C0.325 18.9251 1.07492 19.675 2 19.675H30C30.9251 19.675 31.675 18.9251 31.675 18V2C31.675 1.07492 30.9251 0.325 30 0.325Z', fill: 'white' }), _jsx("circle", { cx: '13.3', cy: '10', r: '5.7', fill: '#EB001B' }), _jsx("circle", { cx: '18.7', cy: '10', r: '5.7', fill: '#0099DF', fillOpacity: '0.92' }), _jsx("path", { d: 'M16 5.55A5.68 5.68 0 0 1 18.18 10 5.68 5.68 0 0 1 16 14.45 5.68 5.68 0 0 1 13.82 10 5.68 5.68 0 0 1 16 5.55Z', fill: '#6C6BB0' }), _jsx("path", { d: 'M30 0.325H2C1.07492 0.325 0.325 1.07492 0.325 2V18C0.325 18.9251 1.07492 19.675 2 19.675H30C30.9251 19.675 31.675 18.9251 31.675 18V2C31.675 1.07492 30.9251 0.325 30 0.325Z', stroke: '#E3E6EE', strokeWidth: '0.65' })] }));
+}
+function DiscoverMark() {
+    return (_jsxs("svg", { viewBox: '0 0 32 20', fill: 'none', "aria-hidden": 'true', children: [_jsx("path", { d: 'M30 0.325H2C1.07492 0.325 0.325 1.07492 0.325 2V18C0.325 18.9251 1.07492 19.675 2 19.675H30C30.9251 19.675 31.675 18.9251 31.675 18V2C31.675 1.07492 30.9251 0.325 30 0.325Z', fill: 'white' }), _jsx("path", { d: 'M20.8 13.9H29.4V16H18.6L20.8 13.9Z', fill: '#F58220' }), _jsx("path", { d: 'M22.4 4H29.4V13.9H20.8C23.2 11.9 24.1 7.7 22.4 4Z', fill: '#F58220', opacity: '0.88' }), _jsx("text", { x: '3.2', y: '11.8', fill: '#111827', fontFamily: 'Arial, Helvetica, sans-serif', fontSize: '4.6', fontWeight: '800', children: "DISCOVER" }), _jsx("path", { d: 'M30 0.325H2C1.07492 0.325 0.325 1.07492 0.325 2V18C0.325 18.9251 1.07492 19.675 2 19.675H30C30.9251 19.675 31.675 18.9251 31.675 18V2C31.675 1.07492 30.9251 0.325 30 0.325Z', stroke: '#E3E6EE', strokeWidth: '0.65' })] }));
+}
+export function PaymentBrandMark({ className, label }) {
+    const normalizedLabel = normalizePaymentBrandLabel(label);
+    const resolvedClassName = ['shared-stripe-checkout-brand-mark', className !== null && className !== void 0 ? className : '']
+        .filter(Boolean)
+        .join(' ');
+    switch (normalizedLabel) {
+        case 'visa':
+            return (_jsx("span", { className: resolvedClassName, children: _jsx(VisaMark, {}) }));
+        case 'mastercard':
+            return (_jsx("span", { className: resolvedClassName, children: _jsx(MastercardMark, {}) }));
+        case 'paypal':
+            return (_jsx("span", { className: resolvedClassName, children: _jsx(PayPalMark, {}) }));
+        case 'gpay':
+        case 'googlepay':
+            return (_jsx("span", { className: resolvedClassName, children: _jsx(GooglePayMark, {}) }));
+        case 'applepay':
+            return (_jsx("span", { className: resolvedClassName, children: _jsx(ApplePayMark, {}) }));
+        case 'maestro':
+            return (_jsx("span", { className: resolvedClassName, children: _jsx(MaestroMark, {}) }));
+        case 'discover':
+            return (_jsx("span", { className: resolvedClassName, children: _jsx(DiscoverMark, {}) }));
+        default:
+            return (_jsx("span", { className: resolvedClassName, children: _jsx("span", { className: 'shared-stripe-checkout-brand-fallback', children: label }) }));
+    }
+}
+export function SecurityLockIcon({ className }) {
+    return (_jsxs("svg", { className: className, viewBox: '0 0 16 16', fill: 'none', "aria-hidden": 'true', children: [_jsx("path", { d: 'M4.667 6.667V5.333a3.333 3.333 0 1 1 6.666 0v1.334', stroke: 'currentColor', strokeWidth: '1.4', strokeLinecap: 'round', strokeLinejoin: 'round' }), _jsx("rect", { x: '3.333', y: '6.667', width: '9.334', height: '6.666', rx: '1.667', stroke: 'currentColor', strokeWidth: '1.4' })] }));
+}
+export function StripeWordmark({ className }) {
+    return (_jsxs("svg", { className: className, viewBox: '0 0 52 20', fill: 'none', "aria-hidden": 'true', children: [_jsx("rect", { x: '0.5', y: '1', width: '51', height: '18', rx: '5', fill: '#EEF2FF' }), _jsx("text", { x: '7', y: '13.2', fill: '#635BFF', fontFamily: 'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif', fontSize: '11', fontWeight: '700', children: "stripe" })] }));
+}

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

@@ -0,0 +1,14 @@
+import type { MouseEvent } from 'react';
+type GooglePaySubscribeButtonProps = {
+    className?: string;
+    decorative?: boolean;
+    disabled?: boolean;
+    href?: string;
+    label?: string;
+    onClick?: (event: MouseEvent<HTMLAnchorElement> | MouseEvent<HTMLButtonElement>) => void;
+    rel?: string;
+    target?: string;
+    type?: 'button' | 'submit' | 'reset';
+};
+export declare function GooglePaySubscribeButton({ className, decorative, disabled, href, label, onClick, rel, target, type, }: GooglePaySubscribeButtonProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/shared/GooglePaySubscribeButton.js

@@ -0,0 +1,94 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+function GooglePayGMark() {
+    return (_jsxs("svg", { className: 'google-pay-subscribe-button__g-mark', viewBox: '285.2 284.4 167.73 171.29', "aria-hidden": 'true', children: [_jsx("path", { fill: '#4285F4', d: 'M452.93,372c0-6.26-0.56-12.25-1.6-18.01h-80.48v33L417.2,387c-1.88,10.98-7.93,20.34-17.2,26.58v21.41h27.59C443.7,420.08,452.93,398.04,452.93,372z' }), _jsx("path", { fill: '#34A853', d: 'M400.01,413.58c-7.68,5.18-17.57,8.21-29.14,8.21c-22.35,0-41.31-15.06-48.1-35.36h-28.46v22.08c14.1,27.98,43.08,47.18,76.56,47.18c23.14,0,42.58-7.61,56.73-20.71L400.01,413.58z' }), _jsx("path", { fill: '#FABB05', d: 'M320.09,370.05c0-5.7,0.95-11.21,2.68-16.39v-22.08h-28.46c-5.83,11.57-9.11,24.63-9.11,38.47s3.29,26.9,9.11,38.47l28.46-22.08C321.04,381.26,320.09,375.75,320.09,370.05z' }), _jsx("path", { fill: '#E94235', d: 'M370.87,318.3c12.63,0,23.94,4.35,32.87,12.85l24.45-24.43c-14.85-13.83-34.21-22.32-57.32-22.32c-33.47,0-62.46,19.2-76.56,47.18l28.46,22.08C329.56,333.36,348.52,318.3,370.87,318.3z' })] }));
+}
+function GooglePayMark() {
+    return (_jsxs("span", { className: 'google-pay-subscribe-button__mark', "aria-hidden": 'true', children: [_jsx("span", { className: 'google-pay-subscribe-button__prefix', children: "Subscribe with" }), _jsx(GooglePayGMark, {}), _jsx("span", { className: 'google-pay-subscribe-button__pay', children: "Pay" })] }));
+}
+export function GooglePaySubscribeButton({ className, decorative = false, disabled = false, href, label = 'Subscribe with Google Pay', onClick, rel, target, type = 'button', }) {
+    const resolvedClassName = ['google-pay-subscribe-button', decorative ? 'is-decorative' : '', className !== null && className !== void 0 ? className : '']
+        .filter(Boolean)
+        .join(' ');
+    const content = (_jsxs(_Fragment, { children: [_jsx(GooglePayMark, {}), !decorative ? _jsx("span", { className: 'google-pay-subscribe-button__sr-only', children: label }) : null, _jsx("style", { children: googlePaySubscribeButtonStyles })] }));
+    if (decorative) {
+        return (_jsx("div", { className: resolvedClassName, "aria-hidden": 'true', children: content }));
+    }
+    if (href && !disabled) {
+        return (_jsx("a", { className: resolvedClassName, href: href, target: target, rel: rel, onClick: (event) => onClick === null || onClick === void 0 ? void 0 : onClick(event), "aria-label": label, children: content }));
+    }
+    return (_jsx("button", { type: type, className: resolvedClassName, onClick: (event) => onClick === null || onClick === void 0 ? void 0 : onClick(event), disabled: disabled, "aria-label": label, children: content }));
+}
+const googlePaySubscribeButtonStyles = `
+.google-pay-subscribe-button {
+  position: relative;
+  display: inline-flex;
+  width: 100%;
+  box-sizing: border-box;
+  height: 64px;
+  min-height: 64px;
+  align-items: center;
+  justify-content: center;
+  border: 0;
+  border-radius: 16px;
+  background: #000;
+  color: #fff;
+  padding: 8px 24px;
+}
+
+.google-pay-subscribe-button:not(.is-decorative) {
+  cursor: pointer;
+  text-decoration: none;
+}
+
+.google-pay-subscribe-button:disabled {
+  cursor: not-allowed;
+  opacity: 0.68;
+}
+
+.google-pay-subscribe-button.is-decorative {
+  pointer-events: none;
+}
+
+.google-pay-subscribe-button__mark {
+  display: inline-flex;
+  min-width: 0;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  font-size: 27px;
+  font-weight: 500;
+  line-height: 1;
+  white-space: nowrap;
+}
+
+.google-pay-subscribe-button__prefix {
+  color: currentColor;
+}
+
+.google-pay-subscribe-button__g-mark {
+  display: block;
+  width: 40px;
+  height: 40px;
+  flex: 0 0 auto;
+}
+
+.google-pay-subscribe-button__pay {
+  color: currentColor;
+  font-size: 27px;
+  font-weight: 500;
+}
+
+.google-pay-subscribe-button__sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+`;

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

@@ -0,0 +1,44 @@
+import { type ReactNode } from 'react';
+import type { Stripe } from '@stripe/stripe-js';
+export type SharedStripeCheckoutSummaryRow = {
+    id: string;
+    label: string;
+    value: string;
+    tone?: 'default' | 'negative' | 'positive';
+};
+export type SharedStripeCheckoutDialogProps = {
+    amountCents: number;
+    clientSecret: string;
+    closeAriaLabel: string;
+    customerEmailEditable?: boolean;
+    customerEmailInvalidMessage?: string;
+    customerEmailLabel?: string;
+    customerEmailPlaceholder?: string;
+    customerEmail?: string | null;
+    customerName?: string | null;
+    legalNotice?: ReactNode;
+    onClose: () => void;
+    onCustomerEmailChange?: (value: string) => void;
+    onCustomerEmailCommit?: (email: string) => Promise<string | null | void>;
+    onError?: (message: string | null) => void;
+    onSuccess?: () => void;
+    paymentMethodLabels?: readonly string[];
+    poweredByLabel: string;
+    processingLabel: string;
+    renewalNotice?: ReactNode;
+    returnUrl: string;
+    secureLabel: string;
+    stripePromise: Promise<Stripe | null>;
+    submitLabel: string;
+    summaryLabel: string;
+    summaryRows: readonly SharedStripeCheckoutSummaryRow[];
+    summaryTitle: string;
+    title: string;
+    totalLabel: string;
+    totalValue: string;
+    walletPlaceholderLabel: string;
+    summaryNote?: ReactNode;
+};
+export declare function useApplePayQrFallbackAllowed(): boolean;
+export declare function useApplePayExpressCheckoutAllowed(): boolean;
+export declare function SharedStripeCheckoutDialog({ clientSecret, onClose, stripePromise, ...props }: SharedStripeCheckoutDialogProps): import("react/jsx-runtime").JSX.Element;