juto:skeuocard

Skeuomorphic credit card input form for meteor. A wrapper around kenkeiter's skeuocard.

Let your users enter their credit card details directly on the card.

You can try out a live demo at http://kenkeiter.com/skeuocard.

For more on the theory behind Skeuocard, check out the blog post that started it all: "Redesigning Credit Card Inputs" by Ken Keiter.

Installation

    meteor add juto:skeuocard

How to use

As per the instructions on ken keiter's site:

HTML

1    <template name="creditCardCheck">
2      <div class="credit-card-input no-js" id="skeuocard">
3        <p class="no-support-warning">
4          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...
5        </p>
6        <label for="cc_type">Card Type</label>
7        <select name="cc_type">
8          <option value="">...</option>
9          <option value="visa">Visa</option>
10          <option value="discover">Discover</option>
11          <option value="mastercard">MasterCard</option>
12          <option value="maestro">Maestro</option>
13          <option value="jcb">JCB</option>
14          <option value="unionpay">China UnionPay</option>
15          <option value="amex">American Express</option>
16          <option value="dinersclubintl">Diners Club</option>
17        </select>
18        <label for="cc_number">Card Number</label>
19        <input type="text" name="cc_number" id="cc_number" placeholder="XXXX XXXX XXXX XXXX" maxlength="19" size="19">
20        <label for="cc_exp_month">Expiration Month</label>
21        <input type="text" name="cc_exp_month" id="cc_exp_month" placeholder="00">
22        <label for="cc_exp_year">Expiration Year</label>
23        <input type="text" name="cc_exp_year" id="cc_exp_year" placeholder="00">
24        <label for="cc_name">Cardholder's Name</label>
25        <input type="text" name="cc_name" id="cc_name" placeholder="John Doe">
26        <label for="cc_cvc">Card Validation Code</label>
27        <input type="text" name="cc_cvc" id="cc_cvc" placeholder="123" maxlength="3" size="3">
28      </div>
29      <a class="submit btn btn-primary" href="#">Next</a>
30    </template>

Javascript

1    Template.creditCardCheck.onRendered(function(){
2      card = new Skeuocard($("#skeuocard"));
3    });
4    
5    Template.creditCardCheck.events({
6      'click .submit'() {
7        var isValid = card.isValid(); // true if the card is valid.
8        alert(isValid?"Valid!":"Not Valid.");
9      }
10    });