Card Element shown in Flutter Web, but does not accept input
Closed this issue · 5 comments
Describe the bug
In Flutter WEB
Card element field do not accept input
Network traffic shows hcaptcha error
To Reproduce
Copy of an existing and working stripe card element approach from the flutter stripe example. Ensure that it works (Accepts payments, fields are working)
Copy the files to a new application. The card element is shown, but the fields cannot be selected and each field does not accept input in any of the three fields card number, valid through or CVC.
The network traffic shows an error with hcaptcha
Expected behavior
The fields should work, should be selected and accept input.
Smartphone / tablet
- Device Macbook Pro
- Chrome
- flutter_stripe: ^11.2.0
- flutter_stripe_web: ^6.2.0
- Flutter version [e.g. 2.0.0.]
Additional context
This is the error message from Chrome - not in the original application, only in the new (copied) application
Cookies with the SameSite=None; Secure and not Partitioned attributes that operate in cross-site contexts are third-party cookies. Chrome is moving towards a new experience that allows users to choose to browse without third-party cookies.
2 cookies
Name Domain & Path
m m.stripe.com/
__cflb api2.hcaptcha.com/
I have the same issue.. I discovered it when upgrading a working app to the latest versions of flutter and stripe.. I then recreated the problem in a sample app.
I have a sample app running here demonstrating the issue: https://test-apps-fl.web.app/
The code for this app is available here: https://github.com/JulianSwales/invoice_page_test_1
This code works perfectly on iOS but not Web.
@JulianSwales thank you so much for the reproduction scenario I noticed that .
SemanticsBinding.instance.ensureSemantics(); is causing the issue.
This is outside our sdk I fear maybe we need to log an issue to Flutter that this line breaks platformviews.
I close the issue for now but feel free to reopen if you dissagree
Hi,
yes, I have the same line in my code, removing it enable the platformview. Thanks for your support.
@remonh87 : Can you please raise the issue on flutter, since you can describe the issue better than we can.
@tbecker I think this is the related issue: flutter/flutter#157387
Well, that's annoying.. I've removed that line and yes the problem went away. We are using that so we can get a DOM so we can run automated testing against the app in a web browser.. Hopefully it gets fixed soon..
Thanks so much for looking at this and pointing us to the real problem...