I am trying to build a learning eCommerce project with NextJS, Sanity, and Stripe. Almost the entire project is done, but I cannot seem to get the checkout to work appropriately. I get this error:
XML Parsing Error: no root element found
Location: http://localhost:3000/api/stripe
Line Number 1, Column 1
This is using a react component from @stripe/react-stripe-js which I’ve not seen in other projects (they usually use a portal instead).
User puts in card info (in this case stripe testing numbers), presses checkout and this logic fires:
const Cart = () => {
const cart = useCartStore(state => state.cart);
const removeFromCart = useCartStore(state => state.removeFromCart);
const totalItems = useCartStore(state => state.totalItems);
const cartTotal = useCartStore(state => state.cartTotal);
const handleRemoveFromCart = (productId) => { removeFromCart(productId) }
const stripe = useStripe(); const elements = useElements();
const onSubmit = async () => {
const cardElement = elements?.getElement("card");
console.log(cardElement);
try{
console.log('try is firing')
if (!stripe || !cardElement) return null;
const data = await axios.post("api/stripe", {
amount:cartTotal
})
console.log(data)
const res = await stripe?.confirmCardPayment(data?.data?.intent, {
payment_method:{
card:cardElement
}
})
const status = res?.paymentIntent?.status;
console.log(status);
} catch (error) {
console.log(error)
}
}
I can see the console.log statements just fine, so the function is working in that regard, but I just get a “no root element” error.
The client should send to the endpoint on my server file, and that should submit the information to stripe.
Here is the endpoint:
import { NextResponse } from "next/server"; import Stripe from "stripe";
const stripe = new Stripe(process.env.STRIPE_SECRET_KEY);
export async function POST(req) { console.log(stripe); const {data} = await req.json(); const {amount} = data; console.log(amount);
try { const payIntent = await stripe.paymentIntents.create({ amount:Number(amount) * 100, current: "USD" })
return NextResponse.json({status:200, intent:payIntent?.client_secret})
} catch(error) { return NextResponse.json({status:400}) } }
The API endpoint sits in api/stripe/route.js in the Next 14 app router. The call uses axios.
For some reason the 500 error does not show up in the network tab of my browser, and this seems like it maybe some sort of CORS error or blocking happening by stripe, but I really do not know. I’ve tried fixing env variables and sanity schemas, but the error still persist. I’ll be playing with postman and the dashboard in stripe now.
Here’s the github itself:
https://github.com/BDunnCode/nextjsecommerce4
It is based on this tutorial which is quite recent:
https://www.youtube.com/watch?v=hySzY3Xt0_0&t=11251s&ab_channel=CodingWithDouglas
