amaroteam / react-credit-cards

Beautiful credit cards for your payment forms
https://ovvwzkzry9.codesandbox.io/
MIT License
2.58k stars 300 forks source link

Refactor preview parsing #79

Open gilbarbara opened 4 years ago

gilbarbara commented 4 years ago

It should work with Amex, Diners, 16, and 19 characters.

cassiocardoso commented 4 years ago

I was checking this issue and I noticed this line:

https://github.com/amarofashion/react-credit-cards/blob/master/src/index.js#L74

Given the logic below where the try to update the maxLength depending on the number passed, I don't think it's necessary to set the maxLength to 19 if it is in preview mode.

I did some tests locally with 16, 19 digit cards as well the Diners type mentioned in issue #70 and it appears to solve our issues.

@gilbarbara what do you think? Any edge cases that you can think of?

gilbarbara commented 4 years ago

Actually the task is to handle formatting with these cards and not exactly detect the maxLength. MaxLenght is just a safeguard to avoid breaking the UI.

Is that it?

cassiocardoso commented 4 years ago

This is what I noticed locally while testing with the number provided in issue #70 (preview mode - Diners card w/ 14 digits): Screenshot 2020-05-12 at 15 25 53 (notice the extra bullet at the end of the number)

That's why I thought we would need to update maxLength for this case.