如何在Stripe嵌入式结账中预填邮箱且允许用户编辑？

你遇到的问题根源在于setCustomerEmail的作用是将Checkout Session与特定邮箱绑定（视为已验证的客户身份），因此字段会被锁定不可编辑。要实现预填可编辑的邮箱默认值，需要改用Stripe Embedded Checkout的表单预填功能，通过前端配置传递默认值，而非后端设置customer_email参数。

步骤1：修改后端代码（移除setCustomerEmail） #

后端不再设置customer_email，因为这个参数会锁定邮箱字段：

public Session createCheckoutSession(CreateCheckoutSessionParams createCheckoutSessionParams) {
    return Session.create(SessionCreateParams.builder()
            .setUiMode(SessionCreateParams.UiMode.EMBEDDED)
            // 移除setCustomerEmail调用
            // other params...
            .build());
}

步骤2：前端配置预填邮箱 #

在Next.js的EmbeddedCheckoutProvider中，通过options传入prefilledCustomer对象，设置预填的邮箱地址。这个值会作为表单默认值，同时允许用户编辑：

// 假设你已获取到用户的建议邮箱地址，比如从上下文或API获取
const userEmail = "user@example.com";

const options = {
  clientSecret: "你的Session客户端密钥",
  prefilledCustomer: {
    email: userEmail,
  },
};

<EmbeddedCheckoutProvider stripe={stripePromise} options={options}>
  <EmbeddedCheckout/>
</EmbeddedCheckoutProvider>

原理说明 #

• setCustomerEmail：用于关联已存在的Stripe客户或创建新客户，邮箱字段会被标记为已验证，因此不可编辑。
• prefilledCustomer：属于表单预填配置，仅提供默认输入值，不绑定客户身份，用户可以自由修改邮箱内容，完全符合你的需求。

内容的提问来源于stack exchange，提问作者Gustavo Steinmetz