CardElement intermittently doesn't appear on Safari

[GabeIsman]

I've had multiple reports (with screenshots) from users of CardElement not rendering (just never appears) on Safari (one of them Version 10.1.1 (11603.2.5)). There were no errors in the console. The problem did not persist after a refresh, and I was not able to reproduce it.

I know this is not a terribly helpful bug report, but I thought you should know that I have seen this happen.

[michelle]

@GabeIsman thanks for the report -- is there a particular integration or webpage that you've seen this on?

[GabeIsman]

Observed here: https://www.themarshallproject.org/support-us.

[michelle]

@GabeIsman Thanks! I'll take a look now.

[michelle]

Interesting -- I could only reproduce this no the first page load. Perhaps it has something to do with a cold cache.

[michelle]

I can now no longer reproduce this at all, even after disabling / clearing caches :(. I'll try again on a different machine tomorrow.

[GabeIsman]

Thanks for looking into this @michelle. It was quite puzzling to me as well.

[fred-stripe]

Hi @GabeIsman have you had any further reports of this? Just poking around and I can't seem to make this happen (tried a couple different things).

[GabeIsman]

@fred-stripe I haven't had any further reports, but I don't think that I would have. (We have a low volume of Safari users.) I wish I had better guidance for you on how to reproduce. It seems to only happen once, if it does at all.

[Barnyclark]

Hi @fred-stripe we have just moved over to the new elements library and are having a similar issue. We are getting the following error being reported sporadically to Sentry:

Please load Stripe.js (https://js.stripe.com/v3/) on this page to use react-stripe-elements.

this is despite the fact that the script tag is at the top of the page before the react app is loaded.

It is only happening on mobile safari on iOS 10.3.3 and 11.0.3. I have been unable to recreate this myself, which I realise is unhelpful, but I have the sentry errors if that is useful.

[atty-stripe]

@Barnyclark are you still facing that issue? If not, since we're unable to reproduce this issue, we might go ahead and close it.

[Barnyclark]

Ho @atty-stripe we are still having this issue, it is not restricted to safari though, we receive the error on a small number of requests across all browsers/devices.

[atty-stripe]

Hmm that's strange -- could you share the Sentry issues please?

[Barnyclark]

Here is an example: https://sentry.io/share/issue/30833e57245a420987aefd880febc927/

[atty-stripe]

Thanks @Barnyclark!

Unfortunately there's little we can deduce from the Sentry issue, since it simply says that Stripe.js didn't load. Are you sure this wasn't a network issue or something else that actually prevented the script from loading? It might be useful to check if window.Stripe exists and report that in your logs, so the next time this error pops up you can be sure if this was simply a network issue that prevented the script from loading.

Otherwise we haven't been able to repro this. If you have any more info you can share, would love to see it!

[titomb345]

I would like to add that I am also seeing this error:

Error: Please load Stripe.js (https://js.stripe.com/v3/) on this page to use react-stripe-elements.

intermittently across all browsers, but seemingly always on mobile. It makes sense that it would be network issues. Maybe the network became weak during loading of the app, and could not successfully load Stripe.js. It doesn't happen all that often.

[jab1000]

Over the past 10ish days we have the same problem with 4 different customers -- all fo them were trying to open the payment page on Safari on their iphone. Granted no idea what the iOS/Safari version is though. I agree that it probably is an intermitent network delay on their mobile but would be nice if their was a "way to test" for it even if just to give a message to the user - "please refresh, an error occurred while setting up the payment page"

[asolove-stripe]

It appears that this error is always triggered by Stripe.js failing to load over the network or loading in the wrong order. I am inclined to close this issue, since we understand what is causing it, and to use issue #237 as a place to discuss providing some API surface area for applications to be able to catch this error and respond to it in some useful way.

[tuomashatakka]

I ran into today as well. This seems to happen now consistently on Opera too. A couple of weeks ago there were no problems and the codebase hasn't been updated since. There are a couple of network requests to js.stripe.com that will never finish.

Edit: here's a jsfiddle where the problem occurs with Opera 63.0.3368.107: https://jsfiddle.net/0yeo7t21/

Edit 2: I updated Opera to version 64.0.3417.61 and now the components are working again.

[kevinswarner]

This has also been occurring in our app that is a NextJS app. It only occurs in Safari and Safari on iOS. It only happens when the user uses the "refresh" button in Safari. If you click in the address bar and click the enter key, it works fine. I notice in the inspector that certain Stripe assets just do not load.

I originally thought it might be an SSR issue, but I ruled that out by testing a statically deployed site.

Could it be something related to how NextJS is bundling the assets or something to do with how Safari caches certain assets? I am at a loss. I appreciate any suggestions.

[esetnik]

I’m having the same issue as @kevinswarner.