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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 |
(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
1 2 3 4 5 6 7 8 9 10 11 12 |
<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> |
replace with
1 |
<input class="cc_type" id="<?php echo $_code ?/>_cc_type" type="hidden" name="payment[cc_type]" value="" /> |
find lines near to 52
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
1 2 3 4 5 |
<ul id="credit-card-type"> < ?php foreach ($this->getCcAvailableTypes() as $_typeCode => $_typeName): ?> <li class="<?php echo $_typeCode ?>">< ?php echo $_typeName ?></li> < ?php endforeach ?> </ul> |
and finally add at top of cc.phtml file
1 2 3 4 5 |
<script type="text/javascript"> 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
1 2 3 4 5 6 7 8 9 10 11 12 13 |
#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}$
you can download individual files and place them in your custom theme to make working