Good morning
I am receiving this error message and I don’t understand what I should correct.
Do you have an idea ?
Navbars.js
import { BiShoppingBag, BiUser } from "react-icons/bi";
import { UserButton, useAuth } from "@clerk/nextjs";
export default function Navbar({ cart, onCartClick }) {
const { isSignedIn } = useAuth();
// Show Cart Quantity With Cart Icon
const cartQuantity = cart.reduce((acc, item) => acc + item.quantity, 0)
return (
<nav className="bg-white p-3 md:p-4 mt-4 flex justify-between items-center rounded-lg">
<a href="/" className="bg-gradient-to-tr from-orange-600 via-orange-700 to-orange-800 bg-clip-text text-transparent font-semibold text-2xl"
>Store
</a>
<div className="flex items-center space-x-4">
{/* Cart Icon */}
<div className="relative">
<button onClick={onCartClick} className="text-black pr-2">
<BiShoppingBag size={24} className="inline" />
{cartQuantity > 0 && <span className="absolute top-[-10px] right-[-4px] bg-orange-700 text-white text-xs px-2 py-1 rounded-full">{cartQuantity}</span>}
</button>
</div>
{/* User Button */}
{isSignedIn ? (
<UserButton afterSignOutUrl="/" />
) : (
<button onClick={() => (window.location.href = "/sign-in")} className="text-black">
<BiUser size={22} className="inline" />
</button>
)}
</div>
</nav>
);
}
create-checkout-session.js
import Stripe from "stripe";
const stripe = new Stripe(process.env.STRIPE_SECRET_KEY);
export default async function handler(req, res) {
if (req.method === "POST") {
try {
const { cart } = req.body;
const baseUrl = process.env.NEXT_PUBLIC_BASE_URL
const line_items = cart.map((item) => ({
price_data: {
currency: "eur",
product_data: {
name: item.name,
images: [`${item.image}`],
},
unit_amount: item.price * 100,
},
quantity: item.quantity,
}))
const session = await stripe.checkout.sessions.create({
payment_method_types: ["card"],
line_items,
mode: "payment",
shipping_address_collection: "required",
success_url: `${baseUrl}/success?session_id={CHECKOUT_SESSION_ID}`,
cancel_url: `${baseUrl}/cancel`,
})
res.status(200).json({ id: session.id });
} catch (error) {
console.error("error creating checkout session", error);
res.status(500).json({ error: error.message })
}
} else {
res.status(405).json({ error: "Method not allowed" })
}
}
