Next.js电商Stripe集成：自定义字段优化与规格库存管控问题

我正在使用Next.js开发电商网站，采用Stripe实现结账功能。近期发现Stripe支持自定义字段，可添加如衣物尺码（小、中、大）这类选项，但当前存在两个问题：

• 尺码选项仅在Stripe结账会话（checkout session）中显示，用户需在结账环节选择尺码而非产品页面，体验怪异且不符合直觉；
• 无法对每个尺码选项设置库存限制，例如小码T恤100件、中码30件，需在应用中管控该信息，咨询是否可通过Stripe实现，或是否受限于工具。

当前我的Stripe结账会话代码如下：

const checkoutSession = await stripe.checkout.sessions.create({
    success_url: successUrl,
    cancel_url: cancelUrl,
    invoice_creation: {
      enabled: true,
    },
    payment_method_types: ["card", "boleto"],
    shipping_address_collection: {
      allowed_countries: ["BR"],
    },
    phone_number_collection: {
      enabled: true,
    },
    custom_fields: [
      {
        key: "size",
        label: {
          custom: "Size",
          type: "custom",
        },
        dropdown: {
          // Include up to 200 options as required
          options: [
            {
              label: "Small",
              value: "small",
            },
          ],
        },
        type: "dropdown",
      },
    ],
    mode: "payment",
    line_items: products.map(({ prod, quantity }) => ({
      price: prod.defaultPriceId,
      quantity: quantity,
    })),
  });

问题1：尺码选择环节优化 #

Stripe Checkout的自定义字段是用来收集结账时的补充信息（如特殊备注），并非为产品变体选择设计。正确的优化方式是：

1. 在产品页面添加尺码选择控件，让用户提前选定尺码；
2. 为每个尺码的商品创建独立的Stripe Price对象（可归属同一个Product），每个尺码对应唯一的Price ID；
3. 用户选好尺码后，将对应Price ID传入结账会话的line_items中，移除custom_fields里的尺码选项。

问题2：尺码库存管控 #

Stripe支持直接对Price对象设置库存限制，无需在应用层单独管控，前提是每个尺码对应独立的Price：

• 创建Price时，配置inventory参数，设置type: "finite"并指定quantity数值（如小码设100、中码设30）；
• 当库存耗尽时，Stripe会自动阻止该Price被用于创建结账会话，避免超卖。

修改后的代码示例 #

假设用户在产品页已选好尺码，对应Price ID为selectedSizePriceId：

const checkoutSession = await stripe.checkout.sessions.create({
    success_url: successUrl,
    cancel_url: cancelUrl,
    invoice_creation: {
      enabled: true,
    },
    payment_method_types: ["card", "boleto"],
    shipping_address_collection: {
      allowed_countries: ["BR"],
    },
    phone_number_collection: {
      enabled: true,
    },
    // 移除尺码自定义字段
    mode: "payment",
    line_items: products.map(({ quantity }) => ({
      price: selectedSizePriceId, // 使用用户选中尺码对应的Price ID
      quantity: quantity,
    })),
  });

内容的提问来源于stack exchange，提问作者Amon Fanticelli