Closed jonasbark closed 3 years ago
@jonasbark can you provide me some reprosteps? I am not sure I understand what you mean with this
Open any screen with a card, tap into the card view itself and then back and forth to the email field for example. You should notice that sometimes the card view doesn't accept the keyboards input anymore.
I think it's something we can fix on the dart side
This still happens with the changes included from latest PR
https://user-images.githubusercontent.com/1151304/115150849-6f58cc00-a06a-11eb-80a2-469581b1d11b.mp4
@jonasbark @jamesblasco Could either of you confirm for me that this issue is currently fixed with flutter master? I've switched to both flutter dev and flutter master and added the plugin using a git reference to my pubspec, and am still experiencing the keyboard switching issue mentioned and shown in a video in #135. The keyboard also still changes focus back to the card number when trying to enter the expiration date with the card number incomplete. I did not however run into the problem shown above https://github.com/flutter-stripe/flutter_stripe/issues/14#issuecomment-822008559
flutter_stripe:
git:
url: git@github.com:flutter-stripe/flutter_stripe.git
path: packages/stripe
ref: e7aa625
[✓] Flutter (Channel master, 2.3.0-17.0.pre.417, on macOS 11.4 20F71 darwin-x64, locale en-US)
• Flutter version 2.3.0-17.0.pre.417 at /Users/user/fvm/versions/master
• Upstream repository https://github.com/flutter/flutter.git
• Framework revision 46c546684f (2 days ago), 2021-06-21 12:04:43 -0700
• Engine revision 9520bb15b3
• Dart version 2.14.0 (build 2.14.0-228.0.dev)
[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.2)
• Android SDK at /Users/brad/Library/Android/sdk
• Platform android-30, build-tools 30.0.2
• Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
• Java version OpenJDK Runtime Environment (build 11.0.8+10-b944.6916264)
• All Android licenses accepted.
[✓] Xcode - develop for iOS and macOS
• Xcode at /Applications/Xcode.app/Contents/Developer
• Xcode 12.5.1, Build version 12E507
• CocoaPods version 1.10.1
[✓] Chrome - develop for the web
• Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome
[✓] Android Studio (version 4.2)
• Android Studio at /Applications/Android Studio.app/Contents
• Flutter plugin can be installed from:
🔨 https://plugins.jetbrains.com/plugin/9212-flutter
• Dart plugin can be installed from:
🔨 https://plugins.jetbrains.com/plugin/6351-dart
• Java version OpenJDK Runtime Environment (build 11.0.8+10-b944.6916264)
[✓] VS Code (version 1.57.1)
• VS Code at /Applications/Visual Studio Code.app/Contents
• Flutter extension version 3.23.0
[✓] Connected device (2 available)
• sdk gphone x86 (mobile) • emulator-5554 • android-x86 • Android 11 (API 30) (emulator)
• Chrome (web) • chrome • web-javascript • Google Chrome 91.0.4472.114
• No issues found!
We can't use the payment sheet (unless I'm misunderstanding) because we need to use setup intents in order to offer promo codes with 100% discount at the beginning of subscriptions. And because we function in Europe we have to be able to handle 3D secure which doesn't work with the old flutter stripe payment plugin https://github.com/jonasbark/flutter_stripe_payment/issues/253
I can confirm that it worked when I tried flutter from the master channel - I'm not sure if they might have reverted the flutter fix by now. You can use the main branch of this plugin, the fix is included there.
@jonasbark I updated my pubspec to use the main branch here. Here is the main issue I'm seeing but maybe it is a separate issue:
Keyboard switching (Android):
flutter_stripe:
git:
url: git@github.com:flutter-stripe/flutter_stripe.git
path: packages/stripe
ref: main
Which flutter version do you use exactly?
@jonasbark Right now I'm on the flutter master branch which is 2.3.0-17.0.pre.417 and I also tried the dev sdk which looks to be at 2.3.0-24.0.pre when I tried it.
[✓] Flutter (Channel master, 2.3.0-17.0.pre.417, on macOS 11.4 20F71 darwin-x64, locale en-US)
• Flutter version 2.3.0-17.0.pre.417 at /Users/user/fvm/versions/master
• Upstream repository https://github.com/flutter/flutter.git
• Framework revision 46c546684f (2 days ago), 2021-06-21 12:04:43 -0700
• Engine revision 9520bb15b3
• Dart version 2.14.0 (build 2.14.0-228.0.dev)
[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.2)
• Android SDK at /Users/brad/Library/Android/sdk
• Platform android-30, build-tools 30.0.2
• Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
• Java version OpenJDK Runtime Environment (build 11.0.8+10-b944.6916264)
• All Android licenses accepted.
[✓] Xcode - develop for iOS and macOS
• Xcode at /Applications/Xcode.app/Contents/Developer
• Xcode 12.5.1, Build version 12E507
• CocoaPods version 1.10.1
[✓] Chrome - develop for the web
• Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome
[✓] Android Studio (version 4.2)
• Android Studio at /Applications/Android Studio.app/Contents
• Flutter plugin can be installed from:
🔨 https://plugins.jetbrains.com/plugin/9212-flutter
• Dart plugin can be installed from:
🔨 https://plugins.jetbrains.com/plugin/6351-dart
• Java version OpenJDK Runtime Environment (build 11.0.8+10-b944.6916264)
[✓] VS Code (version 1.57.1)
• VS Code at /Applications/Visual Studio Code.app/Contents
• Flutter extension version 3.23.0
[✓] Connected device (2 available)
• sdk gphone x86 (mobile) • emulator-5554 • android-x86 • Android 11 (API 30) (emulator)
• Chrome (web) • chrome • web-javascript • Google Chrome 91.0.4472.114
• No issues found!
I'm seeing this in the logs when the view appears
[ +259 ms] W/View ( 9564): requestLayout() improperly called by android.widget.FrameLayout{8e957b7 VFE...... ......ID 161,35-1012,94 #7f0800b0 app:id/container} during layout: running second layout pass
[ +2 ms] W/View ( 9564): requestLayout() improperly called by com.google.android.material.textfield.TextInputLayout{29e4b24 V.ED..... ......ID 0,0-400,59 #7f080093 app:id/card_number_text_input_layout} during layout: running second layout pass
[ ] W/View ( 9564): requestLayout() improperly called by com.google.android.material.textfield.TextInputLayout{a23268d V.ED..... ......ID 550,0-697,59 #7f080109 app:id/expiry_date_text_input_layout} during layout: running second layout pass
[ ] W/View ( 9564): requestLayout() improperly called by com.google.android.material.textfield.TextInputLayout{4c49042 V.ED..... ......ID 2750,0-2750,59 #7f0800c0 app:id/cvc_text_input_layout} during layout: running second layout pass
And this after each number is entered
[+28570 ms] W/IInputConnectionWrapper( 9564): endBatchEdit on inactive InputConnection
[+3394 ms] W/IInputConnectionWrapper( 9564): endBatchEdit on inactive InputConnection
[+2492 ms] W/IInputConnectionWrapper( 9564): endBatchEdit on inactive InputConnection
Just tested it again, works as expected on
[✓] Flutter (Channel master, 2.3.0-17.0.pre.505, on macOS 11.2.3 20D91 darwin-x64, locale de-DE)
and my Android 10 test device
@jonasbark pixel 3; android 11;
Flutter 2.3.0-24.1.pre • channel beta • https://github.com/flutter/flutter.git Framework • revision 615957513e (4 days ago) • 2021-06-25 09:24:44 -0700 Engine • revision 9d517f475b Tools • Dart 2.14.0 (build 2.14.0-188.5.beta)
face the same issue mentioned above by @bradsb
Does the example app from this repository show the same issue for you?
@jonasbark do you know if this has been addressed on the flutter_stripe side as well or is the only current solution to use Flutter 2.3.0? I'm currently on Flutter 2.2.2 and haven't been able to find a workaround
Yes, as far as I'm concerned it works with Flutter 2.3
Does the example app from this repository show the same issue for you?
@jonasbark Yes, the example app from this repository shows the exact same results.
I have also checked it on Samsung. The thing is that the numeric
layout is built above the alphabetical keyboard and users might not switch a keyboard in order to enter the credit card details.
Unfortunately, there is no numeric
layout in pixel 3 by default (pure Android)
If you use
flutter_stripe:
git:
url: git@github.com:flutter-stripe/flutter_stripe.git
path: packages/stripe
ref: main
it's not enough - it will still point to the latest stripe_android package that is published on pub.dev Please try the following:
dependency_overrides:
stripe_android:
git:
url: git@github.com:flutter-stripe/flutter_stripe.git
path: packages/stripe_android
ref: main
@jonasbark Yep, I knew that. I have already switched to relative paths in stripe/pubspec.yaml
stripe_android:
path: ../stripe_android
stripe_ios:
path: ../stripe_ios
stripe_platform_interface:
path: ../stripe_platform_interface
and included it as a submodule in my project.
Also, I tried InputType.TYPE_CLASS_NUMBER for inputType and it seems to work. A keyboard would not switch to alphabetical anymore. And unfortunately autofocus stopped working properly. Anyway, I think I can sort it out by completely disabling it.
Is there an emulator I can choose to reproduce this? @bradsb mentioned e.g. Android 11 (API 30) (emulator)
@jonasbark just checked on emulator android-x86 • Android 9 (API 28) 1080x2160 440dpi
same issue;
@jonasbark @artemtkachenko after adding the dependency overrides (which I was missing), the keyboard with G board (google keyboard) was appropriately on the numbers-only keyboard and could enter the numbers. However, if I switched to a Flutter TextFormField (to enter a name) and then back to the CardField, I was unable to type any numbers, only delete, so it was still unusable. It didn't work at all for numbers using openboard as the keyboard. When I have time I can post a video of it. Hope that helps though
Edit: Also, I think it wasn't working for detecting the flutter patch on 2.3.0-24.1.pre, so I had to test on master at the time 2.3.0-17.0.pre.417
I just tested it again on the sync branch with
[✓] Flutter (Channel master, 2.3.0-17.0.pre.583, on macOS 11.2.3 20D91 darwin-x64, locale de-DE)
and on the "Card payment using webhooks" screen on the example app. Switching back and forth between the mail text field (Flutter) and the CardView I didn't notice any issues. Can you reproduce it in the example app?
@jonasbark I just tested with master and dev flutter channels with your example app with the most recent up to date pull from master and have the same issue.
Here's the video:
Here's the flutter doctor and verbose logs:
@jonasbark
Flutter 2.4.0-0.0.pre • channel dev • https://github.com/flutter/flutter.git Framework • revision 96bbcd006f (11 days ago) • 2021-06-30 03:43:41 -0400 Engine • revision c633b2a6a0 Tools • Dart 2.14.0 (build 2.14.0-258.0.dev)
android 11, pixel 3
see the video below
https://user-images.githubusercontent.com/8479197/125187755-c7523980-e239-11eb-8c86-f01d0cd30193.mp4
Plugin version 1.1.0: Still not working on my Android Device
btw I just checked https://github.com/stripe/stripe-android HEAD release-v16.10.2 v16.10.2 origin/release-v16.10.2
and they actually have the same issue if you change edit-text input type programmatically:
cardNumberEditText.inputType = InputType.TYPE_CLASS_TEXT
https://user-images.githubusercontent.com/8479197/125283150-ce07ac00-e320-11eb-8721-131c4edce95e.mp4
@jonasbark is it reproducible on your end?
It still works fine for me with the latest Flutter master channel version. I'd like to reproduce it but I need the exact combination of the Flutter version and an Android simulator.
To reproduce: Flutter version 2.3.0-17.pre.213
@ApofisXII does it work for you in the latest version on the master channel? Also, which Simulator can I use to reproduce this?
@jonasbark using Flutter 2.4.0-1.0.pre.189 Good: it uses a numeric keyboard! Very bad: the text field does not fill with the numbers(!!!)
https://user-images.githubusercontent.com/5765363/125292998-4a9b8a00-e323-11eb-97d3-a75b57527e65.mov
This is the error log that shows when that page is loaded:
W/View (14051): requestLayout() improperly called by android.widget.ImageView{54eb9b7 V.ED..... ......ID 0,0-84,55 #7f080136 app:id/icon} during layout: running second layout pass W/View (14051): requestLayout() improperly called by android.widget.FrameLayout{9a50524 VFE...... ......ID 156,33-877,90 #7f0800b1 app:id/container} during layout: running second layout pass W/View (14051): requestLayout() improperly called by com.google.android.material.textfield.TextInputLayout{ac588d V.ED..... ......ID 0,0-412,57 #7f080093 app:id/card_number_text_input_layout} during layout: running second layout pass W/View (14051): requestLayout() improperly called by com.google.android.material.textfield.TextInputLayout{66ada42 V.ED..... ......ID 525,0-708,57 #7f08010a app:id/expiry_date_text_input_layout} during layout: running second layout pass W/View (14051): requestLayout() improperly called by com.google.android.material.textfield.TextInputLayout{b0b3a53 V.ED..... ......ID 2625,0-2625,57 #7f0800c1 app:id/cvc_text_input_layout} during layout: running second layout pass
Can you confirm this issue (entering numbers doesn't work) with the example app as well?
Just tried: I confirm that the issue (number keyboard appear without typing in the field) is present in the example app as well. Tested on: Android 10 (Oneplus 5) Tested on: Android 9 (Huawei VTR-L09) Flutter: 2.4.0-1.0.pre.189
Same errors in the log that I posted up here.
I still need an Android emulator specification so I can reproduce it
Issue reproduced with simulator: Pixel_3a_API_30_x86 (android-x86 emulator)
Video:
https://user-images.githubusercontent.com/5765363/125304463-e8945200-e32d-11eb-8710-e03832706d01.mov
@jonasbark
Android Studio 4.2.2 Build #AI-202.7660.26.42.7486908, built on June 24, 2021 Runtime version: 11.0.8+10-b944.6916264 x86_64 VM: OpenJDK 64-Bit Server VM by N/A macOS 10.15.7
Flutter 2.4.0-1.0.pre.190 • channel master • https://github.com/flutter/flutter.git Framework • revision 7a0b4669fc (62 minutes ago) • 2021-07-12 09:01:04 -0700 Engine • revision 7851449b4d Tools • Dart 2.14.0 (build 2.14.0-301.0.dev)
flutter_stripe: ^1.1.0
example app branch: https://github.com/flutter-stripe/flutter_stripe/tree/prepare-version-110 commit: f61ba418e2844b9a5c65e2ad56a9ccdb079bb710 [f61ba41]
android emulator
CPU/ABI: Google APIs Intel Atom (x86) [Google APIs] (API level 28) Skin: 1080x2160
image.androidVersion.api: 28 tag.id: google_apis hw.gpu.mode: host hw.keyboard: yes hw.dPad: no hw.lcd.height: 2160 hw.lcd.width: 1080 hw.lcd.density: 440
see video: https://user-images.githubusercontent.com/8479197/125329879-b1826880-e34e-11eb-815c-50900ce0d21b.mp4
@jonasbark guys can you confirm the issue on your end or you still need some data?
Hi @jonasbark, do you think there will be a solution to this within the next few days? I am about to publish an app with this bug, but I could wait a little longer.
thanks a lot Fabian
I doubt there is much we can do and we'll.have to create tickets for the Flutter team. For now I recommend not having an additional text field on the same screen as the CardField.
@jonasbark in my implementation, there is not another filed in the Page. I think that this issue needs to be reopen
@jonasbark actually, it does not work even if you have only one cardfield on the screen.
As soon as the user opens a keyboard from another text-field in the app (e.g. sign-in screen or anything else) the cardfield keyboard would no longer add symbols (digits) into the input field
Feel free to already open a ticket on the Flutter framework and point to https://github.com/flutter/flutter/issues/81029 and state your issues
@jonasbark why can't we use native flutter text input instead of platform view?
I know it requires an extra effort but it will definitely work. As a stripe customer, I believe it will be better to handle it in a flutter way utilizing native flutter input widgets instead of having several platform views.
We definitely agree. The main reason this plugin is using a platform view is related to SCA - using the platform view is the easiest way to achieve it because sensitive details (such as card information) never leaves the platform.
@jonasbark can you please open an Issue on the main Flutter repo and please link it here? (I'm not really an expert of GitHub and I also think other people will find it useful)
Issue created: https://github.com/flutter/flutter/issues/86480
is this issue has solved in 1.2.0? i use the latest version & get the error while trying to give input in cardfield as numeric this is my doc status
[✓] Flutter (Channel stable, 2.2.2, on Mac OS X 10.15.7 19H2 darwin-x64, locale en-BD) • Flutter version 2.2.2 at /Users/taqi/Downloads/flutter 2 • Framework revision d79295af24 (8 weeks ago), 2021-06-11 08:56:01 -0700 • Engine revision 91c9fc8fe0 • Dart version 2.13.3
[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.3) • Android SDK at /Users/taqi/Library/Android/sdk • Platform android-30, build-tools 30.0.3 • ANDROID_HOME = /Users/taqi/Library/Android/sdk • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6915495) • All Android licenses accepted.
[✓] Xcode - develop for iOS and macOS • Xcode at /Applications/Xcode.app/Contents/Developer • Xcode 12.1, Build version 12A7403 • CocoaPods version 1.10.1
[✓] Chrome - develop for the web • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome
[✓] Android Studio (version 4.1) • Android Studio at /Applications/Android Studio.app/Contents • Flutter plugin can be installed from: 🔨 https://plugins.jetbrains.com/plugin/9212-flutter • Dart plugin can be installed from: 🔨 https://plugins.jetbrains.com/plugin/6351-dart • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6915495)
[✓] VS Code (version 1.51.1) • VS Code at /Applications/Visual Studio Code.app/Contents • Flutter extension can be installed from: 🔨 https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter
[✓] Connected device (2 available) • Mi A2 (mobile) • a67fe097 • android-arm64 • Android 10 (API 29) • Chrome (web) • chrome • web-javascript • Google Chrome 92.0.4515.131
• No issues found!
@taqi92 It can't be fixed by the plugin. It must be fixed by the Flutter framework devs. See comment above.
@jonasbark so what is your suggestion?should i upgrade the flutter version? i'm actually stucked in generating token feature
Hi, Is there any update on this issue? I see the issue on example app and in my app as well
@Lyba97 @taqi92 at the moment there is a bug in the Flutter framework that caused the wrong behaviour. The only thing what we can do is add a 👍 to the issue https://github.com/flutter/flutter/issues/86480 so it will get a bit more priority .
I really would advise for payment: to move to the payment sheet which is a much smoother and easier experience (you get basic localisation / error handling / animations etc.) .
Every other attempt to write into the native card view fails, at least on Android - it might be fixed with the FocusNode adjustment that currently happens on the native side made by @jamesblasco for iOS
Otherwise it needs to be investigated on on the Android side