Stripe AxiosError: Request failed with status code 500 - reactjs

Question

I am trying for implement Stripe checkout in NextJS following this example.
But I always get this error:
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 (tried to do it the way on doc page but get same relult):
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
})
I seem to me following ths Stipe formating but just keep on getting this unhelpfull error. Does anybody have a clue what it means?

Answer 1

The error seems to be coming from your own server and not Stripe's API. In your create-checkout-session.js file, the scope of the async function seem to end prior to you running res.status(xxx).json(...).
In this case, session variable is out of the scope of your res.status(...).json(...) function. Additionally, I suspect this code is sending the 500 res.status(err.statusCode || 500).json(err.message); as it doesn't know what err variable is.
Can you try fixing the scope as well as defining the err variable and see if that makes a difference?

Answer 2

In case this helps someone.
It turns out the Stripe api version I was using had different formatting requirements, so that description needs to be inside product_data array.
I find Stripe documentation just so hard to navigate. I don't get why not just use a flat array for all items and why keep nesting - renesting the items? :(

Answer 3

The stripe-session-checkout.js images
Remove the shipping-rates and the payment-method-types
It worked for me