Determine Credit Card Type with Javascript

November 7th, 2008 by Mel Leave a reply »

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>
Advertisement

13 comments

  1. Andy says:

    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 

  2. Asanka Lakmal says:

    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>

  3. Tom says:

    Mel,
    Thanks for the script.  Most small businesses like ours only accept the major credit cards, so it’s very useful!

  4. Mel says:

    @Foofy

    That’s an awesome port. Good work and thanks for the comment!

  5. Mel says:

    @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?

  6. sn00k says:

    This list is grossly incomplete and inaccurate.

    http://en.wikipedia.org/wiki/Credit_card_numbers

  7. LimoGrabber says:

    I was looking this.
    Great
    Thank you

  8. Dallin Smith says:

    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

  9. Mel says:

    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. :smile:

  10. Bill says:

    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.

Leave a Reply