Failed to load Stripe.js

Summary

Some of my users are getting an error thrown Failed to load Stripe.js Sadly, I can’t reproduce and I don’t have more details. My page is working perfectly fine for me and some of my colleagues.

I have js.stripe.com/v3 loaded in my head tag And loadStripe is correctly executed only once.

Here is my code:

import { useState, useEffect } from 'react'
import { loadStripe } from '@stripe/stripe-js'

const StripeJSProvider = ({ children }) => {
  const [stripe, setStripe] = useState(false)

  useEffect(() => {
    if (!stripe) {
      setStripe(loadStripe(process.env.STRIPE_KEY))
    }
  }, [stripe])

  return children({ stripe })
}

export default StripeJSProvider

And then later:

<StripeJSProvider>
      {({ stripe }) =>
        stripe ? (
          <Elements stripe={stripe}>
            <MyComponent... />
          </Elements>
        ) : (
          <PageLoader />
        )
      }
    </StripeJSProvider>

Other information

According to sentry report, it looks like it’s happening only on Firefox.

Thanks for your help.

[langer]

For anyone who may still be coming across this error, we were mystified by this ourselves, and witnessing it only affecting Safari and Mobile Safari users. It turns out the errors were not adversely affecting our users at all — what was happening was, we use auth0 for our identity provider, and lean on the loginWithRedirect() method from their useAuth0 React hook, and what was happening was a user was being redirected before the stripe.js asset had completed loading, which was triggering the event listener here to fire. I can easily reproduce this by selecting “Clear History…” in Safari and visiting our site, and each time I do it the error is fired.

cc @hofman-stripe, this may be of interest to you.

[esetnik]

I’m seeing a large number of these errors but all on iOS / macOS safari 13.0.5