payment-kit 1.23.3 → 1.23.5

package/api/src/libs/invoice.ts

@@ -1050,6 +1050,8 @@ export async function retryUncollectibleInvoices(options: {
   invoiceId?: string;
   invoiceIds?: string[];
   currencyId?: string;
+  billingReason?: string;
+  statusList?: string[];
 }) {
   const lockKey = `retry-uncollectible-${JSON.stringify(options)}`;
 
@@ -1065,10 +1067,12 @@ export async function retryUncollectibleInvoices(options: {
   try {
     await Lock.acquire(lockKey, dayjs().add(5, 'minutes').unix());
 
-    const { customerId, subscriptionId, invoiceId, invoiceIds, currencyId } = options;
+    const { customerId, subscriptionId, invoiceId, invoiceIds, currencyId, billingReason, statusList } = options;
+
+    const invoiceStatusList = statusList || ['uncollectible'];
 
     const where: WhereOptions = {
-      status: { [Op.in]: ['uncollectible'] },
+      status: { [Op.in]: invoiceStatusList },
       payment_intent_id: { [Op.ne]: null },
     };
 
@@ -1092,6 +1096,10 @@ export async function retryUncollectibleInvoices(options: {
       where.currency_id = currencyId;
     }
 
+    if (billingReason) {
+      where.billing_reason = billingReason;
+    }
+
     const overdueInvoices = (await Invoice.findAll({
       where,
       include: [{ model: PaymentIntent, as: 'paymentIntent' }],
@@ -1100,9 +1108,10 @@ export async function retryUncollectibleInvoices(options: {
     })) as (Invoice & { paymentIntent?: PaymentIntent })[];
 
     const startTime = Date.now();
-    logger.info('Found uncollectible invoices to retry', {
+    logger.info('Found invoices to retry', {
       count: overdueInvoices.length,
       criteria: options,
+      statusList: invoiceStatusList,
       invoiceIds: overdueInvoices.map((inv) => inv.id),
     });
 
@@ -1167,10 +1176,11 @@ export async function retryUncollectibleInvoices(options: {
     });
 
     const processingTime = Date.now() - startTime;
-    logger.info('Completed retrying uncollectible invoices', {
+    logger.info('Completed retrying invoices', {
       totalProcessed: results.processed,
       successful: results.successful.length,
       failed: results.failed.length,
+      statusList: invoiceStatusList,
       processingTimeMs: processingTime,
     });
 

package/api/src/libs/notification/template/customer-credit-grant-granted.ts

@@ -5,7 +5,7 @@ import { getUserLocale } from '../../../integrations/blocklet/notification';
 import { translate } from '../../../locales';
 import { CreditGrant, Customer, PaymentCurrency } from '../../../store/models';
 import { formatTime } from '../../time';
-import { formatNumber, getCustomerIndexUrl } from '../../util';
+import { formatCreditAmount, formatNumber, getCustomerIndexUrl } from '../../util';
 import type { BaseEmailTemplate, BaseEmailTemplateType } from './base';
 
 export interface CustomerCreditGrantGrantedEmailTemplateOptions {
@@ -59,7 +59,10 @@ export class CustomerCreditGrantGrantedEmailTemplate
       locale,
       userDid,
       currencySymbol,
-      grantedAmount: `${formatNumber(fromUnitToToken(creditGrant.amount.toString(), paymentCurrency.decimal))} ${currencySymbol}`,
+      grantedAmount: formatCreditAmount(
+        formatNumber(fromUnitToToken(creditGrant.amount.toString(), paymentCurrency.decimal)) || '0',
+        currencySymbol
+      ),
       expiresAt,
       neverExpires,
       at,

package/api/src/libs/notification/template/customer-credit-insufficient.ts

@@ -9,7 +9,7 @@ import { getMainProductName } from '../../product';
 import { getCustomerSubscriptionPageUrl } from '../../subscription';
 import { formatTime } from '../../time';
 import type { BaseEmailTemplate, BaseEmailTemplateType } from './base';
-import { formatNumber, getConnectQueryParam, getCustomerIndexUrl } from '../../util';
+import { formatCreditAmount, getConnectQueryParam, getCustomerIndexUrl, formatNumber } from '../../util';
 import { getRechargePaymentUrl } from '../../currency';
 
 export interface CustomerCreditInsufficientEmailTemplateOptions {
@@ -87,14 +87,19 @@ export class CustomerCreditInsufficientEmailTemplate
       rechargeUrl = withQuery(rechargeUrl, { ...getConnectQueryParam({ userDid }) });
     }
 
+    const formattedRequired =
+      formatNumber(fromUnitToToken(this.options.requiredAmount, paymentCurrency.decimal)) || '0';
+    const formattedAvailable =
+      formatNumber(fromUnitToToken(this.options.availableAmount, paymentCurrency.decimal)) || '0';
+
     return {
       locale,
       userDid,
       currencySymbol,
       meterName: this.options.meterName,
       meterEventName: this.options.meterEventName,
-      requiredAmount: `${formatNumber(fromUnitToToken(this.options.requiredAmount, paymentCurrency.decimal))} ${currencySymbol}`,
-      availableAmount: `${formatNumber(fromUnitToToken(this.options.availableAmount, paymentCurrency.decimal))} ${currencySymbol}`,
+      requiredAmount: formatCreditAmount(formattedRequired, currencySymbol),
+      availableAmount: formatCreditAmount(formattedAvailable, currencySymbol),
       isExhausted,
       productName,
       viewSubscriptionLink,

package/api/src/libs/notification/template/customer-credit-low-balance.ts

@@ -1,12 +1,12 @@
 /* eslint-disable @typescript-eslint/brace-style */
 /* eslint-disable @typescript-eslint/indent */
-import { fromUnitToToken } from '@ocap/util';
 import { withQuery } from 'ufo';
+import { fromUnitToToken } from '@ocap/util';
 import { getUserLocale } from '../../../integrations/blocklet/notification';
 import { translate } from '../../../locales';
 import { Customer, PaymentCurrency } from '../../../store/models';
 import type { BaseEmailTemplate, BaseEmailTemplateType } from './base';
-import { formatNumber, getConnectQueryParam, getCustomerIndexUrl } from '../../util';
+import { formatCreditAmount, getConnectQueryParam, getCustomerIndexUrl, formatNumber } from '../../util';
 import { getRechargePaymentUrl } from '../../currency';
 
 export interface CustomerCreditLowBalanceEmailTemplateOptions {
@@ -20,7 +20,6 @@ export interface CustomerCreditLowBalanceEmailTemplateOptions {
 interface CustomerCreditLowBalanceEmailTemplateContext {
   locale: string;
   userDid: string;
-  currencySymbol: string;
   availableAmount: string; // formatted with symbol
   lowBalancePercentage: string; // with % or "less than 1%"
   currencyName: string;
@@ -51,9 +50,9 @@ export class CustomerCreditLowBalanceEmailTemplate
 
     const userDid = customer.did;
     const locale = await getUserLocale(userDid);
-    const currencySymbol = paymentCurrency.symbol;
 
-    const available = formatNumber(fromUnitToToken(availableAmount, paymentCurrency.decimal));
+    const formattedAmount = formatNumber(fromUnitToToken(availableAmount, paymentCurrency.decimal));
+    const available = formatCreditAmount(formattedAmount || '0', paymentCurrency.symbol);
     const percentageNum = parseFloat(percentage);
     const isCritical = percentageNum < 1;
     const lowBalancePercentage = isCritical
@@ -68,8 +67,7 @@ export class CustomerCreditLowBalanceEmailTemplate
     return {
       locale,
       userDid,
-      currencySymbol,
-      availableAmount: `${available}`,
+      availableAmount: available,
       lowBalancePercentage,
       currencyName: paymentCurrency.name,
       isCritical,
@@ -79,16 +77,7 @@ export class CustomerCreditLowBalanceEmailTemplate
 
   async getTemplate(): Promise<BaseEmailTemplateType> {
     const context = await this.getContext();
-    const {
-      locale,
-      userDid,
-      availableAmount,
-      lowBalancePercentage,
-      currencyName,
-      currencySymbol,
-      isCritical,
-      rechargeUrl,
-    } = context;
+    const { locale, userDid, availableAmount, lowBalancePercentage, currencyName, isCritical, rechargeUrl } = context;
 
     const fields = [
       {
@@ -119,7 +108,7 @@ export class CustomerCreditLowBalanceEmailTemplate
         data: {
           type: 'plain',
           color: isCritical ? '#FF0000' : '#FF6600',
-          text: `${availableAmount} ${currencySymbol}`,
+          text: availableAmount,
         },
       },
       {

package/api/src/libs/util.ts

@@ -638,6 +638,38 @@ export function formatNumber(
   return right ? [left, trimEnd(right, '0')].filter(Boolean).join('.') : left;
 }
 
+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 in 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.)
+ */
+export function formatCreditAmount(formattedAmount: string, currencySymbol: string | undefined): string {
+  const mappedSymbol = CURRENCY_SYMBOLS[currencySymbol || ''];
+  if (mappedSymbol) {
+    return `${mappedSymbol}${formattedAmount} credits`;
+  }
+  return `${formattedAmount} ${currencySymbol || ''}`;
+}
+
 export function formatLinkWithLocale(url: string, locale?: string) {
   if (!locale || !url) {
     return url;

package/api/src/locales/en.ts

@@ -253,8 +253,8 @@ export default flat({
     },
 
     overdraftProtectionExhausted: {
-      title: 'Insufficient Credit for SubGuard™',
-      body: 'Your subscription to {productName} has insufficient staked credit for SubGuard™. Please increase your stake to maintain the service or disable it if no longer needed.',
+      title: 'Insufficient Stake for SubGuard™',
+      body: 'Your subscription to {productName} has insufficient staked amount for SubGuard™. Please increase your stake to maintain the service or disable it if no longer needed.',
     },
 
     aggregatedSubscriptionRenewed: {
@@ -263,25 +263,25 @@ export default flat({
     },
 
     creditInsufficient: {
-      title: 'Insufficient Credit',
+      title: 'Insufficient Credit Balance',
       bodyWithSubscription:
-        'Your available credit ({availableAmount}) is not enough to cover your subscription to {subscriptionName}. To ensure uninterrupted service, please reload your account.',
+        'Your available credit balance ({availableAmount}) is not enough to cover your subscription to {subscriptionName}. To ensure uninterrupted service, please reload your account.',
       bodyWithoutSubscription:
-        'Your available credit ({availableAmount}) is not enough to continue using the service. To ensure uninterrupted service, please reload your account.',
-      exhaustedTitle: 'Credit Exhausted – Please Reload',
+        'Your available credit balance ({availableAmount}) is not enough to continue using the service. To ensure uninterrupted service, please reload your account.',
+      exhaustedTitle: 'Credit Balance Exhausted – Please Reload',
       exhaustedBodyWithSubscription:
-        'Your credit is fully exhausted and can no longer cover your subscription to {subscriptionName}. To ensure uninterrupted service, please reload your account.',
+        'Your credit balance is fully exhausted and can no longer cover your subscription to {subscriptionName}. To ensure uninterrupted service, please reload your account.',
       exhaustedBodyWithoutSubscription:
-        'Your credit is fully exhausted. To ensure uninterrupted service, please reload your account.',
+        'Your credit balance is fully exhausted. To ensure uninterrupted service, please reload your account.',
       meterEventName: 'Service',
-      availableCredit: 'Available Credit Amount',
-      requiredCredit: 'Required Credit Amount',
+      availableCredit: 'Available Balance',
+      requiredCredit: 'Required Credit',
     },
 
     creditGrantGranted: {
-      title: 'Congratulations! Your granted credit is now active',
-      body: 'You have been granted {grantedAmount} credit, activated on {at}, valid until {expiresAt}. Enjoy your service!',
-      bodyNoExpire: 'You have been granted {grantedAmount} credit, activated on {at}. Enjoy your service!',
+      title: 'Congratulations! Your credits are now active',
+      body: 'You have been granted {grantedAmount} in usage credits, activated on {at}, valid until {expiresAt}. Enjoy your service!',
+      bodyNoExpire: 'You have been granted {grantedAmount} in usage credits, activated on {at}. Enjoy your service!',
       grantedCredit: 'Granted Credit',
       validUntil: 'Valid Until',
       neverExpires: 'Never Expires',

package/api/src/queues/auto-recharge.ts

@@ -19,6 +19,7 @@ import { ensureInvoiceAndItems } from '../libs/invoice';
 import dayjs from '../libs/dayjs';
 import { invoiceQueue } from './invoice';
 import { getPriceUintAmountByCurrency } from '../libs/price';
+import { isDelegationSufficientForPayment } from '../libs/payment';
 
 export interface AutoRechargeJobData {
   customer_id: string;
@@ -228,6 +229,26 @@ async function executeAutoRecharge(
       throw new Error('No payer found for auto recharge');
     }
 
+    if (paymentMethod.type !== 'stripe') {
+      const balanceCheck = await isDelegationSufficientForPayment({
+        paymentMethod,
+        paymentCurrency: rechargeCurrency,
+        userDid: payer,
+        amount: totalAmount.toString(),
+      });
+
+      if (!balanceCheck.sufficient) {
+        logger.error('Insufficient balance for auto recharge', {
+          customerId: customer.id,
+          configId: config.id,
+          reason: balanceCheck.reason,
+          totalAmount: totalAmount.toString(),
+          payer,
+        });
+        throw new Error(`Insufficient balance: ${balanceCheck.reason}`);
+      }
+    }
+
     const invoice = await createInvoiceForAutoRecharge({
       customer,
       config,
@@ -276,6 +297,11 @@ export async function checkAndTriggerAutoRecharge(
   currentBalance: string
 ): Promise<void> {
   try {
+    logger.info('----- Checking and triggering auto recharge -----', {
+      customerId: customer.id,
+      currencyId,
+      currentBalance,
+    });
     const config = await AutoRechargeConfig.findOne({
       where: {
         customer_id: customer.id,
@@ -292,6 +318,14 @@ export async function checkAndTriggerAutoRecharge(
       return;
     }
 
+    logger.info('Auto recharge config found', {
+      customerId: customer.id,
+      currencyId,
+      config,
+      currentBalance,
+      threshold: config.threshold,
+    });
+
     //  check if balance is above threshold
     if (new BN(currentBalance).gte(new BN(config.threshold))) {
       logger.debug('Balance above threshold, skipping auto recharge', {

package/api/src/queues/credit-consume.ts

@@ -15,7 +15,7 @@ import {
   TMeterExpanded,
 } from '../store/models';
 
-import { MAX_RETRY_COUNT, getNextRetry } from '../libs/util';
+import { MAX_RETRY_COUNT, getNextRetry, formatCreditAmount } from '../libs/util';
 import { getDaysUntilCancel, getDueUnit, getMeterPriceIdsFromSubscription } from '../libs/subscription';
 import { events } from '../libs/event';
 import { handlePastDueSubscriptionRecovery } from './payment';
@@ -391,9 +391,13 @@ async function createCreditTransaction(
     meterEventId: context.meterEvent.id,
   });
 
-  let description = `Consume ${fromUnitToToken(consumeAmount, context.meter.paymentCurrency.decimal)} ${context.meter.paymentCurrency.symbol}`;
+  const formattedAmount = formatCreditAmount(
+    fromUnitToToken(consumeAmount, context.meter.paymentCurrency.decimal),
+    context.meter.paymentCurrency.symbol
+  );
+  let description = `Consume ${formattedAmount}`;
   if (context.meterEvent.getSubscriptionId()) {
-    description += 'for Subscription';
+    description += ' for Subscription';
   }
   if (context.meterEvent.metadata?.description) {
     description = context.meterEvent.metadata.description;

package/api/src/routes/auto-recharge-configs.ts

@@ -45,6 +45,13 @@ const getConfigSchema = Joi.object({
 });
 
 // Helper functions for validation and retrieval
+function getMinimumThreshold(currency: PaymentCurrency): string {
+  const minimumThresholdBN = fromTokenToUnit('0.01', currency.decimal);
+  return new BN(currency.minimum_payment_amount).lt(minimumThresholdBN)
+    ? minimumThresholdBN.toString()
+    : currency.minimum_payment_amount;
+}
+
 async function ensureCustomerExists(customerId: string): Promise<Customer> {
   const customer = await Customer.findByPkOrDid(customerId);
   if (!customer) {
@@ -177,12 +184,13 @@ router.get('/customer/:customerId', sessionMiddleware({ accessKey: true }), asyn
     throw new CustomError(404, 'Base price not found');
   }
   if (!config) {
+    const minimumThreshold = getMinimumThreshold(currency);
     const newConfig = await AutoRechargeConfig.create({
       customer_id: customer.id, // Use customer.id instead of customerId from params
       currency_id: currencyId,
       livemode: currency.livemode,
       enabled: false,
-      threshold: currency.minimum_payment_amount,
+      threshold: minimumThreshold,
       price_id: price.id,
       quantity: 1,
       recharge_currency_id: price.currency_id,
@@ -191,7 +199,7 @@ router.get('/customer/:customerId', sessionMiddleware({ accessKey: true }), asyn
       ...newConfig.toJSON(),
       currency,
       price,
-      threshold: fromUnitToToken(currency.minimum_payment_amount, currency.decimal),
+      threshold: fromUnitToToken(minimumThreshold, currency.decimal),
       customer,
     });
   }
@@ -201,6 +209,10 @@ router.get('/customer/:customerId', sessionMiddleware({ accessKey: true }), asyn
       price_id: price.id,
     });
   }
+  const minimumThreshold = getMinimumThreshold(currency);
+  const configThreshold = new BN(config.threshold || '0').lt(new BN(minimumThreshold))
+    ? minimumThreshold
+    : config.threshold;
   return res.json({
     ...config.toJSON(),
     daily_limits: {
@@ -209,7 +221,7 @@ router.get('/customer/:customerId', sessionMiddleware({ accessKey: true }), asyn
     },
     currency,
     price,
-    threshold: fromUnitToToken(config.threshold || 0, currency.decimal),
+    threshold: fromUnitToToken(configThreshold, currency.decimal),
     customer,
   });
 });
@@ -352,6 +364,13 @@ router.post('/submit', async (req, res) => {
   let { threshold, daily_limits: dailyLimits } = configData;
   if (threshold) {
     threshold = fromTokenToUnit(trimDecimals(threshold, currency.decimal), currency.decimal).toString();
+    const minimumThreshold = getMinimumThreshold(currency);
+    if (new BN(threshold).lt(new BN(minimumThreshold))) {
+      throw new CustomError(
+        400,
+        `Threshold must be greater than or equal to ${fromUnitToToken(minimumThreshold, currency.decimal)}`
+      );
+    }
   }
   if (dailyLimits) {
     dailyLimits = {

package/api/src/routes/connect/recharge-account.ts

@@ -1,6 +1,7 @@
 import type { Transaction } from '@ocap/client';
 import { fromAddress } from '@ocap/wallet';
 import { fromTokenToUnit, toBase58 } from '@ocap/util';
+import pAll from 'p-all';
 import { encodeTransferItx } from '../../integrations/ethereum/token';
 import { executeEvmTransaction, waitForEvmTxConfirm } from '../../integrations/ethereum/tx';
 import type { CallbackArgs } from '../../libs/auth';
@@ -9,9 +10,36 @@ import { getTxMetadata } from '../../libs/util';
 import { ensureAccountRecharge, getAuthPrincipalClaim } from './shared';
 import logger from '../../libs/logger';
 import { ensureRechargeInvoice, retryUncollectibleInvoices } from '../../libs/invoice';
-import { EVMChainType } from '../../store/models';
+import { Customer, EVMChainType, PaymentCurrency } from '../../store/models';
 import { EVM_CHAIN_TYPES } from '../../libs/constants';
+import { checkAndTriggerAutoRecharge } from '../../queues/auto-recharge';
+import { getCustomerCreditBalance } from '../../libs/credit-grant';
 
+async function triggerAutoRecharge(customer: Customer) {
+  try {
+    const currencies = await PaymentCurrency.findAll({
+      where: {
+        type: 'credit',
+        active: true,
+      },
+    });
+    if (currencies.length === 0) {
+      return;
+    }
+    await pAll(
+      currencies.map((currency) => async () => {
+        const balanceInfo = await getCustomerCreditBalance(customer.id, currency.id);
+        await checkAndTriggerAutoRecharge(customer, currency.id, balanceInfo.totalBalance);
+      }),
+      { concurrency: 5, stopOnError: false }
+    );
+  } catch (err) {
+    logger.error('Failed to check and trigger auto recharge', {
+      error: err,
+      customerId: customer.id,
+    });
+  }
+}
 export default {
   action: 'recharge-account',
   authPrincipal: false,
@@ -118,7 +146,7 @@ export default {
         },
         null,
         paymentMethod,
-        customer!
+        customer
       );
       try {
         retryUncollectibleInvoices({
@@ -132,6 +160,30 @@ export default {
           currencyId: paymentCurrency.id,
         });
       }
+
+      try {
+        await retryUncollectibleInvoices({
+          customerId: customer.id,
+          currencyId: paymentCurrency.id,
+          billingReason: 'auto_recharge',
+          statusList: ['open'],
+        });
+      } catch (err) {
+        logger.error('Failed to retry auto recharge invoices', {
+          error: err,
+          customerId: customer.id,
+          currencyId: paymentCurrency.id,
+        });
+      }
+
+      try {
+        await triggerAutoRecharge(customer);
+      } catch (err) {
+        logger.error('Failed to check and trigger auto recharge', {
+          error: err,
+          customerId: customer.id,
+        });
+      }
     };
     if (paymentMethod.type === 'arcblock') {
       try {

package/api/src/routes/payment-intents.ts

@@ -239,7 +239,7 @@ router.get('/:id/retry', authAdmin, async (req, res) => {
 
     await doc.update({ status: 'requires_capture', last_payment_error: null });
     await paymentQueue.pushAndWait({
-      id: doc.id,
+      id: `${doc.id}-retry-${Date.now()}`,
       job: { paymentIntentId: doc.id, retryOnError: false },
     });
     res.json(doc);

package/api/src/routes/prices.ts

@@ -197,6 +197,9 @@ export async function createPrice(payload: any) {
   if (!validate) {
     throw new Error(`currency ${notSupportCurrencies.map((x) => x.name).join(', ')} does not support recurring`);
   }
+  if (isRecurring && raw.recurring && !raw.recurring.usage_type) {
+    raw.recurring.usage_type = 'licensed';
+  }
   const price = await Price.insert(raw);
   return getExpandedPrice(price.id as string);
 }

package/api/src/store/models/payment-currency.ts

@@ -11,6 +11,7 @@ import {
 } from 'sequelize';
 import { getUrl } from '@blocklet/sdk';
 import type { LiteralUnion } from 'type-fest';
+import { fromTokenToUnit } from '@ocap/util';
 import { createIdGenerator } from '../../libs/util';
 import { RechargeConfig, VaultConfig } from './types';
 
@@ -237,14 +238,14 @@ export class PaymentCurrency extends Model<InferAttributes<PaymentCurrency>, Inf
     const currency = await this.create({
       type: 'credit',
       payment_method_id: paymentMethodId,
-      name: meter.unit,
+      name: meter.name,
       description: `Credit for ${meter.unit}`,
       symbol: meter.unit,
-      logo: getUrl('/methods/arcblock.png'), // 默认credit图标
+      logo: getUrl('/methods/arcblock.png'),
       decimal,
       maximum_precision: decimal,
-      minimum_payment_amount: '1',
-      maximum_payment_amount: '100000000000',
+      minimum_payment_amount: fromTokenToUnit('0.01', decimal).toString(),
+      maximum_payment_amount: fromTokenToUnit('100000000', decimal).toString(),
       active: true,
       livemode: meter.livemode || false,
       is_base_currency: false,

package/api/tests/libs/subscription.spec.ts

@@ -526,7 +526,7 @@ describe('calculateRecommendedRechargeAmount', () => {
             quantity: 1,
             price: {
               type: 'recurring',
-              recurring: { interval: 'month', interval_count: 1 },
+              recurring: { interval: 'month', interval_count: 1, usage_type: 'licensed' },
               unit_amount: '500',
               currency_id: 'usd',
             },
@@ -551,7 +551,7 @@ describe('calculateRecommendedRechargeAmount', () => {
             quantity: 1,
             price: {
               type: 'recurring',
-              recurring: { interval: 'month', interval_count: 1 },
+              recurring: { interval: 'month', interval_count: 1, usage_type: 'licensed' },
               unit_amount: '500',
               currency_id: 'usd',
             },
@@ -578,7 +578,7 @@ describe('calculateRecommendedRechargeAmount', () => {
             quantity: 1,
             price: {
               type: 'recurring',
-              recurring: { interval: 'month', interval_count: 1 },
+              recurring: { interval: 'month', interval_count: 1, usage_type: 'licensed' },
               unit_amount: '500',
               currency_id: 'usd',
             },
@@ -604,7 +604,7 @@ describe('calculateRecommendedRechargeAmount', () => {
             quantity: 1,
             price: {
               type: 'recurring',
-              recurring: { interval: 'month', interval_count: 1 },
+              recurring: { interval: 'month', interval_count: 1, usage_type: 'licensed' },
               unit_amount: '500',
               currency_id: 'usd',
             },
@@ -702,7 +702,7 @@ describe('calculateRecommendedRechargeAmount', () => {
             quantity: 1,
             price: {
               type: 'recurring',
-              recurring: { interval: 'month', interval_count: 1 },
+              recurring: { interval: 'month', interval_count: 1, usage_type: 'licensed' },
               unit_amount: '200',
               currency_id: 'usd',
             },
@@ -749,7 +749,7 @@ describe('calculateRecommendedRechargeAmount', () => {
             quantity: 1,
             price: {
               type: 'recurring',
-              recurring: { interval: 'month', interval_count: 1 },
+              recurring: { interval: 'month', interval_count: 1, usage_type: 'licensed' },
               currency_id: 'eth',
               currency_options: [
                 { currency_id: 'usd', unit_amount: '300' },

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.23.3
+version: 1.23.5
 logo: logo.png
 files:
   - dist

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "payment-kit",
-  "version": "1.23.3",
+  "version": "1.23.5",
   "scripts": {
     "dev": "blocklet dev --open",
     "lint": "tsc --noEmit && eslint src api/src --ext .mjs,.js,.jsx,.ts,.tsx",
@@ -46,23 +46,23 @@
   "dependencies": {
     "@abtnode/cron": "^1.17.5",
     "@arcblock/did": "^1.27.15",
-    "@arcblock/did-connect-react": "^3.2.18",
+    "@arcblock/did-connect-react": "^3.2.19",
     "@arcblock/did-connect-storage-nedb": "^1.8.0",
     "@arcblock/did-util": "^1.27.15",
     "@arcblock/jwt": "^1.27.15",
-    "@arcblock/react-hooks": "^3.2.18",
-    "@arcblock/ux": "^3.2.18",
+    "@arcblock/react-hooks": "^3.2.19",
+    "@arcblock/ux": "^3.2.19",
     "@arcblock/validator": "^1.27.15",
     "@arcblock/vc": "^1.27.15",
-    "@blocklet/did-space-js": "^1.2.10",
+    "@blocklet/did-space-js": "^1.2.11",
     "@blocklet/error": "^0.3.5",
     "@blocklet/js-sdk": "^1.17.5",
     "@blocklet/logger": "^1.17.5",
-    "@blocklet/payment-broker-client": "1.23.3",
-    "@blocklet/payment-react": "1.23.3",
-    "@blocklet/payment-vendor": "1.23.3",
+    "@blocklet/payment-broker-client": "1.23.5",
+    "@blocklet/payment-react": "1.23.5",
+    "@blocklet/payment-vendor": "1.23.5",
     "@blocklet/sdk": "^1.17.5",
-    "@blocklet/ui-react": "^3.2.18",
+    "@blocklet/ui-react": "^3.2.19",
     "@blocklet/uploader": "^0.3.16",
     "@blocklet/xss": "^0.3.14",
     "@mui/icons-material": "^7.1.2",
@@ -130,7 +130,7 @@
   "devDependencies": {
     "@abtnode/types": "^1.17.5",
     "@arcblock/eslint-config-ts": "^0.3.3",
-    "@blocklet/payment-types": "1.23.3",
+    "@blocklet/payment-types": "1.23.5",
     "@types/cookie-parser": "^1.4.9",
     "@types/cors": "^2.8.19",
     "@types/debug": "^4.1.12",
@@ -161,7 +161,7 @@
     "vite": "^7.0.0",
     "vite-node": "^3.2.4",
     "vite-plugin-babel-import": "^2.0.5",
-    "vite-plugin-blocklet": "^0.12.5",
+    "vite-plugin-blocklet": "^0.13.1",
     "vite-plugin-node-polyfills": "^0.23.0",
     "vite-plugin-svgr": "^4.3.0",
     "vite-tsconfig-paths": "^5.1.4",
@@ -177,5 +177,5 @@
       "parser": "typescript"
     }
   },
-  "gitHead": "d6afc628bd9b66938eac1c45a4d5d657706bf60b"
+  "gitHead": "486456ed522207cc4efa54cd14b1f65c6433d179"
 }

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

@@ -1,4 +1,11 @@
-import { formatBNStr, CreditGrantsList, CreditTransactionsList, api, AutoTopupModal } from '@blocklet/payment-react';
+import {
+  formatCreditAmount,
+  CreditGrantsList,
+  CreditTransactionsList,
+  api,
+  AutoTopupModal,
+  formatBNStr,
+} from '@blocklet/payment-react';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import { Box, Card, CardContent, Stack, Typography, Tabs, Tab, Button } from '@mui/material';
 import { useMemo, useState, useEffect } from 'react';
@@ -217,17 +224,9 @@ export default function CreditOverview({ customerId, settings, mode = 'portal' }
               </Typography>
               <Typography variant="h5" component="div" sx={{ fontWeight: 'normal' }}>
                 {totalAmount === '0' && remainingAmount === '0' ? (
-                  <>0 </>
+                  <>0</>
                 ) : (
-                  <>
-                    {formatBNStr(remainingAmount, currency.decimal, 6, true)}
-                    {currency.symbol !== cardTitle && (
-                      <Typography variant="body2" component="span">
-                        {' '}
-                        {currency.symbol}
-                      </Typography>
-                    )}
-                  </>
+                  <>{formatCreditAmount(formatBNStr(remainingAmount, currency.decimal), currency.symbol, false)}</>
                 )}
               </Typography>
             </Box>
@@ -248,13 +247,7 @@ export default function CreditOverview({ customerId, settings, mode = 'portal' }
                   sx={{
                     color: 'error.main',
                   }}>
-                  {formatBNStr(pendingAmount, currency.decimal, 6, true)}
-                  {currency.symbol !== cardTitle && (
-                    <Typography variant="body2" component="span">
-                      {' '}
-                      {currency.symbol}
-                    </Typography>
-                  )}
+                  {formatCreditAmount(formatBNStr(pendingAmount, currency.decimal), currency.symbol, false)}
                 </Typography>
               </Box>
             )}

package/src/locales/en.tsx

@@ -128,6 +128,7 @@ export default flat({
     },
   },
   admin: {
+    description: 'Manage your products, pricing, billing, and payments.',
     balances: 'Balances',
     trends: 'Trends',
     addresses: 'Addresses',
@@ -1893,6 +1894,7 @@ export default flat({
     },
   },
   integrations: {
+    description: 'Configure and manage how Payment Kit integrates with your application.',
     basicFeatures: 'Basic Features',
     advancedFeatures: 'Advanced Features',
     features: {

package/src/locales/zh.tsx

@@ -127,6 +127,7 @@ export default flat({
     },
   },
   admin: {
+    description: '管理你的产品、定价、账单和支付流程。',
     balances: '余额',
     addresses: '地址',
     trends: '趋势',
@@ -1837,6 +1838,7 @@ export default flat({
     },
   },
   integrations: {
+    description: '用于配置和管理 Payment Kit 与你应用之间的集成方式。',
     basicFeatures: '基础功能',
     advancedFeatures: '高级功能',
     features: {

package/src/pages/admin/customers/customers/credit-grant/detail.tsx

@@ -3,13 +3,14 @@ import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import Toast from '@arcblock/ux/lib/Toast';
 import {
   api,
-  formatBNStr,
   formatError,
   formatTime,
   CreditTransactionsList,
   CreditStatusChip,
   getCustomerAvatar,
   TxLink,
+  formatCreditAmount,
+  formatBNStr,
 } from '@blocklet/payment-react';
 import type { TCreditGrantExpanded } from '@blocklet/payment-types';
 import { ArrowBackOutlined } from '@mui/icons-material';
@@ -196,7 +197,10 @@ export default function AdminCreditGrantDetail({ id }: { id: string }) {
                     alt={data.paymentCurrency?.symbol}
                   />
                   <Typography variant="body2" sx={{ color: 'text.secondary' }}>
-                    {formatBNStr(data.amount, data.paymentCurrency.decimal)} {data.paymentCurrency.symbol}
+                    {formatCreditAmount(
+                      formatBNStr(data.amount, data.paymentCurrency.decimal),
+                      data.paymentCurrency.symbol
+                    )}
                   </Typography>
                 </Stack>
               }
@@ -212,7 +216,10 @@ export default function AdminCreditGrantDetail({ id }: { id: string }) {
                     alt={data.paymentCurrency?.symbol}
                   />
                   <Typography variant="body2" color={isDepleted ? 'error.main' : 'text.secondary'}>
-                    {formatBNStr(data.remaining_amount, data.paymentCurrency.decimal)} {data.paymentCurrency.symbol}
+                    {formatCreditAmount(
+                      formatBNStr(data.remaining_amount, data.paymentCurrency.decimal),
+                      data.paymentCurrency.symbol
+                    )}
                   </Typography>
                 </Stack>
               }

package/src/pages/admin/customers/customers/credit-transaction/detail.tsx

@@ -1,5 +1,13 @@
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
-import { api, formatBNStr, formatError, getCustomerAvatar, TxLink, SourceDataViewer } from '@blocklet/payment-react';
+import {
+  api,
+  formatBNStr,
+  formatError,
+  getCustomerAvatar,
+  TxLink,
+  SourceDataViewer,
+  formatCreditAmount,
+} from '@blocklet/payment-react';
 import type { TCreditTransactionExpanded } from '@blocklet/payment-types';
 import { ArrowBackOutlined } from '@mui/icons-material';
 import { Alert, Avatar, Box, Button, Chip, CircularProgress, Divider, Stack, Typography } from '@mui/material';
@@ -146,8 +154,11 @@ export default function AdminCreditTransactionDetail({ id }: { id: string }) {
               value={
                 <Stack direction="row" alignItems="center" spacing={0.5}>
                   <Typography variant="body2" sx={{ color: 'error.main' }}>
-                    -{formatBNStr(data.credit_amount, data.creditGrant?.paymentCurrency?.decimal || 0)}{' '}
-                    {data.creditGrant?.paymentCurrency?.symbol}
+                    -
+                    {formatCreditAmount(
+                      formatBNStr(data.credit_amount, data.creditGrant?.paymentCurrency?.decimal || 0),
+                      data.creditGrant?.paymentCurrency?.symbol || ''
+                    )}
                   </Typography>
                 </Stack>
               }

package/src/pages/admin/index.tsx

@@ -1,4 +1,5 @@
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import { useAppInfo } from '@blocklet/ui-react/lib/Dashboard';
 import { Switch, usePaymentContext } from '@blocklet/payment-react';
 import { Chip, Stack } from '@mui/material';
 import React, { isValidElement, useEffect } from 'react';
@@ -43,6 +44,7 @@ const renderNav = (group: string, onChange: Function, groups: { label: string; v
 function Admin() {
   const navigate = useNavigate();
   const { t } = useLocaleContext();
+  const { updateAppInfo } = useAppInfo();
   const settings = usePaymentContext();
   const { group = 'overview' } = useParams();
   const { isPending, startTransition } = useTransitionContext();
@@ -72,6 +74,12 @@ function Admin() {
 
   const group2 = [{ label: t('admin.developers'), value: 'developers' }];
 
+  useEffect(() => {
+    updateAppInfo({
+      description: t('admin.description'),
+    });
+  }, [t]);
+
   return (
     <>
       <ProgressBar pending={isPending} />

package/src/pages/admin/products/products/create.tsx

@@ -77,7 +77,7 @@ export default function ProductsCreate({
       description: mode === 'credit' ? t('admin.creditProduct.defaultDescription') : '',
       images: [],
       statement_descriptor: '',
-      unit_label: mode === 'credit' ? t('admin.creditProduct.unitLabel') : '',
+      unit_label: '',
       features: [],
       prices: [
         mode === 'credit'

package/src/pages/customer/credit-grant/detail.tsx

@@ -2,12 +2,13 @@
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import {
   api,
-  formatBNStr,
   formatTime,
   CreditTransactionsList,
   CreditStatusChip,
   getCustomerAvatar,
   TxLink,
+  formatCreditAmount,
+  formatBNStr,
 } from '@blocklet/payment-react';
 import type { TCreditGrantExpanded } from '@blocklet/payment-types';
 import { ArrowBackOutlined } from '@mui/icons-material';
@@ -173,7 +174,10 @@ export default function CustomerCreditGrantDetail() {
                     alt={data.paymentCurrency?.symbol}
                   />
                   <Typography variant="body2">
-                    {formatBNStr(data.amount, data.paymentCurrency.decimal)} {data.paymentCurrency.symbol}
+                    {formatCreditAmount(
+                      formatBNStr(data.amount, data.paymentCurrency.decimal),
+                      data.paymentCurrency.symbol
+                    )}
                   </Typography>
                 </Stack>
               }
@@ -189,7 +193,10 @@ export default function CustomerCreditGrantDetail() {
                     alt={data.paymentCurrency?.symbol}
                   />
                   <Typography variant="body2">
-                    {formatBNStr(data.remaining_amount, data.paymentCurrency.decimal)} {data.paymentCurrency.symbol}
+                    {formatCreditAmount(
+                      formatBNStr(data.remaining_amount, data.paymentCurrency.decimal),
+                      data.paymentCurrency.symbol
+                    )}
                   </Typography>
                 </Stack>
               }

package/src/pages/customer/credit-transaction/detail.tsx

@@ -1,5 +1,13 @@
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
-import { api, formatBNStr, formatTime, getCustomerAvatar, TxLink, SourceDataViewer } from '@blocklet/payment-react';
+import {
+  api,
+  formatTime,
+  getCustomerAvatar,
+  TxLink,
+  SourceDataViewer,
+  formatCreditAmount,
+  formatBNStr,
+} from '@blocklet/payment-react';
 import type { TCreditTransactionExpanded } from '@blocklet/payment-types';
 import { ArrowBackOutlined } from '@mui/icons-material';
 import { Alert, Avatar, Box, Button, Chip, CircularProgress, Divider, Stack, Typography } from '@mui/material';
@@ -159,8 +167,11 @@ export default function CustomerCreditTransactionDetail() {
               value={
                 <Stack direction="row" alignItems="center" spacing={0.5}>
                   <Typography variant="body2" sx={{ color: 'error.main' }}>
-                    -{formatBNStr(data.credit_amount, data.creditGrant?.paymentCurrency?.decimal || 0)}{' '}
-                    {data.creditGrant?.paymentCurrency?.symbol}
+                    -
+                    {formatCreditAmount(
+                      formatBNStr(data.credit_amount, data.creditGrant?.paymentCurrency?.decimal || 0),
+                      data.creditGrant?.paymentCurrency?.symbol || ''
+                    )}
                   </Typography>
                 </Stack>
               }

package/src/pages/integrations/index.tsx

@@ -1,4 +1,5 @@
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import { useAppInfo } from '@blocklet/ui-react/lib/Dashboard';
 import { Stack } from '@mui/material';
 import React, { useEffect } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
@@ -16,6 +17,7 @@ const pages = {
 function Integrations() {
   const navigate = useNavigate();
   const { t } = useLocaleContext();
+  const { updateAppInfo } = useAppInfo();
   const { group = 'overview' } = useParams();
   const { isPending, startTransition } = useTransitionContext();
 
@@ -32,6 +34,12 @@ function Integrations() {
     { label: t('admin.donate.title'), value: 'donations' },
   ];
 
+  useEffect(() => {
+    updateAppInfo({
+      description: t('integrations.description'),
+    });
+  }, [t]);
+
   return (
     <>
       <ProgressBar pending={isPending} />

package/src/pages/integrations/overview.tsx

@@ -99,15 +99,6 @@ export default function Overview() {
         sx={{
           mb: 4,
         }}>
-        <Typography
-          variant="h2"
-          gutterBottom
-          sx={{
-            fontWeight: 'bold',
-            mb: 1,
-          }}>
-          {t('common.welcome')}
-        </Typography>
         <Typography
           variant="body2"
           sx={{