card

Imputing credit card information has always been plain and one of the less engaging transactions. Thankfully it is nice to see the craft of CSS magic applied in order to beget a more engaging way of doing this.

Jesse Pollak introduces this very nice plugin. Among its functionality it display card type based on the card number pattern, and introduces an animation that indicates the CVC location, rather than the most common “what Is this explanation” display on most common processing forms.

Even third party payment processing services at times fully lack a clean and engaging way to either store card payment information or receive them. A few services are out there though those are the exception to the rule. One worth mentioning is Stripe which has a payment form that could be easily customized and yet is responsive fitting real well on web application and mobile applications.

In addition, services like Stripe and 2CC provide a fully functional JavaScript API that enable the gathering of card information and its processing in a very secure way. Thus a plugin like Pollack could be easily implemented in the HTML markup, where these types of API are used.

The plugin is initialized with the following syntax 

   1: var CreditCardform =   $('.active form').card({ container: $('.card-wrapper')})

Markup:

   1: <div class="card-wrapper"></div>
   2:  
   3: <div class="form-container active">
   4:     <form action="">
   5:         <p class="small">Start typing in here to take over and try it out</p>
   6:         <div class="row collapse">
   7:             <div class="small-6 columns">
   8:                 <input placeholder="Card number" type="text" name="number" class="visa identified" >
   9:             </div>
  10:             <div class="small-6 columns">
  11:                 <input placeholder="Full name" type="text" name="name">
  12:             </div>
  13:         </div>
  14:         <div class="row collapse">
  15:             <div class="small-3 columns">
  16:                 <input placeholder="MM/YY" type="text" name="expiry">
  17:             </div>
  18:  
  19:             <div class="small-3 columns">
  20:                 <input placeholder="CVC" type="text" name="cvc">
  21:             </div>
  22:  
  23:             <div class="small-6 columns">
  24:                 <input type="submit" value="Submit" class="button postfix">
  25:             </div>
  26:         </div>
  27:     </form>
  28:  </div>
 
CardInfo

Play Demo