@blocklet/payment-react 1.23.4 → 1.23.5

package/docs/components-ui-pricing-table.ja.md

@@ -41,7 +41,7 @@ const pricingTableData: TPricingTableExpanded = {
       price: {
         currency: 'usd',
         unit_amount: '1000', // セント単位
-        recurring: { interval: 'month', interval_count: 1 },
+        recurring: { interval: 'month', interval_count: 1, usage_type: 'licensed' },
         currency_options: [{ currency_id: 'usd', unit_amount: '1000' }],
       },
       is_highlight: false,
@@ -57,7 +57,7 @@ const pricingTableData: TPricingTableExpanded = {
       price: {
         currency: 'usd',
         unit_amount: '2500',
-        recurring: { interval: 'month', interval_count: 1 },
+        recurring: { interval: 'month', interval_count: 1, usage_type: 'licensed' },
         currency_options: [{ currency_id: 'usd', unit_amount: '2500' }],
       },
       is_highlight: true,
@@ -74,7 +74,7 @@ const pricingTableData: TPricingTableExpanded = {
       price: {
         currency: 'usd',
         unit_amount: '10000',
-        recurring: { interval: 'year', interval_count: 1 },
+        recurring: { interval: 'year', interval_count: 1, usage_type: 'licensed' },
         currency_options: [{ currency_id: 'usd', unit_amount: '10000' }],
       },
       is_highlight: false,
@@ -90,7 +90,7 @@ const pricingTableData: TPricingTableExpanded = {
       price: {
         currency: 'usd',
         unit_amount: '25000',
-        recurring: { interval: 'year', interval_count: 1 },
+        recurring: { interval: 'year', interval_count: 1, usage_type: 'licensed' },
         currency_options: [{ currency_id: 'usd', unit_amount: '25000' }],
       },
       is_highlight: true,

package/docs/components-ui-pricing-table.md

@@ -41,7 +41,7 @@ const pricingTableData: TPricingTableExpanded = {
       price: {
         currency: 'usd',
         unit_amount: '1000', // in cents
-        recurring: { interval: 'month', interval_count: 1 },
+        recurring: { interval: 'month', interval_count: 1, usage_type: 'licensed' },
         currency_options: [{ currency_id: 'usd', unit_amount: '1000' }],
       },
       is_highlight: false,
@@ -57,7 +57,7 @@ const pricingTableData: TPricingTableExpanded = {
       price: {
         currency: 'usd',
         unit_amount: '2500',
-        recurring: { interval: 'month', interval_count: 1 },
+        recurring: { interval: 'month', interval_count: 1, usage_type: 'licensed' },
         currency_options: [{ currency_id: 'usd', unit_amount: '2500' }],
       },
       is_highlight: true,
@@ -74,7 +74,7 @@ const pricingTableData: TPricingTableExpanded = {
       price: {
         currency: 'usd',
         unit_amount: '10000',
-        recurring: { interval: 'year', interval_count: 1 },
+        recurring: { interval: 'year', interval_count: 1, usage_type: 'licensed' },
         currency_options: [{ currency_id: 'usd', unit_amount: '10000' }],
       },
       is_highlight: false,
@@ -90,7 +90,7 @@ const pricingTableData: TPricingTableExpanded = {
       price: {
         currency: 'usd',
         unit_amount: '25000',
-        recurring: { interval: 'year', interval_count: 1 },
+        recurring: { interval: 'year', interval_count: 1, usage_type: 'licensed' },
         currency_options: [{ currency_id: 'usd', unit_amount: '25000' }],
       },
       is_highlight: true,

package/docs/components-ui-pricing-table.zh-TW.md

@@ -41,7 +41,7 @@ const pricingTableData: TPricingTableExpanded = {
       price: {
         currency: 'usd',
         unit_amount: '1000', // 以分為單位
-        recurring: { interval: 'month', interval_count: 1 },
+        recurring: { interval: 'month', interval_count: 1, usage_type: 'licensed' },
         currency_options: [{ currency_id: 'usd', unit_amount: '1000' }],
       },
       is_highlight: false,
@@ -57,7 +57,7 @@ const pricingTableData: TPricingTableExpanded = {
       price: {
         currency: 'usd',
         unit_amount: '2500',
-        recurring: { interval: 'month', interval_count: 1 },
+        recurring: { interval: 'month', interval_count: 1, usage_type: 'licensed' },
         currency_options: [{ currency_id: 'usd', unit_amount: '2500' }],
       },
       is_highlight: true,
@@ -74,7 +74,7 @@ const pricingTableData: TPricingTableExpanded = {
       price: {
         currency: 'usd',
         unit_amount: '10000',
-        recurring: { interval: 'year', interval_count: 1 },
+        recurring: { interval: 'year', interval_count: 1, usage_type: 'licensed' },
         currency_options: [{ currency_id: 'usd', unit_amount: '10000' }],
       },
       is_highlight: false,
@@ -90,7 +90,7 @@ const pricingTableData: TPricingTableExpanded = {
       price: {
         currency: 'usd',
         unit_amount: '25000',
-        recurring: { interval: 'year', interval_count: 1 },
+        recurring: { interval: 'year', interval_count: 1, usage_type: 'licensed' },
         currency_options: [{ currency_id: 'usd', unit_amount: '25000' }],
       },
       is_highlight: true,

package/docs/components-ui-pricing-table.zh.md

@@ -41,7 +41,7 @@ const pricingTableData: TPricingTableExpanded = {
       price: {
         currency: 'usd',
         unit_amount: '1000', // 单位为美分
-        recurring: { interval: 'month', interval_count: 1 },
+        recurring: { interval: 'month', interval_count: 1, usage_type: 'licensed' },
         currency_options: [{ currency_id: 'usd', unit_amount: '1000' }],
       },
       is_highlight: false,
@@ -57,7 +57,7 @@ const pricingTableData: TPricingTableExpanded = {
       price: {
         currency: 'usd',
         unit_amount: '2500',
-        recurring: { interval: 'month', interval_count: 1 },
+        recurring: { interval: 'month', interval_count: 1, usage_type: 'licensed' },
         currency_options: [{ currency_id: 'usd', unit_amount: '2500' }],
       },
       is_highlight: true,
@@ -74,7 +74,7 @@ const pricingTableData: TPricingTableExpanded = {
       price: {
         currency: 'usd',
         unit_amount: '10000',
-        recurring: { interval: 'year', interval_count: 1 },
+        recurring: { interval: 'year', interval_count: 1, usage_type: 'licensed' },
         currency_options: [{ currency_id: 'usd', unit_amount: '10000' }],
       },
       is_highlight: false,
@@ -90,7 +90,7 @@ const pricingTableData: TPricingTableExpanded = {
       price: {
         currency: 'usd',
         unit_amount: '25000',
-        recurring: { interval: 'year', interval_count: 1 },
+        recurring: { interval: 'year', interval_count: 1, usage_type: 'licensed' },
         currency_options: [{ currency_id: 'usd', unit_amount: '25000' }],
       },
       is_highlight: true,

package/es/components/auto-topup/index.js

@@ -17,7 +17,7 @@ import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
 import { useNavigate } from "react-router-dom";
 import { joinURL } from "ufo";
 import { useRequest } from "ahooks";
-import { getPrefix, formatBNStr, formatNumber, formatPrice } from "../../libs/util.js";
+import { getPrefix, formatBNStr, formatNumber, formatPrice, formatCreditAmount } from "../../libs/util.js";
 import { createLink, handleNavigation } from "../../libs/navigation.js";
 import { usePaymentContext } from "../../contexts/payment.js";
 import api from "../../libs/api.js";
@@ -371,10 +371,13 @@ export default function AutoTopupCard({
       ),
       config?.enabled ? /* @__PURE__ */ jsxs(Stack, { spacing: 1.5, className: "auto-topup-content", sx: { pt: 1.5 }, children: [
         (() => {
-          const threshold = `${formatNumber(config.threshold)} ${config.currency?.symbol || ""}`;
-          const credits = `${formatNumber(
-            Number(config.price.metadata?.credit_config?.credit_amount || 0) * Number(config.quantity)
-          )} ${config.currency?.name || ""}`;
+          const threshold = `${formatCreditAmount(formatNumber(config.threshold), config.currency?.symbol || "")}`;
+          const credits = `${formatCreditAmount(
+            formatNumber(
+              Number(config.price.metadata?.credit_config?.credit_amount || 0) * Number(config.quantity)
+            ),
+            config.currency?.symbol || ""
+          )}`;
           return /* @__PURE__ */ jsxs(
             Typography,
             {

package/es/components/auto-topup/modal.js

@@ -26,7 +26,7 @@ import pWaitFor from "p-wait-for";
 import DidAddress from "@arcblock/ux/lib/DID";
 import Switch from "../switch-button.js";
 import api from "../../libs/api.js";
-import { formatError, flattenPaymentMethods, getPrefix, formatBNStr } from "../../libs/util.js";
+import { formatError, flattenPaymentMethods, getPrefix, formatBNStr, formatCreditAmount } from "../../libs/util.js";
 import { usePaymentContext } from "../../contexts/payment.js";
 import { createLink, handleNavigation } from "../../libs/navigation.js";
 import Collapse from "../collapse.js";
@@ -560,7 +560,7 @@ export default function AutoTopup({
                               },
                               slotProps: {
                                 input: {
-                                  endAdornment: /* @__PURE__ */ jsx(InputAdornment, { position: "end", children: config?.currency?.name })
+                                  endAdornment: /* @__PURE__ */ jsx(InputAdornment, { position: "end", children: formatCreditAmount("", config?.currency?.symbol) })
                                 },
                                 htmlInput: {
                                   min: 0,

package/es/history/credit/grants-list.js

@@ -1,11 +1,11 @@
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
 import { Box, Typography, Chip } from "@mui/material";
 import { useRequest } from "ahooks";
 import React, { useEffect, useRef, useState } from "react";
 import { useNavigate } from "react-router-dom";
 import { styled } from "@mui/system";
-import { formatBNStr, formatToDate } from "../../libs/util.js";
+import { formatToDate, formatCreditAmount, formatBNStr } from "../../libs/util.js";
 import { usePaymentContext } from "../../contexts/payment.js";
 import api from "../../libs/api.js";
 import Table from "../../components/table.js";
@@ -111,11 +111,10 @@ const GrantsTable = React.memo((props) => {
       options: {
         customBodyRenderLite: (_, index) => {
           const grant = data?.list[index];
-          return /* @__PURE__ */ jsx(Box, { onClick: (e) => handleLinkClick(e, grant), children: /* @__PURE__ */ jsxs(Typography, { variant: "body2", children: [
+          return /* @__PURE__ */ jsx(Box, { onClick: (e) => handleLinkClick(e, grant), children: /* @__PURE__ */ jsx(Typography, { variant: "body2", children: formatCreditAmount(
             formatBNStr(grant.remaining_amount, grant.paymentCurrency.decimal),
-            " ",
             grant.paymentCurrency.symbol
-          ] }) });
+          ) }) });
         }
       }
     },

package/es/history/credit/transactions-list.js

@@ -7,7 +7,7 @@ import React, { useCallback, useEffect, useRef, useState } from "react";
 import { styled } from "@mui/system";
 import { joinURL } from "ufo";
 import DateRangePicker from "../../components/date-range-picker.js";
-import { formatBNStr, formatToDate, getPrefix } from "../../libs/util.js";
+import { formatToDate, getPrefix, formatCreditAmount, formatBNStr } from "../../libs/util.js";
 import { usePaymentContext } from "../../contexts/payment.js";
 import api from "../../libs/api.js";
 import Table from "../../components/table.js";
@@ -133,13 +133,9 @@ const TransactionsTable = React.memo((props) => {
           const amount = isGrant ? item.amount : item.credit_amount;
           const currency = item.paymentCurrency || item.currency;
           const unit = !isGrant && item.meter?.unit ? item.meter.unit : currency?.symbol;
-          const displayAmount = formatBNStr(amount, currency?.decimal || 0);
+          const displayAmount = formatCreditAmount(formatBNStr(amount, currency?.decimal || 0), unit);
           if (!includeGrants) {
-            return /* @__PURE__ */ jsx(Box, { onClick: (e) => handleTransactionClick(e, item), children: /* @__PURE__ */ jsxs(Typography, { children: [
-              displayAmount,
-              " ",
-              unit
-            ] }) });
+            return /* @__PURE__ */ jsx(Box, { onClick: (e) => handleTransactionClick(e, item), children: /* @__PURE__ */ jsx(Typography, { children: displayAmount }) });
           }
           return /* @__PURE__ */ jsx(Box, { onClick: (e) => handleTransactionClick(e, item), children: /* @__PURE__ */ jsxs(
             Typography,
@@ -150,9 +146,7 @@ const TransactionsTable = React.memo((props) => {
               children: [
                 isGrant ? "+" : "-",
                 " ",
-                displayAmount,
-                " ",
-                unit
+                displayAmount
               ]
             }
           ) });

package/es/libs/util.d.ts

@@ -16,6 +16,27 @@ export declare const formatLocale: (locale?: string) => string;
 export declare const formatPrettyMsLocale: (locale: string) => "zh_CN" | "en_US";
 export declare const formatError: (err: any) => any;
 export declare function formatBNStr(str?: string, decimals?: number, precision?: number, trim?: boolean, thousandSeparated?: boolean): string;
+/**
+ * Format credit amount for display (data contexts: balances, transactions, notifications)
+ * - If currency has symbol mapping (USD -> $): shows "$20"
+ * - If no symbol mapping: shows "20 minutes" or "20 arcsphere credits"
+ *
+ * @param formattedAmount - Already formatted amount string (e.g., "20", "1,000.50")
+ * @param currencySymbol - Currency symbol (USD, EUR, minutes, etc.)
+ * @param showUnit - Whether to show the unit (default: true)
+ */
+export declare function formatCreditAmount(formattedAmount: string, currencySymbol: string, showUnit?: boolean): string;
+/**
+ * Format credit amount for checkout/purchase scenarios
+ * - If currency has symbol mapping (USD -> $): shows "$20 of credits" (en) or "$20 的信用额度" (zh)
+ * - If no symbol mapping: shows "20 minutes" or "20 arcsphere credits"
+ *
+ * @param formattedAmount - Already formatted amount string (e.g., "20", "1,000.50")
+ * @param currencySymbol - Currency symbol (USD, EUR, minutes, etc.)
+ * @param locale - Locale for translation (default: 'en')
+ * @param showUnit - Whether to show the unit (default: true)
+ */
+export declare function formatCreditForCheckout(formattedAmount: string, currencySymbol: string, locale?: string, showUnit?: boolean): string;
 export declare function formatNumber(n: number | string, precision?: number, trim?: boolean, thousandSeparated?: boolean): string;
 export declare const formatPrice: (price: TPrice, currency: TPaymentCurrency, unit_label?: string, quantity?: number, bn?: boolean, locale?: string) => string;
 export declare const formatPriceAmount: (price: TPrice, currency: TPaymentCurrency, unit_label?: string, quantity?: number, bn?: boolean) => string;

package/es/libs/util.js

@@ -122,6 +122,35 @@ export function formatBNStr(str = "", decimals = 18, precision = 6, trim = true,
   }
   return formatNumber(fromUnitToToken(str, decimals), precision, trim, thousandSeparated);
 }
+const CURRENCY_SYMBOLS = {
+  USD: "$",
+  EUR: "\u20AC",
+  GBP: "\xA3",
+  JPY: "\xA5",
+  CNY: "\xA5",
+  KRW: "\u20A9",
+  INR: "\u20B9",
+  AUD: "A$",
+  CAD: "C$",
+  CHF: "Fr",
+  HKD: "HK$",
+  SGD: "S$",
+  NZD: "NZ$"
+};
+export function formatCreditAmount(formattedAmount, currencySymbol, showUnit = true) {
+  const mappedSymbol = CURRENCY_SYMBOLS[currencySymbol];
+  if (mappedSymbol) {
+    return `${mappedSymbol}${formattedAmount}`;
+  }
+  return `${formattedAmount} ${showUnit ? currencySymbol : ""}`;
+}
+export function formatCreditForCheckout(formattedAmount, currencySymbol, locale = "en", showUnit = true) {
+  const mappedSymbol = CURRENCY_SYMBOLS[currencySymbol];
+  if (mappedSymbol) {
+    return `${mappedSymbol}${formattedAmount} ${showUnit ? t("common.credits", locale) : ""}`;
+  }
+  return `${formattedAmount} ${showUnit ? currencySymbol : ""}`;
+}
 export function formatNumber(n, precision = 6, trim = true, thousandSeparated = true) {
   if (!n || n === "0") {
     return "0";

package/es/locales/en.js

@@ -63,6 +63,8 @@ export default flat({
     creditTransaction: "Credit Transaction",
     creditAmount: "Credit Amount",
     remainingBalance: "Remaining Balance",
+    credits: "credits",
+    ofCredits: "of credits",
     transferStatus: "Transaction Status",
     sourceData: "Source Data",
     viewGrant: "View Grant",
@@ -251,17 +253,17 @@ export default flat({
       },
       credit: {
         normal: {
-          oneTime: "Top up {amount} {symbol} credit.",
-          oneTimeWithExpiry: "Top up {amount} {symbol} credit, valid for {duration} {unit}.",
-          recurring: "Top up {amount} {symbol} credit {period}.",
-          recurringWithExpiry: "Top up {amount} {symbol} credit {period}, valid for {duration} {unit}."
+          oneTime: "Purchase {amount}.",
+          oneTimeWithExpiry: "Purchase {amount} (valid for {duration} {unit}).",
+          recurring: "Subscription: {amount} {period}.",
+          recurringWithExpiry: "Subscription: {amount} {period} (valid for {duration} {unit})."
         },
         pending: {
-          notEnough: "Your outstanding balance is {amount} {symbol}. To settle it, a minimum purchase of {quantity} units is required.",
-          oneTimeEnough: "Your outstanding balance is {amount} {symbol}. Upon payment, you will receive {totalAmount} {symbol}, resulting in a net balance of {availableAmount} {symbol} after the deduction.",
-          oneTimeEnoughWithExpiry: "Your outstanding balance is {amount} {symbol}. Upon payment, you will receive {totalAmount} {symbol} (valid for {duration} {unit}), resulting in a net balance of {availableAmount} {symbol} after the deduction.",
-          recurringEnough: "Your outstanding balance is {amount} {symbol}. Upon payment, you will receive {totalAmount} {symbol} {period}, resulting in a net balance of {availableAmount} {symbol} after the deduction.",
-          recurringEnoughWithExpiry: "Your outstanding balance is {amount} {symbol}. Upon payment, you will receive {totalAmount} {symbol} {period} (valid for {duration} {unit}), resulting in a net balance of {availableAmount} {symbol} after the deduction."
+          notEnough: "You have a usage overage of {amount}. To restore access, a minimum purchase of {quantity} units is required.",
+          oneTimeEnough: "You have a usage overage of {amount}. This purchase adds {totalAmount}. After covering the overage, your new available balance will be {availableAmount}.",
+          oneTimeEnoughWithExpiry: "You have a usage overage of {amount}. This purchase adds {totalAmount} (valid for {duration} {unit}). After covering the overage, your new available balance will be {availableAmount}.",
+          recurringEnough: "You have a usage overage of {amount}. This subscription adds {totalAmount} {period}. After covering the overage, your new available balance will be {availableAmount}.",
+          recurringEnoughWithExpiry: "You have a usage overage of {amount}. This subscription adds {totalAmount} {period} (valid for {duration} {unit}). After covering the overage, your new available balance will be {availableAmount}."
         }
       },
       expired: {

package/es/locales/zh.js

@@ -63,6 +63,8 @@ export default flat({
     creditTransaction: "\u4FE1\u7528\u4EA4\u6613",
     creditAmount: "\u4FE1\u7528\u989D\u5EA6",
     remainingBalance: "\u5269\u4F59\u4F59\u989D",
+    credits: "\u989D\u5EA6",
+    ofCredits: "\u989D\u5EA6",
     transferStatus: "\u4EA4\u6613\u72B6\u6001",
     sourceData: "\u6E90\u6570\u636E",
     viewGrant: "\u67E5\u770B\u989D\u5EA6",
@@ -288,17 +290,17 @@ export default flat({
       },
       credit: {
         normal: {
-          oneTime: "\u5145\u503C {amount} {symbol} \u989D\u5EA6\u3002",
-          oneTimeWithExpiry: "\u5145\u503C {amount} {symbol} \u989D\u5EA6\uFF0C\u6709\u6548\u671F {duration} {unit}\u3002",
-          recurring: "{period}\u5145\u503C {amount} {symbol} \u989D\u5EA6\u3002",
-          recurringWithExpiry: "{period}\u5145\u503C {amount} {symbol} \u989D\u5EA6\uFF0C\u6709\u6548\u671F {duration} {unit}\u3002"
+          oneTime: "\u8D2D\u4E70 {amount}\u3002",
+          oneTimeWithExpiry: "\u8D2D\u4E70 {amount}\uFF08\u6709\u6548\u671F {duration} {unit}\uFF09\u3002",
+          recurring: "\u8BA2\u9605\uFF1A{period}{amount}\u3002",
+          recurringWithExpiry: "\u8BA2\u9605\uFF1A{period}{amount}\uFF08\u6709\u6548\u671F {duration} {unit}\uFF09\u3002"
         },
         pending: {
-          notEnough: "\u60A8\u5F53\u524D\u6B20\u8D39 {amount} {symbol}\uFF0C\u81F3\u5C11\u9700\u8981\u8D2D\u4E70 {quantity} \u6570\u91CF\u3002",
-          oneTimeEnough: "\u60A8\u5F53\u524D\u6B20\u8D39 {amount} {symbol}\uFF0C\u4ED8\u6B3E\u540E\u5C06\u83B7\u5F97 {totalAmount} {symbol} \u989D\u5EA6\uFF0C\u6263\u9664\u6B20\u8D39\u540E\u51C0\u4F59\u989D\u4E3A {availableAmount} {symbol}\u3002",
-          oneTimeEnoughWithExpiry: "\u60A8\u5F53\u524D\u6B20\u8D39 {amount} {symbol}\uFF0C\u4ED8\u6B3E\u540E\u5C06\u83B7\u5F97 {totalAmount} {symbol} \u989D\u5EA6\uFF08\u6709\u6548\u671F {duration} {unit}\uFF09\uFF0C\u6263\u9664\u6B20\u8D39\u540E\u51C0\u4F59\u989D\u4E3A {availableAmount} {symbol}\u3002",
-          recurringEnough: "\u60A8\u5F53\u524D\u6B20\u8D39 {amount} {symbol}\uFF0C\u4ED8\u6B3E\u540E{period}\u5C06\u83B7\u5F97 {totalAmount} {symbol} \u989D\u5EA6\uFF0C\u6263\u9664\u6B20\u8D39\u540E\u51C0\u4F59\u989D\u4E3A {availableAmount} {symbol}\u3002",
-          recurringEnoughWithExpiry: "\u60A8\u5F53\u524D\u6B20\u8D39 {amount} {symbol}\uFF0C\u4ED8\u6B3E\u540E{period}\u5C06\u83B7\u5F97 {totalAmount} {symbol} \u989D\u5EA6\uFF08\u6709\u6548\u671F {duration} {unit}\uFF09\uFF0C\u6263\u9664\u6B20\u8D39\u540E\u51C0\u4F59\u989D\u4E3A {availableAmount} {symbol}\u3002"
+          notEnough: "\u60A8\u6709 {amount} \u7684\u4F7F\u7528\u8D85\u989D\u3002\u8981\u6062\u590D\u8BBF\u95EE\uFF0C\u9700\u8981\u81F3\u5C11\u8D2D\u4E70 {quantity} \u6570\u91CF\u3002",
+          oneTimeEnough: "\u60A8\u6709 {amount} \u7684\u4F7F\u7528\u8D85\u989D\u3002\u672C\u6B21\u8D2D\u4E70\u5C06\u589E\u52A0 {totalAmount}\u3002\u6263\u9664\u8D85\u989D\u540E\uFF0C\u60A8\u7684\u65B0\u53EF\u7528\u4F59\u989D\u5C06\u4E3A {availableAmount}\u3002",
+          oneTimeEnoughWithExpiry: "\u60A8\u6709 {amount} \u7684\u4F7F\u7528\u8D85\u989D\u3002\u672C\u6B21\u8D2D\u4E70\u5C06\u589E\u52A0 {totalAmount}\uFF08\u6709\u6548\u671F {duration} {unit}\uFF09\u3002\u6263\u9664\u8D85\u989D\u540E\uFF0C\u60A8\u7684\u65B0\u53EF\u7528\u4F59\u989D\u5C06\u4E3A {availableAmount}\u3002",
+          recurringEnough: "\u60A8\u6709 {amount} \u7684\u4F7F\u7528\u8D85\u989D\u3002\u672C\u8BA2\u9605{period}\u5C06\u589E\u52A0 {totalAmount}\u3002\u6263\u9664\u8D85\u989D\u540E\uFF0C\u60A8\u7684\u65B0\u53EF\u7528\u4F59\u989D\u5C06\u4E3A {availableAmount}\u3002",
+          recurringEnoughWithExpiry: "\u60A8\u6709 {amount} \u7684\u4F7F\u7528\u8D85\u989D\u3002\u672C\u8BA2\u9605{period}\u5C06\u589E\u52A0 {totalAmount}\uFF08\u6709\u6548\u671F {duration} {unit}\uFF09\u3002\u6263\u9664\u8D85\u989D\u540E\uFF0C\u60A8\u7684\u65B0\u53EF\u7528\u4F59\u989D\u5C06\u4E3A {availableAmount}\u3002"
         }
       },
       emptyItems: {

package/es/payment/product-item.js

@@ -16,6 +16,7 @@ import {
   formatRecurring,
   formatUpsellSaving,
   formatAmount,
+  formatCreditForCheckout,
   formatBNStr
 } from "../libs/util.js";
 import ProductCard from "./product-card.js";
@@ -157,12 +158,12 @@ export default function ProductItem({
     if (!isCreditProduct) return null;
     const totalCreditStr = formatNumber(creditAmount * (localQuantity || 0));
     const currencySymbol = creditCurrency?.symbol || "Credits";
+    const formattedTotalCredit = formatCreditForCheckout(totalCreditStr, currencySymbol, locale);
     const hasPendingAmount = pendingAmount && new BN(pendingAmount || "0").gt(new BN(0));
     const isRecurring = item.price.type === "recurring";
     const hasExpiry = validDuration && validDuration > 0;
     const buildBaseParams = () => ({
-      amount: totalCreditStr,
-      symbol: currencySymbol,
+      amount: formattedTotalCredit,
       ...hasExpiry && {
         duration: validDuration,
         unit: t(`common.${validDurationUnit}`)
@@ -172,11 +173,18 @@ export default function ProductItem({
       }
     });
     const buildPendingParams = (pendingBN, availableAmount) => ({
-      amount: formatBNStr(pendingBN.toString(), creditCurrency?.decimal || 2),
-      symbol: currencySymbol,
-      totalAmount: totalCreditStr,
+      amount: formatCreditForCheckout(
+        formatBNStr(pendingBN.toString(), creditCurrency?.decimal || 2),
+        currencySymbol,
+        locale
+      ),
+      totalAmount: formattedTotalCredit,
       ...availableAmount && {
-        availableAmount: formatBNStr(availableAmount, creditCurrency?.decimal || 2)
+        availableAmount: formatCreditForCheckout(
+          formatBNStr(availableAmount, creditCurrency?.decimal || 2),
+          currencySymbol,
+          locale
+        )
       },
       ...hasExpiry && {
         duration: validDuration,
@@ -201,8 +209,11 @@ export default function ProductItem({
     const actualAvailable = currentPurchaseCreditBN.sub(pendingAmountBN).toString();
     if (!new BN(actualAvailable).gt(new BN(0))) {
       return t("payment.checkout.credit.pending.notEnough", {
-        amount: formatBNStr(pendingAmountBN.toString(), creditCurrency?.decimal || 2),
-        symbol: currencySymbol,
+        amount: formatCreditForCheckout(
+          formatBNStr(pendingAmountBN.toString(), creditCurrency?.decimal || 2),
+          currencySymbol,
+          locale
+        ),
         quantity: formatNumber(minQuantityNeeded)
       });
     }

package/lib/components/auto-topup/index.js

@@ -386,8 +386,8 @@ function AutoTopupCard({
             pt: 1.5
           },
           children: [(() => {
-            const threshold = `${(0, _util.formatNumber)(config.threshold)} ${config.currency?.symbol || ""}`;
-            const credits = `${(0, _util.formatNumber)(Number(config.price.metadata?.credit_config?.credit_amount || 0) * Number(config.quantity))} ${config.currency?.name || ""}`;
+            const threshold = `${(0, _util.formatCreditAmount)((0, _util.formatNumber)(config.threshold), config.currency?.symbol || "")}`;
+            const credits = `${(0, _util.formatCreditAmount)((0, _util.formatNumber)(Number(config.price.metadata?.credit_config?.credit_amount || 0) * Number(config.quantity)), config.currency?.symbol || "")}`;
             return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Typography, {
               variant: "body2",
               sx: {

package/lib/components/auto-topup/modal.js

@@ -637,7 +637,7 @@ function AutoTopup({
                         input: {
                           endAdornment: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.InputAdornment, {
                             position: "end",
-                            children: config?.currency?.name
+                            children: (0, _util.formatCreditAmount)("", config?.currency?.symbol)
                           })
                         },
                         htmlInput: {

package/lib/history/credit/grants-list.js

@@ -154,9 +154,9 @@ const GrantsTable = _react.default.memo(props => {
         const grant = data?.list[index];
         return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
           onClick: e => handleLinkClick(e, grant),
-          children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Typography, {
+          children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
             variant: "body2",
-            children: [(0, _util.formatBNStr)(grant.remaining_amount, grant.paymentCurrency.decimal), " ", grant.paymentCurrency.symbol]
+            children: (0, _util.formatCreditAmount)((0, _util.formatBNStr)(grant.remaining_amount, grant.paymentCurrency.decimal), grant.paymentCurrency.symbol)
           })
         });
       }

package/lib/history/credit/transactions-list.js

@@ -157,12 +157,12 @@ const TransactionsTable = _react.default.memo(props => {
         const amount = isGrant ? item.amount : item.credit_amount;
         const currency = item.paymentCurrency || item.currency;
         const unit = !isGrant && item.meter?.unit ? item.meter.unit : currency?.symbol;
-        const displayAmount = (0, _util.formatBNStr)(amount, currency?.decimal || 0);
+        const displayAmount = (0, _util.formatCreditAmount)((0, _util.formatBNStr)(amount, currency?.decimal || 0), unit);
         if (!includeGrants) {
           return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
             onClick: e => handleTransactionClick(e, item),
-            children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Typography, {
-              children: [displayAmount, " ", unit]
+            children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+              children: displayAmount
             })
           });
         }
@@ -172,7 +172,7 @@ const TransactionsTable = _react.default.memo(props => {
             sx: {
               color: isGrant ? "success.main" : "error.main"
             },
-            children: [isGrant ? "+" : "-", " ", displayAmount, " ", unit]
+            children: [isGrant ? "+" : "-", " ", displayAmount]
           })
         });
       }

package/lib/libs/util.d.ts

@@ -16,6 +16,27 @@ export declare const formatLocale: (locale?: string) => string;
 export declare const formatPrettyMsLocale: (locale: string) => "zh_CN" | "en_US";
 export declare const formatError: (err: any) => any;
 export declare function formatBNStr(str?: string, decimals?: number, precision?: number, trim?: boolean, thousandSeparated?: boolean): string;
+/**
+ * Format credit amount for display (data contexts: balances, transactions, notifications)
+ * - If currency has symbol mapping (USD -> $): shows "$20"
+ * - If no symbol mapping: shows "20 minutes" or "20 arcsphere credits"
+ *
+ * @param formattedAmount - Already formatted amount string (e.g., "20", "1,000.50")
+ * @param currencySymbol - Currency symbol (USD, EUR, minutes, etc.)
+ * @param showUnit - Whether to show the unit (default: true)
+ */
+export declare function formatCreditAmount(formattedAmount: string, currencySymbol: string, showUnit?: boolean): string;
+/**
+ * Format credit amount for checkout/purchase scenarios
+ * - If currency has symbol mapping (USD -> $): shows "$20 of credits" (en) or "$20 的信用额度" (zh)
+ * - If no symbol mapping: shows "20 minutes" or "20 arcsphere credits"
+ *
+ * @param formattedAmount - Already formatted amount string (e.g., "20", "1,000.50")
+ * @param currencySymbol - Currency symbol (USD, EUR, minutes, etc.)
+ * @param locale - Locale for translation (default: 'en')
+ * @param showUnit - Whether to show the unit (default: true)
+ */
+export declare function formatCreditForCheckout(formattedAmount: string, currencySymbol: string, locale?: string, showUnit?: boolean): string;
 export declare function formatNumber(n: number | string, precision?: number, trim?: boolean, thousandSeparated?: boolean): string;
 export declare const formatPrice: (price: TPrice, currency: TPaymentCurrency, unit_label?: string, quantity?: number, bn?: boolean, locale?: string) => string;
 export declare const formatPriceAmount: (price: TPrice, currency: TPaymentCurrency, unit_label?: string, quantity?: number, bn?: boolean) => string;

package/lib/libs/util.js

@@ -11,6 +11,8 @@ exports.formatAmountPrecisionLimit = formatAmountPrecisionLimit;
 exports.formatBNStr = formatBNStr;
 exports.formatCheckoutHeadlines = formatCheckoutHeadlines;
 exports.formatCouponTerms = void 0;
+exports.formatCreditAmount = formatCreditAmount;
+exports.formatCreditForCheckout = formatCreditForCheckout;
 exports.formatDateTime = formatDateTime;
 exports.formatError = void 0;
 exports.formatLineItemPricing = formatLineItemPricing;
@@ -207,6 +209,35 @@ function formatBNStr(str = "", decimals = 18, precision = 6, trim = true, thousa
   }
   return formatNumber((0, _util.fromUnitToToken)(str, decimals), precision, trim, thousandSeparated);
 }
+const CURRENCY_SYMBOLS = {
+  USD: "$",
+  EUR: "\u20AC",
+  GBP: "\xA3",
+  JPY: "\xA5",
+  CNY: "\xA5",
+  KRW: "\u20A9",
+  INR: "\u20B9",
+  AUD: "A$",
+  CAD: "C$",
+  CHF: "Fr",
+  HKD: "HK$",
+  SGD: "S$",
+  NZD: "NZ$"
+};
+function formatCreditAmount(formattedAmount, currencySymbol, showUnit = true) {
+  const mappedSymbol = CURRENCY_SYMBOLS[currencySymbol];
+  if (mappedSymbol) {
+    return `${mappedSymbol}${formattedAmount}`;
+  }
+  return `${formattedAmount} ${showUnit ? currencySymbol : ""}`;
+}
+function formatCreditForCheckout(formattedAmount, currencySymbol, locale = "en", showUnit = true) {
+  const mappedSymbol = CURRENCY_SYMBOLS[currencySymbol];
+  if (mappedSymbol) {
+    return `${mappedSymbol}${formattedAmount} ${showUnit ? (0, _locales.t)("common.credits", locale) : ""}`;
+  }
+  return `${formattedAmount} ${showUnit ? currencySymbol : ""}`;
+}
 function formatNumber(n, precision = 6, trim = true, thousandSeparated = true) {
   if (!n || n === "0") {
     return "0";

package/lib/locales/en.js

@@ -70,6 +70,8 @@ module.exports = (0, _flat.default)({
     creditTransaction: "Credit Transaction",
     creditAmount: "Credit Amount",
     remainingBalance: "Remaining Balance",
+    credits: "credits",
+    ofCredits: "of credits",
     transferStatus: "Transaction Status",
     sourceData: "Source Data",
     viewGrant: "View Grant",
@@ -258,17 +260,17 @@ module.exports = (0, _flat.default)({
       },
       credit: {
         normal: {
-          oneTime: "Top up {amount} {symbol} credit.",
-          oneTimeWithExpiry: "Top up {amount} {symbol} credit, valid for {duration} {unit}.",
-          recurring: "Top up {amount} {symbol} credit {period}.",
-          recurringWithExpiry: "Top up {amount} {symbol} credit {period}, valid for {duration} {unit}."
+          oneTime: "Purchase {amount}.",
+          oneTimeWithExpiry: "Purchase {amount} (valid for {duration} {unit}).",
+          recurring: "Subscription: {amount} {period}.",
+          recurringWithExpiry: "Subscription: {amount} {period} (valid for {duration} {unit})."
         },
         pending: {
-          notEnough: "Your outstanding balance is {amount} {symbol}. To settle it, a minimum purchase of {quantity} units is required.",
-          oneTimeEnough: "Your outstanding balance is {amount} {symbol}. Upon payment, you will receive {totalAmount} {symbol}, resulting in a net balance of {availableAmount} {symbol} after the deduction.",
-          oneTimeEnoughWithExpiry: "Your outstanding balance is {amount} {symbol}. Upon payment, you will receive {totalAmount} {symbol} (valid for {duration} {unit}), resulting in a net balance of {availableAmount} {symbol} after the deduction.",
-          recurringEnough: "Your outstanding balance is {amount} {symbol}. Upon payment, you will receive {totalAmount} {symbol} {period}, resulting in a net balance of {availableAmount} {symbol} after the deduction.",
-          recurringEnoughWithExpiry: "Your outstanding balance is {amount} {symbol}. Upon payment, you will receive {totalAmount} {symbol} {period} (valid for {duration} {unit}), resulting in a net balance of {availableAmount} {symbol} after the deduction."
+          notEnough: "You have a usage overage of {amount}. To restore access, a minimum purchase of {quantity} units is required.",
+          oneTimeEnough: "You have a usage overage of {amount}. This purchase adds {totalAmount}. After covering the overage, your new available balance will be {availableAmount}.",
+          oneTimeEnoughWithExpiry: "You have a usage overage of {amount}. This purchase adds {totalAmount} (valid for {duration} {unit}). After covering the overage, your new available balance will be {availableAmount}.",
+          recurringEnough: "You have a usage overage of {amount}. This subscription adds {totalAmount} {period}. After covering the overage, your new available balance will be {availableAmount}.",
+          recurringEnoughWithExpiry: "You have a usage overage of {amount}. This subscription adds {totalAmount} {period} (valid for {duration} {unit}). After covering the overage, your new available balance will be {availableAmount}."
         }
       },
       expired: {

package/lib/locales/zh.js

@@ -70,6 +70,8 @@ module.exports = (0, _flat.default)({
     creditTransaction: "\u4FE1\u7528\u4EA4\u6613",
     creditAmount: "\u4FE1\u7528\u989D\u5EA6",
     remainingBalance: "\u5269\u4F59\u4F59\u989D",
+    credits: "\u989D\u5EA6",
+    ofCredits: "\u989D\u5EA6",
     transferStatus: "\u4EA4\u6613\u72B6\u6001",
     sourceData: "\u6E90\u6570\u636E",
     viewGrant: "\u67E5\u770B\u989D\u5EA6",
@@ -295,17 +297,17 @@ module.exports = (0, _flat.default)({
       },
       credit: {
         normal: {
-          oneTime: "\u5145\u503C {amount} {symbol} \u989D\u5EA6\u3002",
-          oneTimeWithExpiry: "\u5145\u503C {amount} {symbol} \u989D\u5EA6\uFF0C\u6709\u6548\u671F {duration} {unit}\u3002",
-          recurring: "{period}\u5145\u503C {amount} {symbol} \u989D\u5EA6\u3002",
-          recurringWithExpiry: "{period}\u5145\u503C {amount} {symbol} \u989D\u5EA6\uFF0C\u6709\u6548\u671F {duration} {unit}\u3002"
+          oneTime: "\u8D2D\u4E70 {amount}\u3002",
+          oneTimeWithExpiry: "\u8D2D\u4E70 {amount}\uFF08\u6709\u6548\u671F {duration} {unit}\uFF09\u3002",
+          recurring: "\u8BA2\u9605\uFF1A{period}{amount}\u3002",
+          recurringWithExpiry: "\u8BA2\u9605\uFF1A{period}{amount}\uFF08\u6709\u6548\u671F {duration} {unit}\uFF09\u3002"
         },
         pending: {
-          notEnough: "\u60A8\u5F53\u524D\u6B20\u8D39 {amount} {symbol}\uFF0C\u81F3\u5C11\u9700\u8981\u8D2D\u4E70 {quantity} \u6570\u91CF\u3002",
-          oneTimeEnough: "\u60A8\u5F53\u524D\u6B20\u8D39 {amount} {symbol}\uFF0C\u4ED8\u6B3E\u540E\u5C06\u83B7\u5F97 {totalAmount} {symbol} \u989D\u5EA6\uFF0C\u6263\u9664\u6B20\u8D39\u540E\u51C0\u4F59\u989D\u4E3A {availableAmount} {symbol}\u3002",
-          oneTimeEnoughWithExpiry: "\u60A8\u5F53\u524D\u6B20\u8D39 {amount} {symbol}\uFF0C\u4ED8\u6B3E\u540E\u5C06\u83B7\u5F97 {totalAmount} {symbol} \u989D\u5EA6\uFF08\u6709\u6548\u671F {duration} {unit}\uFF09\uFF0C\u6263\u9664\u6B20\u8D39\u540E\u51C0\u4F59\u989D\u4E3A {availableAmount} {symbol}\u3002",
-          recurringEnough: "\u60A8\u5F53\u524D\u6B20\u8D39 {amount} {symbol}\uFF0C\u4ED8\u6B3E\u540E{period}\u5C06\u83B7\u5F97 {totalAmount} {symbol} \u989D\u5EA6\uFF0C\u6263\u9664\u6B20\u8D39\u540E\u51C0\u4F59\u989D\u4E3A {availableAmount} {symbol}\u3002",
-          recurringEnoughWithExpiry: "\u60A8\u5F53\u524D\u6B20\u8D39 {amount} {symbol}\uFF0C\u4ED8\u6B3E\u540E{period}\u5C06\u83B7\u5F97 {totalAmount} {symbol} \u989D\u5EA6\uFF08\u6709\u6548\u671F {duration} {unit}\uFF09\uFF0C\u6263\u9664\u6B20\u8D39\u540E\u51C0\u4F59\u989D\u4E3A {availableAmount} {symbol}\u3002"
+          notEnough: "\u60A8\u6709 {amount} \u7684\u4F7F\u7528\u8D85\u989D\u3002\u8981\u6062\u590D\u8BBF\u95EE\uFF0C\u9700\u8981\u81F3\u5C11\u8D2D\u4E70 {quantity} \u6570\u91CF\u3002",
+          oneTimeEnough: "\u60A8\u6709 {amount} \u7684\u4F7F\u7528\u8D85\u989D\u3002\u672C\u6B21\u8D2D\u4E70\u5C06\u589E\u52A0 {totalAmount}\u3002\u6263\u9664\u8D85\u989D\u540E\uFF0C\u60A8\u7684\u65B0\u53EF\u7528\u4F59\u989D\u5C06\u4E3A {availableAmount}\u3002",
+          oneTimeEnoughWithExpiry: "\u60A8\u6709 {amount} \u7684\u4F7F\u7528\u8D85\u989D\u3002\u672C\u6B21\u8D2D\u4E70\u5C06\u589E\u52A0 {totalAmount}\uFF08\u6709\u6548\u671F {duration} {unit}\uFF09\u3002\u6263\u9664\u8D85\u989D\u540E\uFF0C\u60A8\u7684\u65B0\u53EF\u7528\u4F59\u989D\u5C06\u4E3A {availableAmount}\u3002",
+          recurringEnough: "\u60A8\u6709 {amount} \u7684\u4F7F\u7528\u8D85\u989D\u3002\u672C\u8BA2\u9605{period}\u5C06\u589E\u52A0 {totalAmount}\u3002\u6263\u9664\u8D85\u989D\u540E\uFF0C\u60A8\u7684\u65B0\u53EF\u7528\u4F59\u989D\u5C06\u4E3A {availableAmount}\u3002",
+          recurringEnoughWithExpiry: "\u60A8\u6709 {amount} \u7684\u4F7F\u7528\u8D85\u989D\u3002\u672C\u8BA2\u9605{period}\u5C06\u589E\u52A0 {totalAmount}\uFF08\u6709\u6548\u671F {duration} {unit}\uFF09\u3002\u6263\u9664\u8D85\u989D\u540E\uFF0C\u60A8\u7684\u65B0\u53EF\u7528\u4F59\u989D\u5C06\u4E3A {availableAmount}\u3002"
         }
       },
       emptyItems: {

package/lib/payment/product-item.js

@@ -166,12 +166,12 @@ function ProductItem({
     if (!isCreditProduct) return null;
     const totalCreditStr = (0, _util2.formatNumber)(creditAmount * (localQuantity || 0));
     const currencySymbol = creditCurrency?.symbol || "Credits";
+    const formattedTotalCredit = (0, _util2.formatCreditForCheckout)(totalCreditStr, currencySymbol, locale);
     const hasPendingAmount = pendingAmount && new _util.BN(pendingAmount || "0").gt(new _util.BN(0));
     const isRecurring = item.price.type === "recurring";
     const hasExpiry = validDuration && validDuration > 0;
     const buildBaseParams = () => ({
-      amount: totalCreditStr,
-      symbol: currencySymbol,
+      amount: formattedTotalCredit,
       ...(hasExpiry && {
         duration: validDuration,
         unit: t(`common.${validDurationUnit}`)
@@ -181,11 +181,10 @@ function ProductItem({
       })
     });
     const buildPendingParams = (pendingBN, availableAmount) => ({
-      amount: (0, _util2.formatBNStr)(pendingBN.toString(), creditCurrency?.decimal || 2),
-      symbol: currencySymbol,
-      totalAmount: totalCreditStr,
+      amount: (0, _util2.formatCreditForCheckout)((0, _util2.formatBNStr)(pendingBN.toString(), creditCurrency?.decimal || 2), currencySymbol, locale),
+      totalAmount: formattedTotalCredit,
       ...(availableAmount && {
-        availableAmount: (0, _util2.formatBNStr)(availableAmount, creditCurrency?.decimal || 2)
+        availableAmount: (0, _util2.formatCreditForCheckout)((0, _util2.formatBNStr)(availableAmount, creditCurrency?.decimal || 2), currencySymbol, locale)
       }),
       ...(hasExpiry && {
         duration: validDuration,
@@ -210,8 +209,7 @@ function ProductItem({
     const actualAvailable = currentPurchaseCreditBN.sub(pendingAmountBN).toString();
     if (!new _util.BN(actualAvailable).gt(new _util.BN(0))) {
       return t("payment.checkout.credit.pending.notEnough", {
-        amount: (0, _util2.formatBNStr)(pendingAmountBN.toString(), creditCurrency?.decimal || 2),
-        symbol: currencySymbol,
+        amount: (0, _util2.formatCreditForCheckout)((0, _util2.formatBNStr)(pendingAmountBN.toString(), creditCurrency?.decimal || 2), currencySymbol, locale),
         quantity: (0, _util2.formatNumber)(minQuantityNeeded)
       });
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/payment-react",
-  "version": "1.23.4",
+  "version": "1.23.5",
   "description": "Reusable react components for payment kit v2",
   "keywords": [
     "react",
@@ -96,7 +96,7 @@
     "@babel/core": "^7.27.4",
     "@babel/preset-env": "^7.27.2",
     "@babel/preset-react": "^7.27.1",
-    "@blocklet/payment-types": "1.23.4",
+    "@blocklet/payment-types": "1.23.5",
     "@storybook/addon-essentials": "^7.6.20",
     "@storybook/addon-interactions": "^7.6.20",
     "@storybook/addon-links": "^7.6.20",
@@ -127,5 +127,5 @@
     "vite-plugin-babel": "^1.3.1",
     "vite-plugin-node-polyfills": "^0.23.0"
   },
-  "gitHead": "12cd3cecedb8aa3331a4a24fa093f62cc6630d5b"
+  "gitHead": "486456ed522207cc4efa54cd14b1f65c6433d179"
 }

package/src/components/auto-topup/index.tsx

@@ -22,7 +22,7 @@ import { joinURL } from 'ufo';
 import type { AutoRechargeConfig } from '@blocklet/payment-types';
 import { useRequest } from 'ahooks';
 
-import { getPrefix, formatBNStr, formatNumber, formatPrice } from '../../libs/util';
+import { getPrefix, formatBNStr, formatNumber, formatPrice, formatCreditAmount } from '../../libs/util';
 import { createLink, handleNavigation } from '../../libs/navigation';
 import { usePaymentContext } from '../../contexts/payment';
 import api from '../../libs/api';
@@ -383,10 +383,13 @@ export default function AutoTopupCard({
             <Stack spacing={1.5} className="auto-topup-content" sx={{ pt: 1.5 }}>
               {/* Main Description */}
               {(() => {
-                const threshold = `${formatNumber(config.threshold)} ${config.currency?.symbol || ''}`;
-                const credits = `${formatNumber(
-                  Number(config.price.metadata?.credit_config?.credit_amount || 0) * Number(config.quantity)
-                )} ${config.currency?.name || ''}`;
+                const threshold = `${formatCreditAmount(formatNumber(config.threshold), config.currency?.symbol || '')}`;
+                const credits = `${formatCreditAmount(
+                  formatNumber(
+                    Number(config.price.metadata?.credit_config?.credit_amount || 0) * Number(config.quantity)
+                  ),
+                  config.currency?.symbol || ''
+                )}`;
 
                 return (
                   <Typography

package/src/components/auto-topup/modal.tsx

@@ -29,7 +29,7 @@ import type { AutoRechargeConfig, TCustomer, TPaymentCurrency, TPaymentMethod }
 import DidAddress from '@arcblock/ux/lib/DID';
 import Switch from '../switch-button';
 import api from '../../libs/api';
-import { formatError, flattenPaymentMethods, getPrefix, formatBNStr } from '../../libs/util';
+import { formatError, flattenPaymentMethods, getPrefix, formatBNStr, formatCreditAmount } from '../../libs/util';
 import { usePaymentContext } from '../../contexts/payment';
 import { createLink, handleNavigation } from '../../libs/navigation';
 
@@ -612,7 +612,11 @@ export default function AutoTopup({
                             }}
                             slotProps={{
                               input: {
-                                endAdornment: <InputAdornment position="end">{config?.currency?.name}</InputAdornment>,
+                                endAdornment: (
+                                  <InputAdornment position="end">
+                                    {formatCreditAmount('', config?.currency?.symbol)}
+                                  </InputAdornment>
+                                ),
                               },
                               htmlInput: {
                                 min: 0,

package/src/history/credit/grants-list.tsx

@@ -13,7 +13,7 @@ import React, { useEffect, useRef, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 
 import { styled } from '@mui/system';
-import { formatBNStr, formatToDate } from '../../libs/util';
+import { formatToDate, formatCreditAmount, formatBNStr } from '../../libs/util';
 import { usePaymentContext } from '../../contexts/payment';
 import api from '../../libs/api';
 import Table from '../../components/table';
@@ -156,7 +156,10 @@ const GrantsTable = React.memo((props: Props) => {
           return (
             <Box onClick={(e) => handleLinkClick(e, grant)}>
               <Typography variant="body2">
-                {formatBNStr(grant.remaining_amount, grant.paymentCurrency.decimal)} {grant.paymentCurrency.symbol}
+                {formatCreditAmount(
+                  formatBNStr(grant.remaining_amount, grant.paymentCurrency.decimal),
+                  grant.paymentCurrency.symbol
+                )}
               </Typography>
             </Box>
           );

package/src/history/credit/transactions-list.tsx

@@ -16,7 +16,7 @@ import { joinURL } from 'ufo';
 import DateRangePicker, { type DateRangeValue } from '../../components/date-range-picker';
 // eslint-disable-next-line import/no-extraneous-dependencies
 
-import { formatBNStr, formatToDate, getPrefix } from '../../libs/util';
+import { formatToDate, getPrefix, formatCreditAmount, formatBNStr } from '../../libs/util';
 import { usePaymentContext } from '../../contexts/payment';
 import api from '../../libs/api';
 import Table from '../../components/table';
@@ -184,14 +184,12 @@ const TransactionsTable = React.memo((props: Props) => {
           const amount = isGrant ? item.amount : item.credit_amount;
           const currency = item.paymentCurrency || item.currency;
           const unit = !isGrant && item.meter?.unit ? item.meter.unit : currency?.symbol;
-          const displayAmount = formatBNStr(amount, currency?.decimal || 0);
+          const displayAmount = formatCreditAmount(formatBNStr(amount, currency?.decimal || 0), unit);
 
           if (!includeGrants) {
             return (
               <Box onClick={(e) => handleTransactionClick(e, item)}>
-                <Typography>
-                  {displayAmount} {unit}
-                </Typography>
+                <Typography>{displayAmount}</Typography>
               </Box>
             );
           }
@@ -202,7 +200,7 @@ const TransactionsTable = React.memo((props: Props) => {
                 sx={{
                   color: isGrant ? 'success.main' : 'error.main',
                 }}>
-                {isGrant ? '+' : '-'} {displayAmount} {unit}
+                {isGrant ? '+' : '-'} {displayAmount}
               </Typography>
             </Box>
           );

package/src/libs/util.ts

@@ -188,6 +188,61 @@ export function formatBNStr(
   return formatNumber(fromUnitToToken(str, decimals), precision, trim, thousandSeparated);
 }
 
+const CURRENCY_SYMBOLS: Record<string, string> = {
+  USD: '$',
+  EUR: '€',
+  GBP: '£',
+  JPY: '¥',
+  CNY: '¥',
+  KRW: '₩',
+  INR: '₹',
+  AUD: 'A$',
+  CAD: 'C$',
+  CHF: 'Fr',
+  HKD: 'HK$',
+  SGD: 'S$',
+  NZD: 'NZ$',
+};
+
+/**
+ * Format credit amount for display (data contexts: balances, transactions, notifications)
+ * - If currency has symbol mapping (USD -> $): shows "$20"
+ * - If no symbol mapping: shows "20 minutes" or "20 arcsphere credits"
+ *
+ * @param formattedAmount - Already formatted amount string (e.g., "20", "1,000.50")
+ * @param currencySymbol - Currency symbol (USD, EUR, minutes, etc.)
+ * @param showUnit - Whether to show the unit (default: true)
+ */
+export function formatCreditAmount(formattedAmount: string, currencySymbol: string, showUnit: boolean = true): string {
+  const mappedSymbol = CURRENCY_SYMBOLS[currencySymbol];
+  if (mappedSymbol) {
+    return `${mappedSymbol}${formattedAmount}`;
+  }
+  return `${formattedAmount} ${showUnit ? currencySymbol : ''}`;
+}
+
+/**
+ * Format credit amount for checkout/purchase scenarios
+ * - If currency has symbol mapping (USD -> $): shows "$20 of credits" (en) or "$20 的信用额度" (zh)
+ * - If no symbol mapping: shows "20 minutes" or "20 arcsphere credits"
+ *
+ * @param formattedAmount - Already formatted amount string (e.g., "20", "1,000.50")
+ * @param currencySymbol - Currency symbol (USD, EUR, minutes, etc.)
+ * @param locale - Locale for translation (default: 'en')
+ * @param showUnit - Whether to show the unit (default: true)
+ */
+export function formatCreditForCheckout(
+  formattedAmount: string,
+  currencySymbol: string,
+  locale: string = 'en',
+  showUnit: boolean = true
+): string {
+  const mappedSymbol = CURRENCY_SYMBOLS[currencySymbol];
+  if (mappedSymbol) {
+    return `${mappedSymbol}${formattedAmount} ${showUnit ? t('common.credits', locale) : ''}`;
+  }
+  return `${formattedAmount} ${showUnit ? currencySymbol : ''}`;
+}
 export function formatNumber(
   n: number | string,
   precision: number = 6,

package/src/locales/en.tsx

@@ -65,6 +65,8 @@ export default flat({
     creditTransaction: 'Credit Transaction',
     creditAmount: 'Credit Amount',
     remainingBalance: 'Remaining Balance',
+    credits: 'credits',
+    ofCredits: 'of credits',
     transferStatus: 'Transaction Status',
     sourceData: 'Source Data',
     viewGrant: 'View Grant',
@@ -257,22 +259,22 @@ export default flat({
       },
       credit: {
         normal: {
-          oneTime: 'Top up {amount} {symbol} credit.',
-          oneTimeWithExpiry: 'Top up {amount} {symbol} credit, valid for {duration} {unit}.',
-          recurring: 'Top up {amount} {symbol} credit {period}.',
-          recurringWithExpiry: 'Top up {amount} {symbol} credit {period}, valid for {duration} {unit}.',
+          oneTime: 'Purchase {amount}.',
+          oneTimeWithExpiry: 'Purchase {amount} (valid for {duration} {unit}).',
+          recurring: 'Subscription: {amount} {period}.',
+          recurringWithExpiry: 'Subscription: {amount} {period} (valid for {duration} {unit}).',
         },
         pending: {
           notEnough:
-            'Your outstanding balance is {amount} {symbol}. To settle it, a minimum purchase of {quantity} units is required.',
+            'You have a usage overage of {amount}. To restore access, a minimum purchase of {quantity} units is required.',
           oneTimeEnough:
-            'Your outstanding balance is {amount} {symbol}. Upon payment, you will receive {totalAmount} {symbol}, resulting in a net balance of {availableAmount} {symbol} after the deduction.',
+            'You have a usage overage of {amount}. This purchase adds {totalAmount}. After covering the overage, your new available balance will be {availableAmount}.',
           oneTimeEnoughWithExpiry:
-            'Your outstanding balance is {amount} {symbol}. Upon payment, you will receive {totalAmount} {symbol} (valid for {duration} {unit}), resulting in a net balance of {availableAmount} {symbol} after the deduction.',
+            'You have a usage overage of {amount}. This purchase adds {totalAmount} (valid for {duration} {unit}). After covering the overage, your new available balance will be {availableAmount}.',
           recurringEnough:
-            'Your outstanding balance is {amount} {symbol}. Upon payment, you will receive {totalAmount} {symbol} {period}, resulting in a net balance of {availableAmount} {symbol} after the deduction.',
+            'You have a usage overage of {amount}. This subscription adds {totalAmount} {period}. After covering the overage, your new available balance will be {availableAmount}.',
           recurringEnoughWithExpiry:
-            'Your outstanding balance is {amount} {symbol}. Upon payment, you will receive {totalAmount} {symbol} {period} (valid for {duration} {unit}), resulting in a net balance of {availableAmount} {symbol} after the deduction.',
+            'You have a usage overage of {amount}. This subscription adds {totalAmount} {period} (valid for {duration} {unit}). After covering the overage, your new available balance will be {availableAmount}.',
         },
       },
       expired: {

package/src/locales/zh.tsx

@@ -65,6 +65,8 @@ export default flat({
     creditTransaction: '信用交易',
     creditAmount: '信用额度',
     remainingBalance: '剩余余额',
+    credits: '额度',
+    ofCredits: '额度',
     transferStatus: '交易状态',
     sourceData: '源数据',
     viewGrant: '查看额度',
@@ -291,21 +293,21 @@ export default flat({
       },
       credit: {
         normal: {
-          oneTime: '充值 {amount} {symbol} 额度。',
-          oneTimeWithExpiry: '充值 {amount} {symbol} 额度，有效期 {duration} {unit}。',
-          recurring: '{period}充值 {amount} {symbol} 额度。',
-          recurringWithExpiry: '{period}充值 {amount} {symbol} 额度，有效期 {duration} {unit}。',
+          oneTime: '购买 {amount}。',
+          oneTimeWithExpiry: '购买 {amount}（有效期 {duration} {unit}）。',
+          recurring: '订阅：{period}{amount}。',
+          recurringWithExpiry: '订阅：{period}{amount}（有效期 {duration} {unit}）。',
         },
         pending: {
-          notEnough: '您当前欠费 {amount} {symbol}，至少需要购买 {quantity} 数量。',
+          notEnough: '您有 {amount} 的使用超额。要恢复访问，需要至少购买 {quantity} 数量。',
           oneTimeEnough:
-            '您当前欠费 {amount} {symbol}，付款后将获得 {totalAmount} {symbol} 额度，扣除欠费后净余额为 {availableAmount} {symbol}。',
+            '您有 {amount} 的使用超额。本次购买将增加 {totalAmount}。扣除超额后，您的新可用余额将为 {availableAmount}。',
           oneTimeEnoughWithExpiry:
-            '您当前欠费 {amount} {symbol}，付款后将获得 {totalAmount} {symbol} 额度（有效期 {duration} {unit}），扣除欠费后净余额为 {availableAmount} {symbol}。',
+            '您有 {amount} 的使用超额。本次购买将增加 {totalAmount}（有效期 {duration} {unit}）。扣除超额后，您的新可用余额将为 {availableAmount}。',
           recurringEnough:
-            '您当前欠费 {amount} {symbol}，付款后{period}将获得 {totalAmount} {symbol} 额度，扣除欠费后净余额为 {availableAmount} {symbol}。',
+            '您有 {amount} 的使用超额。本订阅{period}将增加 {totalAmount}。扣除超额后，您的新可用余额将为 {availableAmount}。',
           recurringEnoughWithExpiry:
-            '您当前欠费 {amount} {symbol}，付款后{period}将获得 {totalAmount} {symbol} 额度（有效期 {duration} {unit}），扣除欠费后净余额为 {availableAmount} {symbol}。',
+            '您有 {amount} 的使用超额。本订阅{period}将增加 {totalAmount}（有效期 {duration} {unit}）。扣除超额后，您的新可用余额将为 {availableAmount}。',
         },
       },
       emptyItems: {

package/src/payment/product-item.tsx

@@ -17,6 +17,7 @@ import {
   formatRecurring,
   formatUpsellSaving,
   formatAmount,
+  formatCreditForCheckout,
   formatBNStr,
 } from '../libs/util';
 import ProductCard from './product-card';
@@ -206,13 +207,14 @@ export default function ProductItem({
 
     const totalCreditStr = formatNumber(creditAmount * (localQuantity || 0));
     const currencySymbol = creditCurrency?.symbol || 'Credits';
+    const formattedTotalCredit = formatCreditForCheckout(totalCreditStr, currencySymbol, locale);
+
     const hasPendingAmount = pendingAmount && new BN(pendingAmount || '0').gt(new BN(0));
     const isRecurring = item.price.type === 'recurring';
     const hasExpiry = validDuration && validDuration > 0;
 
     const buildBaseParams = () => ({
-      amount: totalCreditStr,
-      symbol: currencySymbol,
+      amount: formattedTotalCredit,
       ...(hasExpiry && {
         duration: validDuration,
         unit: t(`common.${validDurationUnit}`),
@@ -223,11 +225,18 @@ export default function ProductItem({
     });
 
     const buildPendingParams = (pendingBN: BN, availableAmount?: string) => ({
-      amount: formatBNStr(pendingBN.toString(), creditCurrency?.decimal || 2),
-      symbol: currencySymbol,
-      totalAmount: totalCreditStr,
+      amount: formatCreditForCheckout(
+        formatBNStr(pendingBN.toString(), creditCurrency?.decimal || 2),
+        currencySymbol,
+        locale
+      ),
+      totalAmount: formattedTotalCredit,
       ...(availableAmount && {
-        availableAmount: formatBNStr(availableAmount, creditCurrency?.decimal || 2),
+        availableAmount: formatCreditForCheckout(
+          formatBNStr(availableAmount, creditCurrency?.decimal || 2),
+          currencySymbol,
+          locale
+        ),
       }),
       ...(hasExpiry && {
         duration: validDuration,
@@ -256,8 +265,11 @@ export default function ProductItem({
 
     if (!new BN(actualAvailable).gt(new BN(0))) {
       return t('payment.checkout.credit.pending.notEnough', {
-        amount: formatBNStr(pendingAmountBN.toString(), creditCurrency?.decimal || 2),
-        symbol: currencySymbol,
+        amount: formatCreditForCheckout(
+          formatBNStr(pendingAmountBN.toString(), creditCurrency?.decimal || 2),
+          currencySymbol,
+          locale
+        ),
         quantity: formatNumber(minQuantityNeeded),
       });
     }