Formatting is not applied to hosted files

[Jgtutierrez]

General information

• SDK version: 3.8.0
• Environment: Sandbox
• Browser and OS: Samsung Internet Browser v20.0.6.5 on Android 13

Issue Description

Automatic formatting is disabled and allows user to enter wrong information.

Steps to reproduce:

1. Get braintree client token
2. Create the hosted fields with default options
3. Fill out the credit card form

It can be noticed that it is possible to place more numbers than allowed and that it does not format the expiration date correctly.

[hollabaq86]

Hi @Jgtutierrez v3.8.0 is fairly old... Are you seeing the same issue after updating to the latest version of our SDK, 3.92.1?

[Jgtutierrez]

Hi @hollabaq86 thanks for your answer, we update the package to version 3.92.1 but the error persists

I saw that in version 3.9.0, you disabled automatic formatting in old versions, could this be the reason for the observed behavior?

It is important to clarify that the latest version of the browser is being used for the tests

[hollabaq86]

@Jgtutierrez the update you mentioned in 3.9.0 was a result of bumping our dependency on restricted-input. Seeing as these changes are from 6 years ago, there's absolutely a possibility that Samsung browsers have changed since then :)

One last question I'm hoping you can confirm for me: you're only seeing this behavior on Samsung Internet Browser, and no other browsers?

[hollabaq86]

@Jgtutierrez I've tried replicating what you're seeing on a Samsung device using samsung internet browser, but I'm not encountering formatting issues. Are there any error logs that appear in your integration when trying to type in these fields?

Or, do you have a link to a demo site that reproduces the issue that we can take a look? If you don't feel comfortable sharing that publicly, please contact Braintree Support referencing this issue and the info I asked for, and we'll partner with Support to investigate this issue further.

[jmsjr]

Hi,

• Samsung Browser on Samsung S23 FE
• ( NOTE: The issue does NOT appear on Chrome Browser on the same Samsung device, only on Samsung browser )

I am seeing the same issue with the codepen provided by Braintree from https://developer.paypal.com/braintree/docs/guides/hosted-fields/examples/javascript/v3:

The following codepen URL is used :
https://codepen.io/braintree/pen/mPgdPN

I am also seeing this in our apps using :
Braintree Javascript SDK 3.101.0

See image below from my Samsung S23 FE device using the codepen URL above :

[jmsjr]

Hi,

• Samsung Browser on Samsung S23 FE
• ( NOTE: The issue does NOT appear on Chrome Browser on the same Samsung device, only on Samsung browser )

I am seeing the same issue with the codepen provided by Braintree from https://developer.paypal.com/braintree/docs/guides/hosted-fields/examples/javascript/v3:

The following codepen URL is used : https://codepen.io/braintree/pen/mPgdPN

I am also seeing this in our apps using : Braintree Javascript SDK 3.101.0

See image below from my Samsung S23 FE device using the codepen URL above :

Here is again Samsung internet browser on the same Samsung S23 FE device using the
demo codepen from https://developer.paypal.com/braintree/docs/guides/hosted-fields/overview/javascript/v3#demo

.. from which you can see the missing formatting ( missing spaces after each 4-digits in the PAN ), missing formatting or missing slash on the expiration :