Braintree-web: hosted fields card number formatting - android

[bob2021]

I have noticed an issue with the card number formatting in hosted fields on android devices.

If using the standard Google keyboard, auto formatting works fine, but other 3rd party keyboards can result in validation errors. I am using sdk v3.6.0.

For example, using the latest version of Chrome (54.0.2840.85) and the TouchPal keyboard, using the minimal example here: http://codepen.io/braintree/full/EKJVXp/

• Enter the card number 3530111333300000
• Note that spaces are not added automatically and the user can't progress to the next step as validation is failing
• Press delete (backspace), and the auto formatting suddenly activates, but it deletes every 5th character and the last two, resulting in: 3530 1133 3000
• The card number will not pass validation unless the user adds the spaces manually

I have observed this behaviour with the following android keyboards (not an exhaustive list):

• TouchPal
• Samsung
• Sony Xperia (pressing delete does not activate auto formatting)

It looks like it is possibly related to this bug: https://bugs.chromium.org/p/chromium/issues/detail?id=118639

I think its fine if auto formatting doesn't work with certain keyboards, but the following two issues result in a very frustrating customer experience:

• Auto formatting deletes characters from the card number if it activates late
• Card number validation requires spaces if auto formatting is active

[gerryhigh]

See my comment (about the 10th one down) to say that the formatting wasn't just a Safari thing - https://github.com/braintree/braintree-web/issues/216

It is extremely frustrating. I turned off formatting for all browsers on the number field.

[zineer]

+1 I've also disabled auto-formatting for now seeing this isn't an isolated issue.

[crookedneighbor]

We're looking into this. I thought we had ironed out all the remaining kinks with Android formatting, but apparently not.

I wish we could automatically disable formatting based on the Android keyboard, but there is no way for JavaScript to detect that.

[kevinconroy]

+1 for fixing this in case it helps prioritize. Similar to the Safari issue #216, this impacted a large number of our customers today. We advised them to switch to desktop to complete their transaction.

[pdg137]

I am seeing this problem using recent versions of Swype (v 2.2.3.2020310.45082) and Android (6.0.1) on Google Chrome. The bug is also present under Samsung keyboard, which makes it broken for about a quarter of mobile users! Without this fixed, I would consider braintree.js basically unusable.

Luckily, there is a workaround: set the formatInput option to _false_ for the credit card number field.

[intelliot]

We’ve found the source of the bug. We’ll update here when the fix is out.

In the meantime, as mentioned above, a potential workaround is to set the formatInput: false option. This disables formatting.

[stefanaerts]

turn formatInput: false is NOT the solution.
The auto TAB wil then NOT work at all,not on web and NOT on smartphone.
It works with formatInput: true on the web, when i debug my phone on my laptop using chrome
the auto TAB will work.
But it doesnt work on my samsung galaxy S6,samsung keyboard version 1.2.96 default settings

[crookedneighbor]

@stefanaerts We've just finished the work to fix this and are planning on releasing it today. We'll update here when it's out.

[crookedneighbor]

We've just released a fix for this with 3.6.2.

Report here if you're still having formatting issues with your Android device. Be sure to report the model, OS and keyboard you're using.

We'll close this issue in a couple of days if we don't hear any more reports about it.

[pdg137]

This fix doesn't work well for me using the demo on http://codepen.io/braintree/pen/ZWPpPG with my Swype & Android 7.0. Numbers after the first space insert backwards, so if I type "41112345678", I see "4111 9876 5432". The phone is a Nexus 6.

[quinnjn]

@pdg137, I tried out the demo on a Nexus 6p with these details:

• Android 7.1.1
• Swype 2.2.3.2020310.45082
• Chrome 54.0.2840.85

Here is a recording of the test you had mentioned:

I also tried this out in the latest FireFox:

I know you had mentioned you're running Android 7.0 and assuming the Motorola Nexus 6. Can you provide us with the Chrome version? Also, Can you provide a screen recording or gif of what you're seeing as you enter in the card number?

Thanks!

[pdg137]

Yes, it's a Motorola Nexus 6. "About Chrome" shows Android 7.0.0; Nexus 6 Build/NBD91J. Chrome 55.0.2883.91. The keyboard is "Swype + Dragon" 2.2.3.2020310.45082, "Midnight" theme; switching back to the default (?) "Material Dark" theme does not change it.

Here's a recording:

[stefanaerts]

Hi guys,
version 3.6.2 works for me.
BUT i had to clean the cache of chrome first!
So people before doing your new test -> do not forget to go to settings /
site-settings /storage and clean everything there.

Kind Rg,
Stefan.

On Wed, Dec 14, 2016 at 2:57 AM, Paul Grayson [e-mail]
wrote:

Yes, it's a Motorola Nexus 6. "About Chrome" shows Android 7.0.0; Nexus 6
Build/NBD91J. Chrome 55.0.2883.91. The keyboard is "Swype + Dragon"
2.2.3.2020310.45082, "Midnight" theme; I don't think switching back to
"Material Dark" theme changes it.

Here's a recording:

[image: ezgif com-optimize]
https://cloud.githubusercontent.com/assets/466760/21166758/60143c6c-c15c-11e6-8979-2a3db0f5b668.gif

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/braintree/braintree-web/issues/234#issuecomment-266920285,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ADg4926X6JSGCPLNvpLaGFvt3DmmIkNkks5rH0zugaJpZM4Kxciw
.

[stefanaerts]

Hi guys,
version 3.6.2 works for me.
BUT i had to clean the cache of chrome first!
So people before doing your new test -> do not forget to go to settings / site-settings /storage and clean everything there.

Kind Rg,
Stefan.

[tracerx]

Our company is also seeing this issue with 3.6.2 after clearing the Chrome cache using a Samsung S7 Edge with the standard Samsung keyboard installed. The behavior is much like pdg137's animation and we are using the codepen for testing to remove our code from the equation.

[crookedneighbor]

Okay, I think I've figured out what is going on. You can see the fix here: https://github.com/braintree/restricted-input/pull/25

If you'd like to try out the fix with your phone, you can go here and enter a fake number: https://crookedneighbor.github.io/ri-test/

Please comment if you're still experiencing weirdness on ^ that page.

[stefanaerts]

?
Thema fix 3.6.2 works for me as i mentioned already 2 days ago.
Kind rg

Op 15 dec. 2016 21:45 schreef "Blade Barringer" [e-mail]:

Okay, I think I've figured out what is going on. You can see the fix here:
braintree/restricted-input#25
https://github.com/braintree/restricted-input/pull/25

If you'd like to try out the fix with your phone, you can go here and
enter a fake number: https://crookedneighbor.github.io/ri-test/

Please comment if you're still experiencing weirdness on ^ that page.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/braintree/braintree-web/issues/234#issuecomment-267439103,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ADg498AbOzH3KIJCGk-ABS0IoEI0HbBRks5rIabYgaJpZM4Kxciw
.

[tracerx]

Tried crookedneighbor's page and everything worked correctly on the s7 edge that is currently having issues with 3.6.2. The expiration formatting is also working correctly on crookedneighbor's page while 3.6.2 has issues.

[pdg137]

Great, your new version works with Swype on my phone, the same way it does on the desktop. However, there is still a lot of weirdness on desktop and mobile. I'm not sure how many of these are new problems, but here's what I am seeing:

• I can't type in the middle of the number - unless I hold down the Delete key! (On both desktop and mobile.)
• Cut or paste on desktop/mobile can cause the spacing to be wrong, and then additional typing erases the numbers that ended up in the spaces - _this might break autofill._
• Undo (Ctrl+Z) on desktop behaves bizarrely and can leave it with wrong spacing.
• The cursor occasionally visibly flickers back to the beginning of a block of numbers as I type (both desktop and mobile.)
• Ctrl+Backspace on desktop clears the whole field - even when the cursor is not at the end.
• Long-press-Backspace on mobile deletes one or two extra characters.

For reference, my desktop is Windows 10 with Chrome 55.0.2883.87.

[crookedneighbor]

Looks like accounting for the placement weirdness in Android with a setTimeout causes a new bug when typing in the middle of an input. Will keep working on this.

[crookedneighbor]

@pdg137 I believe I've fixed the typing in the middle of the input issue. I've updated https://crookedneighbor.github.io/ri-test/ with the new code.

I think some of the issues you've listed are still present (notably pasting and ctrl + z and possibly long-press-backspace on mobile), but they are issues present on master of Restricted Input, so we'll tackle them as a separate PR. You can review master's behavior here: https://crookedneighbor.github.io/ri-test/master

[crookedneighbor]

This should be fixed now with version 3.6.3. Please report back if you're still having issues.

[surabhishuklansi]

We are still facing the issue on following Samsung devices and browser
Samsung galaxy S6 chrome version 55
Samsung galaxy S4 default browser
Samsung galaxy A8, chrome version 55
We are using Braintree PHP SDK Version 3.17.0
You can check the website www.salonweardirect.co.uk
That when entering the card number, and submitting the same getting error as "There are a number of errors present with the credit form: Card Number is invalid"
Even though we are giving correct card number and that number is working fine on all other devices and browsers.

[stefanaerts]

Hi i have
samsung galaxy S6 model SM-G920F
android 6.0.1
chrome 55.0.2883.91

it works for me.

Please open this test site
https://ethnicfoods-b928a.firebaseapp.com/home

and make an order
then go to payments by clicking on the top right on the "google material
card" icon.
then select credit card
enter 4111 1111 1111 1111
exp date 11/19 and cvv 444

does that work on the Samsung galaxy S6 chrome version 55? It works for me.

Kind Regards,
Stefan.

I am a consultant in Belgium,if you want help,please contact me at
[email protected]

Thanks.

On Wed, Jan 25, 2017 at 8:13 AM, surabhishuklansi [e-mail]
wrote:

We are still facing the issue on following Samsung devices and browser
Samsung galaxy S6 chrome version 55
Samsung galaxy S4 default browser
Samsung galaxy A8, chrome version 55
We are using Braintree PHP SDK Version 3.17.0
You can check the website www.salonweardirect.co.uk
That when entering the card number, and submitting the same getting error
as "There are a number of errors present with the credit form: Card Number
is invalid"
Even though we are giving correct card number and that number is working
fine on all other devices and browsers.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/braintree/braintree-web/issues/234#issuecomment-275035757,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ADg490ipvK8fV2jthRfO_JQSl3xODhz_ks5rVvX-gaJpZM4Kxciw
.

[surabhishuklansi]

Yeah now worked for me too also, I have checked my JS SDK was 3.6 I have updated it to 3.6.3, then it worked.
Thanks for reply

[crookedneighbor]

Thanks for the assist @stefanaerts . @surabhishuklansi Glad it's working for you now.

[stefanaerts]

With pleasure.
Kind regards
Stefan

Op 25 jan. 2017 15:47 schreef "Blade Barringer" [e-mail]:

Thanks for the assist @stefanaerts https://github.com/stefanaerts .
@surabhishuklansi https://github.com/surabhishuklansi Glad it's working
for you now.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/braintree/braintree-web/issues/234#issuecomment-275126675,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ADg497Az0jB1uym15PPVApBzuI0fitiPks5rV2CcgaJpZM4Kxciw
.

[clovnrian]

Hi,
we still have issues on Samsung devices.

Samsung Galaxy S7, default browser, on same phone in chrome everything works fine
Samsung Galaxy Grand prime, android 5.1.1, default browse.

We can write only first 4 digits in credit card field, after that all fields stop working.
We have 3.6.3 version on our website.

Thanks.

[manuelnaturalcycles]

having same issue with latest version of the library in a samsung galaxy J5 chrome

[crookedneighbor]

@manuelnaturalcycles To confirm, this is on the default browser or on Google Chrome?

[jminkler]

Having this issue with v3.9.0 currently (customers can only enter 4 cc #s and 2 in exp date)
Not sure of device, not reported to us

[crookedneighbor]

@jminkler Please update to the latest version. 3.22.0. If the problem persists, open a new Github issue.