Magento: Automatically Determine Credit Card Type

Why would you ask your users to select their card type? That’s ridiculous, but that is how the default magento onepage checkout performs.

The following tutorial will show you how to hide the credit card select box. Instead of asking users to select the card type, we will determine the card type based on the first digit of the credit card. After determining the credit card type, we will highlight the type of credit card entered.

We will be using this code from Pawl Decowski: jquerycreditcardvalidator.com.

Update: We are now featuring another method here. We will be using some code based on this: http://pastebin.com/RbjLL2kN

When this tutorial was originally started, the method we were using was great, but it became extremely complicated to the point where a plugin should be created. Instead of describing that method, we are going to show you how to do it another way.

Caveats:

• Works only with Authorize.net and Magento’s Onestep Checkout
• This code only works with Visa, Discover, Mastercard, and Amex. Adding support for additional cards is not a problem.
• Requires jQuery

Step 1

Add a little jQuery to end of opcheckout.js (copy from /skin/frontend/base/default/js/ to your own theme).

 (function($) {
        $.getCreditCardType = function(val) {
          if(!val || !val.length) return undefined;
          switch(val.charAt(0)) {
            case '4': return 'visa';
            case '5': return 'mastercard';
            case '3': return 'amex';
            case '6': return 'discover';
          };
          return undefined;
        };
        $.fn.creditCardType = function(options) {
          var settings = {
              target: '#credit-card-type',
          };
          if(options) {
              $.extend(settings, options);
          };
          var keyupHandler = function() {
            $("#credit-card-type li").removeClass("active");
			$("input[id=authorizenet_cc_type]").val('');
            switch($.getCreditCardType($(this).val())) {
              case 'visa':
               $('#credit-card-type .VI').addClass('active');
			   $("input[id=authorizenet_cc_type]").val('VI');
                break;
              case 'mastercard':
               $('#credit-card-type .MC').addClass('active');
			   $("input[id=authorizenet_cc_type]").val('MC');
                break;
              case 'amex':
                $('#credit-card-type .AE').addClass('active');
			    $("input[id=authorizenet_cc_type]").val('AE');
                break;
              case 'discover':
                $('#credit-card-type .DI').addClass('active');
			   $("input[id=authorizenet_cc_type]").val('DI');
                break;
            };
          };
          return this.each(function() {
            $(this).bind('keyup',keyupHandler).trigger('keyup');
          });
        };
    })(jQuery);

(Look at Pawels code linked in the intro to add support for additional cards)

Step 2

Modify the Credit Card payment form. Dependent upon your checkout solution, you may need to modify another file.

Copy /app/design/frontend/base/default/template/payment/form/cc.phtml to your theme

• Find lines 37-48:

  </pre>
  </li>
  	<li><label class="required" for="<?php echo $_code ?>_cc_type"><em>*</em><!--?php echo $this--->__('Credit Card Type') ?></label>
  <div class="input-box">
  
  
  
  <select class="required-entry validate-cc-type-select" name="payment[cc_type]"><option value="&quot;<?php">"<!--?php if($_typeCode==$_ccType): ?--> selected="selected"<!--?php endif ?-->><!--?php echo $_typeName ?--></option></select>
  
  </div></li>
  	<li>
  <pre>
  

• Replace with:

<input class="cc_type" id="<?php echo $_code ?>_cc_type" type="hidden" name="payment[cc_type]" value="" />

• Find near lines 53-54:

  <input class="input-text validate-cc-number validate-cc-type" id="<?php echo $_code ?>_cc_number" title="<?php echo $this->__('Credit Card Number') ?>" type="text" name="payment[cc_number]" value="" />
  
  
  

• After, Add:

  </pre>
  <ul id="credit-card-type">
  	<li class="VI">Visa</li>
  	<li class="MC">Mastercard</li>
  	<li class="AE">American Express</li>
  	<li class="DI">Discover</li>
  </ul>
  <pre>
  [/ul]

• Add to top of cc.phtml:

  <script type="text/javascript">// <![CDATA[
   jQuery( document ).ready(function($) {
  $('#authorizenet_cc_number').creditCardType(); 
  });
  // ]]></script>
  

Step 3

Add to your themes stylesheet:

#credit-card-type {width:228px;}
#credit-card-type li {display:block;width:51px;height:32px;
background:url('../images/credit-card-icons.jpg') 0 -32px no-repeat;margin:5px 6px 0 0;overflow:hidden;text-indent:-500em;float:left;-webkit-transition:all .2s;-moz-transition:all .2s;-ms-transition:all .2s;-o-transition:all .2s;transition:all .2s;}
#credit-card-type .VI {background-position: 0px -32px;}
#credit-card-type .MC {background-position: -51px -32px;}
#credit-card-type .AE {background-position: -102px -32px;}
#credit-card-type .DI {background-position: -153px -32px;}
#credit-card-type .VI.active {background-position: 0px 0px;}
#credit-card-type .MC.active  {background-position: -51px 0px;}
#credit-card-type .AE.active  {background-position: -102px 0px;}
#credit-card-type .DI.active  {background-position: -153px 0px;}

You can use these credit card icons:

Upload to your themes image folder (ie. /skin/frontend/default/default/images/)

Prototype Version

We will release a plugin for Magento using Prototype instead of jQuery