Redirect To Checkout In Reactjs

I am trying to implement the Stripe function 'redirect to checkout' in ReactJS. I have been looking around and there is no package that seems to help to do it. const stripe = Str

Solution 1:

After I read the new stripe-js docs https://stripe.com/docs/stripe-js/react I found this might be useful for you

Instead using stripe, install @stripe/stripe-js then the job can be done by

import { loadStripe } from"@stripe/stripe-js";

...

const stripePromise = loadStripe(
    "pk_.........."
  );

const stripe = await stripePromise;

stripe.redirectToCheckout({
      ...
    })

Solution 2:

I found out how ti make it work.

Basically as per the documentation, there is the need to import the Stripe script in public/index.html

stripe.redirectToCheckout(...)

can be simply put into the onClick of a button. The thing that is really not clear in the docs, and that can mislead newbies like me, lies in setting the public key:

const stripe = Stripe('key');

doesn't work, because the script is not found at compile time. This can be solved by using:

const stripe = window.Stripe('key');

This worked for me.