Skeuocard

by Dan Shahin

HTML

<link rel="stylesheet" href="http://demo.codersgrid.com/skeuocard/styles/skeuocard.reset.css">
<link rel="stylesheet" href="http://demo.codersgrid.com/skeuocard/styles/skeuocard.css">
<script src="http://demo.codersgrid.com/skeuocard/javascripts/vendor/css_browser_selector.js"></script>
<script src="http://demo.codersgrid.com/skeuocard/javascripts/skeuocard.js"></script>
<div class="credit-card-input no-js" id="skeuocard">
  <label for="cc_type">Card Type</label>
  <select name="cc_type">
    <option value="">...</option>
    <option value="visa">Visa</option>
    <option value="discover">Discover</option>
    <option value="mastercard">MasterCard</option>
    <option value="amex">American Express</option>
    <option value="dinersclubintl">Diners Club</option>
  </select>
  <label for="cc_number">Card Number</label>
  <input type="text" name="cc_number" placeholder="XXXX XXXX XXXX XXXX" maxlength="19" size="19">
  <label for="cc_exp">Expiration Date (mm/yy)</label>
  <input type="text" name="cc_exp" placeholder="00/00">
  <label for="cc_name">Cardholder's Name</label>
  <input type="text" name="cc_name" placeholder="John Doe">
  <label for="cc_cvc">Card Validation Code</label>
  <input type="text" name="cc_cvc" placeholder="XXX" maxlength="3" size="3">
</div>
      
      
      <a target="_blank" href="http://kenkeiter.com/skeuocard/">http://kenkeiter.com/skeuocard/</a>

JavaScript

$(document).ready(function(){
  card = new Skeuocard($("#skeuocard"));
});