@funnelsgrove/payments 0.1.0 → 0.1.1

package/dist/components/shared/SharedStripeCheckoutDialog.js

@@ -0,0 +1,717 @@
+'use client';
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useMemo, useState, useSyncExternalStore, } from 'react';
+import { CardCvcElement, CardExpiryElement, CardNumberElement, Elements, useElements, useStripe, } from '@stripe/react-stripe-js';
+import { ApplePaySubscribeButton } from './ApplePaySubscribeButton.js';
+import { PaymentBrandMark, SecurityLockIcon, StripeWordmark, } from './CheckoutBrandAssets.js';
+import { StripeExpressCheckoutButton } from './StripeExpressCheckoutButton.js';
+const isValidEmail = (value) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value);
+const defaultPaymentMethodLabels = ['Visa', 'Mastercard', 'PayPal', 'G Pay', 'Apple Pay'];
+const normalizeBillingName = (input) => {
+    var _a, _b, _c;
+    const normalizedName = (_a = input.name) === null || _a === void 0 ? void 0 : _a.trim();
+    if (normalizedName) {
+        return normalizedName;
+    }
+    const normalizedEmail = (_b = input.email) === null || _b === void 0 ? void 0 : _b.trim();
+    if (normalizedEmail) {
+        const localPart = (_c = normalizedEmail
+            .split('@')[0]) === null || _c === void 0 ? void 0 : _c.replace(/[._-]+/g, ' ').trim();
+        if (localPart) {
+            return localPart;
+        }
+    }
+    return 'Customer';
+};
+const isSuccessfulIntentStatus = (status) => {
+    return status === 'succeeded' || status === 'processing' || status === 'requires_capture';
+};
+const applePayQrFallbackMediaQuery = '(hover: hover) and (pointer: fine)';
+function getApplePayQrFallbackSnapshot() {
+    if (typeof window === 'undefined' || typeof window.matchMedia !== 'function') {
+        return false;
+    }
+    return window.matchMedia('(hover: hover) and (pointer: fine)').matches;
+}
+function subscribeApplePayQrFallback(onStoreChange) {
+    if (typeof window === 'undefined' || typeof window.matchMedia !== 'function') {
+        return () => undefined;
+    }
+    const mediaQuery = window.matchMedia(applePayQrFallbackMediaQuery);
+    mediaQuery.addEventListener('change', onStoreChange);
+    return () => mediaQuery.removeEventListener('change', onStoreChange);
+}
+export function useApplePayQrFallbackAllowed() {
+    return useSyncExternalStore(subscribeApplePayQrFallback, getApplePayQrFallbackSnapshot, () => false);
+}
+function getApplePayExpressCheckoutSnapshot() {
+    if (typeof window === 'undefined') {
+        return false;
+    }
+    const applePaySession = window.ApplePaySession;
+    return typeof (applePaySession === null || applePaySession === void 0 ? void 0 : applePaySession.canMakePayments) === 'function' &&
+        applePaySession.canMakePayments();
+}
+export function useApplePayExpressCheckoutAllowed() {
+    return useSyncExternalStore(() => () => undefined, getApplePayExpressCheckoutSnapshot, () => false);
+}
+const stripeCardElementStyle = {
+    base: {
+        color: '#111827',
+        fontFamily: 'Manrope, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
+        fontSize: '16px',
+        fontSmoothing: 'antialiased',
+        '::placeholder': {
+            color: '#9ca3af',
+        },
+    },
+    invalid: {
+        color: '#c43737',
+        iconColor: '#c43737',
+    },
+};
+const cardNumberElementOptions = {
+    placeholder: '1234 1234 1234 1234',
+    showIcon: false,
+    style: stripeCardElementStyle,
+};
+const cardExpiryElementOptions = {
+    placeholder: 'MM/YY',
+    style: stripeCardElementStyle,
+};
+const cardCvcElementOptions = {
+    placeholder: 'CVV',
+    style: stripeCardElementStyle,
+};
+function getFriendlyCardErrorMessage(error) {
+    return error instanceof Error && error.message
+        ? error.message
+        : 'Payment failed. Please review your card details and try again.';
+}
+function SharedStripeCheckoutForm({ amountCents, clientSecret, closeAriaLabel, customerEmailEditable = false, customerEmailInvalidMessage = 'Enter a valid email address.', customerEmailLabel = 'Email', customerEmailPlaceholder = 'Enter your email', customerEmail, customerName, legalNotice, onClose, onCustomerEmailChange, onCustomerEmailCommit, onError, onSuccess, paymentMethodLabels = defaultPaymentMethodLabels, poweredByLabel, processingLabel, renewalNotice, returnUrl, secureLabel, submitLabel, summaryLabel, summaryRows, summaryTitle, title, totalLabel, totalValue, walletPlaceholderLabel, summaryNote, }) {
+    const stripe = useStripe();
+    const elements = useElements();
+    const [submitting, setSubmitting] = useState(false);
+    const [error, setError] = useState(null);
+    const [walletAvailable, setWalletAvailable] = useState(null);
+    const [cardNumberError, setCardNumberError] = useState(null);
+    const [cardExpiryError, setCardExpiryError] = useState(null);
+    const [cardCvcError, setCardCvcError] = useState(null);
+    const [cardNumberComplete, setCardNumberComplete] = useState(false);
+    const [cardExpiryComplete, setCardExpiryComplete] = useState(false);
+    const [cardCvcComplete, setCardCvcComplete] = useState(false);
+    const [emailDraft, setEmailDraft] = useState((customerEmail === null || customerEmail === void 0 ? void 0 : customerEmail.trim()) || '');
+    const allowApplePayQrFallback = useApplePayQrFallbackAllowed();
+    const allowApplePayExpressCheckout = useApplePayExpressCheckoutAllowed();
+    const cardFieldBrandLabels = useMemo(() => {
+        const labels = paymentMethodLabels.filter((label) => {
+            const normalizedLabel = label.trim().toLowerCase();
+            return normalizedLabel === 'visa' || normalizedLabel === 'mastercard';
+        });
+        return labels.length > 0 ? labels.slice(0, 2) : ['Visa', 'Mastercard'];
+    }, [paymentMethodLabels]);
+    const showsStripeWordmark = /stripe/i.test(poweredByLabel);
+    const poweredByText = useMemo(() => {
+        if (!showsStripeWordmark) {
+            return poweredByLabel;
+        }
+        return poweredByLabel.replace(/\s*stripe\b/i, '').trim();
+    }, [poweredByLabel, showsStripeWordmark]);
+    const initialCustomerEmail = (customerEmail === null || customerEmail === void 0 ? void 0 : customerEmail.trim()) || '';
+    const resolvedCustomerEmail = customerEmailEditable
+        ? emailDraft.trim() || initialCustomerEmail
+        : initialCustomerEmail;
+    const canSubmit = Boolean(stripe) &&
+        Boolean(elements) &&
+        cardNumberComplete &&
+        cardExpiryComplete &&
+        cardCvcComplete &&
+        !submitting;
+    const walletCheckoutAllowed = allowApplePayExpressCheckout || allowApplePayQrFallback;
+    const walletFallbackDisabled = !walletCheckoutAllowed || walletAvailable === false;
+    const setSharedError = (message) => {
+        setError(message);
+        onError === null || onError === void 0 ? void 0 : onError(message);
+    };
+    const ensureCustomerEmail = async () => {
+        const normalizedEmail = resolvedCustomerEmail.trim();
+        if (!normalizedEmail || !isValidEmail(normalizedEmail)) {
+            setSharedError(customerEmailInvalidMessage);
+            return null;
+        }
+        if (!customerEmailEditable || !onCustomerEmailCommit) {
+            return normalizedEmail;
+        }
+        const committedEmail = await onCustomerEmailCommit(normalizedEmail);
+        const nextEmail = typeof committedEmail === 'string' && committedEmail.trim()
+            ? committedEmail.trim()
+            : normalizedEmail;
+        setEmailDraft(nextEmail);
+        onCustomerEmailChange === null || onCustomerEmailChange === void 0 ? void 0 : onCustomerEmailChange(nextEmail);
+        return nextEmail;
+    };
+    const handleFieldError = (event, setFieldError, setFieldComplete) => {
+        var _a, _b, _c;
+        setFieldError((_b = (_a = event.error) === null || _a === void 0 ? void 0 : _a.message) !== null && _b !== void 0 ? _b : null);
+        setFieldComplete(event.complete);
+        if ((_c = event.error) === null || _c === void 0 ? void 0 : _c.message) {
+            setSharedError(event.error.message);
+            return;
+        }
+        setSharedError(null);
+    };
+    const handleSubmit = async (event) => {
+        var _a;
+        event.preventDefault();
+        if (!stripe || !elements || submitting) {
+            return;
+        }
+        const cardNumberElement = elements.getElement(CardNumberElement);
+        if (!cardNumberElement) {
+            setSharedError('Payment form is not ready yet.');
+            return;
+        }
+        setSubmitting(true);
+        setSharedError(null);
+        try {
+            const syncedEmail = await ensureCustomerEmail();
+            if (!syncedEmail) {
+                setSubmitting(false);
+                return;
+            }
+            const result = await stripe.confirmCardPayment(clientSecret, {
+                payment_method: {
+                    card: cardNumberElement,
+                    billing_details: {
+                        email: syncedEmail || undefined,
+                        name: normalizeBillingName({
+                            email: syncedEmail,
+                            name: customerName,
+                        }),
+                    },
+                },
+                return_url: returnUrl,
+            });
+            if (result.error) {
+                setSharedError(result.error.message || 'Payment failed.');
+                setSubmitting(false);
+                return;
+            }
+            if (typeof window !== 'undefined' &&
+                isSuccessfulIntentStatus((_a = result.paymentIntent) === null || _a === void 0 ? void 0 : _a.status)) {
+                onSuccess === null || onSuccess === void 0 ? void 0 : onSuccess();
+                window.location.assign(returnUrl);
+                return;
+            }
+            setSubmitting(false);
+        }
+        catch (submitError) {
+            setSharedError(getFriendlyCardErrorMessage(submitError));
+            setSubmitting(false);
+        }
+    };
+    const fieldError = error || cardNumberError || cardExpiryError || cardCvcError;
+    return (_jsxs("div", { className: 'shared-stripe-checkout-dialog', "data-node-id": '7368:460', children: [_jsxs("div", { className: 'shared-stripe-checkout-header', children: [_jsxs("div", { className: 'shared-stripe-checkout-heading', children: [_jsx("h2", { id: 'shared-stripe-checkout-title', children: title }), _jsx("p", { children: summaryTitle })] }), _jsx("button", { type: 'button', className: 'shared-stripe-checkout-close', onClick: onClose, "aria-label": closeAriaLabel, children: "\u00D7" })] }), _jsxs("div", { className: 'shared-stripe-checkout-summary', children: [summaryRows.map((row) => (_jsxs("div", { className: 'shared-stripe-checkout-summary-row', children: [_jsx("span", { children: row.label }), _jsx("strong", { className: row.tone === 'positive'
+                                    ? 'is-positive'
+                                    : row.tone === 'negative'
+                                        ? 'is-negative'
+                                        : undefined, children: row.value })] }, row.id))), _jsxs("div", { className: 'shared-stripe-checkout-summary-total', children: [_jsx("span", { children: totalLabel }), _jsx("strong", { children: totalValue })] }), summaryNote ? (_jsx("p", { className: 'shared-stripe-checkout-summary-note', children: summaryNote })) : null] }), _jsxs("form", { className: 'shared-stripe-checkout-form', onSubmit: (event) => void handleSubmit(event), children: [_jsxs("div", { className: 'shared-stripe-checkout-wallet-shell', children: [walletAvailable !== true ? (_jsx(ApplePaySubscribeButton, { className: 'shared-stripe-checkout-wallet-placeholder', disabled: walletFallbackDisabled, label: walletPlaceholderLabel })) : null, walletCheckoutAllowed ? (_jsx(StripeExpressCheckoutButton, { amountCents: amountCents, beforeConfirm: ensureCustomerEmail, summaryLabel: summaryLabel, returnUrl: returnUrl, customerEmail: resolvedCustomerEmail, customerName: customerName, className: 'shared-stripe-checkout-wallet-button', onAvailabilityChange: setWalletAvailable, onError: setSharedError })) : null] }), _jsxs("div", { className: 'shared-stripe-checkout-card-surface', children: [_jsxs("div", { className: 'shared-stripe-checkout-field-group shared-stripe-checkout-field-group--wide', children: [_jsx("p", { className: 'shared-stripe-checkout-field-label', children: customerEmailLabel }), _jsx("div", { className: 'shared-stripe-checkout-field shared-stripe-checkout-field--wide', children: _jsx("input", { type: 'email', inputMode: 'email', autoComplete: 'email', className: [
+                                                'shared-stripe-checkout-text-input',
+                                                customerEmailEditable ? '' : 'is-readonly',
+                                            ]
+                                                .filter(Boolean)
+                                                .join(' '), value: resolvedCustomerEmail, placeholder: customerEmailPlaceholder, disabled: !customerEmailEditable, onChange: (event) => {
+                                                setEmailDraft(event.target.value);
+                                                onCustomerEmailChange === null || onCustomerEmailChange === void 0 ? void 0 : onCustomerEmailChange(event.target.value);
+                                                setSharedError(null);
+                                            } }) })] }), _jsxs("div", { className: 'shared-stripe-checkout-field-group shared-stripe-checkout-field-group--wide', children: [_jsx("p", { className: 'shared-stripe-checkout-field-label', children: "Card number" }), _jsxs("div", { className: 'shared-stripe-checkout-field shared-stripe-checkout-field--wide shared-stripe-checkout-field--card-number', children: [_jsx(CardNumberElement, { options: cardNumberElementOptions, onChange: (event) => {
+                                                    handleFieldError(event, setCardNumberError, setCardNumberComplete);
+                                                } }), _jsx("div", { className: 'shared-stripe-checkout-card-number-brands', "aria-hidden": 'true', children: cardFieldBrandLabels.map((label) => (_jsx(PaymentBrandMark, { label: label, className: 'shared-stripe-checkout-brand shared-stripe-checkout-brand--card' }, label))) })] })] }), _jsxs("div", { className: 'shared-stripe-checkout-field-row', children: [_jsxs("div", { className: 'shared-stripe-checkout-field-group', children: [_jsx("p", { className: 'shared-stripe-checkout-field-label', children: "Expiration date" }), _jsx("div", { className: 'shared-stripe-checkout-field', children: _jsx(CardExpiryElement, { options: cardExpiryElementOptions, onChange: (event) => {
+                                                        handleFieldError(event, setCardExpiryError, setCardExpiryComplete);
+                                                    } }) })] }), _jsxs("div", { className: 'shared-stripe-checkout-field-group', children: [_jsx("p", { className: 'shared-stripe-checkout-field-label', children: "Security code" }), _jsx("div", { className: 'shared-stripe-checkout-field', children: _jsx(CardCvcElement, { options: cardCvcElementOptions, onChange: (event) => {
+                                                        handleFieldError(event, setCardCvcError, setCardCvcComplete);
+                                                    } }) })] })] })] }), fieldError ? _jsx("p", { className: 'shared-stripe-checkout-error', children: fieldError }) : null, _jsx("button", { type: 'submit', className: 'shared-stripe-checkout-submit', disabled: !canSubmit, children: submitting ? processingLabel : submitLabel }), _jsxs("div", { className: 'shared-stripe-checkout-trust', children: [_jsxs("p", { className: 'shared-stripe-checkout-secure', children: [_jsx(SecurityLockIcon, { className: 'shared-stripe-checkout-secure-icon' }), _jsx("span", { children: secureLabel })] }), _jsxs("p", { className: 'shared-stripe-checkout-powered', children: [poweredByText ? _jsx("span", { children: poweredByText }) : null, showsStripeWordmark ? (_jsx(StripeWordmark, { className: 'shared-stripe-checkout-powered-mark' })) : null] })] }), paymentMethodLabels.length > 0 ? (_jsx("div", { className: 'shared-stripe-checkout-brands', "aria-hidden": 'true', children: paymentMethodLabels.map((label) => (_jsx(PaymentBrandMark, { label: label, className: 'shared-stripe-checkout-brand' }, label))) })) : null, legalNotice ? (_jsx("div", { className: 'shared-stripe-checkout-legal', children: legalNotice })) : null, renewalNotice ? (_jsx("div", { className: 'shared-stripe-checkout-renewal', children: renewalNotice })) : null] })] }));
+}
+export function SharedStripeCheckoutDialog(_a) {
+    var { clientSecret, onClose, stripePromise } = _a, props = __rest(_a, ["clientSecret", "onClose", "stripePromise"]);
+    useEffect(() => {
+        const handleKeyDown = (event) => {
+            if (event.key === 'Escape') {
+                onClose();
+            }
+        };
+        window.addEventListener('keydown', handleKeyDown);
+        return () => window.removeEventListener('keydown', handleKeyDown);
+    }, [onClose]);
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: 'shared-stripe-checkout-overlay', role: 'presentation', onClick: onClose, children: _jsx("div", { className: 'shared-stripe-checkout-shell', role: 'dialog', "aria-modal": 'true', "aria-labelledby": 'shared-stripe-checkout-title', onClick: (event) => event.stopPropagation(), children: _jsx(Elements, { stripe: stripePromise, options: {
+                            clientSecret,
+                        }, children: _jsx(SharedStripeCheckoutForm, Object.assign({}, props, { clientSecret: clientSecret, onClose: onClose })) }) }) }), _jsx("style", { children: sharedStripeCheckoutDialogStyles })] }));
+}
+const sharedStripeCheckoutDialogStyles = `
+.shared-stripe-checkout-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 100;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  padding: 12px;
+  background: rgb(17 24 39 / 55%);
+  backdrop-filter: blur(4px);
+}
+
+.shared-stripe-checkout-shell {
+  width: min(100%, 428px);
+  max-height: calc(100svh - 24px);
+  display: flex;
+}
+
+.shared-stripe-checkout-dialog {
+  width: 100%;
+  max-height: calc(100svh - 24px);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  border-radius: 16px;
+  background: #fff;
+  padding: 20px 20px 16px;
+  color: #111827;
+  box-shadow: 0 24px 80px rgb(17 24 39 / 18%);
+}
+
+.shared-stripe-checkout-header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 16px;
+  flex: none;
+}
+
+.shared-stripe-checkout-heading {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.shared-stripe-checkout-heading h2 {
+  margin: 0;
+  color: #111827;
+  font-family: Sora, Manrope, Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  font-size: 24px;
+  font-weight: 700;
+  line-height: 1.2;
+}
+
+.shared-stripe-checkout-heading p {
+  margin: 0;
+  color: #6b7280;
+  font-family: Manrope, Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 1.4;
+}
+
+.shared-stripe-checkout-close {
+  width: 36px;
+  height: 36px;
+  border: 0;
+  border-radius: 999px;
+  background: #f3f4f6;
+  color: #6b7280;
+  font-size: 24px;
+  line-height: 1;
+  cursor: pointer;
+}
+
+.shared-stripe-checkout-summary {
+  margin-top: 16px;
+  padding-bottom: 12px;
+  border-bottom: 1px solid #e5e7eb;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  flex: none;
+}
+
+.shared-stripe-checkout-summary-row,
+.shared-stripe-checkout-summary-total {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  font-family: Manrope, Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  font-size: 14px;
+  line-height: 1.4;
+}
+
+.shared-stripe-checkout-summary-row span,
+.shared-stripe-checkout-summary-total span {
+  color: #374151;
+}
+
+.shared-stripe-checkout-summary-row strong,
+.shared-stripe-checkout-summary-total strong {
+  color: #111827;
+  font-weight: 700;
+}
+
+.shared-stripe-checkout-summary-row .is-positive {
+  color: #10b981;
+}
+
+.shared-stripe-checkout-summary-row .is-negative {
+  color: #fb7d75;
+}
+
+.shared-stripe-checkout-summary-total {
+  padding-top: 10px;
+  border-top: 1px solid #e5e7eb;
+}
+
+.shared-stripe-checkout-summary-note {
+  margin: 8px 0 0;
+  color: #111827;
+  text-align: center;
+  font-family: Manrope, Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  font-size: 12px;
+  font-weight: 600;
+  line-height: 1.45;
+}
+
+.shared-stripe-checkout-form {
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+  margin-top: 14px;
+  overflow-y: auto;
+  padding-right: 2px;
+  scrollbar-width: none;
+}
+
+.shared-stripe-checkout-form::-webkit-scrollbar {
+  display: none;
+}
+
+.shared-stripe-checkout-wallet-shell {
+  position: relative;
+  min-height: 64px;
+}
+
+.shared-stripe-checkout-wallet-button {
+  width: 100%;
+}
+
+.shared-stripe-checkout-wallet-placeholder {
+  min-height: 64px;
+}
+
+.shared-stripe-checkout-card-surface {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+}
+
+.shared-stripe-checkout-field-group {
+  display: flex;
+  flex-direction: column;
+  gap: 7px;
+}
+
+.shared-stripe-checkout-field-label {
+  margin: 0;
+  color: #374151;
+  font-family: Manrope, Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 1.4;
+}
+
+.shared-stripe-checkout-field-row {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+  gap: 12px;
+}
+
+.shared-stripe-checkout-field {
+  position: relative;
+  min-height: 50px;
+  box-sizing: border-box;
+  border: 1px solid #d1d5db;
+  border-radius: 16px;
+  background: #fff;
+  padding: 13px 14px;
+}
+
+.shared-stripe-checkout-text-input {
+  width: 100%;
+  border: 0;
+  padding: 0;
+  background: transparent;
+  color: #111827;
+  font-family: Manrope, Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  font-size: 16px;
+  font-weight: 500;
+  line-height: 1.35;
+  outline: none;
+}
+
+.shared-stripe-checkout-text-input::placeholder {
+  color: #9ca3af;
+}
+
+.shared-stripe-checkout-text-input.is-readonly:disabled {
+  opacity: 1;
+  cursor: default;
+  -webkit-text-fill-color: #111827;
+}
+
+.shared-stripe-checkout-field--wide {
+  min-height: 50px;
+}
+
+.shared-stripe-checkout-field--card-number {
+  padding-right: 96px;
+}
+
+.shared-stripe-checkout-card-number-brands {
+  position: absolute;
+  top: 50%;
+  right: 14px;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  transform: translateY(-50%);
+}
+
+.shared-stripe-checkout-error {
+  margin: -4px 0 0;
+  color: #c43737;
+  font-family: Manrope, Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  font-size: 13px;
+  line-height: 1.4;
+}
+
+.shared-stripe-checkout-submit {
+  min-height: 52px;
+  flex: none;
+  border: 0;
+  border-radius: 16px;
+  background: #10b981;
+  color: #fff;
+  font-family: Manrope, Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  font-size: 16px;
+  font-weight: 800;
+  letter-spacing: 0.01em;
+  cursor: pointer;
+}
+
+.shared-stripe-checkout-submit:disabled {
+  cursor: not-allowed;
+  opacity: 0.68;
+}
+
+.shared-stripe-checkout-trust {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 18px;
+  flex-wrap: nowrap;
+  flex: none;
+}
+
+.shared-stripe-checkout-secure,
+.shared-stripe-checkout-powered {
+  margin: 0;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-family: Manrope, Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  font-size: 11px;
+  line-height: 1.35;
+}
+
+.shared-stripe-checkout-secure {
+  color: #374151;
+  font-weight: 500;
+  min-width: 0;
+}
+
+.shared-stripe-checkout-secure span {
+  text-decoration-line: underline;
+  text-decoration-color: #1d9bf0;
+  text-decoration-thickness: 2px;
+  text-underline-offset: 3px;
+  white-space: nowrap;
+}
+
+.shared-stripe-checkout-secure-icon {
+  width: 14px;
+  height: 14px;
+  flex: none;
+}
+
+.shared-stripe-checkout-powered {
+  color: #6b7280;
+  font-weight: 500;
+  flex: none;
+  white-space: nowrap;
+}
+
+.shared-stripe-checkout-powered-mark {
+  width: 52px;
+  height: 20px;
+  flex: none;
+}
+
+.shared-stripe-checkout-brands {
+  display: flex;
+  flex-wrap: nowrap;
+  justify-content: center;
+  gap: 6px;
+  overflow: visible;
+  padding-bottom: 0;
+  flex: none;
+}
+
+.shared-stripe-checkout-brand {
+  width: 34px;
+  height: 16px;
+}
+
+.shared-stripe-checkout-brand-mark {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.shared-stripe-checkout-brand-mark svg {
+  display: block;
+  width: auto;
+  max-width: 100%;
+  height: 100%;
+}
+
+.shared-stripe-checkout-brands .shared-stripe-checkout-brand path[stroke='black'] {
+  stroke: #e6edf7;
+}
+
+.shared-stripe-checkout-brands .shared-stripe-checkout-brand path[fill='white'] {
+  fill: #f4f9ff;
+}
+
+.shared-stripe-checkout-brands .shared-stripe-checkout-brand:last-child svg path:first-of-type {
+  fill: #111;
+}
+
+.shared-stripe-checkout-brands .shared-stripe-checkout-brand:last-child svg path:nth-of-type(2) {
+  display: none;
+}
+
+.shared-stripe-checkout-brands .shared-stripe-checkout-brand:last-child svg path:not(:first-of-type) {
+  fill: #fff;
+}
+
+.shared-stripe-checkout-brand--card {
+  width: 30px;
+  height: 18px;
+}
+
+.shared-stripe-checkout-brand-fallback {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  padding: 0 8px;
+  border: 1px solid #d1d5db;
+  border-radius: 999px;
+  color: #6b7280;
+  font-family: Manrope, Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  font-size: 11px;
+  font-weight: 700;
+  line-height: 1;
+  white-space: nowrap;
+}
+
+.shared-stripe-checkout-legal,
+.shared-stripe-checkout-renewal {
+  color: #6b7280;
+  font-family: Manrope, Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  font-size: 11px;
+  line-height: 1.5;
+}
+
+.shared-stripe-checkout-legal :is(a) {
+  color: #111827;
+  font-weight: 700;
+}
+
+.shared-stripe-checkout-renewal strong {
+  color: #111827;
+}
+
+@media (max-width: 429px) {
+  .shared-stripe-checkout-overlay {
+    padding: 8px;
+  }
+
+  .shared-stripe-checkout-shell,
+  .shared-stripe-checkout-dialog {
+    max-height: calc(100svh - 16px);
+  }
+
+  .shared-stripe-checkout-dialog {
+    padding: 18px 14px 14px;
+  }
+
+  .shared-stripe-checkout-heading h2 {
+    font-size: 22px;
+  }
+
+  .shared-stripe-checkout-field-row {
+    gap: 8px;
+  }
+
+  .shared-stripe-checkout-trust {
+    gap: 8px;
+  }
+
+  .shared-stripe-checkout-secure,
+  .shared-stripe-checkout-powered {
+    gap: 6px;
+    font-size: 10px;
+  }
+
+  .shared-stripe-checkout-secure-icon {
+    width: 13px;
+    height: 13px;
+  }
+
+  .shared-stripe-checkout-powered-mark {
+    width: 48px;
+    height: 18px;
+  }
+
+  .shared-stripe-checkout-brands {
+    gap: 5px;
+  }
+
+  .shared-stripe-checkout-brand {
+    width: 30px;
+    height: 14px;
+  }
+}
+`;