Unhandled Rejection (TypeError): stripe.redirectToCheckout is not a function

Question

I am trying to implement Stripe checkout for a website. Unfortunately, the Stripe docs are very incomplete. I have:

import React from 'react';
import { loadStripe } from '@stripe/stripe-js';

const stripe = loadStripe('pk_test_key');

const handleClick = async (event) => {
  stripe.redirectToCheckout({
    lineItems: [
      {price: 'price_something', quantity: 1},
    ],
    mode: 'subscription',
    successUrl: 'https://example.com/success?session_id={CHECKOUT_SESSION_ID}',
    cancelUrl: 'https://example.com/cancel',
  }).then(function(result){
    alert(result);
  });
};

export default function Stripe(){
  return (
    <button role="link" onClick={handleClick}>
      Checkout
    </button>
  );
}

I click the button and I get an error: Unhandled Rejection (TypeError): stripe.redirectToCheckout is not a function

My key is correct one but I cannot find any information in their docs or anywhere else to solve this. Thanks!

Answer 1

From my understanding that loadStripe returns a Promise so try to wait for it resolved:

const handleClick = async (event) => {
  const stripe = await loadStripe('pk_test_key');

  stripe.redirectToCheckout({
    // ...
  })
};

Answer 2

it help check that you are using proper await keyword as I had missed that and wondering for 2 hours where's the mistake