これは使いどころが多そうですね！ Web決済においてクレジットカードは重要な要素となっています。入力を少し間違えただけで使えないため、しっかりと入力してもらわないといけません。入力を間違えたとしても再入力はユーザにとって大きなストレスで購入を諦めてしまうかも知れません。 もともとクレジットカードにはチェックデジットをはじめ入力の正しさを検証する機能があります。そこでクライアントサイドでその検知が可能なCreditly.jsを使ってみましょう。

よくあるクレジットカード入力フォームです。

番号が間違っているとテキストボックスが赤くなります。

セキュリティコードの桁数が足りない場合もエラー感知されます。

セキュリティコードは一般的に3桁ですが、カード会社によっては4桁となっています。そういった点もCreditly.jsではサポートしていますので、事前チェックが可能になります（セキュリティコード自体の検証ができる訳ではありません）。

使い方は下のような感じで、クラスを渡すのが特徴的です。

var creditly = Creditly.initialize(
    '.creditly-wrapper .expiration-month-and-year',
    '.creditly-wrapper .credit-card-number',
    '.creditly-wrapper .security-code');

$(".creditly-card-form .submit").click(function(e) {
  e.preventDefault();
  var output = creditly.validate();
  if (output) {
    // Do something with your credit card output.
    console.log(output["number"]);
    console.log(output["security_code"]);
    console.log(output["expiration_month"]);
    console.log(output["expiration_year"]);
  }
});

Creditly.jsはjQuery/JavaScript製、MIT Licenseのオープンソース・ソフトウェアです。

wangjohn.github.io/creditly/ wangjohn/creditly