如何在Stripe结账会话UI中展示元数据？

开发者阿泽

2026-7-25

解决Stripe结账会话UI展示元数据的问题

Stripe Checkout的metadata字段仅用于后台存储，不会自动渲染在托管的结账页面UI上。要在UI中展示元数据内容，你需要将元数据整合到Stripe允许展示的字段中，最直接的方式是利用产品的description字段。

具体实现步骤

将元数据数组格式化为用户易读的字符串（比如列表形式）
把格式化后的内容追加到产品的description字段中，同时保留原metadata字段用于后台存储

修改后的代码示例

// 根据你的元数据数组结构，格式化为易读的展示文本
// 假设data是类似 [{name: "端点1", url: "xxx"}, {name: "端点2", url: "xxx"}] 的数组
const metadataDisplay = data.map((item, index) => `${index + 1}. ${item.name}: ${item.url}`).join('\n');

const sessionData = {
  payment_method_types: ["card"],
  shipping_address_collection: {
    allowed_countries: ["US", "CA", "KE"],
  },
  line_items: [
    {
      price_data: {
        currency: "USD",
        product_data: {
          name: title,
          // 合并原有描述和元数据展示内容
          description: `${description}\n\n详细信息:\n${metadataDisplay}`,
          metadata: {
            endpoints: JSON.stringify(data), // 保留后台存储的原始元数据
          },
        },
        unit_amount: totalPrice.toFixed(0) * 100,
      },
      quantity: 1,
    },
  ],
  mode: "payment",
  customer: customer.id,
  success_url: `${getBaseClientUrl}/stripe/success`,
  cancel_url: `${getBaseClientUrl}/stripe/cancel`,
};

const session = await createCheckoutSession(sessionData);