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);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>replace with
<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="" />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>and finally add at top of cc.phtml file
<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
#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
