Credit Card Field

Rishi Rawat Blog 2 Comments

For any ecommerce store capturing the credit card number is the most important step.  Therefore, it makes sense to have the most user-friendly credit card capture interface.  And Google has nailed this.

When you first click on their credit card box they show payment icons in the background of the text box.  Like this–


Then when you type the first digit of credit card they recognize the card type.  For example, if your first digit is 4 you have a VISA–


If your first digit is 5 you have a MasterCard–


This is an example of Trust.

Also, as you type your credit card number they add an extra space after every 4 digits to make it more readable (it also matches the way the numbers look on your physical card)–


What’s really crazy is that they seem to have some sort of real-time card validation going on because entering the fake 5555 5555 5555 5555 number threw up the red border error message. I have no idea how that’s done–


Anyway, the point is that this degree of attention to detail is what separates the champions from the rest.

Comments 2

  1. They probably know its a false number because the last digit in a cc number is a “check digit”, which is determined mathematically depending on the digits proceeding it. This way only 10% of randomly generated card numbers will be valid. UPC’s also use a check digit.

    1. Post

Leave a Reply

Your email address will not be published. Required fields are marked *