Stripe Checkout does not redirect to checkout page Express - express

Question

I am trying to use the Stripe prebuilt Checkout page to capture the payment details of an user following this documentation.
I think I wrote the code right, but somehow my app does not redirect the user to the Stripe checkout page. My code is as follows:
In my Express backend:
router.get("/create-check-out", async (req, res, next) => {
const session = await stripe.checkout.sessions.create({
payment_method_types: ['card'],
mode: 'setup',
customer: req.body.id,
success_url: 'http://localhost:5000/ll_profile?session_id={CHECKOUT_SESSION_ID}',
cancel_url: 'http://localhost:5000/ll_profile',
});
res.send (session.id);
});
On my JavaScript client-side:
$.get("/create-check-out", { id: stripe_customer_id}, async (sessionId) => {
console.log(sessionId)
stripe.redirectToCheckout({
sessionId: sessionId,
name: "Yugue"
}).then(function(result) {
console.log(result)
});
The console log does not show sessionId nor result.
The problem is after the get request is sent, the web URL becomes: http://localhost:5000/ll_profile?name= from http://localhost:5000/ll_profile (the URL under which all the codes above live), and the app is stuck at the same page without any redirecting action. I thought that it is supposed to redirect to the Stripe built-in checkout page like this:
What did I do wrong?

Answer 1

Most likely you've got the button inside a <form> element and there is competition between the Checkout redirect and the form submit action. You should either not use a form, or otherwise ensure the click handler related to Checkout is using preventDefault().
If that's not the case, please share more context of your DOM structure and the click handler.