search

braintree / braintree-web

A suite of tools for integrating Braintree in the browser
https://developer.paypal.com/braintree/docs/start/hello-client/javascript/v3
MIT License
442 stars 134 forks source link

Formatting is not applied to hosted files #679

Open Jgtutierrez opened 1 year ago

Jgtutierrez commented 1 year ago

General information

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 commented 1 year ago

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 commented 1 year ago

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

image

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 commented 1 year ago

@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 commented 1 year ago

@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 commented 4 months ago

Hi,

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 :

Screenshot_20240620_125731_Samsung Internet

jmsjr commented 4 months ago

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 :

Screenshot_20240620_125731_Samsung Internet

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 :

Screenshot_20240620_145524_Samsung Internet