@blocklet/payment-react 1.26.1 → 1.26.3

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

@@ -1,4 +1,4 @@
-import { useState, useEffect, useRef } from 'react';
+import { useState, useRef, useCallback, useEffect } 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';
@@ -17,7 +17,9 @@ interface CustomerInfoCardProps {
     values: Record<string, any>;
     onChange: (field: string, value: string | boolean | Record<string, string>) => void;
     errors: Partial<Record<string, string>>;
+    checkValid: () => Promise<boolean>;
     validateField: (field: string) => Promise<void>;
+    prefetched: boolean;
   };
   isLoggedIn: boolean;
 }
@@ -39,20 +41,31 @@ export default function CustomerInfoCard({ form, isLoggedIn }: CustomerInfoCardP
   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);
+  // Don't render until first validation completes — avoids flash.
+  // Valid → show collapsed summary; invalid → show expanded form.
+  // After first check, only manual "Edit"/"Confirm" toggles.
+  const [showEditForm, setShowEditForm] = useState(false);
+  const [ready, setReady] = useState(false);
+  const checkedRef = 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 (checkedRef.current) return;
+    // Wait for data to arrive before making a decision
+    if (!form.prefetched && !form.values.customer_name && !form.values.customer_email) return;
+    checkedRef.current = true;
+    form.checkValid().then((valid) => {
+      setShowEditForm(!valid);
+      setReady(true);
+    });
+  }, [form.prefetched]); // eslint-disable-line react-hooks/exhaustive-deps
 
-  if (!isLoggedIn) return null;
+  // Wrap onChange to delegate to parent form
+  const handleChange: typeof form.onChange = useCallback(
+    (field, value) => form.onChange(field, value),
+    [form.onChange] // eslint-disable-line react-hooks/exhaustive-deps
+  );
+
+  if (!isLoggedIn || !ready) return null;
 
   // Summary view
   if (!showEditForm) {
@@ -162,8 +175,8 @@ export default function CustomerInfoCard({ form, isLoggedIn }: CustomerInfoCardP
                   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)}
+                  onChange={(phone) => handleChange('customer_phone', phone)}
+                  onCountryChange={(c) => handleChange('billing_address.country', c)}
                   onBlur={() => form.validateField(name)}
                   label={label}
                   error={form.errors[name]}
@@ -177,14 +190,14 @@ export default function CustomerInfoCard({ form, isLoggedIn }: CustomerInfoCardP
                 <InputBase
                   fullWidth
                   value={value || ''}
-                  onChange={(e) => form.onChange(name, e.target.value)}
+                  onChange={(e) => handleChange(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)}
+                          onChange={(v) => handleChange('billing_address.country', v)}
                           sx={{
                             '.MuiOutlinedInput-notchedOutline': { borderColor: 'transparent !important' },
                             '& .MuiSelect-select': { py: 0, pr: '20px !important' },

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

@@ -19,8 +19,8 @@ export default function StatusFeedback({ status, context, onReset }: StatusFeedb
     prevStatusRef.current = status;
 
     if (status === 'failed' && context?.type === 'error') {
-      // CUSTOMER_LIMITED is handled by parent (overdue invoice dialog)
-      if (context.code === 'CUSTOMER_LIMITED') return;
+      // CUSTOMER_LIMITED / STOP_ACCEPTING_ORDERS are handled by CheckoutDialogs
+      if (context.code === 'CUSTOMER_LIMITED' || context.code === 'STOP_ACCEPTING_ORDERS') return;
 
       Toast.error(context.message || 'Payment failed');
       onReset();

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

@@ -1,4 +1,5 @@
 import { Button, CircularProgress } from '@mui/material';
+import { primaryContrastColor } from '../../utils/format';
 
 interface SubmitButtonProps {
   canSubmit: boolean;
@@ -30,6 +31,7 @@ export default function SubmitButton({
         fontSize: '1.3rem',
         fontWeight: 600,
         textTransform: 'none',
+        color: (theme) => primaryContrastColor(theme),
       }}>
       {isProcessing ? processingLabel : label}
     </Button>

package/src/checkout-v2/layouts/checkout-layout.tsx

@@ -27,14 +27,26 @@ const fadeIn = {
   animation: { xs: 'none', md: 'fadeIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.15s both' },
 } as const;
 
-// Desktop: right panel slides in from the right
-const slideInFromRight = {
-  '@keyframes slideInRight': {
-    from: { transform: 'translateX(100%)' },
-    to: { transform: 'translateX(0)' },
-  },
-  animation: { xs: 'none', md: 'slideInRight 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards' },
-} as const;
+// Desktop: right panel slides in from right (non-Safari) or fades in (Safari)
+// Safari has flexbox reflow bugs with translateX(100%), so we use a subtle fade instead
+const isSafari =
+  typeof navigator !== 'undefined' && /Safari/.test(navigator.userAgent) && !/Chrome/.test(navigator.userAgent);
+
+const slideInFromRight = isSafari
+  ? ({
+    '@keyframes panelFadeIn': {
+      from: { opacity: 0, transform: 'translateX(24px)' },
+      to: { opacity: 1, transform: 'none' },
+    },
+    animation: { xs: 'none', md: 'panelFadeIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) both' },
+  } as const)
+  : ({
+    '@keyframes slideInRight': {
+      from: { transform: 'translateX(100%)' },
+      to: { transform: 'translateX(0)' },
+    },
+    animation: { xs: 'none', md: 'slideInRight 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards' },
+  } as const);
 
 interface CheckoutLayoutProps {
   left: React.ReactNode;
@@ -94,6 +106,7 @@ export default function CheckoutLayout({ left, right, mode = 'inline' }: Checkou
           <Box
             sx={{
               flex: 1,
+              minWidth: 0,
               bgcolor: (t) => (t.palette.mode === 'dark' ? 'background.default' : '#f8faff'),
               p: { xs: 3, md: 5 },
               pt: { xs: 3, md: 4 },
@@ -170,7 +183,8 @@ export default function CheckoutLayout({ left, right, mode = 'inline' }: Checkou
       {!hideLeft && (
         <Box
           sx={{
-            width: { xs: '100%', md: '50%' },
+            flex: { xs: 'none', md: '0 0 50%' },
+            width: { xs: '100%' },
             height: { xs: 'auto', md: '100vh' },
             display: 'flex',
             justifyContent: { md: 'center' },
@@ -196,7 +210,8 @@ export default function CheckoutLayout({ left, right, mode = 'inline' }: Checkou
       {/* Right panel — full width when left is hidden */}
       <Box
         sx={{
-          width: hideLeft ? '100%' : { xs: '100%', md: '50%' },
+          flex: hideLeft ? 'none' : { xs: 'none', md: '0 0 50%' },
+          width: hideLeft ? '100%' : { xs: '100%' },
           height: hideLeft ? '100vh' : { xs: 'auto', md: '100vh' },
           bgcolor: 'background.paper',
           boxShadow: hideLeft ? 'none' : { md: '-4px 0 16px rgba(0,0,0,0.04)' },

package/src/checkout-v2/panels/left/composite-panel.tsx

@@ -17,7 +17,13 @@ import {
 } from '@blocklet/payment-react-headless';
 
 import { useMobile } from '../../../hooks/mobile';
-import { INTERVAL_LOCALE_KEY, formatTrialText, getSessionHeaderMeta, tSafe } from '../../utils/format';
+import {
+  INTERVAL_LOCALE_KEY,
+  formatTrialText,
+  getSessionHeaderMeta,
+  tSafe,
+  primaryContrastColor,
+} from '../../utils/format';
 import ProductItemCard from '../../components/left/product-item-card';
 import BillingToggle from '../../components/left/billing-toggle';
 import CrossSellCard from '../../components/left/cross-sell-card';
@@ -60,6 +66,10 @@ export default function CompositePanel() {
   const canUpsell = nonCrossSellItems.length <= 1;
   const hasTopUpsell = canUpsell && !!upsellPrimaryItem && ['subscription', 'setup'].includes(mode);
   const isUpselled = !!(upsellPrimaryItem as any)?.upsell_price;
+  const [upsellSwitching, setUpsellSwitching] = useState(false);
+  // Optimistic: track which tab the user clicked so highlight switches immediately
+  const [pendingUpsell, setPendingUpsell] = useState<boolean | null>(null);
+  const visualIsUpselled = pendingUpsell !== null ? pendingUpsell : isUpselled;
 
   // Intervals for capsule toggle
   const currentInterval = hasTopUpsell ? (upsellPrimaryItem!.price as any)?.recurring?.interval : null;
@@ -94,7 +104,7 @@ export default function CompositePanel() {
   // Capsule button sx helper
   const activeSx = {
     bgcolor: 'primary.main',
-    color: '#fff',
+    color: (theme: any) => primaryContrastColor(theme),
     boxShadow: '0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1)',
   };
   const inactiveSx = {
@@ -260,17 +270,23 @@ export default function CompositePanel() {
                 {/* Current interval */}
                 <Box
                   onClick={async () => {
-                    if (isUpselled) {
+                    if (isUpselled && !upsellSwitching) {
+                      setPendingUpsell(false);
+                      setUpsellSwitching(true);
                       try {
                         await lineItems.downsell(
                           (upsellPrimaryItem as any).upsell_price?.id || upsellPrimaryItem!.price_id
                         );
                       } catch (err: any) {
+                        setPendingUpsell(null);
                         Toast.error(err?.response?.data?.error || err?.message || 'Failed');
+                      } finally {
+                        setUpsellSwitching(false);
+                        setPendingUpsell(null);
                       }
                     }
                   }}
-                  sx={capsuleBtnSx(!isUpselled)}>
+                  sx={capsuleBtnSx(!visualIsUpselled)}>
                   <Typography component="span" sx={{ fontSize: 14, fontWeight: 700, color: 'inherit', lineHeight: 1 }}>
                     {t(INTERVAL_LOCALE_KEY[currentInterval!] || '')}
                   </Typography>
@@ -278,15 +294,21 @@ export default function CompositePanel() {
                 {/* Upsell interval */}
                 <Box
                   onClick={async () => {
-                    if (!isUpselled) {
+                    if (!isUpselled && !upsellSwitching) {
+                      setPendingUpsell(true);
+                      setUpsellSwitching(true);
                       try {
                         await lineItems.upsell(upsellPrimaryItem!.price_id, upsellTarget.id);
                       } catch (err: any) {
+                        setPendingUpsell(null);
                         Toast.error(err?.response?.data?.error || err?.message || 'Failed');
+                      } finally {
+                        setUpsellSwitching(false);
+                        setPendingUpsell(null);
                       }
                     }
                   }}
-                  sx={capsuleBtnSx(isUpselled)}>
+                  sx={capsuleBtnSx(visualIsUpselled)}>
                   <Typography component="span" sx={{ fontSize: 14, fontWeight: 700, color: 'inherit', lineHeight: 1 }}>
                     {t(INTERVAL_LOCALE_KEY[upsellInterval!] || '')}
                   </Typography>

package/src/checkout-v2/panels/right/payment-panel.tsx

@@ -39,10 +39,10 @@ import {
 import { joinURL } from 'ufo';
 import { usePaymentContext } from '../../../contexts/payment';
 import { useMobile } from '../../../hooks/mobile';
-import { getPrefix } from '../../../libs/util';
+import { getPrefix, getStatementDescriptor } from '../../../libs/util';
 import OverdueInvoicePayment from '../../../components/over-due-invoice-payment';
 
-import { tSafe, whiteTooltipSx } from '../../utils/format';
+import { tSafe, whiteTooltipSx, primaryContrastColor } from '../../utils/format';
 import CustomerInfoCard from '../../components/right/customer-info-card';
 import SubscriptionDisclaimer from '../../components/right/subscription-disclaimer';
 import StatusFeedback from '../../components/right/status-feedback';
@@ -459,6 +459,8 @@ export default function PaymentPanel() {
               }}
               discounts={discounts}
               discountAmount={pricing.discount}
+              currency={currency}
+              isAmountLoading={isAmountLoading}
             />
           </>
         )}
@@ -564,15 +566,39 @@ export default function PaymentPanel() {
           disabled={!canSubmit || submit.status === 'waiting_stripe'}
           onClick={handleAction}
           startIcon={isProcessing ? <CircularProgress size={20} color="inherit" /> : null}
-          endIcon={!isProcessing ? <ArrowForwardIcon /> : undefined}
           sx={{
             py: 1.5,
             fontSize: '1.1rem',
             fontWeight: 600,
             textTransform: 'none',
             borderRadius: '12px',
+            color: (theme) => primaryContrastColor(theme),
+            position: 'relative',
+            overflow: 'hidden',
+            '&:hover': { bgcolor: 'primary.main' },
+            '&:hover .arrow-icon': { transform: 'translateX(4px)' },
+            '&:hover .shine-layer': { transform: 'translateX(100%)' },
           }}>
-          {isProcessing ? `${t('payment.checkout.processing')}...` : buttonLabel}
+          <Box component="span" sx={{ position: 'relative', zIndex: 1 }}>
+            {isProcessing ? `${t('payment.checkout.processing')}...` : buttonLabel}
+          </Box>
+          {!isProcessing && (
+            <ArrowForwardIcon
+              className="arrow-icon"
+              sx={{ ml: 1, position: 'relative', zIndex: 1, transition: 'transform 0.2s ease' }}
+            />
+          )}
+          <Box
+            className="shine-layer"
+            sx={{
+              position: 'absolute',
+              inset: 0,
+              background: 'linear-gradient(90deg, transparent, rgba(255,255,255,0.12), transparent)',
+              transform: 'translateX(-100%)',
+              transition: 'transform 0.7s ease',
+              pointerEvents: 'none',
+            }}
+          />
         </Button>
 
         {/* Mobile: SSL footer inside fixed bar, below button */}
@@ -632,6 +658,7 @@ export default function PaymentPanel() {
             }}
             discounts={discounts}
             discountAmount={pricing.discount}
+            currency={currency}
           />
         </Drawer>
       )}
@@ -642,7 +669,7 @@ export default function PaymentPanel() {
           mode={mode}
           subscription={subscription}
           staking={pricing.staking}
-          appName={(session?.metadata as any)?.app_name || 'New Payment Kit'}
+          appName={getStatementDescriptor(session?.line_items || [])}
         />
 
         {!isMobile && (

package/src/checkout-v2/utils/format.ts

@@ -1,6 +1,8 @@
 import { fromUnitToToken } from '@ocap/util';
 import type { TPaymentCurrency } from '@blocklet/payment-types';
 
+export { primaryContrastColor } from '../../libs/util';
+
 // Interval key → locale key mapping
 export const INTERVAL_LOCALE_KEY: Record<string, string> = {
   day: 'common.daily',

package/src/checkout-v2/views/error-view.tsx

@@ -3,10 +3,11 @@ import { alpha, useTheme } from '@mui/material/styles';
 import ArrowBackIcon from '@mui/icons-material/ArrowBack';
 import Header from '@blocklet/ui-react/lib/Header';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import { primaryContrastColor } from '../utils/format';
 
 interface ErrorViewProps {
   error: string;
-  errorCode?: 'SESSION_EXPIRED' | 'EMPTY_LINE_ITEMS' | null;
+  errorCode?: 'SESSION_EXPIRED' | 'EMPTY_LINE_ITEMS' | 'STOP_ACCEPTING_ORDERS' | null;
   mode?: string;
 }
 
@@ -127,6 +128,14 @@ function getErrorConfig(
     };
   }
 
+  if (errorCode === 'STOP_ACCEPTING_ORDERS') {
+    return {
+      title: t('payment.checkout.stopAcceptingOrders.title'),
+      description: t('payment.checkout.stopAcceptingOrders.description'),
+      color: '#f59e0b',
+    };
+  }
+
   return {
     title: t('payment.checkout.error.title'),
     description: error,
@@ -191,6 +200,7 @@ function ErrorContent({ error, errorCode = undefined }: { error: string; errorCo
             fontWeight: 600,
             fontSize: 16,
             letterSpacing: '0.02em',
+            color: (th) => primaryContrastColor(th),
             boxShadow: `0 8px 32px -4px ${alpha(primaryColor, 0.3)}`,
             '&:hover': {
               boxShadow: `0 12px 40px -4px ${alpha(primaryColor, 0.4)}`,

package/src/checkout-v2/views/success-view.tsx

@@ -23,7 +23,7 @@ import type { TCheckoutSessionExpanded } from '@blocklet/payment-types';
 import { usePaymentMethodContext } from '@blocklet/payment-react-headless';
 
 import { getPrefix } from '../../libs/util';
-import { formatTokenAmount } from '../utils/format';
+import { formatTokenAmount, primaryContrastColor } from '../utils/format';
 
 // ── Animations ──
 
@@ -573,6 +573,7 @@ function SubscriptionLinks({
           fontWeight: 700,
           fontSize: { xs: 16, md: 17 },
           letterSpacing: '0.02em',
+          color: (theme) => primaryContrastColor(theme),
           boxShadow: '0 8px 24px -4px rgba(59,130,246,0.25)',
           '&:hover': {
             boxShadow: '0 12px 28px -4px rgba(59,130,246,0.35)',
@@ -616,6 +617,7 @@ function InvoiceLink({
         fontWeight: 700,
         fontSize: { xs: 16, md: 17 },
         letterSpacing: '0.02em',
+        color: (theme) => primaryContrastColor(theme),
         boxShadow: '0 8px 24px -4px rgba(59,130,246,0.25)',
         '&:hover': {
           boxShadow: '0 12px 28px -4px rgba(59,130,246,0.35)',

package/src/components/over-due-invoice-payment.tsx

@@ -19,7 +19,7 @@ import Dialog from '@arcblock/ux/lib/Dialog/dialog';
 import { CheckCircle as CheckCircleIcon } from '@mui/icons-material';
 import debounce from 'lodash/debounce';
 import { usePaymentContext } from '../contexts/payment';
-import { formatAmount, formatError, getPrefix, isCrossOrigin } from '../libs/util';
+import { formatAmount, formatError, getPrefix, isCrossOrigin, primaryContrastColor } from '../libs/util';
 import { useSubscription } from '../hooks/subscription';
 import api from '../libs/api';
 import LoadingButton from './loading-button';
@@ -397,6 +397,8 @@ function OverdueInvoicePayment({
     const { currency } = item;
     const inProcess = payLoading && selectCurrencyId === currency.id;
     const status = paymentStatus[currency.id] || 'idle';
+    const containedColorSx =
+      (options?.variant || 'contained') === 'contained' ? { color: (th: any) => primaryContrastColor(th) } : {};
 
     if (status === 'success') {
       return (
@@ -404,6 +406,7 @@ function OverdueInvoicePayment({
           variant={options?.variant || 'contained'}
           size="small"
           onClick={() => checkAndHandleInvoicePaid(currency.id)}
+          sx={containedColorSx}
           {...(primaryButton
             ? {}
             : {
@@ -442,7 +445,7 @@ function OverdueInvoicePayment({
               disabled={paying || status === 'processing'}
               loading={paying || status === 'processing'}
               onClick={onPay}
-              sx={options?.sx}>
+              sx={{ ...containedColorSx, ...((options?.sx || {}) as any) }}>
               {buttonText}
             </LoadingButton>
           )}
@@ -456,7 +459,7 @@ function OverdueInvoicePayment({
         disabled={inProcess}
         loading={inProcess}
         onClick={() => handlePay(item)}
-        sx={options?.sx}>
+        sx={{ ...containedColorSx, ...((options?.sx || {}) as any) }}>
         {status === 'error' ? t('payment.subscription.overdue.retry') : t('payment.subscription.overdue.payNow')}
       </LoadingButton>
     );

package/src/components/service-suspended-dialog.tsx

@@ -0,0 +1,64 @@
+import { Box, Button, Dialog, DialogContent, Stack, Typography } from '@mui/material';
+import { alpha } from '@mui/material/styles';
+import PauseCircleOutlineIcon from '@mui/icons-material/PauseCircleOutline';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+
+export default function ServiceSuspendedDialog({ open, onClose }: { open: boolean; onClose: () => void }) {
+  const { t } = useLocaleContext();
+
+  return (
+    <Dialog
+      open={open}
+      onClose={onClose}
+      PaperProps={{
+        sx: {
+          borderRadius: 3,
+          maxWidth: 400,
+          mx: 'auto',
+          overflow: 'hidden',
+        },
+      }}>
+      <DialogContent sx={{ p: 0 }}>
+        <Stack alignItems="center" sx={{ pt: 4, pb: 3, px: 4, textAlign: 'center' }}>
+          <Box
+            sx={{
+              width: 64,
+              height: 64,
+              borderRadius: '50%',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              bgcolor: (theme) => alpha(theme.palette.warning.main, 0.1),
+              mb: 2.5,
+            }}>
+            <PauseCircleOutlineIcon sx={{ fontSize: 36, color: 'warning.main' }} />
+          </Box>
+
+          <Typography sx={{ fontWeight: 700, fontSize: 18, mb: 1, color: 'text.primary' }}>
+            {t('payment.checkout.stopAcceptingOrders.title')}
+          </Typography>
+
+          <Typography sx={{ color: 'text.secondary', fontSize: 14, lineHeight: 1.6 }}>
+            {t('payment.checkout.stopAcceptingOrders.description')}
+          </Typography>
+        </Stack>
+
+        <Box sx={{ px: 4, pb: 3 }}>
+          <Button
+            fullWidth
+            variant="contained"
+            disableElevation
+            onClick={onClose}
+            sx={{
+              borderRadius: 2,
+              textTransform: 'none',
+              fontWeight: 600,
+              py: 1,
+            }}>
+            {t('common.know')}
+          </Button>
+        </Box>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/libs/util.ts

@@ -1823,3 +1823,10 @@ export function formatLinkWithLocale(url: string, locale?: string) {
     return `${url}${separator}locale=${locale}`;
   }
 }
+
+// Compute text color that contrasts with primary.main, works in both light and dark mode
+export function primaryContrastColor(theme: {
+  palette: { primary: { main: string }; getContrastText: (bg: string) => string };
+}): string {
+  return theme.palette.getContrastText(theme.palette.primary.main);
+}

package/src/locales/en.tsx

@@ -396,6 +396,10 @@ export default flat({
         title: 'Nothing to show here',
         description: 'It seems this checkout session is not configured properly',
       },
+      stopAcceptingOrders: {
+        title: 'Service Suspended',
+        description: 'New order placement is temporarily unavailable due to a system-level service suspension.',
+      },
       error: {
         title: 'Something went wrong',
       },

package/src/locales/zh.tsx

@@ -416,6 +416,10 @@ export default flat({
         title: '没有任何购买项目',
         description: '可能这个付款链接没有正确配置',
       },
+      stopAcceptingOrders: {
+        title: '暂停服务',
+        description: '因系统策略调整，当前已暂停新订单服务。',
+      },
       error: {
         title: '出了点问题',
       },

package/src/payment/form/index.tsx

@@ -61,6 +61,7 @@ import LoadingButton from '../../components/loading-button';
 import OverdueInvoicePayment from '../../components/over-due-invoice-payment';
 import { saveCurrencyPreference } from '../../libs/currency';
 import ConfirmDialog from '../../components/confirm';
+import ServiceSuspendedDialog from '../../components/service-suspended-dialog';
 import PriceChangeConfirm from '../../components/price-change-confirm';
 import { getFieldValidation, validatePostalCode } from '../../libs/validator';
 
@@ -267,6 +268,7 @@ export default function PaymentForm({
     };
     customer?: TCustomer;
     customerLimited?: boolean;
+    serviceSuspended?: boolean;
     stripePaying: boolean;
     fastCheckoutInfo: FastCheckoutInfo | null;
     creditInsufficientInfo: {
@@ -289,6 +291,7 @@ export default function PaymentForm({
     stripeContext: undefined,
     customer,
     customerLimited: false,
+    serviceSuspended: false,
     stripePaying: false,
     fastCheckoutInfo: null,
     creditInsufficientInfo: null,
@@ -1198,6 +1201,11 @@ export default function PaymentForm({
           shouldToast = false;
           setState({ customerLimited: true });
         }
+
+        if (errorCode === 'STOP_ACCEPTING_ORDERS') {
+          shouldToast = false;
+          setState({ serviceSuspended: true });
+        }
       }
       if (shouldToast) {
         Toast.error(formatError(err));
@@ -1474,6 +1482,9 @@ export default function PaymentForm({
             }}
           />
         )}
+        {state.serviceSuspended && (
+          <ServiceSuspendedDialog open onClose={() => setState({ serviceSuspended: false })} />
+        )}
         {FastCheckoutConfirmDialog}
         {CreditInsufficientDialog}
         {PriceUpdatedDialog}
@@ -1748,6 +1759,15 @@ export default function PaymentForm({
           }}
         />
       )}
+      {state.serviceSuspended && (
+        <ConfirmDialog
+          onConfirm={() => setState({ serviceSuspended: false })}
+          onCancel={() => setState({ serviceSuspended: false })}
+          title={t('payment.checkout.stopAcceptingOrders.title')}
+          message={t('payment.checkout.stopAcceptingOrders.description')}
+          confirm={t('common.confirm')}
+        />
+      )}
       {FastCheckoutConfirmDialog}
       {CreditInsufficientDialog}
       {PriceUpdatedDialog}