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
Tagged on:                 

Leave a Reply

Your email address will not be published.