Automatically Detect Card Type - Spiralyze

Automatically Detect Card Type

Usability Medium Priority 75% Adoption 5 Seconds Saved

Reduce friction and perceived effort by automatically detecting the credit card type from the number entered – don’t hand the user an extra step.
Conversion Opportunity 0.1%

The only place anyone has to select their type of credit card (MasterCard, Visa, etc.) is in a poorly optimized online checkout. You don’t have to tell the grocery store clerk you use Visa, and you don’t have to tell many websites the same. The first few numbers in a credit card number signal this.

Still, many websites ask the user to select their card type. It’s not a daunting task, but it’s an extra step that slows the checkout process and adds perceived effort.

You reduce perceived workload and save space by doing this.

Usage

Detecting the card type is a straightforward feature to implement. The most common method is to have various credit card logos next to the card number field, and when a card type is detected, the correct logo is highlighted and the others are faded out.

The best implementations detect is as soon as the first few numbers are entered – doing this also serves as a subtle sort of positive reinforcement. It says “Hey, you’re entering a valid card, keep it up!”

As you can imagine, this is much simpler than having a user scan through a dropdown menu to select the card type.

Gamestop forces the user to select their card type from a dropdown menu.

REI properly detects and highlights the card type.

Adoption

0
20%
40%
60%
80%
100%

Automatically Detect Card Type has an 75% adoption rate among our benchmark group.

Best Practices

Highlight the Card Type

Next to the credit card field, highlight the logo of the detected card type.

Do it Live

Doing so live helps move the user along, reassuring them that they’re entering a valid card and getting closer to their purchase.

Examples

Good

REI Example

REI detects and highlights the right card type automatically.

Okay

Office Depot Example

Office Depot detects the card type, but does not highlight the specific type.

Bad

Gamestop Example

Gamestop forces the user to select their card type from a dropdown menu.