NextJS集成Stripe Checkout时遇AxiosError 500错误求助

我按照Stripe官方快速开始示例在NextJS中实现Stripe Checkout，但始终遇到如下错误：

以下是相关代码：

checkout.js代码 #

import React from "react";
import Header from "../components/Header";
import Image from "next/image";
import { selectItems, selectTotal } from "../slices/basketSlice";

import { useSelector } from "react-redux";
import CheckoutProduct from "../components/CheckoutProduct";
import Currency from "react-currency-formatter";
import { useSession } from "next-auth/react";
import {loadStripe} from '@stripe/stripe-js';

import axios from 'axios';
const stripePromise = loadStripe(process.env.stripe_public_key)

function Checkout() {
  const items = useSelector(selectItems);
  const total = useSelector(selectTotal);
  const { data: session } = useSession();

  const CreateCheckoutSession = async () => {
    const stripe = await stripePromise

    // create checkout session
    const checkoutSession = await axios.post("/api/create-checkout-session", {
      items : items,
      email: session.user.email,
    })
    //redirect user to Stripe checkout
    const result = await stripe.redirectToCheckout({
        sessionId: checkoutSession.data.id
    })

    if (result.error) {
      alert(result.error.message)
    }
  }

create-checkout-session.js代码 #

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


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

    // console.log(items)
    //console.log(email)
    // console.log(process.env.STRIPE_SECRET_KEY)

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


    const session = await stripe.checkout.sessions.create({
        payment_method_types: ['card'],
        mode: 'payment',
        shipping_rates: ['shr_1MFhHmL1z8EG1fYglFH9EBP7'],
        shipping_address_collection: {
            allowed_countries: ['GB', 'US', 'CA']
        },
        line_items: transformedItems,
        success_url: `${pocess.env.HOST}/success`,
        cancel_url: `${process.env.HOST}/checkout`,
        metadata: {
            email,
            images: JSON.stringify(items.map(item => item.image))
        }
    })
}


res.status(err.statusCode || 500).json(err.message);


res.status(200).json({
    id: session.id
})

我认为自己是按照Stripe的格式要求实现的，但一直收到这个不明确的错误，有人知道这是什么原因吗？

问题排查与解决 #

• 环境变量拼写错误：在create-checkout-session.js的success_url里，process被拼成了pocess，导致环境变量读取失败，生成无效URL，Stripe会拒绝创建会话。
• API路由响应逻辑错误：res.status(...)代码写在了export default async函数外部，永远不会被执行；同时缺少错误捕获逻辑，出错时无法返回有效错误信息。
• 客户端环境变量配置问题：NextJS客户端代码中的环境变量需要以NEXT_PUBLIC_开头，否则无法读取到公钥，需把stripe_public_key改为NEXT_PUBLIC_STRIPE_PUBLIC_KEY。

修正后的create-checkout-session.js示例：

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

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

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

    const session = await stripe.checkout.sessions.create({
      payment_method_types: ['card'],
      mode: 'payment',
      shipping_rates: ['shr_1MFhHmL1z8EG1fYglFH9EBP7'],
      shipping_address_collection: {
        allowed_countries: ['GB', 'US', 'CA']
      },
      line_items: transformedItems,
      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 })
  } catch (err) {
    res.status(err.statusCode || 500).json({ message: err.message })
  }
}

客户端代码修改公钥变量：

// checkout.js中
const stripePromise = loadStripe(process.env.NEXT_PUBLIC_STRIPE_PUBLIC_KEY)

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