VGS Collect (Angular)

by VeryGoodFiddle

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<script src="https://js.verygoodvault.com/vgs-collect/1/AC2nt8erbFu3svSWxmyTZr1b.js"></script>
<html ng-app="testApp">

  <head>
    <title>Angular demo</title>
  </head>

  <body ng-controller="InitCollect">

    <div class="row" ng-init="initFields()">

      <div class="col-sm-12">
        <div id="cc-name" class="form-group">
          <div class="form-control-static">
            <span class="fake-input"></span>
          </div>
        </div>
      </div>
      <div class="col-sm-12">
        <div id="cc-number" class="form-group">
          <div class="form-control-static">
            <span class="fake-input"></span>
          </div>
        </div>
      </div>
      <div class="col-sm-12">
        <div id="cc-cvc" class="form-group">
          <div class="form-control-static">
            <span class="fake-input"></span>
          </div>
        </div>
      </div>
      <div class="col-sm-12">
        <div id="cc-expiration-date" class="form-group">
          <div class="form-control-static">
            <span class="fake-input"></span>
          </div>
        </div>
      </div>
    </div>
    <button type="button" ng-click="submit()" class="btn btn-primary">Submit    
    </button>
  </body>

</html>

CSS

body {
  padding: 15px;
}

.fake-input iframe {
  height: 32px;
  max-width: 100%;
  border: solid 1px #ccc;
  border-radius: 4px;
  padding-left: 4px;
}

JavaScript

var testApp = angular.module('testApp', []);

testApp.controller('InitCollect', function($scope) {
  $scope.submit = function() {
      $scope.secureForm.submit('/post', {}, function(status, response) {});
  };
  
  $scope.initFields = function() {

    var vault = 'tntw1pznlam';
    $scope.secureForm = VGSCollect.create(vault, function(state) {});

    var field = $scope.secureForm.field('#cc-name .fake-input', {
      type: 'text',
      name: 'card_name',
      color: '333333',
      placeholder: 'Credit card holder name',
      validations: ['required'],
    });

    $scope.secureForm.field('#cc-number .fake-input', {
      type: 'card-number',
      name: 'card_number',
      successColor: 'green',
      errorColor: 'red',
      placeholder: 'Credit card number',
      validations: ['required', 'validCardNumber'],
    });

    $scope.secureForm.field('#cc-cvc .fake-input', {
      type: 'card-security-code',
      name: 'card_cvc',
      placeholder: 'CVC',
      validations: ['required', 'validCardSecurityCode', '/^\\d/'],
    });

    $scope.secureForm.field('#cc-expiration-date .fake-input', {
      type: 'card-expiration-date',
      name: 'card_exp',
      placeholder: 'Expiration date',
      validations: ['required', 'validCardExpirationDate']
    });
  };
});