payment-kit 1.18.33 → 1.18.35

package/api/src/libs/session.ts

@@ -773,7 +773,7 @@ async function createOrUpdateSubscription(params: {
               notification_settings: checkoutSession.subscription_data.notification_settings,
             }
           : {}),
-        ...omit(checkoutSession.metadata || {}, ['days_until_due', 'days_until_cancel']),
+        ...omit(checkoutSession.metadata || {}, ['days_until_due', 'days_until_cancel', 'page_info']),
         ...(itemsSubscriptionData.metadata || {}),
         ...metadata,
       };

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

@@ -598,6 +598,7 @@ async function processSubscriptionFastCheckout({
   lineItems,
   trialEnd,
   now,
+  executePayment = true,
 }: {
   checkoutSession: CheckoutSession;
   customer: Customer;
@@ -608,6 +609,7 @@ async function processSubscriptionFastCheckout({
   lineItems: TLineItemExpanded[];
   trialEnd: number;
   now: number;
+  executePayment?: boolean;
 }): Promise<{
   success: boolean;
   invoices?: Invoice[];
@@ -651,38 +653,42 @@ async function processSubscriptionFastCheckout({
       subscriptionIds: subscriptions.map((s) => s.id),
     });
 
-    // Update payment settings for all subscriptions
-    await Promise.all(subscriptions.map((sub) => sub.update({ payment_settings: paymentSettings })));
+    if (executePayment) {
+      // Update payment settings for all subscriptions
+      await Promise.all(subscriptions.map((sub) => sub.update({ payment_settings: paymentSettings })));
 
-    // Create invoices for all subscriptions
-    const { invoices } = await ensureInvoicesForSubscriptions({
-      checkoutSession,
-      customer,
-      subscriptions,
-    });
-
-    // Update invoice settings and push to queue
-    await Promise.all(
-      invoices.map(async (invoice) => {
-        if (invoice) {
-          await invoice.update({ auto_advance: true, payment_settings: paymentSettings });
-          invoiceQueue.push({ id: invoice.id, job: { invoiceId: invoice.id, retryOnError: false } });
-        }
-      })
-    );
-
-    // Add subscription cycle jobs
-    await Promise.all(subscriptions.map((sub) => addSubscriptionJob(sub, 'cycle', false, sub.trial_end)));
+      // Create invoices for all subscriptions
+      const { invoices } = await ensureInvoicesForSubscriptions({
+        checkoutSession,
+        customer,
+        subscriptions,
+      });
+      // Update invoice settings and push to queue
+      await Promise.all(
+        invoices.map(async (invoice) => {
+          if (invoice) {
+            await invoice.update({ auto_advance: true, payment_settings: paymentSettings });
+            invoiceQueue.push({ id: invoice.id, job: { invoiceId: invoice.id, retryOnError: false } });
+          }
+        })
+      );
 
-    logger.info('Created and queued invoices for fast checkout with subscriptions', {
-      checkoutSessionId: checkoutSession.id,
-      subscriptionIds: subscriptions.map((s) => s.id),
-      invoiceIds: invoices.map((inv) => inv.id),
-    });
+      // Add subscription cycle jobs
+      await Promise.all(subscriptions.map((sub) => addSubscriptionJob(sub, 'cycle', false, sub.trial_end)));
 
+      logger.info('Created and queued invoices for fast checkout with subscriptions', {
+        checkoutSessionId: checkoutSession.id,
+        subscriptionIds: subscriptions.map((s) => s.id),
+        invoiceIds: invoices.map((inv) => inv.id),
+      });
+      return {
+        success: true,
+        invoices,
+      };
+    }
     return {
       success: true,
-      invoices,
+      invoices: [],
     };
   } catch (error) {
     logger.error('Error processing subscription fast checkout', {
@@ -1217,6 +1223,7 @@ router.put('/:id/submit', user, ensureCheckoutSessionOpen, async (req, res) => {
 
     const isPayment = checkoutSession.mode === 'payment';
     let canFastPay = isPayment && canPayWithDelegation(paymentIntent?.beneficiaries || []);
+    let fastPayInfo = null;
     let delegation: SufficientForPaymentResult | null = null;
     if (isPayment && paymentIntent && canFastPay) {
       // if we can complete purchase without any wallet interaction
@@ -1226,24 +1233,12 @@ router.put('/:id/submit', user, ensureCheckoutSessionOpen, async (req, res) => {
         userDid: customer.did,
         amount: fastCheckoutAmount,
       });
-      if (balance.sufficient) {
-        logger.info(`CheckoutSession ${checkoutSession.id} will pay from balance ${paymentIntent?.id}`);
-      }
-      if (delegation.sufficient) {
-        logger.info(`CheckoutSession ${checkoutSession.id} will pay from delegation ${paymentIntent?.id}`);
-      }
       if (balance.sufficient || delegation.sufficient) {
-        await paymentIntent.update({ status: 'requires_capture' });
-        const { invoice } = await ensureInvoiceForCheckout({ checkoutSession, customer, paymentIntent });
-        if (invoice) {
-          await invoice.update({ auto_advance: true, payment_settings: paymentSettings });
-          invoiceQueue.push({ id: invoice.id, job: { invoiceId: invoice.id, retryOnError: false } });
-        } else {
-          paymentQueue.push({
-            id: paymentIntent.id,
-            job: { paymentIntentId: paymentIntent.id, paymentSettings, retryOnError: false },
-          });
-        }
+        fastPayInfo = {
+          type: balance.sufficient ? 'balance' : 'delegation',
+          amount: fastCheckoutAmount,
+          payer: customer.did,
+        };
       }
     } else if (
       paymentMethod.type === 'arcblock' &&
@@ -1261,6 +1256,7 @@ router.put('/:id/submit', user, ensureCheckoutSessionOpen, async (req, res) => {
         lineItems,
         trialEnd,
         now,
+        executePayment: false,
       });
 
       if (!result.success) {
@@ -1272,6 +1268,11 @@ router.put('/:id/submit', user, ensureCheckoutSessionOpen, async (req, res) => {
           sufficient: true,
         };
         canFastPay = true;
+        fastPayInfo = {
+          type: 'delegation',
+          amount: fastCheckoutAmount,
+          payer: customer.did,
+        };
       }
     }
 
@@ -1403,6 +1404,7 @@ router.put('/:id/submit', user, ensureCheckoutSessionOpen, async (req, res) => {
       customer,
       delegation: canFastPay ? delegation : null,
       balance: canFastPay ? balance : null,
+      fastPayInfo,
     });
   } catch (err) {
     logger.error('Error submitting checkout session', {
@@ -1480,6 +1482,192 @@ router.put('/:id/donate-submit', ensureCheckoutSessionOpen, async (req, res) =>
   }
 });
 
+router.post('/:id/fast-checkout-confirm', user, ensureCheckoutSessionOpen, async (req, res) => {
+  try {
+    if (!req.user) {
+      return res.status(403).json({ code: 'REQUIRE_LOGIN', error: 'Please login to continue' });
+    }
+
+    const checkoutSession = req.doc as CheckoutSession;
+
+    if (checkoutSession.line_items) {
+      try {
+        await validateInventory(checkoutSession.line_items);
+      } catch (err) {
+        logger.error('validateInventory failed', {
+          error: err,
+          line_items: checkoutSession.line_items,
+          checkoutSessionId: checkoutSession.id,
+        });
+        return res.status(400).json({ error: err.message });
+      }
+    }
+    // validate cross sell
+    if (checkoutSession.cross_sell_behavior === 'required') {
+      if (checkoutSession.line_items.some((x) => x.cross_sell) === false) {
+        const result = await getCrossSellItem(checkoutSession);
+        // @ts-ignore
+        if (result.id) {
+          return res
+            .status(400)
+            .json({ code: 'REQUIRE_CROSS_SELL', error: 'Please select cross sell product to continue' });
+        }
+      }
+    }
+
+    const paymentCurrency = await PaymentCurrency.findByPk(checkoutSession.currency_id);
+    if (!paymentCurrency) {
+      return res.status(400).json({ error: 'Payment currency not found' });
+    }
+
+    const paymentMethod = await PaymentMethod.findByPk(paymentCurrency.payment_method_id);
+    if (!paymentMethod) {
+      return res.status(400).json({ error: 'Payment method not found' });
+    }
+
+    if (paymentMethod.type !== 'arcblock') {
+      return res.status(400).json({ error: 'Payment method not supported for fast checkout' });
+    }
+
+    const customer = await Customer.findByPkOrDid(req.user.did);
+    if (!customer) {
+      return res.status(400).json({ error: '' });
+    }
+
+    // check if customer can make new purchase
+    const canMakeNewPurchase = await customer.canMakeNewPurchase(checkoutSession.invoice_id);
+    if (!canMakeNewPurchase) {
+      return res.status(403).json({
+        code: 'CUSTOMER_LIMITED',
+        error: 'Customer can not make new purchase, maybe you have unpaid invoices from previous purchases',
+      });
+    }
+
+    const { lineItems, trialInDays, trialEnd, now } = await calculateAndUpdateAmount(
+      checkoutSession,
+      paymentCurrency.id,
+      true
+    );
+
+    let paymentIntent: PaymentIntent | null = null;
+    if (checkoutSession.mode === 'payment') {
+      const result = await createOrUpdatePaymentIntent(
+        checkoutSession,
+        paymentMethod,
+        paymentCurrency,
+        lineItems,
+        customer.id,
+        customer.email
+      );
+      paymentIntent = result.paymentIntent;
+    }
+
+    const fastCheckoutAmount = getFastCheckoutAmount(
+      lineItems,
+      checkoutSession.mode,
+      paymentCurrency.id,
+      trialInDays > 0 || trialEnd > now
+    );
+
+    const paymentSettings = {
+      payment_method_types: checkoutSession.payment_method_types,
+      payment_method_options: {
+        [paymentMethod.type]: { payer: customer.did },
+      },
+    };
+    const balance = isCreditSufficientForPayment({
+      paymentMethod,
+      paymentCurrency,
+      customer,
+      amount: fastCheckoutAmount,
+    });
+
+    const isPayment = checkoutSession.mode === 'payment';
+    let fastPaid = false;
+    let canFastPay = isPayment && canPayWithDelegation(paymentIntent?.beneficiaries || []);
+    let delegation: SufficientForPaymentResult | null = null;
+    if (isPayment && paymentIntent && canFastPay) {
+      // if we can complete purchase without any wallet interaction
+      delegation = await isDelegationSufficientForPayment({
+        paymentMethod,
+        paymentCurrency,
+        userDid: customer.did,
+        amount: fastCheckoutAmount,
+      });
+      if (balance.sufficient) {
+        logger.info(`CheckoutSession ${checkoutSession.id} will pay from balance ${paymentIntent?.id}`);
+      }
+      if (delegation.sufficient) {
+        logger.info(`CheckoutSession ${checkoutSession.id} will pay from delegation ${paymentIntent?.id}`);
+      }
+      if (balance.sufficient || delegation.sufficient) {
+        fastPaid = true;
+        await paymentIntent.update({ status: 'requires_capture' });
+        const { invoice } = await ensureInvoiceForCheckout({ checkoutSession, customer, paymentIntent });
+        if (invoice) {
+          await invoice.update({ auto_advance: true, payment_settings: paymentSettings });
+          invoiceQueue.push({ id: invoice.id, job: { invoiceId: invoice.id, retryOnError: false } });
+        } else {
+          paymentQueue.push({
+            id: paymentIntent.id,
+            job: { paymentIntentId: paymentIntent.id, paymentSettings, retryOnError: false },
+          });
+        }
+      }
+    } else if (
+      paymentMethod.type === 'arcblock' &&
+      checkoutSession.mode === 'subscription' &&
+      checkoutSession.subscription_data?.no_stake
+    ) {
+      const subscriptionIds = getCheckoutSessionSubscriptionIds(checkoutSession);
+      const subscriptions = await Subscription.findAll({ where: { id: subscriptionIds } });
+      // if we can complete purchase without any wallet interaction
+      const result = await processSubscriptionFastCheckout({
+        checkoutSession,
+        customer,
+        subscriptions,
+        paymentMethod,
+        paymentCurrency,
+        paymentSettings,
+        lineItems,
+        trialEnd,
+        now,
+      });
+      if (!result.success) {
+        logger.warn(`Fast checkout processing failed: ${result.message}`, {
+          checkoutSessionId: checkoutSession.id,
+        });
+      } else {
+        fastPaid = true;
+        delegation = {
+          sufficient: true,
+        };
+        canFastPay = true;
+      }
+    }
+
+    logger.info('Checkout session submitted successfully', {
+      sessionId: req.params.id,
+      paymentIntentId: paymentIntent?.id,
+      customerId: customer?.id,
+    });
+
+    return res.json({
+      paymentIntent,
+      checkoutSession,
+      customer,
+      fastPaid,
+    });
+  } catch (err) {
+    logger.error('Error confirming fast checkout', {
+      sessionId: req.params.id,
+      error: err.message,
+      stack: err.stack,
+    });
+    res.status(500).json({ code: err.code, error: err.message });
+  }
+});
+
 // upsell
 router.put('/:id/upsell', user, ensureCheckoutSessionOpen, async (req, res) => {
   try {

package/api/src/routes/subscriptions.ts

@@ -2032,21 +2032,30 @@ router.post('/:id/overdraft-protection', authPortal, async (req, res) => {
     if (overdraftProtectionError) {
       return res.status(400).json({ error: `Overdraft protection invalid: ${overdraftProtectionError.message}` });
     }
+
     const subscription = await Subscription.findByPk(req.params.id);
     if (!subscription) {
       return res.status(404).json({ error: 'Subscription not found' });
     }
+    const previousOverdraftProtection = {
+      enabled: subscription.overdraft_protection?.enabled || false,
+      payment_method_id: subscription.overdraft_protection?.payment_method_id || null,
+      payment_details: subscription.overdraft_protection?.payment_details || null,
+    };
     const customer = await Customer.findByPkOrDid(req.user?.did as string);
     if (!customer) {
       return res.status(404).json({ error: 'Customer not found' });
     }
-    const { remaining, used } = await isSubscriptionOverdraftProtectionEnabled(subscription);
+    const { remaining, used, unused } = await isSubscriptionOverdraftProtectionEnabled(subscription);
+    if (unused === '0' && !amount && enabled) {
+      return res.status(400).json({ error: 'Please add stake to enable SubGuard™' });
+    }
     if (returnStake && remaining !== '0' && !enabled) {
       // disable overdraft protection
       await subscription.update({
         // @ts-ignore
         overdraft_protection: {
-          ...(subscription.overdraft_protection || {}),
+          ...previousOverdraftProtection,
           enabled: false,
         },
       });
@@ -2077,7 +2086,7 @@ router.post('/:id/overdraft-protection', authPortal, async (req, res) => {
     await subscription.update({
       // @ts-ignore
       overdraft_protection: {
-        ...subscription.overdraft_protection,
+        ...previousOverdraftProtection,
         enabled,
       },
     });

package/api/src/store/models/subscription.ts

@@ -320,11 +320,11 @@ export class Subscription extends Model<InferAttributes<Subscription>, InferCrea
         overdraft_protection: {
           type: DataTypes.JSON,
           allowNull: true,
-          defaultValue: JSON.stringify({
+          defaultValue: {
             enabled: false,
             payment_method_id: null,
             payment_details: null,
-          }),
+          },
         },
       },
       {

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "payment-kit",
-  "version": "1.18.33",
+  "version": "1.18.35",
   "scripts": {
     "dev": "blocklet dev --open",
     "eject": "vite eject",
@@ -47,16 +47,16 @@
     "@abtnode/cron": "^1.16.42",
     "@arcblock/did": "^1.20.2",
     "@arcblock/did-auth-storage-nedb": "^1.7.1",
-    "@arcblock/did-connect": "^2.13.9",
+    "@arcblock/did-connect": "^2.13.12",
     "@arcblock/did-util": "^1.20.2",
     "@arcblock/jwt": "^1.20.2",
-    "@arcblock/ux": "^2.13.9",
+    "@arcblock/ux": "^2.13.12",
     "@arcblock/validator": "^1.20.2",
     "@blocklet/js-sdk": "^1.16.42",
     "@blocklet/logger": "^1.16.42",
-    "@blocklet/payment-react": "1.18.33",
+    "@blocklet/payment-react": "1.18.35",
     "@blocklet/sdk": "^1.16.42",
-    "@blocklet/ui-react": "^2.13.9",
+    "@blocklet/ui-react": "^2.13.12",
     "@blocklet/uploader": "^0.1.83",
     "@blocklet/xss": "^0.1.32",
     "@mui/icons-material": "^5.16.6",
@@ -122,7 +122,7 @@
   "devDependencies": {
     "@abtnode/types": "^1.16.42",
     "@arcblock/eslint-config-ts": "^0.3.3",
-    "@blocklet/payment-types": "1.18.33",
+    "@blocklet/payment-types": "1.18.35",
     "@types/cookie-parser": "^1.4.7",
     "@types/cors": "^2.8.17",
     "@types/debug": "^4.1.12",
@@ -168,5 +168,5 @@
       "parser": "typescript"
     }
   },
-  "gitHead": "91ae6c4dda76b8cc7a8ab5f82ae44874d429439b"
+  "gitHead": "802a98b5ca81475f8cd7b9dcbb77fce7240b9788"
 }

package/scripts/sdk.js

@@ -74,6 +74,70 @@ const checkoutModule = {
     return checkoutSession;
   },
 
+  // 批量订阅 + 免质押 + 自定义表单规则
+  async createBatchSubscriptionWithCustomField() {
+    const checkoutSession = await payment.checkout.sessions.create({
+      mode: 'subscription',
+      line_items: [
+        {
+          price_id: 'price_fQFIS12yi0JR3KePLmitjrhA',
+          quantity: 1,
+          subscription_data: {
+            metadata: { test: 'test price_fQFIS12yi0JR3KePLmitjrhA' },
+          },
+        },
+        {
+          price_id: 'price_PXyI9Duz99eqty1AqbaEc73u',
+          quantity: 1,
+          subscription_data: {
+            metadata: { test: 'test price_PXyI9Duz99eqty1AqbaEc73u' },
+          },
+        },
+      ],
+      enable_subscription_grouping: true,
+      subscription_data: {
+        no_stake: true,
+      },
+      phone_number_collection: {
+        enabled: true,
+      },
+      billing_address_collection: 'required',
+      metadata: {
+        page_info: {
+          form_purpose_description: {
+            en: 'Information collected helps us process your payment and deliver our services.',
+            zh: '收集的信息帮助我们处理您的付款并提供服务。',
+          },
+          field_validation: {
+            customer_name: {
+              pattern: '^[a-zA-Z\\s]{2,50}$',
+              pattern_message: {
+                en: 'Name should only contain 2-50 letters and spaces',
+                zh: '姓名应只包含2-50个字母和空格',
+              },
+            },
+            customer_email: {
+              pattern: '^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\\.[a-zA-Z]{2,}$',
+              pattern_message: {
+                en: 'Please enter a valid email address',
+                zh: '请输入有效的电子邮件地址',
+              },
+            },
+            'billing_address.line1': {
+              pattern: '^.{5,100}$',
+              pattern_message: {
+                en: 'Address should be 5-100 characters',
+                zh: '地址应为5-100个字符',
+              },
+            },
+          },
+        },
+      },
+    });
+    console.log('createBatchSubscriptionWithCustomField', checkoutSession);
+    return checkoutSession;
+  },
+
   // 批量订阅 + 试用 + 免质押
   async createWithTrial() {
     const checkoutSession = await payment.checkout.sessions.create({
@@ -461,7 +525,7 @@ const testModules = {
 
 async function runTest() {
   payment.environments.setTestMode(true);
-  await testModules.checkout.createBatchSubscription();
+  await testModules.checkout.createBatchSubscriptionWithCustomField();
 }
 
 async function main() {

package/src/components/customer/link.tsx

@@ -1,17 +1,13 @@
 import type { TCustomer } from '@blocklet/payment-types';
 import { Link } from 'react-router-dom';
-
+import UserCard from '@arcblock/ux/lib/UserCard';
 import { getCustomerAvatar } from '@blocklet/payment-react';
-import DID from '@arcblock/ux/lib/DID';
-import { Box, Typography } from '@mui/material';
-import InfoCard from '../info-card';
 
 export default function CustomerLink({
   customer,
   linked,
   linkTo,
   size,
-  tooltip,
 }: {
   customer: TCustomer;
   linked?: boolean;
@@ -22,61 +18,40 @@ export default function CustomerLink({
   if (!customer) {
     return null;
   }
+  const CustomerCard = (
+    // @ts-ignore
+    <UserCard
+      did={customer?.did}
+      showHoverCard
+      sx={{
+        border: 'none',
+        p: 0,
+        minWidth: 0,
+      }}
+      avatarProps={{
+        size: size === 'small' ? 24 : 40,
+      }}
+      showDid={size !== 'small'}
+      {...(customer.metadata.anonymous === true
+        ? {
+            user: {
+              fullName: customer.name || customer.email,
+              did: customer.did,
+              email: customer.email,
+              avatar: getCustomerAvatar(
+                customer?.did,
+                customer?.updated_at ? new Date(customer.updated_at).toISOString() : ''
+              ),
+            },
+          }
+        : {})}
+    />
+  );
   if (linked) {
-    return (
-      <Link to={linkTo || `/admin/customers/${customer.id}`}>
-        <Box sx={{ '.info-card-wrapper': { cursor: 'pointer' }, '.info-card': { minWidth: 0 } }}>
-          {/* @ts-ignore */}
-          <InfoCard
-            logo={getCustomerAvatar(
-              customer?.did,
-              customer?.updated_at ? new Date(customer.updated_at).toISOString() : '',
-              size === 'small' ? 24 : 48
-            )}
-            name={
-              <Typography
-                sx={{ maxWidth: 208, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}
-                className="customer-link-name">
-                {customer.name || customer.email}
-              </Typography>
-            }
-            {...(size === 'small'
-              ? { tooltip: tooltip ? <DID did={customer?.did} /> : false, size: 24 }
-              : {
-                  description: <DID did={customer?.did} compact responsive={false} sx={{ whiteSpace: 'nowrap' }} />,
-                  size: 48,
-                })}
-          />
-        </Box>
-      </Link>
-    );
+    return <Link to={linkTo || `/admin/customers/${customer.id}`}>{CustomerCard}</Link>;
   }
 
-  return (
-    <Box sx={{ '.info-card': { minWidth: 0 } }}>
-      {/* @ts-ignore */}
-      <InfoCard
-        logo={getCustomerAvatar(
-          customer.did,
-          customer.updated_at ? new Date(customer.updated_at).toISOString() : '',
-          size === 'small' ? 24 : 48
-        )}
-        name={
-          <Typography
-            sx={{ maxWidth: 320, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}
-            className="customer-link-name">
-            {customer.name || customer.email}
-          </Typography>
-        }
-        {...(size === 'small'
-          ? { tooltip: tooltip ? <DID did={customer?.did} /> : false, size: 24 }
-          : {
-              description: <DID did={customer?.did} compact responsive={false} sx={{ whiteSpace: 'nowrap' }} />,
-              size: 48,
-            })}
-      />
-    </Box>
-  );
+  return CustomerCard;
 }
 
 CustomerLink.defaultProps = {

package/src/components/invoice/list.tsx

@@ -282,7 +282,7 @@ export default function InvoiceList({
       options: {
         customBodyRenderLite: (_: string, index: number) => {
           const item = data.list[index] as TInvoiceExpanded;
-          return <CustomerLink customer={item.customer} />;
+          return <CustomerLink customer={item.customer} size="small" />;
         },
       },
     });

package/src/components/payouts/list.tsx

@@ -15,6 +15,8 @@ import { useLocalStorageState } from 'ahooks';
 import { useEffect, useState } from 'react';
 import { Link } from 'react-router-dom';
 
+import DID from '@arcblock/ux/lib/DID';
+import ShortenLabel from '@arcblock/ux/lib/UserCard/Content/shorten-label';
 import { debounce, getAppInfo } from '../../libs/util';
 import CustomerLink from '../customer/link';
 import FilterToolbar from '../filter-toolbar';
@@ -202,8 +204,12 @@ export default function PayoutList({ customer_id, payment_intent_id, status, fea
           if (appInfo) {
             return (
               <InfoCard
-                name={appInfo.name}
-                description={`${item.destination.slice(0, 6)}...${item.destination.slice(-6)}`}
+                name={
+                  <ShortenLabel sx={{ fontWeight: 500 }} maxLength={30}>
+                    {appInfo.name}
+                  </ShortenLabel>
+                }
+                description={<DID did={item.destination} compact responsive={false} sx={{ whiteSpace: 'nowrap' }} />}
                 logo={appInfo.avatar}
                 size={40}
               />

package/src/components/subscription/portal/actions.tsx

@@ -241,8 +241,14 @@ export function SubscriptionActionsInner({
       containerEl: undefined as unknown as Element,
       saveConnect: false,
       action: 'delegation',
+      locale: locale as 'en' | 'zh',
       prefix: joinURL(getPrefix(), '/api/did'),
       extraParams: { subscriptionId: subscription.id, sessionUserDid: session.user.did },
+      messages: {
+        scan: t('common.connect.defaultScan'),
+        title: t('customer.delegation.title'),
+        confirm: t('common.connect.confirm'),
+      } as any,
       onSuccess: () => {
         connect.close();
         Toast.success(t('customer.delegation.success'));
@@ -287,9 +293,15 @@ export function SubscriptionActionsInner({
         connect.open({
           containerEl: undefined as unknown as Element,
           saveConnect: false,
+          locale: locale as 'en' | 'zh',
           action: 'overdraft-protection',
           prefix: joinURL(getPrefix(), '/api/did'),
           extraParams: { subscriptionId: subscription.id, amount, sessionUserDid: session.user.did },
+          messages: {
+            scan: t('common.connect.defaultScan'),
+            title: t('customer.overdraftProtection.title'),
+            confirm: t('common.connect.confirm'),
+          } as any,
           onSuccess: () => {
             connect.close();
             Toast.success(t('customer.overdraftProtection.settingSuccess'));

package/src/libs/util.ts

@@ -3,14 +3,12 @@
 /* eslint-disable @typescript-eslint/indent */
 import { formatCheckoutHeadlines, formatPrice, getPrefix, getPriceCurrencyOptions } from '@blocklet/payment-react';
 import type {
-  ChainType,
   LineItem,
   PriceRecurring,
   TInvoiceExpanded,
   TLineItemExpanded,
   TPaymentCurrency,
   TPaymentLinkExpanded,
-  TPaymentMethod,
   TPaymentMethodExpanded,
   TPrice,
   TProductExpanded,
@@ -350,17 +348,6 @@ export function getAppInfo(address: string): { name: string; avatar: string; typ
   return null;
 }
 
-export function getTokenBalanceLink(method: TPaymentMethod, address: string) {
-  const explorerHost = (method?.settings?.[method?.type as ChainType] as any)?.explorer_host || '';
-  if (method.type === 'arcblock' && address) {
-    return joinURL(explorerHost, 'accounts', address, 'tokens');
-  }
-  if (['ethereum', 'base'].includes(method.type) && address) {
-    return joinURL(explorerHost, 'address', address);
-  }
-  return '';
-}
-
 export function isWillCanceled(subscription: TSubscriptionExpanded) {
   const now = Date.now() / 1000;
   if (

package/src/pages/admin/customers/customers/detail.tsx

@@ -211,8 +211,8 @@ export default function CustomerDetail(props: { id: string }) {
                   52
                 )}
                 alt={data.customer.name}
-                variant="square"
-                sx={{ width: 52, height: 52, borderRadius: 'var(--radius-s, 4px)' }}
+                variant="circular"
+                sx={{ width: 52, height: 52 }}
               />
               <Typography variant="h2" sx={{ fontWeight: 600 }}>
                 {data.customer.name}

package/src/pages/admin/customers/customers/index.tsx

@@ -75,9 +75,8 @@ export default function CustomersList() {
                     item?.updated_at ? new Date(item.updated_at).toISOString() : '',
                     48
                   )}
-                  variant="square"
+                  variant="circular"
                   alt={item?.name}
-                  sx={{ borderRadius: 'var(--radius-m, 8px)' }}
                 />
                 <Typography sx={{ wordBreak: 'break-all' }}>{item.name}</Typography>
               </Stack>

package/src/pages/admin/payments/payouts/detail.tsx

@@ -203,6 +203,7 @@ export default function PayoutDetail(props: { id: string }) {
                 label={t('customer.payout.payer')}
                 value={
                   <InfoCard
+                    variant="circular"
                     logo={getCustomerAvatar(
                       paymentIntent?.customer?.did,
                       paymentIntent?.customer?.updated_at
@@ -242,7 +243,6 @@ export default function PayoutDetail(props: { id: string }) {
                       />
                     }
                     size={40}
-                    variant="rounded"
                   />
                 }
                 divider

package/src/pages/customer/invoice/detail.tsx

@@ -66,6 +66,7 @@ export default function CustomerInvoiceDetail() {
     connect.open({
       action: 'collect',
       saveConnect: false,
+      locale: locale as 'en' | 'zh',
       messages: {
         scan: '',
         title: t(`payment.customer.invoice.${action || 'pay'}`),

package/src/pages/customer/invoice/past-due.tsx

@@ -28,7 +28,7 @@ const fetchData = (): Promise<TCustomerExpanded> => {
 };
 
 export default function CustomerInvoicePastDue() {
-  const { t } = useLocaleContext();
+  const { t, locale } = useLocaleContext();
   const { events } = useSessionContext();
   const { connect, session } = usePaymentContext();
   const [params] = useSearchParams();
@@ -67,8 +67,14 @@ export default function CustomerInvoicePastDue() {
         containerEl: undefined as unknown as Element,
         saveConnect: false,
         action: 'collect-batch',
+        locale: locale as 'en' | 'zh',
         prefix: joinURL(getPrefix(), '/api/did'),
         extraParams: { subscriptionId, currencyId },
+        messages: {
+          scan: t('common.connect.defaultScan'),
+          title: t('payment.customer.invoice.payBatch'),
+          confirm: t('common.connect.confirm'),
+        } as any,
         onSuccess: () => {
           connect.close();
         },

package/src/pages/customer/recharge/account.tsx

@@ -27,6 +27,7 @@ import {
   formatBNStr,
   formatPrice,
   formatNumber,
+  getTokenBalanceLink,
 } from '@blocklet/payment-react';
 import type { TPaymentCurrency, TPaymentMethod } from '@blocklet/payment-types';
 import { joinURL } from 'ufo';
@@ -34,7 +35,7 @@ import { AccountBalanceWalletOutlined, ArrowBackOutlined, ArrowForwardOutlined }
 import Empty from '@arcblock/ux/lib/Empty';
 import { BN, fromUnitToToken } from '@ocap/util';
 import RechargeList from '../../../components/invoice/recharge';
-import { getTokenBalanceLink, goBackOrFallback } from '../../../libs/util';
+import { goBackOrFallback } from '../../../libs/util';
 import { useSessionContext } from '../../../contexts/session';
 import { formatSmartDuration, TimeUnit } from '../../../libs/dayjs';
 
@@ -225,12 +226,18 @@ export default function BalanceRechargePage() {
       containerEl: undefined as unknown as Element,
       saveConnect: false,
       action: 'recharge-account',
+      locale: locale as 'en' | 'zh',
       prefix: joinURL(getPrefix(), '/api/did'),
       extraParams: {
         customerDid: session?.user?.did,
         currencyId: currency.id,
         amount: Number(amount),
       },
+      messages: {
+        scan: t('common.connect.defaultScan'),
+        title: t('customer.recharge.title'),
+        confirm: t('common.connect.confirm'),
+      } as any,
       onSuccess: () => {
         connect.close();
         Toast.success(t('customer.recharge.success'));

package/src/pages/customer/recharge/subscription.tsx

@@ -25,6 +25,7 @@ import {
   formatTime,
   api,
   formatBNStr,
+  getTokenBalanceLink,
 } from '@blocklet/payment-react';
 import { joinURL } from 'ufo';
 import type { TSubscriptionExpanded } from '@blocklet/payment-types';
@@ -35,7 +36,7 @@ import SubscriptionDescription from '../../../components/subscription/descriptio
 import InfoRow from '../../../components/info-row';
 import Currency from '../../../components/currency';
 import SubscriptionMetrics from '../../../components/subscription/metrics';
-import { getTokenBalanceLink, goBackOrFallback } from '../../../libs/util';
+import { goBackOrFallback } from '../../../libs/util';
 import CustomerLink from '../../../components/customer/link';
 import { useSessionContext } from '../../../contexts/session';
 import { formatSmartDuration, TimeUnit } from '../../../libs/dayjs';
@@ -163,8 +164,14 @@ export default function RechargePage() {
       containerEl: undefined as unknown as Element,
       saveConnect: false,
       action: 'recharge',
+      locale: locale as 'en' | 'zh',
       prefix: joinURL(getPrefix(), '/api/did'),
       extraParams: { subscriptionId, amount: Number(amount) },
+      messages: {
+        scan: t('common.connect.defaultScan'),
+        title: t('customer.recharge.title'),
+        confirm: t('common.connect.confirm'),
+      } as any,
       onSuccess: () => {
         connect.close();
         Toast.success(t('customer.recharge.success'));

package/src/pages/customer/subscription/change-payment.tsx

@@ -75,7 +75,7 @@ const waitForCheckoutComplete = async (sessionId: string) => {
 };
 
 function CustomerSubscriptionChangePayment({ subscription, customer, onComplete }: Props) {
-  const { t } = useLocaleContext();
+  const { t, locale } = useLocaleContext();
   const navigate = useNavigate();
   const [searchParams] = useSearchParams();
   const { settings, connect } = usePaymentContext();
@@ -159,11 +159,17 @@ function CustomerSubscriptionChangePayment({ subscription, customer, onComplete
           await handleConnected();
         } else {
           connect.open({
+            locale: locale as 'en' | 'zh',
             containerEl: undefined as unknown as Element,
             action: 'change-payment',
             prefix: joinURL(getPrefix(), '/api/did'),
             saveConnect: false,
             extraParams: { subscriptionId: subscription.id },
+            messages: {
+              scan: t('common.connect.defaultScan'),
+              title: t('payment.customer.changePayment.title'),
+              confirm: t('common.connect.confirm'),
+            } as any,
             onSuccess: async () => {
               connect.close();
               await handleConnected();

package/src/pages/customer/subscription/change-plan.tsx

@@ -152,6 +152,7 @@ export default function CustomerSubscriptionChangePlan() {
         try {
           setState({ paying: true });
           connect.open({
+            locale: locale as 'en' | 'zh',
             action: result.data.connectAction,
             saveConnect: false,
             messages: {

package/src/pages/customer/subscription/embed.tsx

@@ -229,6 +229,7 @@ export default function SubscriptionEmbed() {
             </Stack>
           }
           size={24}
+          variant="circular"
         />
       ),
     });