payment-kit 1.19.11 → 1.19.13

package/api/src/queues/notification.ts

@@ -21,6 +21,10 @@ import {
   SubscriptionRefundSucceededEmailTemplate,
   SubscriptionRefundSucceededEmailTemplateOptions,
 } from '../libs/notification/template/subscription-refund-succeeded';
+import {
+  OneTimePaymentRefundSucceededEmailTemplate,
+  OneTimePaymentRefundSucceededEmailTemplateOptions,
+} from '../libs/notification/template/one-time-payment-refund-succeeded';
 import {
   SubscriptionRenewFailedEmailTemplate,
   SubscriptionRenewFailedEmailTemplateOptions,
@@ -187,7 +191,7 @@ function calculateNextNotificationTime(preference: NotificationPreference): numb
   return Math.floor(nextTime.valueOf() / 1000);
 }
 
-function getNotificationTemplate(job: NotificationQueueJob): BaseEmailTemplate {
+async function getNotificationTemplate(job: NotificationQueueJob): Promise<BaseEmailTemplate> {
   if (job.type === 'usage.report.empty') {
     return new UsageReportEmptyEmailTemplate(job.options as UsageReportEmptyEmailTemplateOptions);
   }
@@ -225,7 +229,16 @@ function getNotificationTemplate(job: NotificationQueueJob): BaseEmailTemplate {
     return new SubscriptionCanceledEmailTemplate(job.options as SubscriptionCanceledEmailTemplateOptions);
   }
   if (job.type === 'refund.succeeded') {
-    return new SubscriptionRefundSucceededEmailTemplate(job.options as SubscriptionRefundSucceededEmailTemplateOptions);
+    const { refundId } = job.options as { refundId: string };
+    const refund = await Refund.findByPk(refundId);
+    if (refund?.subscription_id) {
+      return new SubscriptionRefundSucceededEmailTemplate(
+        job.options as SubscriptionRefundSucceededEmailTemplateOptions
+      );
+    }
+    return new OneTimePaymentRefundSucceededEmailTemplate(
+      job.options as OneTimePaymentRefundSucceededEmailTemplateOptions
+    );
   }
   if (job.type === 'customer.reward.succeeded') {
     return new CustomerRewardSucceededEmailTemplate(job.options as CustomerRewardSucceededEmailTemplateOptions);
@@ -264,7 +277,7 @@ function getNotificationTemplate(job: NotificationQueueJob): BaseEmailTemplate {
 
 async function handleNotificationJob(job: NotificationQueueJob): Promise<void> {
   try {
-    const template = getNotificationTemplate(job);
+    const template = await getNotificationTemplate(job);
 
     await new Notification(template, job.type).send();
     logger.info('handleImmediateNotificationJob.success', { job });

package/api/src/routes/checkout-sessions.ts

@@ -41,6 +41,7 @@ import {
   getCheckoutSessionSubscriptionIds,
   getSubscriptionLineItems,
   isCreditMeteredLineItems,
+  validatePaymentAmounts,
 } from '../libs/session';
 import { getDaysUntilCancel, getDaysUntilDue, getSubscriptionTrialSetup } from '../libs/subscription';
 import {
@@ -1074,6 +1075,14 @@ router.put('/:id/submit', user, ensureCheckoutSessionOpen, async (req, res) => {
       true
     );
 
+    // Validate payment amounts meet minimum requirements
+    if (paymentMethod.type === 'stripe') {
+      const result = validatePaymentAmounts(lineItems, paymentCurrency, checkoutSession);
+      if (!result.valid) {
+        return res.status(400).json({ error: result.error });
+      }
+    }
+
     let customer = await Customer.findOne({ where: { did: req.user.did } });
     if (!customer) {
       const { user: userInfo } = await blocklet.getUser(req.user.did);

package/blocklet.yml

@@ -14,7 +14,7 @@ repository:
   type: git
   url: git+https://github.com/blocklet/payment-kit.git
 specVersion: 1.2.8
-version: 1.19.11
+version: 1.19.13
 logo: logo.png
 files:
   - dist
@@ -72,11 +72,11 @@ capabilities:
   clusterMode: false
   component: true
 screenshots:
-  - setting.png
-  - payment.png
-  - checkout.png
-  - subscription_detail.png
-  - customer.png
+  - 3a4cab81c52c29662db8794b05ccc7c7.png
+  - 77ac49b79ae920f0f253ce8c694ffd65.png
+  - 1ef9e15ac36d4af5bef34941000ba3af.png
+  - 7ea8ef758865ecf6edb712d3534d2974.png
+  - 0ffe164ebe4aa2eb43f8d87f87683f7f.png
 components:
   - name: image-bin
     source:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "payment-kit",
-  "version": "1.19.11",
+  "version": "1.19.13",
   "scripts": {
     "dev": "blocklet dev --open",
     "lint": "tsc --noEmit && eslint src api/src --ext .mjs,.js,.jsx,.ts,.tsx",
@@ -44,31 +44,31 @@
   },
   "dependencies": {
     "@abtnode/cron": "^1.16.46",
-    "@arcblock/did": "^1.21.0",
+    "@arcblock/did": "^1.21.1",
     "@arcblock/did-auth-storage-nedb": "^1.7.1",
-    "@arcblock/did-connect": "^3.0.37",
-    "@arcblock/did-util": "^1.21.0",
-    "@arcblock/jwt": "^1.21.0",
-    "@arcblock/ux": "^3.0.37",
-    "@arcblock/validator": "^1.21.0",
+    "@arcblock/did-connect": "^3.0.41",
+    "@arcblock/did-util": "^1.21.1",
+    "@arcblock/jwt": "^1.21.1",
+    "@arcblock/ux": "^3.0.41",
+    "@arcblock/validator": "^1.21.1",
     "@blocklet/did-space-js": "^1.1.13",
     "@blocklet/error": "^0.2.5",
     "@blocklet/js-sdk": "^1.16.46",
     "@blocklet/logger": "^1.16.46",
-    "@blocklet/payment-react": "1.19.11",
+    "@blocklet/payment-react": "1.19.13",
     "@blocklet/sdk": "^1.16.46",
-    "@blocklet/ui-react": "^3.0.37",
+    "@blocklet/ui-react": "^3.0.41",
     "@blocklet/uploader": "^0.2.5",
     "@blocklet/xss": "^0.2.3",
     "@mui/icons-material": "^7.1.2",
     "@mui/lab": "7.0.0-beta.14",
     "@mui/material": "^7.1.2",
     "@mui/system": "^7.1.1",
-    "@ocap/asset": "^1.21.0",
-    "@ocap/client": "^1.21.0",
-    "@ocap/mcrypto": "^1.21.0",
-    "@ocap/util": "^1.21.0",
-    "@ocap/wallet": "^1.21.0",
+    "@ocap/asset": "^1.21.1",
+    "@ocap/client": "^1.21.1",
+    "@ocap/mcrypto": "^1.21.1",
+    "@ocap/util": "^1.21.1",
+    "@ocap/wallet": "^1.21.1",
     "@stripe/react-stripe-js": "^2.9.0",
     "@stripe/stripe-js": "^2.4.0",
     "ahooks": "^3.8.5",
@@ -124,7 +124,7 @@
   "devDependencies": {
     "@abtnode/types": "^1.16.46",
     "@arcblock/eslint-config-ts": "^0.3.3",
-    "@blocklet/payment-types": "1.19.11",
+    "@blocklet/payment-types": "1.19.13",
     "@types/cookie-parser": "^1.4.9",
     "@types/cors": "^2.8.19",
     "@types/debug": "^4.1.12",
@@ -170,5 +170,5 @@
       "parser": "typescript"
     }
   },
-  "gitHead": "8742626f35fe37db1691744217cfa13547e91591"
+  "gitHead": "07c6878eb9d455f3898adfda7d07ca9e321e866c"
 }

package/src/components/chart.tsx

@@ -63,7 +63,7 @@ export default function Chart({
           }}>
           <CartesianGrid strokeDasharray="3 3" stroke={theme.palette.grey[200]} />
           <Tooltip
-            contentStyle={{ backgroundColor: theme.palette.background.paper, borderColor: theme.palette.grey[200] }}
+            contentStyle={{ backgroundColor: theme.palette.background.paper, borderColor: theme.palette.divider }}
           />
           {Object.keys(currencies).map((x: string, i) => {
             const dataKey = currencies[x]?.symbol as string;

package/src/components/conditional-section.tsx

@@ -15,6 +15,7 @@ interface ConditionalSectionProps {
   skeleton: boolean;
   children: ReactNode;
   skeletonComponent?: ReactNode;
+  onStateChange?: (state: 'hidden' | 'visible' | 'none') => void;
 }
 
 /**
@@ -29,10 +30,19 @@ interface ConditionalSectionProps {
  * 使用方式：
  * - 在任意深度的子组件中调用 useConditionalSection()?.hideRender()
  */
-export default function ConditionalSection({ skeleton, children, skeletonComponent = null }: ConditionalSectionProps) {
+export default function ConditionalSection({
+  skeleton,
+  children,
+  skeletonComponent = null,
+  onStateChange = () => {},
+}: ConditionalSectionProps) {
   const [renderState, setRenderState] = useState<'hidden' | 'visible' | 'none'>('hidden');
   const timerRef = useRef<NodeJS.Timeout | null>(null);
 
+  useEffect(() => {
+    onStateChange(renderState);
+  }, [renderState]);
+
   const handleHideRender = useCallback((hide: boolean = true) => {
     if (timerRef.current) {
       clearTimeout(timerRef.current);

package/src/components/customer/credit-overview.tsx

@@ -99,6 +99,7 @@ export default function CreditOverview({ customerId, settings, mode = 'portal' }
           borderColor: 'divider',
           boxShadow: 1,
           borderRadius: 1,
+          backgroundColor: 'background.default',
         }}>
         <CardContent sx={{ flexGrow: 1 }}>
           <Stack spacing={2}>
@@ -190,60 +191,62 @@ export default function CreditOverview({ customerId, settings, mode = 'portal' }
           },
         }}>
         <Tab label={t('admin.creditGrants.overview')} value={CreditTab.OVERVIEW} />
-        <Tab label={t('admin.creditGrants.title')} value={CreditTab.GRANTS} />
-        <Tab label={t('admin.creditTransactions.title')} value={CreditTab.TRANSACTIONS} />
+        <Tab label={t('admin.creditGrants.tab')} value={CreditTab.GRANTS} />
+        <Tab label={t('admin.creditTransactions.tab')} value={CreditTab.TRANSACTIONS} />
       </Tabs>
-      {/* 概览标签页 */}
-      {creditTab === CreditTab.OVERVIEW && (
-        <Box sx={{ width: '100%', mt: 1 }} key={creditTab}>
-          <Box
-            sx={{
-              display: 'grid',
-              gridTemplateColumns: {
-                xs: 'repeat(1, 1fr)',
-                md: 'repeat(2, 1fr)',
-              },
-              gap: 2,
-              '@container (max-width: 600px)': {
-                gridTemplateColumns: 'repeat(1, 1fr)',
-              },
-            }}>
-            {filteredCreditCurrencies.map(renderCreditOverviewCard)}
-          </Box>
-
-          {filteredCreditCurrencies.length === 0 && (
+      <Box className="section-body">
+        {/* 概览标签页 */}
+        {creditTab === CreditTab.OVERVIEW && (
+          <Box sx={{ width: '100%', mt: 1 }} key={creditTab}>
             <Box
               sx={{
-                display: 'flex',
-                flexDirection: 'column',
-                alignItems: 'center',
-                justifyContent: 'center',
-                py: 8,
-                textAlign: 'center',
+                display: 'grid',
+                gridTemplateColumns: {
+                  xs: 'repeat(1, 1fr)',
+                  md: 'repeat(2, 1fr)',
+                },
+                gap: 2,
+                '@container (max-width: 600px)': {
+                  gridTemplateColumns: 'repeat(1, 1fr)',
+                },
               }}>
-              <Typography
-                variant="h6"
-                gutterBottom
-                sx={{
-                  color: 'text.secondary',
-                }}>
-                {t('admin.customer.creditGrants.noGrants')}
-              </Typography>
-              <Typography
-                variant="body2"
+              {filteredCreditCurrencies.map(renderCreditOverviewCard)}
+            </Box>
+
+            {filteredCreditCurrencies.length === 0 && (
+              <Box
                 sx={{
-                  color: 'text.secondary',
+                  display: 'flex',
+                  flexDirection: 'column',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  py: 8,
+                  textAlign: 'center',
                 }}>
-                {t('admin.customer.creditGrants.noGrantsDescription')}
-              </Typography>
-            </Box>
-          )}
-        </Box>
-      )}
-      {creditTab === CreditTab.GRANTS && <CreditGrantsList customer_id={customerId} mode={mode} key={creditTab} />}
-      {creditTab === CreditTab.TRANSACTIONS && (
-        <CreditTransactionsList customer_id={customerId} mode={mode} key={creditTab} />
-      )}
+                <Typography
+                  variant="h6"
+                  gutterBottom
+                  sx={{
+                    color: 'text.secondary',
+                  }}>
+                  {t('admin.customer.creditGrants.noGrants')}
+                </Typography>
+                <Typography
+                  variant="body2"
+                  sx={{
+                    color: 'text.secondary',
+                  }}>
+                  {t('admin.customer.creditGrants.noGrantsDescription')}
+                </Typography>
+              </Box>
+            )}
+          </Box>
+        )}
+        {creditTab === CreditTab.GRANTS && <CreditGrantsList customer_id={customerId} mode={mode} key={creditTab} />}
+        {creditTab === CreditTab.TRANSACTIONS && (
+          <CreditTransactionsList customer_id={customerId} mode={mode} key={creditTab} />
+        )}
+      </Box>
     </Stack>
   );
 }

package/src/components/drawer-form.tsx

@@ -72,7 +72,7 @@ export default function DrawerForm(rawProps: Props) {
             pt: 2,
             gap: 1,
             borderBottom: '1px solid',
-            borderColor: 'grey.200',
+            borderColor: 'divider',
 
             '@media (max-width: 600px)': {
               '& > .addons-wrapper': {

package/src/components/filter-toolbar.tsx

@@ -522,7 +522,7 @@ const Root = styled(Box)`
     padding: 0;
     background: ${({ theme }) => theme.palette.background.paper};
     border: 1px solid;
-    border-color: ${({ theme }) => theme.palette.grey[100]};
+    border-color: ${({ theme }) => theme.palette.divider};
     z-index: 999999;
     top: 15px;
     display: block;

package/src/components/info-card.tsx

@@ -100,7 +100,7 @@ export default function InfoCard(rawProps: Props) {
                 color: 'background.paper',
                 '&::before': {
                   border: '1px solid',
-                  borderColor: 'grey.200',
+                  borderColor: 'divider',
                   backgroundColor: 'background.paper',
                 },
               },

package/src/components/invoice-pdf/pdf.tsx

@@ -100,7 +100,7 @@ export function Download({ data }: { data: TInvoiceExpanded }) {
         size="small"
         onClick={generatePDF}
         disabled={!isReady || isGenerating}
-        sx={{ borderColor: 'grey.100' }}>
+        sx={{ borderColor: 'divider' }}>
         {isGenerating ? (
           <Box sx={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
             <CircularProgress size={16} sx={{ color: 'inherit' }} />

package/src/components/layout/admin.tsx

@@ -34,10 +34,6 @@ const Root = styled(Dashboard)<{ padding: string }>`
         margin-bottom: 8px;
       }
 
-      .MuiTabs-scroller {
-        border-bottom: 1px solid ${({ theme }) => theme.palette.divider};
-      }
-
       .page-content {
         margin-top: 2px;
       }

package/src/components/metadata/form.tsx

@@ -241,7 +241,7 @@ export default function MetadataForm({
                   onClick={() => metadata.remove(index)}
                   sx={{
                     border: '1px solid',
-                    borderColor: 'grey.100',
+                    borderColor: 'divider',
                     borderRadius: 1,
                     padding: '8px',
                   }}>

package/src/components/meter/actions.tsx

@@ -66,7 +66,7 @@ export default function MeterActions({ data, variant = 'compact', onChange }: Me
   if (variant === 'compact') {
     actions.push({
       label: t('admin.meter.view'),
-      handler: () => navigate(`/admin/billing/meters/${data.id}`),
+      handler: () => navigate(`/admin/billing/${data.id}`),
       color: 'primary',
     });
   }

package/src/components/meter/events-list.tsx

@@ -418,10 +418,16 @@ export default function MeterEventsList({ meterId, paymentCurrency }: MeterEvent
             variant="outlined"
             startIcon={<CalendarTodayOutlined />}
             onClick={onTogglePicker}
+            size="large"
             sx={{
               minWidth: isMobile ? '100%' : 200,
               justifyContent: isMobile ? 'flex-start' : 'center',
               color: 'text.secondary',
+              borderColor: 'grey.300',
+              '&:hover': {
+                borderColor: 'primary.main',
+              },
+              backgroundColor: 'grey.50',
             }}>
             {dayjs(state.startDate).format('YYYY-MM-DD')} - {dayjs(state.endDate).format('YYYY-MM-DD')}
           </Button>

package/src/components/meter/usage-guide.tsx

@@ -160,7 +160,7 @@ print("Event recorded:", response.json())`;
 const CodeBlock = styled(Paper)(({ theme }) => ({
   padding: theme.spacing(2),
   backgroundColor: theme.palette.grey[50],
-  border: `1px solid ${theme.palette.grey[200]}`,
+  border: `1px solid ${theme.palette.divider}`,
   borderRadius: theme.shape.borderRadius,
   overflow: 'auto',
   '& pre': {

package/src/components/payment-link/item.tsx

@@ -54,7 +54,7 @@ export default function LineItem({ prefix, product, valid, onUpdate, onRemove }:
         p: 2,
         borderWidth: valid ? 1 : 2,
         borderStyle: 'solid',
-        borderColor: valid ? 'grey.100' : 'error.main',
+        borderColor: valid ? 'divider' : 'error.main',
         borderRadius: 2,
         position: 'relative',
       }}>

package/src/components/price/form.tsx

@@ -15,7 +15,6 @@ import type {
   TMeter,
   TMeterExpanded,
   TPaymentCurrency,
-  TPaymentCurrencyExpanded,
   TPaymentMethodExpanded,
   TPrice,
   TPriceExpanded,
@@ -102,16 +101,6 @@ const hasMoreCurrency = (methods: TPaymentMethodExpanded[] = []) => {
   return methods.every((method) => method.payment_currencies.length > 1) || methods.length > 1;
 };
 
-function stripeCurrencyValidate(v: number, currency: TPaymentCurrencyExpanded | null) {
-  if (!currency) {
-    return true;
-  }
-  if (currency.paymentMethod?.type === 'stripe') {
-    return v >= 0.5;
-  }
-  return true;
-}
-
 const fetchMeters = (): Promise<{ list: TMeterExpanded[]; count: number }> => {
   return api.get('/api/meters?status=active&limit=100').then((res: any) => res.data);
 };
@@ -397,10 +386,6 @@ export default function PriceForm({ prefix = '', simple = false, productType = u
                   required: t('admin.price.unit_amount.required'),
                   validate: (v) => {
                     const currency = findCurrency(settings.paymentMethods, defaultCurrencyId);
-                    const hasStripError = !stripeCurrencyValidate(v, currency);
-                    if (hasStripError) {
-                      return t('admin.price.unit_amount.stripeTip');
-                    }
                     return validateAmount(v, currency ?? {});
                   },
                 }}
@@ -482,10 +467,6 @@ export default function PriceForm({ prefix = '', simple = false, productType = u
                             rules={{
                               required: t('admin.price.unit_amount.required'),
                               validate: (v) => {
-                                const hasStripError = !stripeCurrencyValidate(v, currency);
-                                if (hasStripError) {
-                                  return t('admin.price.unit_amount.stripeTip');
-                                }
                                 return validateAmount(v, currency ?? {});
                               },
                             }}

package/src/components/pricing-table/product-item.tsx

@@ -47,7 +47,7 @@ export default function ProductItem({ product, prices, valid, onUpdate, onRemove
         p: 2,
         borderWidth: valid ? 1 : 2,
         borderStyle: 'solid',
-        borderColor: valid ? 'grey.100' : 'error.main',
+        borderColor: valid ? 'divider' : 'error.main',
         borderRadius: 2,
         position: 'relative',
       }}>

package/src/components/product/features.tsx

@@ -40,7 +40,7 @@ export default function MetadataForm() {
             onClick={() => features.remove(index)}
             sx={{
               border: '1px solid',
-              borderColor: 'grey.100',
+              borderColor: 'divider',
               borderRadius: 1,
               padding: '8px',
             }}>

package/src/components/uploader.tsx

@@ -150,7 +150,7 @@ export default function Uploader({
 
 const Div = styled(Box)`
   border: 1px solid;
-  border-color: ${({ theme }) => theme.palette.grey[100]};
+  border-color: ${({ theme }) => theme.palette.grey[300]};
   border-radius: 4px;
   cursor: pointer;
   width: 120px;

package/src/components/webhook/attempts.tsx

@@ -160,7 +160,7 @@ export default function WebhookAttempts({ event_id = '', webhook_endpoint_id = '
           md: 8,
         }}>
         {selected && (
-          <Stack direction="column" spacing={2} sx={{ pt: 3, pl: 3, borderLeft: '1px solid', borderColor: 'grey.100' }}>
+          <Stack direction="column" spacing={2} sx={{ pt: 3, pl: 3, borderLeft: '1px solid', borderColor: 'divider' }}>
             <Typography variant="h6">{event_id ? selected.endpoint.url : selected.event.type}</Typography>
             <Box>
               <Typography variant="h6">Response ({selected.response_status})</Typography>

package/src/locales/en.tsx

@@ -63,7 +63,8 @@ export default flat({
     scope: 'Scope',
     effectiveDate: 'Effective Date',
     expirationDate: 'Expiration Date',
-    creditGrant: 'Credit Grant',
+    creditGrant: 'Grant',
+    date: 'Date',
     subscription: 'Subscription',
     meterEvent: 'Meter Event',
     creditAmount: 'Credit',
@@ -1144,11 +1145,12 @@ export default flat({
       appBalance: 'App Balance',
     },
     creditGrants: {
-      title: 'Credit Grants',
+      tab: 'Grants',
+      title: 'Credits',
       summary: 'Credit Summary',
       noGrants: 'No credit grants found',
       grantDetail: 'Credit Grant Details',
-      overview: 'Credit Overview',
+      overview: 'Overview',
       overviewDescription: 'Monitor credit balances, usage, and outstanding debt across all currencies.',
       availableBalance: 'Available Balance',
       usage: 'Usage',
@@ -1180,7 +1182,8 @@ export default flat({
       viewDetails: 'View Details',
     },
     creditTransactions: {
-      title: 'Credit Transactions',
+      tab: 'Transactions',
+      title: 'Transactions',
       summary: 'Transaction Summary',
       noTransactions: 'No credit transactions found',
       totalTransactions: 'Total Transactions',

package/src/locales/zh.tsx

@@ -63,6 +63,7 @@ export default flat({
     effectiveDate: '生效时间',
     expirationDate: '过期时间',
     creditGrant: '信用额度',
+    date: '日期',
     subscription: '订阅',
     meterEvent: '计量事件',
     creditAmount: '额度',
@@ -927,11 +928,12 @@ export default flat({
         postal_code: '邮政编码',
       },
       creditGrants: {
+        tab: '信用额度',
         title: '信用额度',
         summary: '额度汇总',
         noGrants: '未找到信用额度',
         grantDetail: '信用额度详情',
-        overview: '额度概览',
+        overview: '概览',
         overviewDescription: '监控所有货币的信用余额、使用情况和未偿债务。',
         availableBalance: '可用余额',
         usage: '使用情况',
@@ -1103,7 +1105,8 @@ export default flat({
       appBalance: '热钱包余额',
     },
     creditGrants: {
-      title: '信用额度',
+      tab: '信用额度',
+      title: '额度',
       summary: '额度汇总',
       noGrants: '未找到信用额度',
       grantDetail: '信用额度详情',
@@ -1139,6 +1142,7 @@ export default flat({
       viewDetails: '查看详情',
     },
     creditTransactions: {
+      tab: '账单',
       title: '额度账单',
       summary: '账单汇总',
       noTransactions: '未找到额度账单',

package/src/pages/admin/developers/webhooks/detail.tsx

@@ -90,7 +90,7 @@ export default function WebhookDetail(props: { id: string }) {
               pt: 2,
               mt: 2,
               borderTop: '1px solid',
-              borderColor: 'grey.100',
+              borderColor: 'divider',
             }}>
             <InfoMetric
               label={t('common.status')}

package/src/pages/admin/products/pricing-tables/create.tsx

@@ -132,7 +132,7 @@ export default function CreatePricingTable() {
                 flex: 2,
                 position: 'relative',
                 borderRight: '1px solid',
-                borderColor: 'grey.100',
+                borderColor: 'divider',
               }}>
               <Stack
                 spacing={2}
@@ -159,7 +159,7 @@ export default function CreatePricingTable() {
                     justifyContent: 'flex-end',
                     position: 'absolute',
                     borderTop: '1px solid',
-                    borderColor: 'grey.100',
+                    borderColor: 'divider',
                     left: 0,
                     bottom: 0,
                   }}>

package/src/pages/checkout/pricing-table.tsx

@@ -26,7 +26,7 @@ export default function PricingTablePage({ id }: Props) {
         theme={undefined}
         hideNavMenu={undefined}
         maxWidth={false}
-        sx={{ borderBottom: '1px solid', borderColor: 'grey.100' }}
+        sx={{ borderBottom: '1px solid', borderColor: 'divider' }}
       />
 
       <Stack