creditly/example.html at master · wangjohn/creditly · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<html>
  <link rel="stylesheet" href="src/creditly.css">
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  <script type="text/javascript" src="src/creditly.js"></script>
  <script type="text/javascript">
    $(function() {
      var creditly = Creditly.initialize(
          '.creditly-wrapper .expiration-month-and-year',
          '.creditly-wrapper .credit-card-number',
          '.creditly-wrapper .security-code',
          '.creditly-wrapper .card-type');

      $(".creditly-card-form .submit").click(function(e) {
        e.preventDefault();
        var output = creditly.validate();
        if (output) {
          // Your validated credit card output
          console.log(output);
        }
      });
    });
  </script>
</html>
<body>
  <form class="creditly-card-form">
    <section class="creditly-wrapper blue-theme">
      <div class="credit-card-wrapper">
        <div class="first-row form-group">
          <div class="col-sm-8 controls">
            <label class="control-label">Card Number</label>
            <input class="number credit-card-number form-control"
              type="text" name="number"
              pattern="(\d*\s){3}\d*"
              inputmode="numeric" autocomplete="cc-number" autocompletetype="cc-number" x-autocompletetype="cc-number"
              placeholder="&#149;&#149;&#149;&#149; &#149;&#149;&#149;&#149; &#149;&#149;&#149;&#149; &#149;&#149;&#149;&#149;">
          </div>
          <div class="col-sm-4 controls">
            <label class="control-label">CVV</label>
            <input class="security-code form-control"·
              inputmode="numeric"
              pattern="\d*"
              type="text" name="security-code"
              placeholder="&#149;&#149;&#149;">
          </div>
        </div>
        <div class="second-row form-group">
          <div class="col-sm-8 controls">
            <label class="control-label">Name on Card</label>
            <input class="billing-address-name form-control"
              type="text" name="name"
              placeholder="John Smith">
          </div>
          <div class="col-sm-4 controls">
            <label class="control-label">Expiration</label>
            <input class="expiration-month-and-year form-control"
              type="text" name="expiration-month-and-year"
              placeholder="MM / YY">
          </div>
        </div>
        <div class="card-type">
        </div>
      </div>
    </section>
    <button class="submit"><span>Submit</span></button>
  </form>
</body>