Next.js集成Stripe支付网关遇line_items参数缺失错误求助

开发基于Next.js、Stripe Gateway和FaunaDB的电商应用时，集成支付网关遇到POST 500内部服务器错误，错误提示：Server Error - Error: The line_items parameter is required in payment mode。曾尝试移除const {cart} = JSON.parse(res.body)中的JSON.parse，但出现“end of input”错误。

相关代码 #

Checkout会话API路由代码 #

import type { NextApiRequest, NextApiResponse } from "next";
import{ useContext } from "react";
import {Context}  from "../../context/index"
const stripe = require('stripe')('-->stripe key<--');


export default async function handler(
    req: NextApiRequest,
    res: NextApiResponse
) {
    const {cart} = req.body;
  
    const lineItems = [];
    for (const key in cart){
        lineItems.push({
            price_data: {
               currency: 'usd',
               unit_amount: cart[key].price * 100,
               product_data: {
                
                name: cart[key].name,
                description: 'Comfortable cotton t-shirt',
                images: ['https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRxYCLeYPXfLyphoYaUXGiJr3lkMy_YRUl01V-Vwxe2KdUcAa0Df0GzuccAzK1JBdmXsYE&usqp=CAU'],
               },
               
            },
            quantity: cart[key].qty,
        });
    }

    const session = await stripe.checkout.sessions.create({
        
        mode: 'payment',
        success_url: 'http://localhost:3000/success',
        cancel_url: 'http://localhost:3000/cancel',
        line_items: [...lineItems],
    });
    console.log(session);

    res.status(200).json({session});
}

Context API代码 #

import { useReducer, createContext } from "react";

//initial state

const initialState = {
    cart: {},
};

const Context = createContext({});
// @ts-ignore
function cartReducer(state, action){
    switch(action.type){
        case "ADD_TO_CART":
            const item = state.cart[action.payload._id];
            return{
                ...state,
                cart: {
                    ...state.cart,
                    [action.payload._id] : item ? {
                        ...item,
                        qty: item.qty + 1,
                    } : {
                        ...action.payload,
                        qty: 1,
                    }
                }
            }
        case "REMOVE_FROM_CART":
            let newCart = {...state.cart};
            delete newCart[action.payload._id];
            return {
                ...state,
                cart: newCart,
            }
            default:
                return state;

    }
}

//context provider
// @ts-ignore
const Provider = ({children}) => {
    const [state, dispatch] = useReducer(cartReducer, initialState);
    return(
        <Context.Provider value={{state, dispatch}}>
            {children}
        </Context.Provider>
    );
}

export {Context, Provider};

问题排查与解决 #

1. 核心问题 #

错误提示line_items参数缺失，本质是后端未正确获取前端传递的cart数据，导致lineItems数组为空，最终Stripe API调用失败。

2. 具体修复步骤 #

（1）清理API路由无效代码

Checkout API是Next.js后端路由，不能使用React的useContext，直接删除以下两行无效导入：

import{ useContext } from "react";
import {Context}  from "../../context/index"

（2）确保前端正确传递cart数据

前端调用API时，必须以JSON格式发送cart数据，示例代码：

// 前端结账按钮点击事件示例
const handleCheckout = async () => {
  const response = await fetch('/api/checkout', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({ cart: state.cart }), // 传递完整cart对象
  });
  const data = await response.json();
  window.location.href = data.session.url; // 跳转到Stripe结账页
};

（3）后端添加数据校验与错误捕获

在创建Stripe会话前，校验cart有效性，同时捕获Stripe API错误：

export default async function handler(
    req: NextApiRequest,
    res: NextApiResponse
) {
    // 校验请求方法
    if (req.method !== 'POST') {
        return res.status(405).json({ error: 'Method Not Allowed' });
    }

    const { cart } = req.body;
  
    // 校验cart是否存在且非空
    if (!cart || Object.keys(cart).length === 0) {
        return res.status(400).json({ error: 'Cart is empty' });
    }

    const lineItems = [];
    for (const key in cart){
        const item = cart[key];
        // 校验商品必要字段
        if (!item.price || !item.name || !item.qty) {
            return res.status(400).json({ error: 'Invalid cart item data' });
        }
        lineItems.push({
            price_data: {
               currency: 'usd',
               unit_amount: Math.round(item.price * 100), // 确保金额为整数
               product_data: {
                name: item.name,
                description: item.description || 'Comfortable cotton t-shirt', // 动态使用商品描述
                images: [item.image || 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRxYCLeYPXfLyphoYaUXGiJr3lkMy_YRUl01V-Vwxe2KdUcAa0Df0GzuccAzK1JBdmXsYE&usqp=CAU'],
               },
            },
            quantity: item.qty,
        });
    }

    try {
        const session = await stripe.checkout.sessions.create({
            mode: 'payment',
            success_url: 'http://localhost:3000/success',
            cancel_url: 'http://localhost:3000/cancel',
            line_items: lineItems, // 直接传递数组即可
        });
        res.status(200).json({session});
    } catch (error) {
        // 返回错误信息便于调试
        res.status(500).json({ error: error.message });
    }
}

（4）解决“end of input”错误

该错误源于前端未正确发送请求体，或后端错误解析请求体。确保：

• 前端请求的Content-Type设置为application/json
• 前端用JSON.stringify处理请求体，传递有效JSON
• 后端无需手动调用JSON.parse(req.body)，Next.js会自动解析JSON格式请求体到req.body中

3. 调试建议 #

• 在API路由中添加console.log(req.body)，查看实际接收的cart数据
• 确认Stripe密钥为测试密钥（sk_test_xxx）且配置正确
• 查看Stripe Dashboard日志，获取更详细的错误信息

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