Next.js中向Stripe发送POST请求传递购物车多商品生成结算会话

解决方案 #

你需要依次修改前端请求逻辑和后端API处理逻辑，步骤如下：

第一步：修改前端POST请求代码 #

fetch的body字段不能直接传入JS对象，必须序列化为JSON字符串后再提交，直接把你的cart状态变量放到请求体中即可：

const stripeLoader = loadStripe(props.pk);
const redirectToCheckout = async () => {
  const stripeClient = await stripeLoader;

  const { sessionId } = await fetch('api/checkout_sessions', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    // 序列化cart到请求体
    body : JSON.stringify({ cart })
  }).then((res) => res.json());

  stripeClient.redirectToCheckout({ sessionId });
};

第二步：修改后端API Handler代码 #

首先从请求体中拿到cart数组，再把它映射为Stripe API要求的line_items格式即可：

import Stripe from 'stripe';

const stripe = new Stripe(process.env.STRIPE_SECRET_KEY);

export default async function handler(req, res) {
  if (req.method !== 'POST') {
    return res.status(405).send({
      error: 'Method need to be POST',
    });
  }
  const domainURL = 'http://localhost:3000';
  // 从请求体中取出cart数组
  const { cart } = req.body;

  // 校验参数合法性，避免调用Stripe时报错
  if (!cart || !Array.isArray(cart) || cart.length === 0) {
    return res.status(400).send({
      error: 'Invalid cart data'
    })
  }

  const pmTypes = ['card'];
  const session = await stripe.checkout.sessions.create({
    payment_method_types: pmTypes,
    mode: 'payment',
    locale: 'en',
    // 把cart数组映射为Stripe要求的line_items格式
    line_items: cart.map(item => ({
      // 这里默认你cart里的id是Stripe后台创建的Price ID，对应关系不对可以自行调整
      price: item.id,
      quantity: item.amount
    })),
    success_url: `${domainURL}/success?session_id={CHECKOUT_SESSION_ID}`,
    cancel_url: `${domainURL}/cart`,
  });

  res.send({
    sessionId: session.id,
  });
}

注意事项 #

• 确保你cart数组中存储的id是Stripe后台对应商品的Price ID，而非你本地数据库的商品ID，否则Stripe接口会返回报错
• 如果你的商品是动态创建的，没有提前在Stripe后台创建Price，可以改用price_data参数自定义商品信息，不需要提前上传到Stripe
• Next.js的API路由默认会自动解析application/json类型的请求体，不需要额外加解析中间件

内容的提问来源于stack exchange，提问作者Lorenz Mueller