如何在调用Stripe结账API时额外传递收货地址数据？

嘿，我看你已经把基础的Stripe结账流程跑通了，现在想额外传递收货地址对吧？其实很简单，咱们一步步来改：

第一步：修改前端请求体（page.jsx） #

你已经定义了包含cartDetails和shippingAddress的requestBody，但之前的请求只传了cartDetails，先把请求体改成完整的对象，顺便加上请求头确保后端能正确解析JSON：

async function onCheckout() {
  setLoading(true);
  const response = await fetch("/api/checkout", {
    method: "POST",
    body: JSON.stringify(requestBody), // 改成完整的请求对象
    headers: {
      "Content-Type": "application/json", // 显式声明JSON格式，避免解析失败
    },
  });
  const data = await response.json();
  const result = await redirectToCheckout(data.id);
  if (result?.error) {
    console.error(result);
  }
  setLoading(false);
}

第二步：后端接收并处理地址数据（route.js） #

现在后端需要解析包含两个属性的请求体，这里给你两种常见的处理方式：

选项1：预填Stripe结账页面的收货地址

如果想让用户进入Stripe结账页时，收货地址已经自动填好，可以在创建会话时把地址传入customer_details字段：

export async function POST(request) {
  // 解析请求体，同时拿到购物车和地址数据
  const { cartDetails, shippingAddress } = await request.json();

  const lineItems = validateCartItems(inventory, cartDetails);
  const origin = request.headers.get("origin");

  const session = await stripe.checkout.sessions.create({
    submit_type: "pay",
    mode: "payment",
    payment_method_types: ["card"],
    line_items: lineItems,
    shipping_address_collection: {
      allowed_countries: ["US"],
    },
    shipping_options: [
      {
        shipping_rate: "shr_1Nlx6dJWKRwaU5FYLj34H9wO",
      },
    ],
    billing_address_collection: "auto",
    // 新增：预填收货地址到Stripe页面
    customer_details: {
      name: shippingAddress.name,
      address: {
        line1: shippingAddress.street,
        city: shippingAddress.city,
        // 如果你的地址包含州、邮编、国家，记得补充对应字段，比如state、postal_code、country
      },
    },
    success_url: `${origin}/success?session_id={CHECKOUT_SESSION_ID}`,
    cancel_url: `${origin}/cart`,
  });

  return NextResponse.json(session);
}

选项2：自行保存收货地址（比如存入数据库）

如果不需要预填到Stripe页面，只是想把地址留存下来自己使用，可以在创建Stripe会话前，把地址写入你的数据库：

export async function POST(request) {
  const { cartDetails, shippingAddress } = await request.json();

  // 这里添加地址入库逻辑，比如用Prisma/MySQL等工具
  // await db.shippingAddress.create({
  //   data: {
  //     name: shippingAddress.name,
  //     street: shippingAddress.street,
  //     city: shippingAddress.city,
  //     // 可关联用户ID、订单ID等字段
  //   }
  // });

  const lineItems = validateCartItems(inventory, cartDetails);
  const origin = request.headers.get("origin");

  // 剩下的Stripe会话创建代码保持不变
  const session = await stripe.checkout.sessions.create({
    // ... 原有配置
  });

  return NextResponse.json(session);
}

最后验证 #

改完后可以打开浏览器开发者工具的Network标签，查看请求体是否同时包含cartDetails和shippingAddress；如果是预填地址的情况，进入Stripe结账页就能看到地址已经自动填充好了。

备注：内容来源于stack exchange，提问作者user21159731