Auto-detection of credit card type in a credit card form

Question

Some time ago (it might have started with Apple) designers started to use pattern of auto-detection of credit card type in credit card forms.

On the screen above you can see such a form (it's Apple). If you start to type in your credit card number all other credit card types icons will fade to gray.

I wonder if you have any experience with this kind of forms and do you know if they're improving the conversion rate.

At UXPin - the UX Design App we've decided to take a shortcut and just don't ask for a credit card type.

Do you think this lack of interactivity might decrease efficiency of our form?

If you want to play with examples above - here you'll find some wireframing templates: http://uxporn.uxpin.com/credit-card-form/

Answer 1

Your implementation is correct: don't ask for a card type. Jessica Enders did a great article on the subject for UXmas:

All in all, taking this approach means the business gets just as much information as they always had, with less effort required from the user, which in turn means greater conversion.

You should read the whole article, though; there are some design considerations worth being aware of.

Answer 2

If you accept all the common credit card types, showing the type isn't necessary or helpful. But, if you don't accept some of the common but ancillary card types, like Amex or Discover, the card selection can help inform the user.

Answer 3

This function works for the major cards. if the first number is 3 it's an Amex, 4 it's a Visa, 5 it's a Mastercard and 6 it's a Discover. The classes that are added or removed correspond to a sprited image with both color and b&w versions of the company logos or whatever image you'd like.

The real complexity is written about here. A more complex switch would be neccessary. http://en.wikipedia.org/wiki/Credit_card_numbers

determineCardType : function(el , ev) {
    firstNum = el.val().slice(0,1)
       this.cc.find('div').removeClass('amex_active').removeClass('mc_active').removeClass('visa_active').removeClass('disc_active');
    switch(firstNum) {
      case '3':
        this.cc.find('.amex').addClass('amex_active');
        break;
      case '4':
        this.cc.find('.visa').addClass('visa_active');
        break;
      case '5':
        this.cc.find('.mc').addClass('mc_active');
        break;
      case '6':
        this.cc.find('.disc').addClass('disc_active');
        break;
    }
  },