亚马逊克隆项目集成Stripe支付遇AxiosError及map问题求助

核心问题定位 #

后端API代码存在变量名笔误：你从req.body解构出的是items数组，但在转换商品时错误使用了item.map（单数形式），导致item未定义，触发.map方法不存在的报错，进而让前端Axios请求失败，出现Uncaught (in promise) AxiosError。

修复步骤 #

1. 修正后端API的变量名错误 #

将create-checkout-session中的item.map改为items.map，同时同步Stripe最新版本的参数要求（商品列表参数已从items改为line_items）：

const stripe = require('stripe')(process.env.STRIPE_SECRET_KEY);

export default async(req, res) => {
    const { items, email } = req.body;

    // 修正：item -> items
    const transformedItems = items.map((item) => ({
        quantity: 1,
        price_data: {
            currency: 'usd',
            unit_amount: item.price * 100,
            product_data: {
                name: item.title,
                description: item.description,
                images: [item.image]
            },
        },
    }));

    const session = await stripe.checkout.sessions.create({
        payment_method_types: ['card'],
        shipping_options: [`shr_1M2oWjIlRietTXvq5h1c8DDQ`],
        shipping_address_collection: {
            allowed_countries: ['USA']
        },
        line_items: transformedItems, // 适配Stripe新版本参数
        mode: 'payment',
        success_url: `${process.env.HOST}/success`,
        cancel_url: `${process.env.HOST}/checkout`,
        metadata: {
            email,
            images: JSON.stringify(items.map((item) => item.image))
        }
    });
    res.status(200).json({ id: session.id })
}

2. 前端添加Axios请求错误捕获 #

前端createCheckoutSession函数未处理请求失败的情况，导致Promise异常冒泡到控制台。添加try/catch捕获并提示错误：

const createCheckoutSession = async () => {
    try {
        const stripe = await stripePromise
        const checkoutSession = await axios.post('/api/create-checkout-session', {
            items: items,
            email: session.user.email
        })
        const result = await stripe.redirectToCheckout({
            sessionId: checkoutSession.data.id
        })
        if (result.error) alert(result.error.message);
    } catch (error) {
        alert('创建支付会话失败：' + (error.response?.data?.message || error.message));
        console.error('支付会话错误:', error);
    }
};

验证修复 #

1. 重启开发服务器
2. 往购物车添加商品后点击"Proceed to checkout"
3. 检查终端无报错，前端正常跳转至Stripe支付页面即可

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