Comments (20)
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.
from react-stripe-elements.
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.
from react-stripe-elements.
@GabeIsman thanks for the report -- is there a particular integration or webpage that you've seen this on?
from react-stripe-elements.
Observed here: https://www.themarshallproject.org/support-us.
from react-stripe-elements.
@GabeIsman Thanks! I'll take a look now.
from react-stripe-elements.
Interesting -- I could only reproduce this no the first page load. Perhaps it has something to do with a cold cache.
from react-stripe-elements.
I can now no longer reproduce this at all, even after disabling / clearing caches :(. I'll try again on a different machine tomorrow.
from react-stripe-elements.
Thanks for looking into this @michelle. It was quite puzzling to me as well.
from react-stripe-elements.
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).
from react-stripe-elements.
@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.
from react-stripe-elements.
@Barnyclark are you still facing that issue? If not, since we're unable to reproduce this issue, we might go ahead and close it.
from react-stripe-elements.
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.
from react-stripe-elements.
Hmm that's strange -- could you share the Sentry issues please?
from react-stripe-elements.
Here is an example: https://sentry.io/share/issue/30833e57245a420987aefd880febc927/
from react-stripe-elements.
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!
from react-stripe-elements.
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.
from react-stripe-elements.
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"
from react-stripe-elements.
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.
from react-stripe-elements.
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.
from react-stripe-elements.
Iām having the same issue as @kevinswarner.
from react-stripe-elements.
Related Issues (20)
- CardNumberElement Placeholder Not Working HOT 1
- CardCvcElement onComplete fires after three digits for AMEX card HOT 2
- docs: confirmCardPayment with split card elements needs a docs update HOT 1
- Payment Fields are not clickable in Samsung device HOT 2
- My Stripe promise with React never resolves even after trying a timeout HOT 1
- 3D Secure Test Payment Screen iFrame - Any way to preview or control width/height? HOT 1
- Not able to customize CSS of CardElement HOT 1
- Split Card Number Not Inserted with 1Password Autofill HOT 1
- Elements locale option not localizing HOT 5
- When click on stripe element its getting blur HOT 1
- About scan card feature in mobile device HOT 1
- PaymentRequestButton Does Not Load On Safari PWA HOT 1
- Stripe console message : parameter: betas is not a recognized parameter. HOT 2
- Connection Failure text in CardNumberElement HOT 3
- loadStripe does not seem to work
- styling CardElement HOT 1
- Add support for extra types of buttons for Apple Pay HOT 1
- Elements tag doesn't accept locale HOT 2
- Add a full stripe elements integration example HOT 1
- PaymentRequestButtonElement Integration Error with saved browser card HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
š Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. ššš
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ā¤ļø Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-stripe-elements.