#DailyUI - 002 Credit Card Checkout

#DailyUI - 002 Credit Card Checkout.markdown

#DailyUI - 002 Credit Card Checkout

DailyUI #002 - Credit Card Checkout Tip: Don't forget to share on Twitter or Dribbble using #dailyui

Notes: Went with plain Bootstrap, I wanted to figure out how to detect and then display an icon based on what type of credit card it was. I found an angular script that fit the bill.

A Pen by Ryan Trimble on CodePen.

License.

index.html

<div ng-app="myApp" class="container">
  <div class="row">
    <div class="col-md-6">
      <h3>Example credit card numbers</h3>
      <table class="table table-striped table-bordered">
        <thead>
          <tr>
            <th>Credit Card Type</th>
            <th>Credit Card Number</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>American Express</td>
            <td>371449635398431</td>
          </tr>
          <tr>
            <td>Diners Club</td>
            <td>30569309025904</td>
          </tr>
          <tr>
            <td>Discover</td>
            <td>6011111111111117</td>
          </tr>
          <tr>
            <td>JCB</td>
            <td>3530111333300000</td>
          </tr>
          <tr>
            <td>MasterCard</td>
            <td>5555555555554444</td>
          </tr>
          <tr>
            <td>Visa</td>
            <td>4111111111111111</td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="col-md-6 well">
      <h1>Payment Information</h1>
      <form class="form">
        <div class="row">
          <div class="form-group col-md-12">
            <label for="name">Name</label>
            <input type="text" class="form-control" id="name" placeholder="Name">
          </div>
        </div>
        <div class="row"> 
          <div class="col-md-12">
            <label for="creditCardNumber">Credit Card Number</label>
            <div class="input-group">
              <input ng-model="myccno" type="text" class="form-control" id="creditCardNumber" placeholder="Credit Card Number">
              <div class="input-group-addon"><i class="{{(myccno | validate) || 'fa fa-credit-card-alt' }}"></i></div>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-md-4">
            <div class="form-group">
              <label for="expiryDate">Expiry Date</label>
              <input type="month" class="form-control" id="expiryDate">
            </div>
          </div>
          <div class="col-md-4">
            <label for="cvc">CVC</label>
            <input id="cvc" type="number" min="0" max="999" placeholder="CVC" class="form-control">
          </div>
        </div>
        <div class="row">
          <div class="col-md-12">
          <button class="col-md-12 btn btn-large btn-primary">Purchase</button>
          </div>
        </div>
      </form>
    </div>
  </div>
</div>

script.js

/*http://www.tamas.io/custom-angularjs-filter-to-determine-credit-card-type/*/
/*https://github.com/tamaspiros/angularjs-credit-card-validation/blob/master/index.html*/
angular.module('myApp', ['filters']);
angular.module('filters', []).
filter('validate', [function () {
    cardType="fa-credit-card-alt";
    return function (ccnumber) {
      if (!ccnumber) { return ''; }
      ccnumber = ccnumber.toString().replace(/\s+/g, '');
      var len = ccnumber.length;
      var cardType, valid;
      mul = 0,
      prodArr = [[0, 1, 2, 3, 4, 5, 6, 7, 8, 9], [0, 2, 4, 6, 8, 1, 3, 5, 7, 9]],
      sum = 0;
      while (len--) {
          sum += prodArr[mul][parseInt(ccnumber.charAt(len), 10)];
          mul ^= 1;
      }
      
      if (sum % 10 === 0 && sum > 0) {
        valid = "valid"
      } else {
        valid = "not valid"
      }
      
      if(/^(34)|^(37)/.test(ccnumber)) {
        cardType = "fa fa-cc-amex";
      }
      if(/^(62)|^(88)/.test(ccnumber)) {
        cardType = "fa fa-credit-card-alt";
      }
      if(/^30[0-5]/.test(ccnumber)) {
        cardType = "fa fa-cc-diners-club";
      }
      if(/^(2014)|^(2149)/.test(ccnumber)) {
        cardType = "fa fa-cc-diners-club";
      }
      if(/^36/.test(ccnumber)) {
        cardType = "fa fa-cc-diners-club";
      }
      if(/^(6011)|^(622(1(2[6-9]|[3-9][0-9])|[2-8][0-9]{2}|9([01][0-9]|2[0-5])))|^(64[4-9])|^65/.test(ccnumber)) {
        cardType = "fa fa-cc-discover";
      }
      if(/^35(2[89]|[3-8][0-9])/.test(ccnumber)) {
        cardType = "fa fa-cc-jcb";
      }
      if(/^(6304)|^(6706)|^(6771)|^(6709)/.test(ccnumber)) {
        cardType = "fa fa-credit-card-alt";
      }
      if(/^(5018)|^(5020)|^(5038)|^(5893)|^(6304)|^(6759)|^(6761)|^(6762)|^(6763)|^(0604)/.test(ccnumber)) {
        cardType = "fa fa-credit-card-alt";
      }
      if(/^5[1-5]/.test(ccnumber)) {
        cardType = "fa fa-cc-mastercard";
      }
      if (/^4/.test(ccnumber)) {
        cardType = "fa fa-cc-visa"
      }
      if (/^(4026)|^(417500)|^(4405)|^(4508)|^(4844)|^(4913)|^(4917)/.test(ccnumber)) {
        cardType = "fa fa-cc-visa"
      }
      return cardType;
    };
}]);

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.css

.fa{
  background:#FFF;
}

.fa-cc-visa{
  color:#0032AB;
}
.fa-cc-discover{
  color:#EB6206;
}
.fa-cc-amex{
  color:#42A48D;
}
.fa-cc-jcb{
  color:#00418F;
}
.fa-cc-diners-club{
  color:#0069AA;
}
.fa-cc-mastercard{
  color:#FF0018;
}

styles

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />