search

jessepollak / card

:credit_card: make your credit card form better in one line of code
MIT License
11.66k stars 1.48k forks source link

Not working properly at android mobile chrome #317

Closed devqualwebs closed 3 years ago

devqualwebs commented 7 years ago

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.

BallisticPain commented 7 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?

dennishuh commented 7 years ago

Just ran into this bug @devqualwebs.

this is a clone of this bug: https://github.com/jessepollak/card/issues/199

nickooolas commented 7 years ago

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?

slash

nickooolas commented 7 years ago

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:

image

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)

luishmcmoreno commented 7 years ago

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.

nickooolas commented 7 years ago

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.

luishmcmoreno commented 7 years ago

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.

nickooolas commented 7 years ago

@luishmcmoreno awesome work, thanks for the quick reply and patch on this one! :)

luishmcmoreno commented 7 years ago

it worked to you @nickooolas ? The problem seems to be in the payments lib, not here.

mostafa-saqr commented 6 years ago

it worked for me but expiry date input (length) not work so it able to take 1000 digit :)

stefmabo commented 6 years ago

@mostafa-saqr, you are right!

Same for CVC

Any solution?

chayglass commented 6 years ago

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.

melloware commented 3 years ago

duplicate of #199 you can..

working on android devices with input type="tel" instead of input type="text"