payment-kit 1.20.21 → 1.20.22

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,46 @@ async function testVendorConnection(req: any, res: any) {
   }
 }
 
-const getVendorById = async (vendorId: string, orderId: string) => {
+async function executeVendorOperation(vendorId: string, orderId: string, operation: 'getOrder' | 'getOrderStatus') {
   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);
 
-  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') {
   const doc = await CheckoutSession.findByPk(sessionId);
 
   if (!doc) {
@@ -378,8 +386,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);
+
+    // 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 +431,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');
 
   if (result.subscriptionId) {
     const subscriptionUrl = getUrl(`/customer/subscription/${result.subscriptionId}`);
@@ -407,10 +446,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;
 
@@ -430,7 +465,7 @@ async function getVendorFulfillmentDetail(req: any, res: any) {
   const { sessionId } = req.params;
 
   try {
-    const detail = await getVendor(sessionId);
+    const detail = await processVendorOrders(sessionId, 'getOrder');
     if (detail.code) {
       return res.status(detail.code).json({ error: detail.error });
     }
@@ -461,17 +496,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');
+    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.20.22
 logo: logo.png
 files:
   - dist

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "payment-kit",
-  "version": "1.20.21",
+  "version": "1.20.22",
   "scripts": {
     "dev": "blocklet dev --open",
     "lint": "tsc --noEmit && eslint src api/src --ext .mjs,.js,.jsx,.ts,.tsx",
@@ -56,9 +56,9 @@
     "@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.20.22",
+    "@blocklet/payment-react": "1.20.22",
+    "@blocklet/payment-vendor": "1.20.22",
     "@blocklet/sdk": "^1.16.52-beta-20250912-112002-e3499e9c",
     "@blocklet/ui-react": "^3.1.41",
     "@blocklet/uploader": "^0.2.12",
@@ -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.20.22",
     "@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": "a0a691de0cd6e47efbc0e4de01d200bb9193c435"
 }

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

@@ -1170,8 +1170,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',

package/src/locales/zh.tsx

@@ -1142,8 +1142,8 @@ export default flat({
       apiConfig: 'API配置',
       commissionConfig: '分成配置',
       status: '状态',
-      servicePublicKey: '服务公钥',
-      servicePublicKeyDescription: '用于供应商通信认证',
+      brokerDID: '平台 DID',
+      brokerPublicKey: '平台公钥',
     },
     subscription: {
       view: '查看订阅',

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>
           </>
         );