I'm unsure if this is more of a UX or security oriented question, but here goes nothing. I'm currently trying to simplify my e-store's checkout process by adding dynamic client side validations using JavaScript.
As memory serves, most checkout systems that do full-page refreshes anytime data is submitted will typically wipe out any credit card information the user has entered, I always assumed this was a security precaution.
In my case, credit card information never actually touches my servers. I send the credit card information over to my payment processing system over a secure connection who in turn send me a secure token which I can handle locally and perform validations off of.
With that said, I have the ability to dynamically display specific error messages to the user if the server returns an error response, e.g:
While this is certainly more convenient for the user, does anybody see anything wrong with this workflow from either a UX or security perspective?
Imagine this scenario:
Anita fills out her form & presses the "Pay Now" button expecting everything to succeed. Perhaps she's on a particularly poor wi-fi connection and goes off to do something else while she waits for the server to finish processing her submission. 30 seconds later the server finally responds with an error code pertaining to the entered CVC code, but before Anita gets back to deal with it some malicious person strolls along and has direct access to 2/3 of her credit card information.
What would the best practice here be from both a UX and security perspective?
type=password
. Accepted/most upvoted answer advised against it.