jCreditCard

This jQuery script is a user interface enhancement. The script first takes the type of preferred payment the user wants to use and gives the correct form. If credit card is selected, the script will know what type of credit card the user is using based on the credit card number. Using this information, it will dynamically indicate to the user that the correct credit card type has been selected and will change a hidden field to that type. It will also show the correct cvv instructions depending on credit card.

Demo

Numbers for demonstration. AMEX: 347, Discover: 6011, Visa: 4, Mastercard: 51.

Javascript

[javascript]
$(document).ready(function() {
$(‘input[name=paymenttype]:eq(0)’).click();
$("input[name=’paymenttype’]").change(function(){
if (($(this).val()) == ‘cc’){
$(‘.paypal’).css("opacity",0.5);
$(‘#ccs’).removeClass().addClass(‘all’);
$(‘#cc_fields’).slideDown();
}else if (($(this).val()) == ‘paypal’){
$(‘.paypal’).css("opacity",1);
$(‘#ccs’).removeClass().addClass(‘none’);
$(‘#cc_fields’).slideUp();
}
});
$("input[name=’cc_number’]").keyup(function(){
var visa = new RegExp("^4"),
mastercard = new RegExp("^5[1-5]"),
amex = new RegExp("^3[47]"),
discover = new RegExp("^(6011|622(1(2[6-9]|[3-9][0-9])|[2-8][0-9][0-9]|9([0-1][0-9]|2[0-5]))|64[4-9]|65)");
if ($(this).val().match(discover) != null){
$(‘#ccs’).removeClass().addClass(‘discover’)
$(‘input[name=user_cc]’).val(‘discover’);
}else if ($(this).val().match(visa) != null){
$(‘#ccs’).removeClass().addClass(‘visa’);
$(‘input[name=user_cc]’).val(‘visa’);
}else if ($(this).val().match(mastercard) != null){
$(‘#ccs’).removeClass().addClass(‘mastercard’);
$(‘input[name=user_cc]’).val(‘mastercard’);
}else if ($(this).val().match(amex) != null) {
$(‘#ccs’).removeClass().addClass(‘amex’);
$(‘input[name=user_cc]’).val(‘amex’);
}else {
$(‘#ccs’).removeClass().addClass(‘all’);
$(‘input[name=user_cc]’).val(”);
}
if ($(‘#ccs’).hasClass(‘amex’)){
$(‘#cvv’).addClass(‘cvvamex’);
} else {
$(‘#cvv’).removeClass(‘cvvamex’);
}
});
});
[/javascript]

CSS

[css]
.paypal {opacity:0.5}
#ccs {height:38px;width:215px;display:block;float:left;text-indent:-999px;margin-right:15px;}
#ccs.all {background:url(join_files/cards.png);}
#ccs.none {background:url("join_files/cards.png") repeat scroll 0 -38px transparent;}
#ccs.visa {background:url("join_files/cards.png") repeat scroll 0px -76px transparent;}
#ccs.mastercard {background:url("join_files/cards.png") repeat scroll 0 -114px transparent;}
#ccs.discover {background:url("join_files/cards.png") repeat scroll 0 -152px transparent;}
#ccs.amex {background:url("join_files/cards.png") repeat scroll 0 -190px transparent;}
#cvv {background:url("join_files/cvv.png") no-repeat 75px 25px;width:133px}
#cvv.cvvamex {background:url("join_files/cvvamex.png") no-repeat 75px 25px}
[/css]