gshow8 shac
gshow8 shac

Reputation: 421

Stripe Checkout does not redirect to checkout page Express

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: enter image description here

What did I do wrong?

Upvotes: 2

Views: 3246

Answers (1)

Brendan Moore
Brendan Moore

Reputation: 1306

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.

Upvotes: 3

Related Questions