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-number" class="form-group">
    Credit Card Number
      <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-number .fake-input', {
  type: 'card-number',
  name: 'newTargetProperty.number',
  successColor: '#4F8A10',
  errorColor: '#D8000C',
  placeholder: '4111 1111 1111 1111',
  validations: ['required', 'validCardNumber'],
});

document.getElementById('cc-form')
  .addEventListener('submit', function(e) {
    e.preventDefault();
    f.submit('/post', {
      data: {
        name: 'Bob',
        date: "02-05-2021",
        quoteId: 234,
				otherFields: [{
            someData: '123',
            otherData: 'qwerty',
          },
          {
            useCreditCard: 'true',
            creditCardNumber: '',
          },
          {
            someData: 'abc',
            otherData: 'cba',
        }]
      },
      mapDotToObject: 'mergeArray',
    }, function(status, data) {
    console.log(status);
    console.log(data);
    document.getElementById('card-preview').innerText = JSON.stringify(data.json, null, ' ');
    }, function (errors) {
    });
  }, false);