クレジットカード情報入力フォームを補助してくれるjQueryプラグイン

Creditly.jsというjQueryプラグインを利用します。デモもこちらから確認できます。
ソースはGitHubから落とせます。

 <link rel="stylesheet" href="file/creditly.css">
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  <script type="text/javascript" src="file/creditly.js"></script>
  <script type="text/javascript">
    $(function() {
      // For the gray theme
      var grayThemeCreditly = Creditly.initialize(
          '.creditly-wrapper.gray-theme .expiration-month-and-year',
          '.creditly-wrapper.gray-theme .credit-card-number',
          '.creditly-wrapper.gray-theme .security-code',
          '.creditly-wrapper.gray-theme .card-type');

      $(".creditly-gray-theme-submit").click(function(e) {
        e.preventDefault();
        var output = grayThemeCreditly.validate();
        if (output) {
          // Your validated credit card output
          console.log(output);
        }
      });
    });
  </script>

<form class="creditly-card-form">
        <div class="top-level-wrapper gray-theme-wrapper">
          <section class="creditly-wrapper gray-theme">
            <h3>クレジットカード</h3>
            <i>
              <div class="card-type" style="text-align:right;margin-top:10px;margin-right:10px;min-height:20px;margin-bottom:-15px"></div>
            </i>
            <div class="credit-card-wrapper">
              <div class="first-row form-group">
                <div class="col-sm-8 controls">
                  <label class="control-label">クレジットカード番号</label>
                  <input class="number credit-card-number form-control"
                    type="text" name="number"
                    pattern="\d*"
                    inputmode="numeric" autocomplete="cc-number" autocompletetype="cc-number" x-autocompletetype="cc-number"
                    placeholder="•••• •••• •••• ••••">
                </div>
                <div class="col-sm-4 controls">
                  <label class="control-label">セキュリティコード</label>
                  <input class="security-code form-control"·
                    inputmode="numeric"
                    pattern="\d*"
                    type="text" name="security-code"
                    placeholder="•••">
                </div>
              </div>
              <div class="second-row form-group">
                <div class="col-sm-8 controls">
                  <label class="control-label">カード名義</label>
                  <input class="billing-address-name form-control"
                    type="text" name="name"
                    placeholder="TARO YAMADA">
                </div>
                <div class="col-sm-4 controls">
                  <label class="control-label">有効期限（月/年）</label>
                  <input class="expiration-month-and-year form-control"
                    type="text" name="expiration-month-and-year"
                    placeholder="01 / 14">
                </div>
              </div>
            </div>
          </section>
          <button class="creditly-gray-theme-submit"><span>Submit</span></button>
        </div>

      </form>