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 = 
Stripe('key');

stripe.redirectToCheckout({
  items: [
    // Replace with the ID of your SKU
    {sku: 'sku_123', quantity: 1}
  ],
  successUrl: '',
  cancelUrl: '',
}).then(({error}) => {
  // If `redirectToCheckout` fails due to a browser or 
network
  // error, display the localized error message to your 
customer
  // using `error.message`.
});

This is where I got this source code:

StripeJS only seems to support the standard checkout that does not receive the product SKU as the parameter

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 = 
Stripe('key');

stripe.redirectToCheckout({
  items: [
    // Replace with the ID of your SKU
    {sku: 'sku_123', quantity: 1}
  ],
  successUrl: 'https://your-website.com/success',
  cancelUrl: 'https://your-website.com/canceled',
}).then(({error}) => {
  // If `redirectToCheckout` fails due to a browser or 
network
  // error, display the localized error message to your 
customer
  // using `error.message`.
});

This is where I got this source code: https://stripe.com/docs/stripe-js/reference#stripe-redirect-to-checkout

StripeJS only seems to support the standard checkout that does not receive the product SKU as the parameter

• javascript
• reactjs
• stripe-payments

• are you doing this on the frontend? O.o – John Ruddell Commented Jun 11, 2019 at 21:25
• I am a newbie to react. I was trying to find the easiest way to sell a subscription..stripe.com/docs/payments/checkout/client – Andrea Grippi Commented Jun 11, 2019 at 21:28
• 3 well, this isn't a React thing. React is a frontend library / framework. Stripe is a payment system, there is js support but its meant for a nodejs backend. I would recommend you set up a backend to do the payment stuff, and apis to talk to that backend. Or else someone can inspect your frontend code and steal stuff like access keys – John Ruddell Commented Jun 11, 2019 at 21:30
• Even the server integration has that method: stripe.com/docs/payments/checkout/server#create-subscriptions I need to call that stripe.redirectToCheckout from React somehow.. – Andrea Grippi Commented Jun 12, 2019 at 8:20

2 Answers 2

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({
      ...
    })

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.