Error in use-shopping-cart/examples/gatsby

[amreda]

I get the following errors whenever calling addItem(), redirectToCheckout(), and clearCart() as used in the example code:

A non-serializable value was detected in the state, in the path: `stripe`. Value: Promise {<fulfilled>: e} 
Take a look at the reducer(s) handling this action type: cart/addItem.
(See https://redux.js.org/faq/organizing-state#can-i-put-functions-promises-or-other-non-serializable-items-in-my-store-state)

react.es.js:351 Uncaught (in promise) PropertyTypeError: Invalid value with type "Promise" was received for stripe. Valid type for stripe is "string".
    at eval (react.es.js:414)
    at eval (redux-toolkit.esm.js:386)
    at eval (index.js:11)
    at eval (redux-toolkit.esm.js:314)
    at eval (redux.js:546)
    at onClick (CartOverview.js:40)
    at HTMLUnknownElement.callCallback (react-dom.development.js:3945)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:3994)
    at invokeGuardedCallback (react-dom.development.js:4056)
    at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:4070)

[abejfehr]

The docs look like they're out of date, stripe now expects the stripe key instead of the stripe promise

[amreda]

Exactly. The example is out of date. For anyone getting the same error, pass the following values to CartProvider :

<CartProvider
    mode="payment"
    cartMode="client-only"
    stripe={YOUR_STRIPE_API_KEY_GOES_HERE}
    successUrl="stripe.com"
    cancelUrl="twitter.com/dayhaysoos"
    currency="USD"
    allowedCountries={['US', 'GB', 'CA']}
    billingAddressCollection={true}
  >

You no longer need const stripePromise = loadStripe(process.env.GATSBY_STRIPE_PUBLISHABLE_KEY)