beta 10 card details not formatted properly on Android tablets

[kilvroch]

beta 10 works just great on my desktop browsers, but does not format card number properly on Android tablet or on Kindle Fire. It is very difficult to get the spaces inserted into the card number using tablet input number pad (no space character on the number pad!) the expiration date field is smart and automatically inserts the /

[mrak]

Thanks for the report.

The spaces are not required for processing and are automatically inserted for aesthetics only. That being said, could you provide us with the exact tablet operating system numbers you were testing on, as well as which browsers and their versions you were seeing this in?

[kilvroch]

Hi Eric I was testing on Samsung Galaxy Note:

Mozilla/5.0 (Linux; Android 4.1.2; GT-N8010 Build/JZO54K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.81 Safari/537.36

and Kindle Fire: Mozilla/5.0 (Linux; Android 5.1.1; KFASWI Build/LMY47O) AppleWebKit/537.36 (KHTML, like Gecko) Silk/50.2.1 like Chrome/50.0.2661.89 Safari/537.36

on both of those, when trying to input the card number, the number pad opens, and it does not have a space, and there is no automatic space filling when I type the number.

The expiration-date field does autoformat correctly, but the card does not.

I've done a google and see that this is a problem you have had for quite some time and are supposedly addressing in this release of the the Javascript

Eileen Eby Kilvroch Cardigan Corgis www.kilvroch.co.uk On 2016-07-11 17:18, Eric Mrak wrote:

Thanks for the report.

The spaces are not required for processing and are automatically inserted for aesthetics only. That being said, could you provide us with the exact tablet operating system numbers you were testing on, as well as which browsers and their versions you were seeing this in?

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/braintree/braintree-web/issues/180#issuecomment-231784998, or mute the thread https://github.com/notifications/unsubscribe/AS9zcSSEz_AtgqiBxYK51fKPYWsxmccyks5qUmztgaJpZM4JIoaf.

[mrak]

Thanks for the additional information, @kilvroch.

We'll try and track down the cause.

[kilvroch]

Is it at all possible that you could simply accept a plain string of numbers for the credit cards and NOT try to do fancy formatting? It is extremely frustrating to have to fight with your form in order in input the data from a tablet device

[crookedneighbor]

You can turn off formatting for a particular field. In your hostedFields.create code:

braintree.hostedFields.create({
  client: clientInstance,
  styles: {
    // your styles
  },
  fields: {
    number: {
      selector: '#card-number',
      formatInput: false
    },
    // other fields
  }
}, callback);

We're still looking into why this behavior is happening on those tablets.

[kilvroch]

thank you.... I will give this a try right away!

Eileen Eby Kilvroch Cardigan Corgis www.kilvroch.co.uk On 2016-07-19 15:22, Blade Barringer wrote:

You can turn off formatting for a particular field. In your |hostedFields.create| code:

braintree.hostedFields.create({ client: clientInstance, styles: { // your styles }, fields: { number: { selector: '#card-number', formatInput: false }, // other fields } }, callback);

We're still looking into why this behavior is happening on those tablets.

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

[kilvroch]

Hi again I have added the code to turn off formattign of the card number. I've tested on Android tablet - it works with Chrome and with Firefox but not with the Android default browser. I'm telling my users to be sure to use a supported browser before they try to pay for anything.

Eileen Eby Kilvroch Cardigan Corgis www.kilvroch.co.uk On 2016-07-19 15:22, Blade Barringer wrote:

You can turn off formatting for a particular field. In your |hostedFields.create| code:

braintree.hostedFields.create({ client: clientInstance, styles: { // your styles }, fields: { number: { selector: '#card-number', formatInput: false }, // other fields } }, callback);

We're still looking into why this behavior is happening on those tablets.

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

[crookedneighbor]

I was able to reproduce the formatting error in Firefox on an Android tablet.

When you say it still doesn't work in the default browser with input formatting turned off, what is happening?

[kilvroch]

here is browser string for default browser: Mozilla/5.0 (Linux; U; Android 4.1.2; en-gb; GT-N8010 Build/JZO54K) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Safari/534.30

I am using your "Minimal" example for my fields https://developers.braintreepayments.com/guides/hosted-fields/examples/javascript/v3

When I tap on the card number field, a) the label is not cleared, b) the insertion point is set to start of field, and c) neither the on-screen numberpad nor the on-screen keyboard are displayed

[kilvroch]

does beta-11 address these issues?

[crookedneighbor]

Sorry for the late reply.

We have disabled input formatting entirely for the Android Firefox browser in 3.0.0-beta.12. Our intention is to add input formatting back in when we are able to devise a workaround for that browser's quirky behavior.

The problems you've reported with the "Minimal" example have less to do with braintree-web itself, and more to do with the example using some CSS properties that are not supported in the browsers you have reported. I've turned on the auto-css prefixer feature in the codepen and now it's working as expected on my android test device.

There is still an outstanding formatting issue on some older Android devices that we are still working on, but it should not prevent a user from entering their credit card. I'm going to close this now, but you can follow the progress of the formatting issue I linked to by pressing the subscribe button on that issue.