checkout.js页面包含所有的代码，我不知道缺少什么，它给出了axios错误
import React from 'react';
import Head from "next/head";
import Header from "../components/Header";
import Image from 'next/image';
import { useSelector } from 'react-redux';
import { selectItems } from '../slices/basketSlice';
import CheckoutProduct from '../components/CheckoutProduct';
import Currency from 'react-currency-formatter';
import { useSession } from "next-auth/react"
import { selectTotal } from '../slices/basketSlice';
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;
// Call the backend to create checkoutsession
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)
};
}
return (
<div className='bg-gray-100'>
<Head>
<title>Checkout</title>
</Head>
<Header/>
<main className='lg:flex max-w-screen-2xl mx-auto'>
<div className='flex-grow m-5 shadow-sm'>
<Image
src='https://links.papareact.com/dyz'
width={1020}
height={250}
objectFit='contain'
className='cursor-pointer'
alt='image'
></Image>
<div className='flex flex-col p-5 space-y-10 bg-white'>
<h1 className='text-3xl border-b pb-4 font-bold'>
{items.length === 0 ? 'Your Basket is Empty' : 'Shopping Basket'}
</h1>
{items.map((item, i) => (
<CheckoutProduct
key={i}
id={item.id}
title={item.title}
rating={item.rating}
price={item.price}
description={item.description}
category={item.category}
image={item.image}
hasPrime={item.hasPrime}
>
</CheckoutProduct>
))}
</div>
</div>
<div className='flex flex-col bg-white p-10 shadow-md'>
{items.length > 0 && (
<>
<h2 className='whitespace-nowrap'>Subtotal ({ items.length } items):
<span className='font-bold'>
<Currency quantity={total} currency='USD'></Currency>
</span>
</h2>
<button role='link'
onClick={createCheckoutSession}
disabled={!session}
className={`btn-1 mt-2 ${!session && 'btn-2 cursor-not-allowed'}`}>
{!session ? 'Sign In to Checkout' : 'Proceed to Checkout'}
</button>
</>
)}
</div>
</main>
</div>
)
}
export default Checkoutap/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 );
const transformedItems = items.map((item) => ({
price_data: {
currency: 'usd',
unit_amount: item.price * 100,
product_data: {
name: item.title,
images: [item.image]
},
},
description: item.description,
quantity: 1,
}));
const session = await stripe.checkout.sessions.create({
payment_method_types: ['card'],
shipping_address_collection: {
allowed_countries: ['US', 'CA', 'GB'],
},
// shipping_rates: ['3.58'],
line_items: transformedItems,
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 })
};
1条答案
按热度按时间hs1rzwqc1#
js将自动返回一个500的状态码，用于一个意外的应用程序错误。
您向
api/create-checkout-session.js发出请求。这里的代码失败了，所以next.js返回了500个代码。该代码应该在try/catch块中，以便您可以在catch块中看到确切的错误。你应该在catch块中使用console.error(error)。检查https://stripe.com/docs/api/checkout/sessions/create文档以传递正确的参数。最近更改的那些参数确保您使用正确版本的stripe。
还要确保你传递的是正确的环境变量。console.log所有这些，看看它们是否正确