@blocklet/payment-react 1.25.10 → 1.26.0

package/src/checkout-v2/components/left/promotion-input.tsx

@@ -0,0 +1,207 @@
+import { useState } from 'react';
+import AddIcon from '@mui/icons-material/Add';
+import CloseIcon from '@mui/icons-material/Close';
+import LocalOfferIcon from '@mui/icons-material/LocalOffer';
+import {
+  Alert,
+  Box,
+  Button,
+  CircularProgress,
+  IconButton,
+  InputAdornment,
+  Stack,
+  TextField,
+  Typography,
+} from '@mui/material';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+
+interface PromotionInputProps {
+  promotion: {
+    applied: boolean;
+    code: string | null;
+    active: boolean;
+    inactiveReason: string | null;
+    apply: (code: string) => Promise<{ success: boolean; error?: string }>;
+    remove: () => Promise<void>;
+  };
+  discounts: any[];
+  discountAmount: string | null;
+  /** Start with input field visible (skip the "Add promotion code" button) */
+  initialShowInput?: boolean;
+}
+
+export default function PromotionInput({
+  promotion,
+  discounts,
+  discountAmount,
+  initialShowInput = false,
+}: PromotionInputProps) {
+  const { t } = useLocaleContext();
+  const [showInput, setShowInput] = useState(false);
+  const [code, setCode] = useState('');
+  const [applying, setApplying] = useState(false);
+  const [error, setError] = useState('');
+
+  // When initialShowInput is true, always show the input (e.g. inside a drawer)
+  const effectiveShowInput = initialShowInput || showInput;
+
+  const handleApply = async () => {
+    if (!code.trim()) return;
+    setApplying(true);
+    setError('');
+    const result = await promotion.apply(code.trim());
+    if (!result.success) {
+      setError(result.error || 'Invalid code');
+    } else {
+      setCode('');
+      setShowInput(false);
+    }
+    setApplying(false);
+  };
+
+  const handleKeyPress = (event: React.KeyboardEvent) => {
+    if (event.key === 'Enter' && !applying && code.trim()) {
+      handleApply();
+    }
+  };
+
+  // Display applied discounts
+  if (discounts?.length > 0) {
+    return (
+      <Box>
+        {discounts.map((disc: any, i: number) => {
+          const discCode =
+            disc.promotion_code_details?.code || disc.verification_data?.code || disc.promotion_code || '';
+          const coupon = disc.coupon_details || {};
+          const couponOff =
+            coupon.percent_off > 0
+              ? t('payment.checkout.coupon.percentage', { percent: coupon.percent_off })
+              : `${coupon.percent_off || 0}%`;
+          let description = '';
+          if (coupon.duration === 'repeating' && coupon.duration_in_months) {
+            const months = coupon.duration_in_months;
+            description = `${couponOff} for ${months} month${months > 1 ? 's' : ''}`;
+          } else if (coupon.duration === 'forever') {
+            description = t('payment.checkout.coupon.terms.forever', { couponOff });
+          } else if (coupon.duration === 'once') {
+            description = t('payment.checkout.coupon.terms.once', { couponOff });
+          }
+          return (
+            <Stack
+              key={disc.promotion_code || disc.coupon || i}
+              direction="row"
+              justifyContent="space-between"
+              alignItems="center">
+              <Stack
+                direction="row"
+                alignItems="center"
+                spacing={0.5}
+                sx={{
+                  bgcolor: (theme) => (theme.palette.mode === 'dark' ? 'rgba(18,184,134,0.1)' : '#ebfef5'),
+                  px: 1.5,
+                  py: 0.5,
+                  borderRadius: '8px',
+                  border: '1px solid',
+                  borderColor: (theme) => (theme.palette.mode === 'dark' ? 'rgba(18,184,134,0.2)' : '#d3f9e8'),
+                }}>
+                <LocalOfferIcon sx={{ color: '#12b886', fontSize: 14 }} />
+                <Typography sx={{ fontWeight: 700, fontSize: 13, color: '#12b886' }}>{discCode}</Typography>
+                {description && (
+                  <Typography sx={{ fontSize: 12, color: '#12b886', fontWeight: 500, opacity: 0.8 }}>
+                    · {description}
+                  </Typography>
+                )}
+                <IconButton size="small" onClick={promotion.remove} sx={{ width: 18, height: 18, ml: 0.25 }}>
+                  <CloseIcon sx={{ fontSize: 12, color: '#12b886' }} />
+                </IconButton>
+              </Stack>
+              <Typography sx={{ color: 'text.primary', fontWeight: 600, fontSize: 14 }}>
+                -{discountAmount || '0'}
+              </Typography>
+            </Stack>
+          );
+        })}
+      </Box>
+    );
+  }
+
+  // Add promo code — consistent height: button and input share same container height
+  if (!promotion.active) return null;
+
+  return (
+    <Box sx={{ minHeight: 36 }}>
+      {effectiveShowInput ? (
+        <Box
+          onBlur={(e) => {
+            // Don't collapse if initialShowInput is forced (e.g. inside a drawer)
+            if (initialShowInput) return;
+            if (!e.currentTarget.contains(e.relatedTarget as Node) && !code.trim()) {
+              setShowInput(false);
+            }
+          }}>
+          <TextField
+            fullWidth
+            size="small"
+            value={code}
+            onChange={(e) => setCode(e.target.value)}
+            onKeyPress={handleKeyPress}
+            placeholder={t('payment.checkout.promotion.placeholder')}
+            disabled={applying}
+            autoFocus
+            slotProps={{
+              input: {
+                endAdornment: (
+                  <InputAdornment position="end">
+                    <Button
+                      size="small"
+                      onClick={handleApply}
+                      disabled={!code.trim() || applying}
+                      variant="text"
+                      sx={{
+                        color: 'primary.main',
+                        fontSize: 13,
+                        textTransform: 'none',
+                        minWidth: 'auto',
+                        fontWeight: 600,
+                      }}>
+                      {applying ? <CircularProgress size={16} /> : t('payment.checkout.promotion.apply')}
+                    </Button>
+                  </InputAdornment>
+                ),
+              },
+            }}
+            sx={{
+              '& .MuiOutlinedInput-root': { pr: 1, borderRadius: '8px', height: 36 },
+              '& .MuiOutlinedInput-input': { py: '6px', fontSize: 13 },
+            }}
+          />
+          {error && (
+            <Alert severity="error" sx={{ mt: 0.5, py: 0, fontSize: 12, borderRadius: '6px' }}>
+              {error}
+            </Alert>
+          )}
+        </Box>
+      ) : (
+        <Button
+          onClick={() => setShowInput(true)}
+          startIcon={<AddIcon sx={{ fontSize: 18 }} />}
+          variant="text"
+          sx={{
+            fontWeight: 600,
+            fontSize: 13,
+            textTransform: 'none',
+            justifyContent: 'flex-start',
+            p: 0,
+            height: 36,
+            color: 'primary.main',
+            '&:hover': {
+              backgroundColor: 'transparent',
+              textDecoration: 'underline',
+            },
+          }}>
+          {t('payment.checkout.promotion.add_code')}
+        </Button>
+      )}
+    </Box>
+  );
+}

package/src/checkout-v2/components/left/staking-breakdown.tsx

@@ -0,0 +1,57 @@
+import HelpOutline from '@mui/icons-material/HelpOutline';
+import { Stack, Tooltip, Typography } from '@mui/material';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import { formatTrialText, whiteTooltipSx } from '../../utils/format';
+
+interface StakingBreakdownProps {
+  staking: string;
+  paymentAmount: string;
+  trialActive: boolean;
+  trialDays: number;
+  afterTrialInterval: string | null;
+}
+
+export default function StakingBreakdown({
+  staking,
+  paymentAmount,
+  trialActive,
+  trialDays,
+  afterTrialInterval,
+}: StakingBreakdownProps) {
+  const { t } = useLocaleContext();
+
+  return (
+    <Stack spacing={1} sx={{ mb: 1 }}>
+      <Stack direction="row" justifyContent="space-between" alignItems="center">
+        <Stack direction="row" spacing={0.5} alignItems="center">
+          <Typography sx={{ color: 'text.secondary', fontSize: 14 }}>
+            {t('payment.checkout.paymentRequired')}
+          </Typography>
+          <Tooltip
+            title={t('payment.checkout.stakingConfirm')}
+            placement="top"
+            arrow
+            slotProps={{ popper: { sx: whiteTooltipSx } }}>
+            <HelpOutline sx={{ fontSize: 16, color: 'text.disabled' }} />
+          </Tooltip>
+        </Stack>
+        <Typography>
+          {trialActive ? formatTrialText(t, trialDays, afterTrialInterval || 'day') : paymentAmount}
+        </Typography>
+      </Stack>
+      <Stack direction="row" justifyContent="space-between" alignItems="center">
+        <Stack direction="row" spacing={0.5} alignItems="center">
+          <Typography sx={{ color: 'text.secondary', fontSize: 14 }}>{t('payment.checkout.staking.title')}</Typography>
+          <Tooltip
+            title={t('payment.checkout.staking.tooltip')}
+            placement="top"
+            arrow
+            slotProps={{ popper: { sx: whiteTooltipSx } }}>
+            <HelpOutline sx={{ fontSize: 16, color: 'text.disabled' }} />
+          </Tooltip>
+        </Stack>
+        <Typography>{staking}</Typography>
+      </Stack>
+    </Stack>
+  );
+}

package/src/checkout-v2/components/left/trial-info.tsx

@@ -0,0 +1,63 @@
+import { Stack, Typography } from '@mui/material';
+import type { TLineItemExpanded } from '@blocklet/payment-types';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import { INTERVAL_LOCALE_KEY } from '../../utils/format';
+
+interface TrialInfoProps {
+  trial: {
+    active: boolean;
+    days: number;
+    afterTrialPrice: string | null;
+    afterTrialInterval: string | null;
+  };
+  mode: string;
+  items: TLineItemExpanded[];
+}
+
+export default function TrialInfo({ trial, mode, items }: TrialInfoProps) {
+  const { t } = useLocaleContext();
+
+  // Trial: "Then X/month after trial"
+  if (trial.active && trial.afterTrialPrice) {
+    return (
+      <Stack
+        direction="row"
+        justifyContent="space-between"
+        alignItems="center"
+        sx={{ borderTop: '1px solid', borderColor: 'divider', pt: 1, mt: 1 }}>
+        <Typography sx={{ color: 'text.secondary', fontSize: 14 }}>{t('common.nextCharge')}</Typography>
+        <Typography sx={{ fontSize: 16, color: 'text.secondary' }}>
+          {trial.afterTrialPrice}
+          {trial.afterTrialInterval ? ` ${t(INTERVAL_LOCALE_KEY[trial.afterTrialInterval] || '')}` : ''}
+        </Typography>
+      </Stack>
+    );
+  }
+
+  // Metered next charge (non-trial)
+  if (!trial.active && ['subscription', 'setup'].includes(mode)) {
+    const meteredItem = items.find(
+      (item: any) => ((item as any).upsell_price || item.price)?.recurring?.usage_type === 'metered'
+    );
+    if (!meteredItem) return null;
+    const meteredInterval = ((meteredItem as any).upsell_price || meteredItem.price)?.recurring?.interval;
+    if (!meteredInterval) return null;
+    const recurringText = t('common.per', { interval: t(`common.${meteredInterval}`) });
+    return (
+      <Stack
+        direction="row"
+        justifyContent="space-between"
+        alignItems="center"
+        sx={{ borderTop: '1px solid', borderColor: 'divider', pt: 1, mt: 1 }}>
+        <Typography sx={{ color: 'text.secondary', fontSize: 14, fontWeight: 600 }}>
+          {t('common.nextCharge')}
+        </Typography>
+        <Typography sx={{ fontSize: 16, color: 'text.secondary' }}>
+          {t('payment.checkout.metered', { recurring: recurringText })}
+        </Typography>
+      </Stack>
+    );
+  }
+
+  return null;
+}

package/src/checkout-v2/components/right/currency-grid.tsx

@@ -0,0 +1,59 @@
+import { Avatar, Card, Radio, Stack, Typography } from '@mui/material';
+import { styled } from '@mui/material/styles';
+import type { TPaymentCurrency } from '@blocklet/payment-types';
+
+const CurrencyRoot = styled('section')`
+  display: grid;
+  width: 100%;
+  gap: 12px;
+  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+
+  .cko-payment-card {
+    position: relative;
+    border: 1px solid ${({ theme }) => theme.palette.primary.main};
+    padding: 4px 8px;
+    cursor: pointer;
+    background: ${({ theme }) => theme.palette.grey[50]};
+  }
+
+  .cko-payment-card-unselect {
+    border: 1px solid ${({ theme }) => theme.palette.divider};
+    padding: 4px 8px;
+    cursor: pointer;
+    background: ${({ theme }) => theme.palette.grey[50]};
+  }
+`;
+
+interface CurrencyGridProps {
+  currencies: TPaymentCurrency[];
+  selectedId: string | undefined;
+  onSelect: (id: string) => Promise<void>;
+}
+
+export default function CurrencyGrid({ currencies, selectedId, onSelect }: CurrencyGridProps) {
+  if (!currencies?.length) return null;
+  return (
+    <CurrencyRoot style={{ display: currencies.length > 1 ? 'grid' : 'block' }}>
+      {currencies.map((cur) => {
+        const selected = cur.id === selectedId;
+        const methodName = (cur as any).method?.name || cur.name || '';
+        return (
+          <Card
+            key={cur.id}
+            variant="outlined"
+            onClick={() => onSelect(cur.id)}
+            className={selected ? 'cko-payment-card' : 'cko-payment-card-unselect'}>
+            <Stack direction="row" sx={{ alignItems: 'center', position: 'relative' }}>
+              <Avatar src={cur.logo} alt={cur.name} sx={{ width: 40, height: 40, mr: '12px' }} />
+              <div>
+                <Typography sx={{ fontSize: 16, color: 'text.primary', fontWeight: 500 }}>{cur.symbol}</Typography>
+                <Typography sx={{ color: 'text.secondary', fontSize: 14 }}>{methodName}</Typography>
+              </div>
+              <Radio checked={selected} sx={{ position: 'absolute', right: 0 }} />
+            </Stack>
+          </Card>
+        );
+      })}
+    </CurrencyRoot>
+  );
+}

package/src/checkout-v2/components/right/customer-info-card.tsx

@@ -0,0 +1,214 @@
+import { useState, useEffect, useRef } from 'react';
+import { Box, Button, InputBase, InputAdornment, Stack, Typography } from '@mui/material';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import CountrySelect from '../../../components/country-select';
+import PhoneField from '../../../components/phone-field';
+import { countryCodeToFlag } from '../../utils/format';
+
+interface FieldConfig {
+  name: string;
+  type: string;
+  required: boolean;
+}
+
+interface CustomerInfoCardProps {
+  form: {
+    fields: FieldConfig[];
+    values: Record<string, any>;
+    onChange: (field: string, value: string | boolean | Record<string, string>) => void;
+    errors: Partial<Record<string, string>>;
+    validateField: (field: string) => Promise<void>;
+  };
+  isLoggedIn: boolean;
+}
+
+const fieldLabelMap = (t: (key: string) => string) =>
+  ({
+    customer_name: t('payment.checkout.customer.name'),
+    customer_email: t('payment.checkout.customer.email'),
+    customer_phone: t('payment.checkout.customer.phone'),
+    'billing_address.country': t('payment.checkout.billing.country'),
+    'billing_address.state': t('payment.checkout.billing.state'),
+    'billing_address.city': t('payment.checkout.billing.city'),
+    'billing_address.line1': t('payment.checkout.billing.line1'),
+    'billing_address.line2': t('payment.checkout.billing.line2'),
+    'billing_address.postal_code': t('payment.checkout.billing.postal_code'),
+  }) as Record<string, string>;
+
+export default function CustomerInfoCard({ form, isLoggedIn }: CustomerInfoCardProps) {
+  const { t } = useLocaleContext();
+  const labels = fieldLabelMap(t);
+
+  // Default to confirmed view if required fields have values
+  const hasRequiredData = !!(form.values.customer_name && form.values.customer_email);
+  const [showEditForm, setShowEditForm] = useState(!hasRequiredData);
+  const autoConfirmedRef = useRef(false);
+
+  // When data arrives (e.g. prefetch), auto-switch to confirmed if valid
+  useEffect(() => {
+    if (!autoConfirmedRef.current && form.values.customer_name && form.values.customer_email) {
+      autoConfirmedRef.current = true;
+      setShowEditForm(false);
+    }
+  }, [form.values.customer_name, form.values.customer_email]);
+
+  if (!isLoggedIn) return null;
+
+  // Summary view
+  if (!showEditForm) {
+    return (
+      <Box sx={{ mt: 2 }}>
+        {/* Header — outside the card */}
+        <Stack direction="row" justifyContent="space-between" alignItems="center" sx={{ mb: 1 }}>
+          <Typography sx={{ fontSize: 13, fontWeight: 600, color: 'text.secondary' }}>
+            {t('payment.checkout.customerInfo')}
+          </Typography>
+          <Button
+            size="small"
+            variant="text"
+            onClick={() => setShowEditForm(true)}
+            sx={{ minWidth: 0, fontSize: 13, fontWeight: 600, p: 0 }}>
+            {t('common.edit')}
+          </Button>
+        </Stack>
+        {/* Card body */}
+        <Stack
+          spacing={0.5}
+          sx={{
+            p: 2,
+            backgroundColor: 'background.paper',
+            borderRadius: 1,
+            border: '1px solid',
+            borderColor: 'divider',
+          }}>
+          {form.values.customer_name && (
+            <Typography variant="body2" sx={{ color: 'text.primary', fontWeight: 600, fontSize: '0.9375rem' }}>
+              {form.values.customer_name}
+            </Typography>
+          )}
+          {form.values.customer_email && (
+            <Typography variant="body2" sx={{ color: 'text.secondary', fontSize: '0.8125rem' }}>
+              {form.values.customer_email}
+            </Typography>
+          )}
+          {form.fields.some((f) => f.name === 'customer_phone') && form.values.customer_phone && (
+            <Typography variant="body2" sx={{ color: 'text.secondary', fontSize: '0.8125rem' }}>
+              {form.values.customer_phone}
+            </Typography>
+          )}
+          {(form.values.billing_address?.country ||
+            form.values.billing_address?.state ||
+            form.values.billing_address?.postal_code) && (
+            <Stack direction="row" alignItems="center" spacing={0.75}>
+              {form.values.billing_address?.country && (
+                <Box component="span" sx={{ fontSize: 14, lineHeight: 1 }}>
+                  {countryCodeToFlag(form.values.billing_address.country)}
+                </Box>
+              )}
+              <Typography variant="body2" sx={{ color: 'text.secondary', fontSize: '0.8125rem' }}>
+                {form.values.billing_address?.state || ''}
+                {form.values.billing_address?.postal_code
+                  ? ` [ ${t('payment.checkout.billing.postal_code')}: ${form.values.billing_address.postal_code} ]`
+                  : ''}
+              </Typography>
+            </Stack>
+          )}
+        </Stack>
+      </Box>
+    );
+  }
+
+  // Edit form — v1 style: bold label above, grey background input
+  return (
+    <Box sx={{ mt: 2 }}>
+      {/* Header — outside the card */}
+      <Stack direction="row" justifyContent="space-between" alignItems="center" sx={{ mb: 1 }}>
+        <Typography sx={{ fontSize: 13, fontWeight: 600, color: 'text.secondary' }}>
+          {t('payment.checkout.customerInfo')}
+        </Typography>
+        <Button
+          size="small"
+          variant="text"
+          onClick={() => setShowEditForm(false)}
+          sx={{ minWidth: 0, fontSize: 13, fontWeight: 600, p: 0 }}>
+          {t('common.confirm')}
+        </Button>
+      </Stack>
+      {/* Card body */}
+      <Stack
+        spacing={0}
+        sx={{
+          p: 2,
+          backgroundColor: 'background.paper',
+          borderRadius: 1,
+          border: '1px solid',
+          borderColor: 'divider',
+        }}>
+        {form.fields
+          .filter((f) => f.name !== 'billing_address.country')
+          .map((field) => {
+            const { name } = field;
+            const label = labels[name] || name;
+            const value = name.includes('.')
+              ? name.split('.').reduce((o: any, k) => o?.[k], form.values)
+              : form.values[name];
+            const isPostalCode = name === 'billing_address.postal_code';
+            const isPhone = name === 'customer_phone';
+
+            // Phone field — with country flag + dial code selector
+            if (isPhone) {
+              return (
+                <PhoneField
+                  key={name}
+                  value={value || ''}
+                  country={form.values.billing_address?.country || ''}
+                  onChange={(phone) => form.onChange('customer_phone', phone)}
+                  onCountryChange={(c) => form.onChange('billing_address.country', c)}
+                  onBlur={() => form.validateField(name)}
+                  label={label}
+                  error={form.errors[name]}
+                />
+              );
+            }
+
+            return (
+              <Box key={name} sx={{ mb: 1.5 }}>
+                <Typography sx={{ fontSize: 13, fontWeight: 600, color: 'text.primary', mb: 0.5 }}>{label}</Typography>
+                <InputBase
+                  fullWidth
+                  value={value || ''}
+                  onChange={(e) => form.onChange(name, e.target.value)}
+                  onBlur={() => form.validateField(name)}
+                  startAdornment={
+                    isPostalCode ? (
+                      <InputAdornment position="start" sx={{ mr: 0.5, ml: -0.5 }}>
+                        <CountrySelect
+                          value={form.values.billing_address?.country || ''}
+                          onChange={(v) => form.onChange('billing_address.country', v)}
+                          sx={{
+                            '.MuiOutlinedInput-notchedOutline': { borderColor: 'transparent !important' },
+                            '& .MuiSelect-select': { py: 0, pr: '20px !important' },
+                          }}
+                        />
+                      </InputAdornment>
+                    ) : undefined
+                  }
+                  sx={{
+                    bgcolor: (theme) => (theme.palette.mode === 'dark' ? 'rgba(255,255,255,0.06)' : 'grey.50'),
+                    borderRadius: '8px',
+                    px: 1.5,
+                    py: 0.75,
+                    fontSize: 14,
+                    '& .MuiInputBase-input': { p: 0 },
+                  }}
+                />
+                {form.errors[name] && (
+                  <Typography sx={{ fontSize: 12, color: 'error.main', mt: 0.25 }}>{form.errors[name]}</Typography>
+                )}
+              </Box>
+            );
+          })}
+      </Stack>
+    </Box>
+  );
+}

package/src/checkout-v2/components/right/status-feedback.tsx

@@ -0,0 +1,35 @@
+import { useEffect, useRef } from 'react';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import Toast from '@arcblock/ux/lib/Toast';
+
+interface StatusFeedbackProps {
+  status: string;
+  context: any;
+  onReset: () => void;
+}
+
+export default function StatusFeedback({ status, context, onReset }: StatusFeedbackProps) {
+  const { t } = useLocaleContext();
+  const prevStatusRef = useRef(status);
+
+  // Show toast for generic error states, then reset to idle
+  // Special codes (CUSTOMER_LIMITED, PRICE_CHANGED, etc.) are handled by parent
+  useEffect(() => {
+    if (status === prevStatusRef.current) return;
+    prevStatusRef.current = status;
+
+    if (status === 'failed' && context?.type === 'error') {
+      // CUSTOMER_LIMITED is handled by parent (overdue invoice dialog)
+      if (context.code === 'CUSTOMER_LIMITED') return;
+
+      Toast.error(context.message || 'Payment failed');
+      onReset();
+    }
+
+    // credit_insufficient is handled by CheckoutDialogs (ConfirmDialog), not Toast
+  }, [status, context, t, onReset]);
+
+  // Stripe dialog and DID Connect are handled by CheckoutDialogs and payment-panel respectively
+  // No inline Alerts — matches V1 behavior (Toast for errors, dialogs for interaction)
+  return null;
+}

package/src/checkout-v2/components/right/submit-button.tsx

@@ -0,0 +1,37 @@
+import { Button, CircularProgress } from '@mui/material';
+
+interface SubmitButtonProps {
+  canSubmit: boolean;
+  isProcessing: boolean;
+  isWaitingStripe: boolean;
+  label: string;
+  processingLabel: string;
+  onSubmit: () => Promise<void>;
+}
+
+export default function SubmitButton({
+  canSubmit,
+  isProcessing,
+  isWaitingStripe,
+  label,
+  processingLabel,
+  onSubmit,
+}: SubmitButtonProps) {
+  return (
+    <Button
+      variant="contained"
+      size="large"
+      fullWidth
+      disabled={!canSubmit || isWaitingStripe}
+      onClick={onSubmit}
+      startIcon={isProcessing ? <CircularProgress size={20} color="inherit" /> : null}
+      sx={{
+        py: 1.5,
+        fontSize: '1.3rem',
+        fontWeight: 600,
+        textTransform: 'none',
+      }}>
+      {isProcessing ? processingLabel : label}
+    </Button>
+  );
+}