payment-kit 1.20.21 → 1.21.0

package/api/src/libs/notification/template/subscription-renew-failed.ts

@@ -234,23 +234,25 @@ export class SubscriptionRenewFailedEmailTemplate
                 text: productName,
               },
             },
-            ...(payer && [
-              {
-                type: 'text',
-                data: {
-                  type: 'plain',
-                  color: '#9397A1',
-                  text: translate('notification.common.payer', locale),
-                },
-              },
-              {
-                type: 'text',
-                data: {
-                  type: 'plain',
-                  text: payer,
-                },
-              },
-            ]),
+            ...(payer
+              ? [
+                  {
+                    type: 'text',
+                    data: {
+                      type: 'plain',
+                      color: '#9397A1',
+                      text: translate('notification.common.payer', locale),
+                    },
+                  },
+                  {
+                    type: 'text',
+                    data: {
+                      type: 'plain',
+                      text: payer,
+                    },
+                  },
+                ]
+              : []),
             {
               type: 'text',
               data: {

package/api/src/libs/notification/template/subscription-will-renew.ts

@@ -390,23 +390,25 @@ export class SubscriptionWillRenewEmailTemplate extends BaseSubscriptionEmailTem
           type: 'section',
           fields: [
             ...commonFields,
-            ...(payer && [
-              {
-                type: 'text',
-                data: {
-                  type: 'plain',
-                  color: '#9397A1',
-                  text: translate('notification.common.payer', locale),
-                },
-              },
-              {
-                type: 'text',
-                data: {
-                  type: 'plain',
-                  text: payer,
-                },
-              },
-            ]),
+            ...(payer
+              ? [
+                  {
+                    type: 'text',
+                    data: {
+                      type: 'plain',
+                      color: '#9397A1',
+                      text: translate('notification.common.payer', locale),
+                    },
+                  },
+                  {
+                    type: 'text',
+                    data: {
+                      type: 'plain',
+                      text: payer,
+                    },
+                  },
+                ]
+              : []),
             ...renewAmountFields,
             ...balanceFields,
             ...insufficientBalanceFields,

package/api/src/libs/vendor-util/adapters/launcher-adapter.ts

@@ -17,10 +17,11 @@ import {
 } from './types';
 import { formatVendorUrl } from './util';
 
-const doRequestVendorData = (vendor: ProductVendor, orderId: string, url: string) => {
+const doRequestVendorData = (vendor: ProductVendor, orderId: string, url: string, options: { shortUrl: boolean }) => {
   const { headers } = VendorAuth.signRequestWithHeaders({});
   const name = vendor?.name;
   const key = vendor?.vendor_key;
+  const { shortUrl } = options;
 
   return fetch(url, { headers })
     .then(async (r) => {
@@ -38,7 +39,7 @@ const doRequestVendorData = (vendor: ProductVendor, orderId: string, url: string
           `vendor status fetch failed, vendor: ${vendor.vendor_key}, orderId: ${orderId}, status: ${r.status}, url: ${url}`
         );
       }
-      if (!data.dashboardUrl) {
+      if (!shortUrl || !data.dashboardUrl) {
         return {
           ...data,
           name,
@@ -255,15 +256,15 @@ export class LauncherAdapter implements VendorAdapter {
     }
   }
 
-  getOrderStatus(vendor: ProductVendor, orderId: string): Promise<any> {
+  getOrderStatus(vendor: ProductVendor, orderId: string, options: { shortUrl: boolean }): Promise<any> {
     const url = formatVendorUrl(vendor, `/api/vendor/status/${orderId}`);
 
-    return doRequestVendorData(vendor, orderId, url);
+    return doRequestVendorData(vendor, orderId, url, options);
   }
 
-  getOrder(vendor: ProductVendor, orderId: string): Promise<any> {
+  getOrder(vendor: ProductVendor, orderId: string, options: { shortUrl: boolean }): Promise<any> {
     const url = formatVendorUrl(vendor, `/api/vendor/orders/${orderId}`);
 
-    return doRequestVendorData(vendor, orderId, url);
+    return doRequestVendorData(vendor, orderId, url, options);
   }
 }

package/api/src/libs/vendor-util/adapters/types.ts

@@ -87,6 +87,6 @@ export interface VendorAdapter {
   fulfillOrder(params: FulfillOrderParams): Promise<FulfillOrderResult>;
   requestReturn(params: ReturnRequestParams): Promise<ReturnRequestResult>;
   checkOrderStatus(params: CheckOrderStatusParams): Promise<CheckOrderStatusResult>;
-  getOrder(vendor: ProductVendor, orderId: string): Promise<any>;
-  getOrderStatus(vendor: ProductVendor, orderId: string): Promise<any>;
+  getOrder(vendor: ProductVendor, orderId: string, option?: Record<string, any>): Promise<any>;
+  getOrderStatus(vendor: ProductVendor, orderId: string, option?: Record<string, any>): Promise<any>;
 }

package/api/src/libs/vendor-util/fulfillment.ts

@@ -158,7 +158,7 @@ export class VendorFulfillmentService {
             destination,
             amount: result.commissionAmount,
             currency_id: checkoutSession.currency_id,
-            customer_id: checkoutSession.customer_id || '',
+            customer_id: '',
             payment_intent_id: paymentIntentId,
             payment_method_id: paymentMethodId,
             status: paymentMethod?.type === 'stripe' ? 'deferred' : 'pending',

package/api/src/queues/vendors/fulfillment-coordinator.ts

@@ -212,6 +212,8 @@ export async function startVendorFulfillment(checkoutSessionId: string, invoiceI
     const initialVendorInfo: VendorInfo[] = vendorConfigs.map((config) => ({
       vendor_id: config.vendor_id,
       vendor_key: config.vendor_key,
+      vendor_type: config.vendor_type,
+      name: config.name,
       order_id: '',
       status: 'pending' as 'pending',
       amount: config.amount || '0',
@@ -229,6 +231,7 @@ export async function startVendorFulfillment(checkoutSessionId: string, invoiceI
       // Coordinated fulfillment: didnames first, then launcher with bindDomainCap
       logger.info('Starting coordinated domain binding fulfillment', {
         checkoutSessionId,
+        invoiceId,
         didnamesVendorId: didnamesVendor.vendor_id,
         launcherVendorId: launcherVendor.vendor_id,
       });
@@ -261,6 +264,7 @@ export async function startVendorFulfillment(checkoutSessionId: string, invoiceI
 
     logger.info('Vendor fulfillment process has been triggered', {
       checkoutSessionId,
+      invoiceId,
       vendorCount: vendorConfigs.length,
     });
   } catch (error: any) {
@@ -556,14 +560,19 @@ export function triggerCoordinatorCheck(checkoutSessionId: string, invoiceId: st
 }
 
 export async function triggerCommissionProcess(checkoutSessionId: string, invoiceId: string): Promise<void> {
-  logger.info('Triggering commission process', { checkoutSessionId });
+  logger.info('Triggering commission process', { checkoutSessionId, invoiceId });
 
   const checkoutSession = await CheckoutSession.findByPk(checkoutSessionId);
   if (!checkoutSession) {
     logger.error('Checkout session not found[triggerCommissionProcess]', { checkoutSessionId });
     return;
   }
-  const invoice = await Invoice.findByPk(invoiceId);
+
+  if (!invoiceId) {
+    logger.warn('Invoice ID not found[triggerCommissionProcess]', { checkoutSessionId, invoiceId });
+  }
+
+  const invoice = await Invoice.findByPk(invoiceId || checkoutSession.invoice_id);
   if (!invoice) {
     logger.error('Invoice not found[triggerCommissionProcess]', { invoiceId });
     return;

package/api/src/queues/vendors/status-check.ts

@@ -41,9 +41,7 @@ export const handleVendorStatusCheck = async (job: VendorStatusCheckJob) => {
   const { checkoutSessionId, vendorId } = job;
   logger.info('handleVendorStatusCheck', { checkoutSessionId, vendorId });
 
-  const checkoutSession = await CheckoutSession.findByPk(checkoutSessionId, {
-    attributes: ['vendor_info', 'payment_intent_id'],
-  });
+  const checkoutSession = await CheckoutSession.findByPk(checkoutSessionId);
 
   const vendor = checkoutSession?.vendor_info?.find((v) => v.vendor_id === vendorId);
   if (!vendor) {

package/api/src/routes/vendor.ts

@@ -146,13 +146,19 @@ async function createVendor(req: any, res: any) {
       vendor_type: type,
       name,
       description,
-      app_url: appUrl,
       metadata,
       app_pid: appPid,
       app_logo: appLogo,
       status,
     } = value;
 
+    let appUrl = '';
+    try {
+      appUrl = new URL(value.app_url).origin;
+    } catch {
+      return res.status(400).json({ error: 'Invalid app URL' });
+    }
+
     const vendorType = (type || 'launcher') as 'launcher' | 'didnames';
     const vendorDid = VENDOR_DID[vendorType];
 
@@ -215,16 +221,14 @@ async function updateVendor(req: any, res: any) {
       });
     }
 
-    const {
-      vendor_type: type,
-      name,
-      description,
-      app_url: appUrl,
-      status,
-      metadata,
-      app_pid: appPid,
-      app_logo: appLogo,
-    } = value;
+    const { vendor_type: type, name, description, status, metadata, app_pid: appPid, app_logo: appLogo } = value;
+
+    let appUrl = '';
+    try {
+      appUrl = new URL(value.app_url).origin;
+    } catch {
+      return res.status(400).json({ error: 'Invalid app URL' });
+    }
 
     const vendorType = (type || 'launcher') as 'launcher' | 'didnames';
     const vendorDid = VENDOR_DID[vendorType];
@@ -312,42 +316,51 @@ async function testVendorConnection(req: any, res: any) {
   }
 }
 
-const getVendorById = async (vendorId: string, orderId: string) => {
+async function executeVendorOperation(
+  vendorId: string,
+  orderId: string,
+  operation: 'getOrder' | 'getOrderStatus',
+  shortUrl: boolean
+) {
   if (!vendorId || !orderId) {
-    throw new Error(`vendorId or orderId is required, vendorId: ${vendorId}, orderId: ${orderId}`);
+    return {
+      error: 'Bad Request',
+      message: `vendorId or orderId is required, vendorId: ${vendorId}, orderId: ${orderId}`,
+      code: 400,
+    };
   }
 
   const vendor = await ProductVendor.findByPk(vendorId);
   if (!vendor) {
-    throw new Error(`vendor not found, vendorId: ${vendorId}`);
-  }
-
-  const vendorAdapter = await VendorFulfillmentService.getVendorAdapter(vendor.vendor_key);
-
-  const data = await vendorAdapter.getOrder(vendor, orderId);
-
-  return data;
-};
-
-async function getVendorStatusById(vendorId: string, orderId: string) {
-  if (!vendorId || !orderId) {
-    throw new Error(`vendorId or orderId is required, vendorId: ${vendorId}, orderId: ${orderId}`);
+    return {
+      error: 'Not Found',
+      message: `vendor not found, vendorId: ${vendorId}`,
+      code: 404,
+    };
   }
 
-  const vendor = await ProductVendor.findByPk(vendorId);
+  try {
+    const vendorAdapter = await VendorFulfillmentService.getVendorAdapter(vendor.vendor_key);
+    const data = await vendorAdapter[operation](vendor, orderId, { shortUrl });
 
-  if (!vendor) {
-    throw new Error(`vendor not found, vendorId: ${vendorId}`);
+    return { data: { ...data, vendorType: vendor.vendor_type }, code: 200 };
+  } catch (error: any) {
+    const operationName = operation === 'getOrder' ? 'order' : 'order status';
+    logger.error(`Failed to get vendor ${operationName}`, {
+      error,
+      vendorId,
+      orderId,
+      vendorKey: vendor.vendor_key,
+    });
+    return {
+      error: 'Service Unavailable',
+      message: `Failed to get vendor ${operationName}`,
+      code: 503,
+    };
   }
-
-  const vendorAdapter = await VendorFulfillmentService.getVendorAdapter(vendor.vendor_key);
-
-  const data = await vendorAdapter.getOrderStatus(vendor, orderId);
-
-  return { ...data, vendorType: vendor.vendor_type };
 }
 
-async function doRequestVendor(sessionId: string, func: (vendorId: string, orderId: string) => Promise<any>) {
+async function processVendorOrders(sessionId: string, operation: 'getOrder' | 'getOrderStatus', shortUrl: boolean) {
   const doc = await CheckoutSession.findByPk(sessionId);
 
   if (!doc) {
@@ -378,8 +391,39 @@ async function doRequestVendor(sessionId: string, func: (vendorId: string, order
     };
   }
 
-  const vendors = doc.vendor_info.map((item) => {
-    return func(item.vendor_id, item.order_id);
+  const vendors = doc.vendor_info.map(async (item) => {
+    if (!item.order_id) {
+      return {
+        key: item.vendor_key,
+        progress: 0,
+        status: 'pending',
+        vendorType: item.vendor_type,
+        appUrl: item.app_url,
+      };
+    }
+
+    const result = await executeVendorOperation(item.vendor_id, item.order_id, operation, shortUrl);
+
+    // Handle error responses from vendor functions
+    if (result.error) {
+      logger.warn('Vendor operation returned error', {
+        vendorId: item.vendor_id,
+        orderId: item.order_id,
+        operation,
+        error: result.error,
+        message: result.message,
+      });
+      return {
+        key: item.vendor_key,
+        error: result.error,
+        message: result.message,
+        status: 'error',
+        vendorType: item.vendor_type,
+        appUrl: item.app_url,
+      };
+    }
+
+    return result.data;
   });
 
   return {
@@ -392,7 +436,7 @@ async function doRequestVendor(sessionId: string, func: (vendorId: string, order
 }
 
 async function getVendorStatus(sessionId: string) {
-  const result: any = await doRequestVendor(sessionId, getVendorStatusById);
+  const result: any = await processVendorOrders(sessionId, 'getOrderStatus', false);
 
   if (result.subscriptionId) {
     const subscriptionUrl = getUrl(`/customer/subscription/${result.subscriptionId}`);
@@ -407,10 +451,6 @@ async function getVendorStatus(sessionId: string) {
   return result;
 }
 
-function getVendor(sessionId: string) {
-  return doRequestVendor(sessionId, getVendorById);
-}
-
 async function getVendorFulfillmentStatus(req: any, res: any) {
   const { sessionId } = req.params;
 
@@ -428,9 +468,10 @@ async function getVendorFulfillmentStatus(req: any, res: any) {
 
 async function getVendorFulfillmentDetail(req: any, res: any) {
   const { sessionId } = req.params;
+  const { shortUrl } = req.query;
 
   try {
-    const detail = await getVendor(sessionId);
+    const detail = await processVendorOrders(sessionId, 'getOrder', shortUrl === 'true');
     if (detail.code) {
       return res.status(detail.code).json({ error: detail.error });
     }
@@ -461,17 +502,28 @@ async function redirectToVendor(req: any, res: any) {
       return res.redirect('/404');
     }
 
-    const detail = await getVendorById(vendorId, order.order_id || '');
-    if (!detail) {
+    const isOwner = req.user.did === checkoutSession.customer_did;
+
+    if (!isOwner) {
+      if (order.app_url) {
+        return res.redirect(order.app_url);
+      }
+      return res.redirect('/404');
+    }
+
+    const result = await executeVendorOperation(vendorId, order.order_id || '', 'getOrder', false);
+    if (result.error || !result.data) {
       logger.warn('Vendor status detail not found', {
         subscriptionId,
         vendorId,
         orderId: order.order_id,
+        error: result.error,
+        message: result.message,
       });
       return res.redirect('/404');
     }
 
-    const redirectUrl = target === 'dashboard' ? detail.dashboardUrl : detail.homeUrl;
+    const redirectUrl = target === 'dashboard' ? result.data.dashboardUrl : result.data.homeUrl;
     return res.redirect(redirectUrl);
   } catch (error: any) {
     logger.error('Failed to redirect to vendor service', {

package/api/src/store/models/checkout-session.ts

@@ -220,6 +220,7 @@ export class CheckoutSession extends Model<InferAttributes<CheckoutSession>, Inf
   declare vendor_info?: Array<{
     vendor_id: string;
     vendor_key: string;
+    vendor_type: string;
     order_id: string;
     status:
       | 'pending'

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "payment-kit",
-  "version": "1.20.21",
+  "version": "1.21.0",
   "scripts": {
     "dev": "blocklet dev --open",
     "lint": "tsc --noEmit && eslint src api/src --ext .mjs,.js,.jsx,.ts,.tsx",
@@ -45,33 +45,33 @@
   },
   "dependencies": {
     "@abtnode/cron": "^1.16.52-beta-20250912-112002-e3499e9c",
-    "@arcblock/did": "^1.25.3",
-    "@arcblock/did-connect-react": "^3.1.41",
+    "@arcblock/did": "^1.25.4",
+    "@arcblock/did-connect-react": "^3.1.43",
     "@arcblock/did-connect-storage-nedb": "^1.8.0",
-    "@arcblock/did-util": "^1.25.3",
-    "@arcblock/jwt": "^1.25.3",
-    "@arcblock/ux": "^3.1.41",
-    "@arcblock/validator": "^1.25.3",
+    "@arcblock/did-util": "^1.25.4",
+    "@arcblock/jwt": "^1.25.4",
+    "@arcblock/ux": "^3.1.43",
+    "@arcblock/validator": "^1.25.4",
     "@blocklet/did-space-js": "^1.1.27",
     "@blocklet/error": "^0.2.5",
     "@blocklet/js-sdk": "^1.16.52-beta-20250912-112002-e3499e9c",
     "@blocklet/logger": "^1.16.52-beta-20250912-112002-e3499e9c",
-    "@blocklet/payment-broker-client": "1.20.21",
-    "@blocklet/payment-react": "1.20.21",
-    "@blocklet/payment-vendor": "1.20.21",
+    "@blocklet/payment-broker-client": "1.21.0",
+    "@blocklet/payment-react": "1.21.0",
+    "@blocklet/payment-vendor": "1.21.0",
     "@blocklet/sdk": "^1.16.52-beta-20250912-112002-e3499e9c",
-    "@blocklet/ui-react": "^3.1.41",
+    "@blocklet/ui-react": "^3.1.43",
     "@blocklet/uploader": "^0.2.12",
-    "@blocklet/xss": "^0.2.7",
+    "@blocklet/xss": "^0.2.8",
     "@mui/icons-material": "^7.1.2",
     "@mui/lab": "7.0.0-beta.14",
     "@mui/material": "^7.1.2",
     "@mui/system": "^7.1.1",
-    "@ocap/asset": "^1.25.3",
-    "@ocap/client": "^1.25.3",
-    "@ocap/mcrypto": "^1.25.3",
-    "@ocap/util": "^1.25.3",
-    "@ocap/wallet": "^1.25.3",
+    "@ocap/asset": "^1.25.4",
+    "@ocap/client": "^1.25.4",
+    "@ocap/mcrypto": "^1.25.4",
+    "@ocap/util": "^1.25.4",
+    "@ocap/wallet": "^1.25.4",
     "@stripe/react-stripe-js": "^2.9.0",
     "@stripe/stripe-js": "^2.4.0",
     "ahooks": "^3.8.5",
@@ -128,7 +128,7 @@
   "devDependencies": {
     "@abtnode/types": "^1.16.52-beta-20250912-112002-e3499e9c",
     "@arcblock/eslint-config-ts": "^0.3.3",
-    "@blocklet/payment-types": "1.20.21",
+    "@blocklet/payment-types": "1.21.0",
     "@types/cookie-parser": "^1.4.9",
     "@types/cors": "^2.8.19",
     "@types/debug": "^4.1.12",
@@ -175,5 +175,5 @@
       "parser": "typescript"
     }
   },
-  "gitHead": "43b26f9e7373a99000f6a14762fdab860a562967"
+  "gitHead": "d133aa0e8c6681dd77bafe024c1e1dafb1addf0d"
 }

package/src/components/subscription/vendor-service-list.tsx

@@ -13,9 +13,16 @@ interface VendorConfig {
 interface VendorServiceListProps {
   vendorServices: VendorConfig[];
   subscriptionId: string;
+  isOwner?: boolean;
+  isCanceled: boolean;
 }
 
-export default function VendorServiceList({ vendorServices, subscriptionId }: VendorServiceListProps) {
+export default function VendorServiceList({
+  vendorServices,
+  subscriptionId,
+  isOwner = true,
+  isCanceled,
+}: VendorServiceListProps) {
   const { t } = useLocaleContext();
 
   if (!vendorServices || vendorServices.length === 0) {
@@ -31,7 +38,6 @@ export default function VendorServiceList({ vendorServices, subscriptionId }: Ve
       </Typography>
       <Box className="section-body">
         <Stack
-          spacing={2}
           sx={{
             display: 'grid',
             gridTemplateColumns: { xs: '1fr', md: '1fr 1fr', lg: '1fr 1fr 1fr' },
@@ -39,12 +45,14 @@ export default function VendorServiceList({ vendorServices, subscriptionId }: Ve
           }}>
           {vendorServices.map((vendor, index) => {
             const isLauncher = vendor.vendor_type === 'launcher';
-
             return (
               <Box
                 key={vendor.vendor_key || index}
+                className="vendor-service-item"
                 sx={{
                   p: 2,
+                  display: 'flex',
+                  alignItems: 'center',
                   border: '1px solid',
                   borderColor: 'divider',
                   borderRadius: 2,
@@ -54,40 +62,28 @@ export default function VendorServiceList({ vendorServices, subscriptionId }: Ve
                   },
                   transition: 'background-color 0.2s ease',
                 }}>
-                <Stack
-                  direction="row"
-                  sx={{
-                    justifyContent: 'space-between',
-                    alignItems: 'flex-start',
-                  }}>
-                  <Stack
-                    direction="row"
-                    spacing={1}
+                <Stack direction="row" spacing={1} sx={{ alignItems: 'center', flex: 1 }}>
+                  <Box
+                    sx={{
+                      width: 8,
+                      height: 8,
+                      borderRadius: '50%',
+                      bgcolor: isCanceled ? 'error.main' : 'success.main',
+                      flexShrink: 0,
+                    }}
+                  />
+                  <Typography
+                    variant="body1"
                     sx={{
-                      alignItems: 'center',
-                      flex: 1,
+                      fontWeight: 600,
+                      fontSize: '1rem',
+                      color: 'text.primary',
                     }}>
-                    <Box
-                      sx={{
-                        width: 8,
-                        height: 8,
-                        borderRadius: '50%',
-                        bgcolor: 'success.main',
-                        flexShrink: 0,
-                      }}
-                    />
-                    <Typography
-                      variant="body1"
-                      sx={{
-                        fontWeight: 600,
-                        fontSize: '1rem',
-                        color: 'text.primary',
-                      }}>
-                      {vendor.name || vendor.vendor_key}
-                    </Typography>
-                  </Stack>
-                  {/* Launcher 类型的链接 */}
-                  {isLauncher && (
+                    {vendor.name || vendor.vendor_key}
+                  </Typography>
+                </Stack>
+                {isLauncher && (
+                  <Box>
                     <Stack direction="row" spacing={0.5}>
                       <Tooltip title={t('admin.subscription.serviceHome')} placement="top">
                         <IconButton
@@ -105,30 +101,32 @@ export default function VendorServiceList({ vendorServices, subscriptionId }: Ve
                           <Home fontSize="small" />
                         </IconButton>
                       </Tooltip>
-                      <Tooltip title={t('admin.subscription.serviceDashboard')} placement="top">
-                        <IconButton
-                          size="small"
-                          component="a"
-                          href={joinURL(
-                            prefix,
-                            '/api/vendors/open/',
-                            subscriptionId,
-                            `?vendorId=${vendor.vendor_id}&target=dashboard`
-                          )}
-                          target="_blank"
-                          rel="noopener noreferrer"
-                          sx={{
-                            color: 'primary.main',
-                            '&:hover': {
-                              backgroundColor: 'primary.lighter',
-                            },
-                          }}>
-                          <Dashboard fontSize="small" />
-                        </IconButton>
-                      </Tooltip>
+                      {isOwner && (
+                        <Tooltip title={t('admin.subscription.serviceDashboard')} placement="top">
+                          <IconButton
+                            size="small"
+                            component="a"
+                            href={joinURL(
+                              prefix,
+                              '/api/vendors/open/',
+                              subscriptionId,
+                              `?vendorId=${vendor.vendor_id}&target=dashboard`
+                            )}
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            sx={{
+                              color: 'primary.main',
+                              '&:hover': {
+                                backgroundColor: 'primary.lighter',
+                              },
+                            }}>
+                            <Dashboard fontSize="small" />
+                          </IconButton>
+                        </Tooltip>
+                      )}
                     </Stack>
-                  )}
-                </Stack>
+                  </Box>
+                )}
               </Box>
             );
           })}

package/src/locales/en.tsx

@@ -94,6 +94,7 @@ export default flat({
     promotional: 'Promotional',
     viewInvoice: 'View Invoice',
     viewSourceData: 'View Source',
+    goToConfigure: 'Go to Configure',
   },
   notification: {
     preferences: {
@@ -1170,8 +1171,8 @@ export default flat({
       apiConfig: 'API Configuration',
       commissionConfig: 'Commission Configuration',
       status: 'Status',
-      servicePublicKey: 'Service Public Key',
-      servicePublicKeyDescription: 'Used for vendor communication authentication',
+      brokerDID: 'Broker DID',
+      brokerPublicKey: 'Broker Public Key',
     },
     subscription: {
       view: 'View subscription',
@@ -1685,6 +1686,41 @@ export default flat({
         title: 'Pricing Tables',
         intro: 'Create beautiful pricing tables for your products',
       },
+      metering: {
+        title: 'Usage Metering',
+        intro: 'Track usage with meters and sell credits as top-up packages',
+        dialog: {
+          title: 'How to set up credit-based metering',
+          description:
+            'Credit-based metering allows you to track usage and charge customers based on consumption. Follow these steps to get started:',
+          steps: {
+            step1: {
+              title: 'Create a meter to track your usage events',
+              description:
+                'Set up meters to monitor API calls, data usage, or any measurable activity in your application.',
+            },
+            step2: {
+              title: 'Create Credit top-up products and pricing',
+              description:
+                'Define credit packages that customers can purchase, with flexible pricing models and validity periods.',
+            },
+            step3: {
+              title: 'Create a payment link and share it so users can buy Credits',
+              description: 'Generate shareable payment links that allow customers to easily purchase credit packages.',
+            },
+            step4: {
+              title: 'Integrate and report Credit usage',
+              description:
+                'Use our SDK to report usage events and automatically deduct credits from customer balances.',
+            },
+          },
+          docText: 'Read the credit billing guide',
+        },
+      },
+      promotions: {
+        title: 'Promotions',
+        intro: 'Create coupons and promotion codes to drive conversions',
+      },
       donate: {
         title: 'Donation',
         intro: 'Add donation button to your application with <CheckoutDonate />',
@@ -1699,5 +1735,6 @@ export default flat({
         link: 'https://www.npmjs.com/package/@blocklet/payment-js',
       },
     },
+    viewDocs: 'View docs',
   },
 });

package/src/locales/zh.tsx

@@ -93,6 +93,7 @@ export default flat({
     promotional: '促销',
     viewInvoice: '查看账单',
     viewSourceData: '查看来源',
+    goToConfigure: '前往配置',
   },
   notification: {
     preferences: {
@@ -1142,8 +1143,8 @@ export default flat({
       apiConfig: 'API配置',
       commissionConfig: '分成配置',
       status: '状态',
-      servicePublicKey: '服务公钥',
-      servicePublicKeyDescription: '用于供应商通信认证',
+      brokerDID: '平台 DID',
+      brokerPublicKey: '平台公钥',
     },
     subscription: {
       view: '查看订阅',
@@ -1632,6 +1633,37 @@ export default flat({
         title: '定价表',
         intro: '为您的产品创建美观的定价表',
       },
+      metering: {
+        title: '计量与额度',
+        intro: '使用计量器跟踪用量，并通过额度套餐售卖 Credits',
+        dialog: {
+          title: '如何开启 Credit 计费',
+          description: 'Credit 计费模式让您可以跟踪用量并基于消费向客户收费。按照以下步骤开始配置：',
+          steps: {
+            step1: {
+              title: '创建计量器用于跟踪用量事件',
+              description: '设置计量器来监控 API 调用、数据使用量或应用中任何可测量的活动。',
+            },
+            step2: {
+              title: '创建 Credits 购买套餐和定价',
+              description: '定义客户可以购买的额度套餐，支持灵活的定价模式和有效期设置。',
+            },
+            step3: {
+              title: '创建支付链接并分享给用户',
+              description: '生成可分享的支付链接，让客户轻松购买额度套餐。',
+            },
+            step4: {
+              title: '集成并上报 Credits 用量',
+              description: '使用我们的 SDK 上报使用事件，自动从客户余额中扣除额度。',
+            },
+          },
+          docText: '查看 Credit 计费指南',
+        },
+      },
+      promotions: {
+        title: '促销与优惠',
+        intro: '创建优惠券与促销码，提升转化率',
+      },
       donate: {
         title: '打赏功能',
         intro: '使用 <CheckoutDonate /> 组件为应用添加打赏按钮',
@@ -1646,5 +1678,6 @@ export default flat({
         link: 'https://www.npmjs.com/package/@blocklet/payment-js',
       },
     },
+    viewDocs: '查看文档',
   },
 });

package/src/pages/admin/billing/subscriptions/detail.tsx

@@ -33,6 +33,8 @@ import SubscriptionMetrics from '../../../../components/subscription/metrics';
 import DiscountInfo from '../../../../components/discount/discount-info';
 import { goBackOrFallback } from '../../../../libs/util';
 import InfoRowGroup from '../../../../components/info-row-group';
+import VendorServiceList from '../../../../components/subscription/vendor-service-list';
+import { useSessionContext } from '../../../../contexts/session';
 
 const fetchData = (id: string): Promise<TSubscriptionExpanded> => {
   return api.get(`/api/subscriptions/${id}`).then((res) => res.data);
@@ -40,6 +42,7 @@ const fetchData = (id: string): Promise<TSubscriptionExpanded> => {
 
 export default function SubscriptionDetail(props: { id: string }) {
   const { t } = useLocaleContext();
+  const { session } = useSessionContext();
   const { isMobile } = useMobile();
   const [state, setState] = useSetState({
     adding: {
@@ -313,7 +316,6 @@ export default function SubscriptionDetail(props: { id: string }) {
             </InfoRowGroup>
           </Box>
           <Divider />
-
           {/* Discount Information */}
           {(data as any).discountStats && (
             <Box className="section">
@@ -332,6 +334,35 @@ export default function SubscriptionDetail(props: { id: string }) {
               <SubscriptionItemList data={data.items} currency={data.paymentCurrency} mode="admin" />
             </Box>
           </Box>
+          {(() => {
+            const vendorServices = data.items?.map((item) => item.price?.product?.vendor_config || []).flat();
+            if (!vendorServices || vendorServices.length === 0) return null;
+            return (
+              <>
+                <Divider />
+                <Box
+                  className="section"
+                  sx={{
+                    '.section-header': {
+                      fontSize: {
+                        xs: '18px',
+                        md: '1.09375rem',
+                      },
+                    },
+                    '.vendor-service-item': {
+                      maxWidth: '400px',
+                    },
+                  }}>
+                  <VendorServiceList
+                    vendorServices={vendorServices}
+                    subscriptionId={data.id}
+                    isOwner={session?.user?.did === data.customer?.did}
+                    isCanceled={data.status === 'canceled'}
+                  />
+                </Box>
+              </>
+            );
+          })()}
           <Divider />
           {isCredit ? (
             <Box className="section">

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

@@ -389,7 +389,6 @@ export default function ProductDetail(props: { id: string }) {
             </Box>
           </Box>
           <Divider />
-          {/* 供应商配置展示 */}
           {data.type === 'service' && (
             <>
               <Box className="section">
@@ -429,13 +428,9 @@ export default function ProductDetail(props: { id: string }) {
                             borderColor: 'divider',
                             borderRadius: 1,
                             backgroundColor: 'background.paper',
+                            maxWidth: '600px',
                           }}>
-                          <Stack
-                            direction="row"
-                            sx={{
-                              justifyContent: 'space-between',
-                              alignItems: 'center',
-                            }}>
+                          <Stack direction="row" sx={{ justifyContent: 'space-between', alignItems: 'center' }}>
                             <Box>
                               <Typography variant="body1" sx={{ color: 'text.primary', fontWeight: 500 }}>
                                 {vendor.name || vendor.vendor_key || vendor.vendor_id}
@@ -446,15 +441,10 @@ export default function ProductDetail(props: { id: string }) {
                                 </Typography>
                               )}
                             </Box>
-                            <Stack
-                              direction="row"
-                              spacing={3}
-                              sx={{
-                                alignItems: 'center',
-                              }}>
+                            <Stack direction="row" spacing={3} sx={{ alignItems: 'center' }}>
                               <Typography variant="body2" sx={{ color: 'text.secondary' }}>
                                 {vendor.commission_type === 'percentage'
-                                  ? t('admin.vendor.percentage')
+                                  ? t('admin.vendor.commission')
                                   : t('admin.vendor.fixedAmount')}
                               </Typography>
                               <Typography variant="body1" sx={{ color: 'text.primary', fontWeight: 600 }}>

package/src/pages/admin/products/vendors/index.tsx

@@ -185,69 +185,78 @@ export default function VendorsList() {
     setDetailOpen(true);
   };
 
-  const handleCopyPublicKey = async () => {
+  const handleCopyValue = async (value: string) => {
     try {
-      await navigator.clipboard.writeText(window.blocklet.appPk);
+      await navigator.clipboard.writeText(value);
       setCopySuccess(true);
       setTimeout(() => setCopySuccess(false), 2000);
     } catch (err) {
-      console.error('Failed to copy public key:', err);
+      console.error('Failed to copy value:', err);
     }
   };
 
+  const brokerInfo = [
+    ...(window.blocklet.appId ? [{ label: t('admin.vendor.brokerDID'), value: window.blocklet.appId }] : []),
+    ...(window.blocklet.appPk ? [{ label: t('admin.vendor.brokerPublicKey'), value: window.blocklet.appPk }] : []),
+  ];
+
   return (
     <>
-      {/* 供应商服务公钥展示 */}
-      {window.blocklet.appPk && (
+      {/* Broker Information */}
+      {brokerInfo.length > 0 && (
         <Box
           sx={{
-            display: 'flex',
-            flexDirection: { xs: 'column', md: 'row' },
-            alignItems: { xs: 'flex-start', md: 'center' },
-            gap: { xs: 1, md: 0 },
-            p: { xs: 1.5, md: 2 },
-            mt: { xs: 1.5, md: 1 },
+            px: 2,
+            py: 1.5,
+            my: 2,
             borderRadius: 1,
             border: '1px solid',
             borderColor: 'divider',
+            backgroundColor: 'transparent',
+            display: 'grid',
+            gridTemplateColumns: 'max-content 1fr',
+            gap: 1,
+            alignItems: 'center',
           }}>
-          <Typography
-            variant="body2"
-            sx={{
-              color: 'text.secondary',
-              minWidth: 'fit-content',
-            }}>
-            {t('admin.vendor.servicePublicKey')}:
-            <Tooltip title={copySuccess ? t('common.copied') : t('common.copy')}>
-              <IconButton
-                size="small"
-                onClick={handleCopyPublicKey}
-                sx={{
-                  color: copySuccess ? 'success.main' : 'text.secondary',
-                  minWidth: { xs: '24px', md: '32px' },
-                  width: { xs: '24px', md: '32px' },
-                  height: { xs: '24px', md: '32px' },
-                  '&:hover': { backgroundColor: 'grey.100' },
-                }}>
-                <ContentCopy sx={{ fontSize: { xs: 16, md: 18 } }} />
-              </IconButton>
-            </Tooltip>
-          </Typography>
-          <Box
-            sx={{
-              display: 'flex',
-              alignItems: 'center',
-              gap: 1,
-              width: { xs: '100%', md: 'auto' },
-              flex: { xs: 'none', md: 1 },
-            }}>
-            <Chip
-              sx={{ backgroundColor: 'grey.200', color: 'text.secondary' }}
-              label={window.blocklet.appPk}
-              variant="outlined"
-              size="small"
-            />
-          </Box>
+          {brokerInfo.map((info) => (
+            <>
+              <Typography
+                key={`${info.label}-label`}
+                variant="body2"
+                color="text.secondary"
+                sx={{ justifySelf: 'start' }}>
+                {info.label}:
+              </Typography>
+              <Box sx={{ display: 'flex', alignItems: 'center', overflow: 'hidden' }}>
+                <Chip
+                  key={`${info.label}-chip`}
+                  label={info.value}
+                  size="small"
+                  sx={{
+                    flexShrink: 1,
+                    overflow: 'hidden',
+                    '& .MuiChip-label': {
+                      overflow: 'hidden',
+                      textOverflow: 'ellipsis',
+                    },
+                  }}
+                />
+                <Tooltip key={`${info.label}-tooltip`} title={copySuccess ? t('common.copied') : t('common.copy')}>
+                  <IconButton
+                    size="small"
+                    onClick={() => handleCopyValue(info.value)}
+                    sx={{
+                      color: copySuccess ? 'success.main' : 'text.secondary',
+                      '&:hover': {
+                        color: 'primary.main',
+                      },
+                    }}>
+                    <ContentCopy sx={{ fontSize: 16 }} />
+                  </IconButton>
+                </Tooltip>
+              </Box>
+            </>
+          ))}
         </Box>
       )}
       <Table

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

@@ -715,7 +715,11 @@ export default function CustomerSubscriptionDetail() {
           <>
             <Divider />
             <Box className="section">
-              <VendorServiceList vendorServices={vendorServices} subscriptionId={id} />
+              <VendorServiceList
+                vendorServices={vendorServices}
+                subscriptionId={id}
+                isCanceled={data.status === 'canceled'}
+              />
             </Box>
           </>
         );

package/src/pages/integrations/overview.tsx

@@ -1,5 +1,6 @@
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
-import { Box, Grid, Typography, Divider } from '@mui/material';
+import { Box, Grid, Typography, Divider, Button, Link, Tooltip } from '@mui/material';
+import Dialog from '@arcblock/ux/lib/Dialog';
 import { useNavigate } from 'react-router-dom';
 import {
   Link as LinkIcon,
@@ -8,7 +9,11 @@ import {
   Inventory2Outlined,
   TableChartOutlined,
   FavoriteBorderOutlined,
+  Speed,
+  LocalOfferOutlined,
+  HelpOutline,
 } from '@mui/icons-material';
+import { useState } from 'react';
 
 const basicFeatures = [
   {
@@ -32,6 +37,24 @@ const basicFeatures = [
 ];
 
 const advancedFeatures = [
+  {
+    title: 'integrations.features.metering.title',
+    description: 'integrations.features.metering.intro',
+    icon: <Speed sx={{ fontSize: 32, color: 'text.lighter' }} />,
+    dialog: 'metering',
+    doc: {
+      url: 'https://www.arcblock.io/blog/en/payment-kit-enhanced-credit-management',
+    },
+  },
+  {
+    title: 'integrations.features.promotions.title',
+    description: 'integrations.features.promotions.intro',
+    icon: <LocalOfferOutlined sx={{ fontSize: 32, color: 'text.lighter' }} />,
+    path: '/admin/products/coupons',
+    doc: {
+      url: 'https://www.arcblock.io/content/blog/en/payment-kit-promotion-support',
+    },
+  },
   {
     title: 'integrations.features.donate.title',
     description: 'integrations.features.donate.intro',
@@ -48,7 +71,7 @@ const advancedFeatures = [
     title: 'integrations.features.api.title',
     description: 'integrations.features.api.intro',
     icon: <Code sx={{ fontSize: 32, color: 'text.lighter' }} />,
-    path: 'https://www.arcblock.io/docs/arcblock-payment-kit/en/start-payment-js',
+    path: 'https://www.staging.arcblock.io/content/docs/payment-kit-sdk',
     external: true,
   },
 ];
@@ -56,8 +79,13 @@ const advancedFeatures = [
 export default function Overview() {
   const { t } = useLocaleContext();
   const navigate = useNavigate();
+  const [openMeterDialog, setOpenMeterDialog] = useState(false);
 
   const handleClick = (item: any) => {
+    if (item.dialog === 'metering') {
+      setOpenMeterDialog(true);
+      return;
+    }
     if (item.external) {
       window.open(item.path, '_blank');
     } else {
@@ -179,13 +207,37 @@ export default function Overview() {
                   mb: 1,
                 }}>
                 {item.icon}
-                <Typography
-                  variant="h4"
+                <Box
                   sx={{
+                    display: 'flex',
+                    alignItems: 'center',
                     mt: 1.5,
                   }}>
-                  {t(item.title)}
-                </Typography>
+                  <Typography variant="h4">{t(item.title)}</Typography>
+                  {item.doc?.url && (
+                    <Tooltip title={t('integrations.viewDocs')} placement="top">
+                      <Link
+                        href={item.doc.url}
+                        target="_blank"
+                        rel="noopener"
+                        onClick={(e) => e.stopPropagation()}
+                        sx={{
+                          display: 'flex',
+                          alignItems: 'center',
+                          ml: 1,
+                          color: 'text.secondary',
+                          '&:hover': { color: 'primary.main' },
+                        }}>
+                        <HelpOutline
+                          fontSize="small"
+                          sx={{
+                            cursor: 'pointer',
+                          }}
+                        />
+                      </Link>
+                    </Tooltip>
+                  )}
+                </Box>
               </Box>
               <Typography
                 variant="body2"
@@ -198,6 +250,96 @@ export default function Overview() {
           </Grid>
         ))}
       </Grid>
+
+      <Dialog
+        open={openMeterDialog}
+        onClose={() => setOpenMeterDialog(false)}
+        maxWidth="sm"
+        fullWidth
+        className="base-dialog"
+        title={t('integrations.features.metering.dialog.title')}
+        actions={
+          <Box sx={{ display: 'flex', gap: 2 }}>
+            <Button onClick={() => setOpenMeterDialog(false)}>{t('common.cancel')}</Button>
+            <Button onClick={() => navigate('/admin/meters')} variant="contained">
+              {t('common.goToConfigure')}
+            </Button>
+          </Box>
+        }>
+        <Typography variant="body2" sx={{ color: 'text.secondary', mb: 3 }}>
+          {t('integrations.features.metering.dialog.description')}
+        </Typography>
+
+        <Box
+          component="ol"
+          sx={{
+            pl: 0,
+            mb: 3,
+            listStyle: 'none',
+            counterReset: 'step-counter',
+          }}>
+          {['step1', 'step2', 'step3', 'step4'].map((stepKey) => (
+            <Box
+              key={stepKey}
+              component="li"
+              sx={{
+                mb: 3,
+                pl: 3,
+                position: 'relative',
+                counterIncrement: 'step-counter',
+                '&::before': {
+                  content: 'counter(step-counter)',
+                  position: 'absolute',
+                  left: 0,
+                  top: 0,
+                  width: 24,
+                  height: 24,
+                  borderRadius: '50%',
+                  backgroundColor: 'primary.main',
+                  color: 'white',
+                  fontSize: '12px',
+                  fontWeight: 'bold',
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                },
+              }}>
+              <Box sx={{ ml: 0.5 }}>
+                <Typography variant="subtitle2" sx={{ fontWeight: 600, mb: 0.5 }}>
+                  {t(`integrations.features.metering.dialog.steps.${stepKey}.title`)}
+                </Typography>
+                <Typography variant="body2" sx={{ color: 'text.secondary', lineHeight: 1.5 }}>
+                  {t(`integrations.features.metering.dialog.steps.${stepKey}.description`)}
+                </Typography>
+              </Box>
+            </Box>
+          ))}
+        </Box>
+
+        <Box
+          sx={{
+            p: 2,
+            backgroundColor: 'action.hover',
+            borderRadius: 1,
+            border: '1px solid',
+            borderColor: 'divider',
+          }}>
+          <Link
+            href="https://www.staging.arcblock.io/content/docs/payment-kit-sdk/en/payment-kit-sdk-core-concepts-credit-billing"
+            target="_blank"
+            rel="noopener"
+            underline="hover"
+            sx={{
+              color: 'primary.main',
+              fontWeight: 500,
+              display: 'flex',
+              alignItems: 'center',
+              gap: 0.5,
+            }}>
+            {t('integrations.features.metering.dialog.docText')}
+          </Link>
+        </Box>
+      </Dialog>
     </Box>
   );
 }