Credit Card Field

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 inside their credit card box they show payment icons in background of text box.  Like this–

G_CC

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–

G_VISA

If your first digit is 5 you have a MasterCard–

G_MasterCard

Also, as your 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)–

G_Digits

What’s really crazy is that they seem to have some sort of realtime 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–

G_Error_Message

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

2 thoughts on “Credit Card Field

  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.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s