如何在Next.js中将商品图片传递至Stripe结账页面？

问题根源 #

你当前是通过后端创建Session，前端用sessionId跳转的方式，这种情况下前端不能再通过redirectToCheckout传递lineItems/items参数——这些参数只适用于已废弃的前端直接创建Session的旧用法，所以才会触发参数错误。商品图片必须在后端创建Checkout Session的阶段配置，前端跳转时仅需使用生成好的sessionId即可。

具体解决步骤 #

1. 后端配置商品图片
   在Next.js的API路由（比如pages/api/create-stripe-session.js）中，创建Stripe Session时，需要在line_items里指定商品图片：

• 若商品已在Stripe后台创建Product对象，直接关联product字段即可（需提前在Product中上传图片）；
• 若动态生成商品，就在price_data.product_data中添加images字段，值为图片的公网可访问URL数组。

示例代码（Node.js）：

import Stripe from 'stripe';

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

export default async function handler(req, res) {
  if (req.method === 'GET') {
    const { amount, roomName, roomImageUrl } = req.query;

    const session = await stripe.checkout.sessions.create({
      payment_method_types: ['card'],
      line_items: [
        {
          price_data: {
            currency: 'usd',
            product_data: {
              name: roomName,
              images: [roomImageUrl], // 传入商品图片的公网URL
            },
            unit_amount: parseInt(amount) * 100, // Stripe金额单位为分
          },
          quantity: 1,
        },
      ],
      mode: 'payment',
      success_url: `${req.headers.origin}/success`,
      cancel_url: `${req.headers.origin}/cancel`,
    });

    res.status(200).json({ id: session.id });
  } else {
    res.setHeader('Allow', 'GET');
    res.status(405).end('Method Not Allowed');
  }
}

2. 前端传递必要参数
   调用后端接口时，把商品名称、图片URL等参数传过去，跳转逻辑无需修改：

const bookingRoom = async (id, pricePerNight, roomName, roomImageUrl) => {  
  try {
    const amount = pricePerNight; // 根据实际计价逻辑调整
    const link = '/api/create-stripe-session';
    // 将商品名称、图片URL传给后端
    const { data } = await axios.get(link, { params: { amount, roomName, roomImageUrl } });
    const stripe = await loadStripe();
    stripe.redirectToCheckout({ sessionId: data.id });
  } catch (error) {
    console.error(error);
  }
};

补充说明 #

你查阅的是已废弃的redirect_to_checkout文档，Stripe目前推荐后端创建Checkout Session的方式，既可以避免前端篡改金额等安全问题，也能完整配置商品的所有信息（包括图片、描述等）。前端仅需拿到后端生成的sessionId，调用redirectToCheckout完成跳转即可。

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