使用Stripe Connect账户创建支付时如何添加更多字段？

你的问题在于**defaultValues仅用于预填已有字段的值，无法控制字段是否显示**。要让Payment Element展示姓名、邮箱等额外账单字段，需要通过fields配置项明确指定要显示的字段，同时配合后端Payment Intent的正确设置。

核心解决方案步骤 #

1. 前端：配置Payment Element的fields选项 #

在创建Payment Element时，添加fields.billingDetails配置，指定需要显示的字段（比如name、email、phone等），同时可以保留defaultValues来预填默认值。

2. 后端：创建Payment Intent时的必要设置 #

后端在创建Payment Intent（针对Connect账户，需携带Stripe-Account请求头）时，需要满足以下条件之一：

• 设置setup_future_usage: 'off_session'，告知Stripe需收集账单信息用于后续支付
• 或你的支付场景本身要求收集账单信息（如地区法规要求、特定支付方式强制要求）

修改后的前端代码示例 #

async function initialize() {
  const { clientSecret } = await fetch("/stripe/acceptPayment", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ data }),
  }).then((r) => r.json());

  elements = stripe.elements({ clientSecret });

  const billingDetails = {
    name: "messi lionel",
    email: "example@test.com" // 可选：预填邮箱
  }

  const paymentElementOptions = {
    layout: "tabs",
    // 关键：配置要显示的账单字段
    fields: {
      billingDetails: {
        name: "always", // 强制显示姓名字段，可选值：always/auto/never
        email: "always", // 强制显示邮箱字段
        // 可选：添加phone、address等其他字段
        // phone: "always",
        // address: {
        //   line1: "always",
        //   city: "always",
        //   postalCode: "always"
        // }
      }
    },
    // 预填字段值（可选）
    defaultValues: {
      billingDetails: billingDetails
    }
  };

  const paymentElement = elements.create("payment", paymentElementOptions);
  paymentElement.mount("#payment-element");
}

额外注意事项 #

• 字段显示规则：always表示强制显示，auto由Stripe根据支付方式/地区自动决定，never隐藏字段
• Connect账户权限：确保平台账户有足够权限操作目标Connect账户，后端创建Payment Intent时必须携带Stripe-Account请求头（值为目标Connect账户ID）
• 支付方式差异：部分支付方式（如Apple Pay）可能自动填充账单信息，此时配置的字段可能被隐藏或预填
• 后端验证：若需确保用户必填这些字段，可在后端校验Payment Intent返回的payment_method.billing_details是否完整

内容的提问来源于stack exchange，提问作者Hieu Dep Trai