Skeuocard
Skeuocard by kenkeiter

      
        
        Skeuocard progressively enhances credit card inputs to provide a skeuomorphic interface.
        Learn more about the concepts behind the design: "Redesigning The Credit Card Input" by Ken Keiter.
        
        
          View the Project on GitHub kenkeiter/skeuocard
        
        
          Download ZIP File
          Download TAR Ball
          View On GitHub
        
      
      
            
              Either you have Javascript disabled, or you're using an unsupported browser, amigo! That's why you're seeing this old-school credit card input form instead of a fancy new Skeuocard. On the other hand, at least you know it gracefully degrades...
              
              Never tell me the odds! Enable it anyway.
            
            Card Type
            
            Card Number
            
            Expiration Month
            
            Expiration Year
            
            Cardholder's Name
            
            Card Validation Code
            
          
      
Give it a try.

If you have a recent browser, the credit card input above will be progressively enhanced by Skeuocard. To begin, simply enter your card number (don't worry, it's not sent outside your browser). If that's too fishy for you (and I don't blame you), you can also try these valid credit card numbers to get the feel of it:

Visa: 4111111111111111
Discover: 6011111111111117
MasterCard: 5111111111111118
Maestro: 5018111111111112
JCB: 3511111111111119
Union Pay: 6211111111111111
American Express: 371111111111114
Diners Club: 38111111111119


The numbers above will work with any expiration date (as long as it's in the future), any name, and any CVC code (the three or four digit verification code), since those are all validated on the server side upon authorization.

How It Works

When you begin entering your card number, Skeuocard attempts to match it to an accepted card type. Once it is able to do so, it modifies the layout of the card to match the card product (Visa, MasterCard, etc) and makes any tweaks specific to the issuer -- for example, the special layout of the Chase Sapphire card.

As you enter your information, Skeuocard modifies the underlying form values from your original, non-enhanced form. It also validates each field to find simple user mistakes and missing fields.

If the card product has fields on both sides of the card (for example, placing the CVC code on the back) the user will be prompted to flip the card to fill in the remaining fields.

Get It!

Check out Skeuocard's GitHub repository for documentation and source. Skeuocard is a work in progress, and I'll be doing my best to add new credit card layouts as quickly as people contribute them.

Skeuocard is provided under the flexible MIT license.

      
      
    