Nested Data

by VeryGoodFiddle

HTML

<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://js.verygoodvault.com/vgs-collect/1/vgs-collect-examples.js"></script>
<div id="app">
  <form id="cc-form">
    <div id="cc-name" class="form-group">
      <div class="form-control-static">
        <span class="fake-input"></span>
      </div>
    </div>
    <div id="cc-number" class="form-group">
      <div class="form-control-static">
        <span class="fake-input"></span>
      </div>
    </div>
    <div id="cc-cvc" class="form-group">
      <div class="form-control-static">
        <span class="fake-input"></span>
      </div>
    </div>
    <div id="card-expiry" class="form-group">
      <div class="form-control-static">
        <span class="fake-input"></span>
      </div>
    </div>
    <button type="submit" class="btn btn-sm btn-primary">Submit    
    </button>
  </form>
  <pre><code id="card-preview">Response will be here...</code></pre>
</div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

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

form {
 margin-bottom: 10px;
}

JavaScript

var f = VGSCollect.create('tntq4dwvhri', function(state) {});
  
f.field('#cc-name .fake-input', {
  type: 'text',
  name: 'card.name',
  placeholder: 'Joe Business',
  validations: ['required'],
});

f.field('#cc-number .fake-input', {
  type: 'card-number',
  name: 'card.number',
  successColor: '#4F8A10',
  errorColor: '#D8000C',
  placeholder: '4111 1111 1111 1111',
  validations: ['required', 'validCardNumber'],
});

f.field('#cc-cvc .fake-input', {
  type: 'card-security-code',
  name: 'card.cvc',
  placeholder: '344',
  validations: ['required', 'validCardSecurityCode'],
});

f.field('#card-expiry .fake-input', {
  type: 'card-expiration-date',
  name: 'card.exp',
  validations: ['required', 'validCardExpirationDate'],
  autoComplete: 'cc-exp',
  serializers: [f.SERIALIZERS.replace('(\\d{2})\\s\/\\s(\\d{2})(\\d{2})$', '$1 / $3'),f.SERIALIZERS.separate({
    monthName: 'ExpiryMonth',
    yearName: 'ExpiryYear'
  })],
  placeholder: 'MM / YYYY',
});

document.getElementById('cc-form')
  .addEventListener('submit', function(e) {
    e.preventDefault();
    f.submit('/post', {
      data: {
      	params: {
        	someData: '123',
          otherData: 'qwerty',
        }
      },
      /* mapDotToObject: 'merge', */
    }, function(status, data) {
    document.getElementById('card-preview').innerText = JSON.stringify(data.json, null, ' ');
    }, function (errors) {
    });
  }, false);