I created a credit card entry site to practice react. I noticed that on the client side of my app chrome does not allow the user to even load the app because of the “deceptive site ahead” warning. On my mobile it works just fine. I would just like to know if this is an issue that would arise if I wanted to share this project with others. If so, how could I work around this issue?
(P.S if you are able to view the project and you have critiques I would love to hear them to improve my app and new react skills)
I see it.
Also, you have to actually restrict users from typing just about anything into boxes.
Expiration date should be drop down menu with options.
your cvc box is actually 3rd box. you wrote it into 2nd - 2nd should be year.
but yeah,main issue is user can write just about anything - card number should be limited to just accepting if numbers are inputed. and name opposite. only letters.
Thank you for your reply! The dropdown is a great idea, I will implement that soon.
I am not sure if I messed something up in the different window sizes, but on my end it looks like the CVC code is in the 3rd box?
Also I had trouble restricting user input to only 16 digits when using the
<input type='number'/>
,so my work around was to make it a text input and use a regex matching logic to disallow the user from submitting the details if they had non-numerical numbers typed in (the continue btn would throw a modal error and now allow them to continue). How can I restrict the amount of characters a user can enter when the input type is of number?
Usually pressing more details or advanced will give you the option to go ahead.
I noticed that the words “cvc” were above the year input box for the expiry date:
Thank you! and ah okay I see, I must have not check for certain window widths, I will fix that to make sure it displays above the correct box no matter the width.
Also I see the issue now with the CVC, thank you! I did not check for responsiveness of that part of my app for all screen widths. I see now how inconsistent it is and will strive to fix that as well!
