magento auto selected credit card type

Now I thought if user will enter credit card number and then depending upon the card number related credit card logo will appear I mean credit card type will auto selected at that time.Then this is decrease one step for user.Now in this tutorial I am going to describe step by step for magento auto selected credit card type.

Now a days most of people want to set most of things as automatic and less work to do, so user will go for lots of steps in magento I mean user needs to select credit card type and then enter credit card number which may take some extra time to user and may create little hesitation.

Works for paypal pro in magento’s onestep checkout page
Only for Visa, Discover, Mastercard, and Amex ,Maestro ,Solo card type
jQuery is required as the javascript is been built upin jQuery

So lets move to our all steps

Here I am going to edit three files those are

opcheckout.js
cc.phtml
style.css

step 1:

Add the logic that some jQuery codes to the last of opcheckout.js. For that you have to copy from /skin/frontend/base/default/js/opcheckout.js to /skin/frontend/[yourpackage]/[yourtheme]/js/opcheckout.js

(function($) {
    $.getCreditCardType = function(val) {
        if(!val || !val.length) return undefined;
            var type = new Array;
            type[1] = '^4[0-9]{12}(?:[0-9]{3})?$';                          // visa
            type[2] = '^5[1-5][0-9]{14}$';                                  // mastercard
            type[3] = '^65[4-9][0-9]{13}|64[4-9][0-9]{13}|6011[0-9]{12}|(622(?:12[6-9]|1[3-9][0-9]|[2-8][0-9][0-9]|9[01][0-9]|92[0-5])[0-9]{10})$';// Discover Card
            type[4] = '^3[47][0-9]{13}$';                                   // amex
            type[5] = '^(5018|5020|5038|6304|6759|6761|6763)[0-9]{8,15}$'; // Maestro Card
            type[6] = '^(6334|6767)[0-9]{12}|(6334|6767)[0-9]{14}|(6334|6767)[0-9]{15}$';// Solo Card
            
            //type[7] = '^389[0-9]{11}$';                                     // Carte Blanche Card
            //type[8] = '^3(?:0[0-5]|[68][0-9])[0-9]{11}$';                   // Diners Club Card
            //type[9] = '^(?:2131|1800|35\d{3})\d{11}$';                      // JCB
            //type[10] = '^63[7-9][0-9]{13}$';                                 // Insta Payment Card
            //type[11] = '^(6304|6706|6709|6771)[0-9]{12,15}$';                // Laser Card
            //type[12] = '^(62[0-9]{14,17})$';                                // Union Pay Card
            //type[13] = '^9[0-9]{15}$';                                      // KoreanLocalCard
            //type[14] = '^(6541|6556)[0-9]{12}$';                            // BCGlobal
            
            var ccnum = val.replace(/[^\d.]/g, '');
            var returntype = 0;

            $.each(type, function(idx, re) {
                var regex = new RegExp(re);
                if(regex.test(ccnum) && idx>0) {
                    returntype = idx;
                }
            });
            returntype = parseInt(returntype);
            console.log('returntype: '+returntype);
            switch(returntype) {
                case 0: return undefined;
                case 1: return 'visa';
                case 2: return 'mastercard';
                case 3: return 'discover';
                case 4: return 'amex';
                case 5: return 'maestro';
                case 6: return 'solo';
        };
        
        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=paypal_direct_cc_type]").val('');
            switch($.getCreditCardType($(this).val())) {
                case 'visa':
                    $('#credit-card-type .VI').addClass('active');
                    $("input[id=paypal_direct_cc_type]").val('VI');
                break;
                case 'mastercard':
                    $('#credit-card-type .MC').addClass('active');
                    $("input[id=paypal_direct_cc_type]").val('MC');
                break;
                case 'amex':
                    $('#credit-card-type .AE').addClass('active');
                    $("input[id=paypal_direct_cc_type]").val('AE');
                break;
                case 'discover':
                    $('#credit-card-type .DI').addClass('active');
                    $("input[id=paypal_direct_cc_type]").val('DI');
                break;
                case 'maestro':
                    $('#credit-card-type .SM').addClass('active');
                    $("input[id=paypal_direct_cc_type]").val('SM');
                break;
                case 'solo':
                    $('#credit-card-type .SO').addClass('active');
                    $("input[id=paypal_direct_cc_type]").val('SO');
                break;
            };
        };
        return this.each(function() {
            $(this).bind('keyup',keyupHandler).trigger('keyup');
        });
    };
})(jQuery);

(function($) {

$.getCreditCardType = function(val) {

if(!val || !val.length) return undefined;

var type = new Array;

type[1] = '^4[0-9]{12}(?:[0-9]{3})?$'; // visa

type[2] = '^5[1-5][0-9]{14}$'; // mastercard

type[3] = '^65[4-9][0-9]{13}|64[4-9][0-9]{13}|6011[0-9]{12}|(622(?:12[6-9]|1[3-9][0-9]|[2-8][0-9][0-9]|9[01][0-9]|92[0-5])[0-9]{10})$';// Discover Card

type[4] = '^3[47][0-9]{13}$'; // amex

type[5] = '^(5018|5020|5038|6304|6759|6761|6763)[0-9]{8,15}$'; // Maestro Card

type[6] = '^(6334|6767)[0-9]{12}|(6334|6767)[0-9]{14}|(6334|6767)[0-9]{15}$';// Solo Card

//type[7] = '^389[0-9]{11}$'; // Carte Blanche Card

//type[8] = '^3(?:0[0-5]|[68][0-9])[0-9]{11}$'; // Diners Club Card

//type[9] = '^(?:2131|1800|35\d{3})\d{11}$'; // JCB

//type[10] = '^63[7-9][0-9]{13}$'; // Insta Payment Card

//type[11] = '^(6304|6706|6709|6771)[0-9]{12,15}$'; // Laser Card

//type[12] = '^(62[0-9]{14,17})$'; // Union Pay Card

//type[13] = '^9[0-9]{15}$'; // KoreanLocalCard

//type[14] = '^(6541|6556)[0-9]{12}$'; // BCGlobal

var ccnum = val.replace(/[^\d.]/g, '');

var returntype = 0;

$.each(type, function(idx, re) {

var regex = new RegExp(re);

if(regex.test(ccnum) && idx>0) {

returntype = idx;

}

});

returntype = parseInt(returntype);

console.log('returntype: '+returntype);

switch(returntype) {

case 0: return undefined;

case 1: return 'visa';

case 2: return 'mastercard';

case 3: return 'discover';

case 4: return 'amex';

case 5: return 'maestro';

case 6: return 'solo';

};

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=paypal_direct_cc_type]").val('');

switch($.getCreditCardType($(this).val())) {

case 'visa':

$('#credit-card-type .VI').addClass('active');

$("input[id=paypal_direct_cc_type]").val('VI');

break;

case 'mastercard':

$('#credit-card-type .MC').addClass('active');

$("input[id=paypal_direct_cc_type]").val('MC');

break;

case 'amex':

$('#credit-card-type .AE').addClass('active');

$("input[id=paypal_direct_cc_type]").val('AE');

break;

case 'discover':

$('#credit-card-type .DI').addClass('active');

$("input[id=paypal_direct_cc_type]").val('DI');

break;

case 'maestro':

$('#credit-card-type .SM').addClass('active');

$("input[id=paypal_direct_cc_type]").val('SM');

break;

case 'solo':

$('#credit-card-type .SO').addClass('active');

$("input[id=paypal_direct_cc_type]").val('SO');

break;

};

return this.each(function() {

$(this).bind('keyup',keyupHandler).trigger('keyup');

});

};

})(jQuery);

Step2:

modify payment credit card form . This file is not fixed one because depending upon the checkout for you may need to change another file. So now for paypal pro credit card form I am changing cc.phtml file for magento auto selected credit card type.
copy from base theme /app/design/frontend/base/default/template/payment/form/cc.phtml to your custom one /app/design/frontend/[custom_package]/[custom_theme]/template/payment/form/cc.phtml.

find lines near to 37-48

<li>
	<label for="<?php echo $_code ?>_cc_type" class="required"><em>*</em>< ?php echo $this->__('Credit Card Type') ?></label>
	<div class="input-box">
		<select id="<?php echo $_code ?>_cc_type" name="payment[cc_type]" class="required-entry validate-cc-type-select">
			<option value="">< ?php echo $this->__('--Please Select--')?></option>
			< ?php $_ccType = $this->getInfoData('cc_type') ?>
			< ?php foreach ($this->getCcAvailableTypes() as $_typeCode => $_typeName): ?>
			<option value="<?php echo $_typeCode ?>"< ?php if($_typeCode==$_ccType): ?> selected="selected"< ?php endif ?>>< ?php echo $_typeName ?></option>
			< ?php endforeach ?>
		</select>
	</div>
</li>

<li>

<label for="<?php echo $_code ?>_cc_type" class="required"><em>*</em>< ?php echo $this->__('Credit Card Type') ?></label>

<select id="<?php echo $_code ?>_cc_type" name="payment[cc_type]" class="required-entry validate-cc-type-select">

<option value="">< ?php echo $this->__('--Please Select--')?></option>

< ?php $_ccType = $this->getInfoData('cc_type') ?>

< ?php foreach ($this->getCcAvailableTypes() as $_typeCode => $_typeName): ?>

<option value="<?php echo $_typeCode ?>"< ?php if($_typeCode==$_ccType): ?> selected="selected"< ?php endif ?>>< ?php echo $_typeName ?></option>

< ?php endforeach ?>

</select>

</div>

</li>

replace with

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

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

find lines near to 52

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

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

then add code after above code

<ul id="credit-card-type">
	< ?php foreach ($this->getCcAvailableTypes() as $_typeCode => $_typeName): ?>
	<li class="<?php echo $_typeCode ?>">< ?php echo $_typeName ?></li>
	< ?php endforeach ?>
</ul>

< ?php foreach ($this->getCcAvailableTypes() as $_typeCode => $_typeName): ?>

< ?php endforeach ?>

</ul>

and finally add at top of cc.phtml file

<script type="text/javascript">
jQuery( document ).ready(function($) {
$('#paypal_direct_cc_number').creditCardType(); 
});
</script>

jQuery( document ).ready(function($) {

$('#paypal_direct_cc_number').creditCardType();

});

</script>

Step3:

Add to your theme stylesheet of your custom.css file

/skin/frontend/default/default/css/style.css or /skin/frontend/your_ackage/your_theme/css/style.css

#credit-card-type {width:270px;}
#credit-card-type .VI { background:url(visa_hover.jpg) no-repeat left top; width:42px; height:26px; }
#credit-card-type .MC { background:url(master_hover.jpg) no-repeat left top; width:42px; height:26px; }
#credit-card-type .AE { background:url(amirican_hover.jpg) no-repeat left top; width:42px; height:26px; }
#credit-card-type .DI {background:url(discover_hover.jpg) no-repeat left top; width:42px; height:26px;}
#credit-card-type .SM{background:url(mestro_hover.jpg) no-repeat left top; width:42px; height:26px;}
#credit-card-type .SO {background:url(sola_hover.jpg) no-repeat left top; width:42px; height:26px;}
#credit-card-type .VI.active {background:url(visa.jpg) no-repeat left top; width:42px; height:26px;}
#credit-card-type .MC.active  {background:url(master.jpg) no-repeat left top; width:42px; height:26px;}
#credit-card-type .AE.active  {background:url(amirican.jpg) no-repeat left top; width:42px; height:26px;}
#credit-card-type .DI.active  {background:url(discover.jpg) no-repeat left top; width:42px; height:26px;}
#credit-card-type .SM.active  {background:url(mestro.jpg) no-repeat left top; width:42px; height:26px;}
#credit-card-type .SO.active  {background:url(sola.jpg) no-repeat left top; width:42px; height:26px;}

#credit-card-type {width:270px;}

#credit-card-type .VI { background:url(visa_hover.jpg) no-repeat left top; width:42px; height:26px; }

#credit-card-type .MC { background:url(master_hover.jpg) no-repeat left top; width:42px; height:26px; }

#credit-card-type .AE { background:url(amirican_hover.jpg) no-repeat left top; width:42px; height:26px; }

#credit-card-type .DI {background:url(discover_hover.jpg) no-repeat left top; width:42px; height:26px;}

#credit-card-type .SM{background:url(mestro_hover.jpg) no-repeat left top; width:42px; height:26px;}

#credit-card-type .SO {background:url(sola_hover.jpg) no-repeat left top; width:42px; height:26px;}

#credit-card-type .VI.active {background:url(visa.jpg) no-repeat left top; width:42px; height:26px;}

#credit-card-type .MC.active {background:url(master.jpg) no-repeat left top; width:42px; height:26px;}

#credit-card-type .AE.active {background:url(amirican.jpg) no-repeat left top; width:42px; height:26px;}

#credit-card-type .DI.active {background:url(discover.jpg) no-repeat left top; width:42px; height:26px;}

#credit-card-type .SM.active {background:url(mestro.jpg) no-repeat left top; width:42px; height:26px;}

#credit-card-type .SO.active {background:url(sola.jpg) no-repeat left top; width:42px; height:26px;}

Step4:

use below images for credit card icons

Common credit card vendor regular expressions:

Visa Card: ^4[0-9]{12}(?:[0-9]{3})?$
Mastercard: ^5[1-5][0-9]{14}$
Amex Card: ^3[47][0-9]{13}$
Carte Blanche Card: ^389[0-9]{11}$
Diners Club Card: ^3(?:0[0-5]|[68][0-9])[0-9]{11}$
Discover Card: ^65[4-9][0-9]{13}|64[4-9][0-9]{13}|6011[0-9]{12}|(622(?:12[6-9]|1[3-9][0-9]|[2-8][0-9][0-9]|9[01][0-9]|92[0-5])[0-9]{10})$
JCB Card: ^(?:2131|1800|35\d{3})\d{11}$
Visa Master Card: ^(?:4[0-9]{12}(?:[0-9]{3})?|5[1-5][0-9]{14})$
Insta Payment Card: ^63[7-9][0-9]{13}$
Laser Card: ^(6304|6706|6709|6771)[0-9]{12,15}$
Maestro Card: ^(5018|5020|5038|6304|6759|6761|6763)[0-9]{8,15}$
Solo Card: ^(6334|6767)[0-9]{12}|(6334|6767)[0-9]{14}|(6334|6767)[0-9]{15}$
Switch Card: ^(4903|4905|4911|4936|6333|6759)[0-9]{12}|(4903|4905|4911|4936|6333|6759)[0-9]{14}|(4903|4905|4911|4936|6333|6759)[0-9]{15}|564182[0-9]{10}|564182[0-9]{12}|564182[0-9]{13}|633110[0-9]{10}|633110[0-9]{12}|633110[0-9]{13}$
Union Pay Card: ^(62[0-9]{14,17})$
KoreanLocalCard: ^9[0-9]{15}$
BCGlobal: ^(6541|6556)[0-9]{12}$