RomanDEV | Stripe Developers | Page 1

pallid sphinxBOT Jan 20, 2023, 10:16 AM

#

azure burrow Jan 20, 2023, 10:18 AM

#

hi! let me think about this

high coral Jan 20, 2023, 10:26 AM

#

The underlying issue is that you're trying to assign a value to your stripePromise prop using your useState hook that doesn't match it's type defs. You need to make it typed:

useState<>(null)

Trying to think what type you need to use 🤔

#

Maybe it's just useState<Stripe | null>(null)

And: import type { Stripe } from '@stripe/stripe-js'

high coral Jan 20, 2023, 10:48 AM

#

Ok, this worked for me (just tested):

const [stripePromise, setStripePromise] = React.useState<Promise<Stripe | null>>(null)

React.useEffect(() => {
  setStripePromise(loadStripe(process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY))
}, [])

sly dirge Jan 20, 2023, 11:20 AM

#

Thanks for your response. In the tutorial we get the publishable Key from the backend. I have tried, what you have tested and null is underlined and not assignable, but the publishable Key is logged. So perhaps it works. I try it. 🙂

high coral Jan 20, 2023, 11:34 AM

#

The publishableKey issue is separate I think. loadStripe types def expects a string (https://github.com/stripe/stripe-js/blob/a3fc23bc30cc7c43c65980214762288b146a8665/types/index.d.ts#L6-L9), yet at compile time it will be undefined until your backend call resolves

GitHub

stripe-js/index.d.ts at a3fc23bc30cc7c43c65980214762288b146a8665 · ...

Loading wrapper for Stripe.js. Contribute to stripe/stripe-js development by creating an account on GitHub.

#

Eh, I don't get any type warnings with your exact code

#RomanDEV