I don’t understand why most online commerce sites ask the user to select what type of credit card they are going to enter instead of discerning the type programmatically and displaying feedback to the user. So here’s a small example I came up with on how to do just this.
Here’s a working example:
Here’s the HTML:
<html> <body> <form> <input id="ccNumber" onChange="SetTypeText(this.value)" /> <br /> <div id="cardType"></div> </form> </body> </html> |
Here’s the important part, the javascript:
<script type="text/javascript"> function SetTypeText(number) { var typeField = document.getElementById("cardType"); typeField.innerHTML = GetCardType(number); } function GetCardType(number) { var re = new RegExp("^4"); if (number.match(re) != null) return "Visa"; re = new RegExp("^(34|37)"); if (number.match(re) != null) return "American Express"; re = new RegExp("^5[1-5]"); if (number.match(re) != null) return "MasterCard"; re = new RegExp("^6011"); if (number.match(re) != null) return "Discover"; return ""; } </script> |
Hi,
I’ve used this on a site I run and have expanded upon the GetCardType function to show Visa Electron and Maestro cards. I was hoping to support Visa Debit too but they have dozens of possible start numbers depending on the bank and country (all within Visa’s ’4′ range). You can get my extended version here:
https://gist.github.com/1647586
That’s awesome Andy! Thanks for sharing!
Try this code ,
<script type=”text/javascript”>
function SetTypeText(number)
{
var typeField = document.getElementById(“cardType”);
numberx=number.split(‘ ‘).join(”);
//alert(numberx);
typeField.innerHTML = GetCardType(numberx);
}
function GetCardType(number)
{
var re = new RegExp(“^4[0-9]{12}(?:[0-9]{3})?$”);
if (number.match(re) != null)
return “Visa”;
re = new RegExp(“^3[47][0-9]{13}$”);
if (number.match(re) != null)
return “American Express”;
re = new RegExp(“^5[1-5][0-9]{14}$”);
if (number.match(re) != null)
return “MasterCard”;
re = new RegExp(“^6(?:011|5[0-9]{2})[0-9]{12}$”);
if (number.match(re) != null)
return “Discover”;
return “”;
}
</script>
Mel,
Thanks for the script. Most small businesses like ours only accept the major credit cards, so it’s very useful!
Thanks Tom!
I come from a small business background myself and am glad that you were able to use it.
@Foofy
Here’s a PHP version:
http://gist.github.com/99500
@sn00k:
Hey, thanks for the comment. You’re actually right, this method only works for the 4 most common credit card types: Visa, Amex, Discover, and Mastercard. My guess is that in more than 90% of business applications written these are the only cards accepted.
Honestly, when was the last time you had to accept a Diners Club card on a webpage?
This list is grossly incomplete and inaccurate.
http://en.wikipedia.org/wiki/Credit_card_numbers
I was looking this.
Great
Thank you
Hey Mel, cool post.
Hey, I’m trying to get your addy. I’ve got stuff of yours, you know
If you’ve moved away from “Happy Valley”, I can mail you your book and pad. I just want to make sure I get it back to you. Send me an email please!
Dallin Smith
Thanks!
It’s a pretty slick little piece of code. I’m using it right now on a new credit card entry page that eFile is doing. Although on that page I have it set up to change an image based on the card type they enter, just a little bit more code but a pretty cool affect.
Sir Mel,
that is wonderful and simple! the best thing is, it’s on the client side so it doesn’t take extra processing power on the server and doesn’t require a postback.