MapDotToObject Example

by VeryGoodFiddle

HTML

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

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

  <body ng-controller="CheckoutCtrl">

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

      <div class="col-sm-4">
        <div id="cc-name" class="form-group">
          <div class="form-control-static">
            <span class="fake-input"></span>
          </div>
        </div>
      </div>
      <div class="col-sm-4">
        <div id="cc-number" class="form-group">
          <div class="form-control-static">
            <span class="fake-input"></span>
          </div>
        </div>
      </div>
      <div class="col-sm-2">
        <div id="cc-cvc" class="form-group">
          <div class="form-control-static">
            <span class="fake-input"></span>
          </div>
        </div>
      </div>
      <div class="col-sm-2">
        <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('CheckoutCtrl', function($scope) {
  $scope.submit = function() {
    console.log($scope.secureForm);

    var errors = [];
    for (var property in $scope.secureForm.state) {
      if ($scope.secureForm.state.hasOwnProperty(property)) {
        // do stuff
        if ($scope.secureForm.state[property].isValid == false) {
          errors.push(property + ' is not valid');
        }
      }
    }
    if (errors.length == 0) {
      var data = {
        "methodName": "MakeReservation",
        "params": {
          "pricing_model": 1,
          "startdate": "02/24/2019",
          "enddate": "02/28/2019",
          "occupants": "1",
          "first_name": "Marco",
          "last_name": "Soria",
          "email": "[email protected]",
          "phone": "5205460244",
          "mobile_phone": "5205460244",
          "address": "1062 N. Mariposa, Suite 969",
          "address2": "Suite 969",
          "city": "Nogales",
          "zip": "85621",
          "state_name": "AZ",
          "country_name": "US",
          "unit_id": "172679",
          "status_id": 10,
          "referrer_url": "http://streamline.test/checkout/",
          "company_code": "2e2ab15636427c3fdf9ad1e6ced27a8"
        }
      }

      $scope.secureForm.submit('/api/json', {
        serializer: 'deep',
        data: data,
        mapDotToObject: 'merge',
        headers: {
          'Content-Type': 'application/json',
        },
      }, function(status, response) {
        if (response.status) {
          $scope.$apply(function() {
            alert(response.status.description);
          });
        } else {
          var res = response.data.reservation;
          console.log(res);
          if (res.confirmation_id) {
            alert('Your reservation has been created with confirmation id ' + res.confirmation_id);
          }
        }
      });
    }else{
   		alert('You have some errors');
    }

  }
  $scope.initFields...