Closed devqualwebs closed 3 years ago
@devqualwebs Care to share some code of how you have this setup so we could offer some assistance in getting it to work for you?
Just ran into this bug @devqualwebs.
this is a clone of this bug: https://github.com/jessepollak/card/issues/199
Getting quite a few failed payments because of this intermittent error with Android devices 😢 @jessepollak
Here's the user agents that are getting it - essentially, they can't enter the slash "/", and then our payment fails from Expiry Validation error:
ANDROID USER AGENTS NOT WORKING Mozilla/5.0 (Linux; Android 6.0.1; SAMSUNG SM-G930F Build/MMB29K) AppleWebKit/537.36 (KHTML, like Gecko) SamsungBrowser/4.0 Chrome/44.0.2403.133 Mobile Safari/537.36
Mozilla/5.0 (Linux; Android 6.0.1; SAMSUNG SM-T355Y Build/MMB29M) AppleWebKit/537.36 (KHTML, like Gecko) SamsungBrowser/4.0 Chrome/44.0.2403.133 Safari/537.36
Mozilla/5.0 (Linux; Android 6.0.1; SAMSUNG SM-N920I Build/MMB29K) AppleWebKit/537.36 (KHTML, like Gecko) SamsungBrowser/4.0 Chrome/44.0.2403.133 Mobile Safari/537.36
Mozilla/5.0 (Linux; Android 6.0.1; SAMSUNG SM-G900I Build/MMB29M) AppleWebKit/537.36 (KHTML, like Gecko) SamsungBrowser/4.0 Chrome/44.0.2403.133 Mobile Safari/537.36
CONFIRMED ANDROID AGENTS WORKING OK Mozilla/5.0 (Linux; Android 4.4.2; Tab2A7-10F Build/KOT49H) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/57.0.2987.132 Safari/537.36
Mozilla/5.0 (Linux; Android 6.0.1; SM-G900I Build/MMB29M) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/57.0.2987.132 Mobile Safari/537.36
Also, I can confirm, when this occurs, there are no console errors occurring (can confirm that from client-side error reporting script), they are just unable to type in the expiry date fully on these devices.
Looks like this might be something to do with either the Chrome Version?
Related? https://github.com/braintree/braintree-web/issues/245#issuecomment-275557557
Seems like it might be something to with the SamsungBrowser/4.0
I think I know why this is occurring based on our Implementation:
<input class="form-control string optional expiry-data jp-card-valid" pattern="[0-9]*" autocomplete="tel" autocorrect="off" autocapitalize="off" spellcheck="false" data-stripe="exp" data-fv-field="expiry-data" placeholder="MM/YY" type="text" id="payment_card_expiry_month">
See that we are disabling the pattern="[0-9]*"
to aid in mobile device input - which only shows the numeric input like this:
Normally, the /
would automatically be inserted by Card.js after the month eg '09', but it is not automatically being input on devices running the SamsungBrowser/4.0 devices.
In our case, because we are applying the pattern, they cannot manually type the /
in either (because it would only show the numeric input, not the normal keyboard), and therefore users cannot proceed to a valid expiry (in our case, Stripe requires the month and date to be seperated)
The problem is keypress event is not fired on most of chrome android devices. Changing this to keydown doesn't work because these browsers send event.which = 229 (combined characters).
Changing this to keyup doesn't work too, because in this moment, the input already have the value and event.preventDefault() doesn't matter.
To change to keyup requires change all the lib's logic.
Any insights on this one @luishmcmoreno as to how it could be monkey patched or fixed otherwise? It's costing a lot of conversions for us with Android phones just because a simple "/" isn't being entered like it does normally.
Hey @nickooolas ... Try this https://gist.github.com/luishmcmoreno/45839565828ae3597816b98fa83bf754 . I've made some changes on the lib and it worked for me. I didn't all the necessary tests to create a pull request but to my needs, it worked.
@luishmcmoreno awesome work, thanks for the quick reply and patch on this one! :)
it worked to you @nickooolas ? The problem seems to be in the payments lib, not here.
it worked for me but expiry date input (length) not work so it able to take 1000 digit :)
@mostafa-saqr, you are right!
Same for CVC
Any solution?
I think this is the same issue - when I type in a credit card number on my S7 Edge - Chrome 64 - after about the 5th digit, it repeats all 5 digits (so "45140" turns into "4514045140"). I can paste okay, just not type.
duplicate of #199 you can..
working on android devices with input type="tel" instead of input type="text"
I am facing an issue when I am using the website on mobile device android google chrome. The card number input, expiry date, CVV all input fields neither formatting the inputs not validating them allow to the user to input string also at the place of digits.