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.

credit card auto select in magento
credit card auto select in magento
  1. Works for paypal pro in magento’s onestep checkout page
  2. Only for Visa, Discover, Mastercard, and Amex ,Maestro ,Solo card type
  3. 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

  1. opcheckout.js
  2. cc.phtml
  3. 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


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

replace with


find lines near to 52


then add code after above code


and finally add at top of cc.phtml file



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



use below images for credit card icons

visa_hover visa sola_hover sola mestro_hover mestro master_hover master discover_hover discover amirican_hover amirican

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

Click here to download

Thanks for visiting . Please don’t forget to share if you got benefit from here

magento auto selected credit card type
The following two tabs change content below.
Jyotiranjan is one of passionate programmer who has been working in magento since 6 years and in the mean time he has developed enormous amount of modules and customisation of sites. He loves to write blogs and travel for long journeying.

Latest posts by Jyotiranjan Biswal (see all)

Tagged on:                 

Leave a Reply

Your email address will not be published. Required fields are marked *