Useful Javascript: Detect and Indicate Credit Card Type

JavaScript: Credit Card Type Detection

I added this useful bit of JavaScript code to an ecommerce project (www.vintagecellars.com) to detect the type of Credit Card someone is entering on a website. enjoy!

This JavaScript needs to be added to the <head> of the document:

<script type="text/javascript">
// <![CDATA[
function SelectCC(ccnum) {
var first = ccnum.charAt(0);
var second = ccnum.charAt(1);
var third = ccnum.charAt(2);
var fourth = ccnum.charAt(3);
if (first == "4") {
//Visa
document.getElementById("mastercard").src="/images/mastercard-card-bw.png";
document.getElementById("amex").src="/images/amex-card-bw.png";
document.getElementById("discover").src="/images/discover-card-bw.png";
document.getElementById("visa").src="/images/visa-card.png";
document.getElementById("cctype").value="1";
}
else if ( (first == "3") && ((second == "4") || (second == "7")) ) {
//American Express
document.getElementById("mastercard").src="/images/mastercard-card-bw.png";
document.getElementById("visa").src="/images/visa-card-bw.png";
document.getElementById("discover").src="/images/discover-card-bw.png";
document.getElementById("amex").src="/images/amex-card.png";
document.getElementById("cctype").value="3";
}
else if ( (first == "5") ) {
//Mastercard
document.getElementById("amex").src="/images/amex-card-bw.png";
document.getElementById("visa").src="/images/visa-card-bw.png";
document.getElementById("discover").src="/images/discover-card-bw.png";
document.getElementById("mastercard").src="/images/mastercard-card.png";
document.getElementById("cctype").value="2";
}
else if ( (first == "6") && (second == "0") && (third == "1") && (fourth == "1") ) {
//Discover
document.getElementById("amex").src="/images/amex-card-bw.png";
document.getElementById("visa").src="/images/visa-card-bw.png";
document.getElementById("mastercard").src="/images/mastercard-card-bw.png";
document.getElementById("discover").src="/images/discover-card.png";
document.getElementById("cctype").value="4";
}
else {
document.getElementById("amex").src="/images/amex-card-bw.png";
document.getElementById("visa").src="/images/visa-card-bw.png";
document.getElementById("mastercard").src="/images/mastercard-card-bw.png";
document.getElementById("discover").src="/images/discover-card-bw.png";
document.getElementById("cctype").value="";
}
}
// ]]></script>

Then you need the credit card types indicated on the page in images:

<div>Card Type:
<img id="visa" src="/images/visa-card.png" alt="" />
<img id="mastercard" src="/images/mastercard-card.png" alt="" />
<img id="amex" src="/images/amex-card.png" alt="" />
<img id="discover" src="/images/discover-card.png" alt="" /></div>

You will need to upload Credit Card Type image files, full color and black and white versions, to an “/images/” directory.

Lastly, you will need the input field with the user action code assigned:

<input id="ccnum" onkeyup="SelectCC(this.value)" name="ccnum" />

You can see this script in action on www.vintagecellars.com.

Tags: , ,

One Response to “Useful Javascript: Detect and Indicate Credit Card Type”

  1. Adam says:

    Awesome UX helper there, I’d use a sprite and background positioning to display card types.