3

I am trying to build a quick prototype with Zurb Foundation. Which is working great. I did have one question I am trying to figure out and their documentation has not helped me.

When validating a field as a credit card. I want to leverage the ability to detect Card Type and display the corresponding card image in a postfix. Any advice on how to do this or should I scrap this for the prototype? Mind you this doesn't have to be useable on a live web app. Just need to fake it for testing.

Thanks in advance for your help!

CarterMan
  • 257
  • 1
  • 3
  • 16

2 Answers2

1

I want to leverage the ability to detect Card Type and display the corresponding card image in a postfix

I think you are mistaking Foundation with a PHP (Insert other server side as appropriate), Foundation is certainly more than capable of doing this but without some sort of server side work going on Foundation has no idea what a card is never mind how to display different images based on the type of card used. You will need to write some sort of server side script to detect what card is being used and store all the possible options then and only then would I worry about what Zurb could do with you.

On a side note I'm sure a bank or someone out there will have created an Api to allow the detection of cards for you to use, as I would think it is probably a bigger job in its self than you think.

Doug
  • 1,850
  • 23
  • 50
  • Thats what i figured. Thanks for the direction I figured it would be a bit more effort than i needed for a prototype. – CarterMan Aug 21 '14 at 02:07
1

You do not need to run the entire credit card number server-side to detect the type of card. Visa card numbers start with a 4, MasterCard starts with 51-55, and Amex starts with 34 or 37.

You can use RegEx and JavaScript to detect the card type.

See this related Stack Overflow question that contains the Regular Expressions for the different types of cards: How do you detect Credit card type based on number?

Community
  • 1
  • 1
Colin Marshall
  • 2,142
  • 2
  • 21
  • 31