VGS Collect (VueJS)

by VeryGoodFiddle

HTML

<script src="https://js.verygoodvault.com/vgs-collect/1/vgs-collect-examples.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<div id="app">
  <form @submit.prevent="onSubmit">
    <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="cc-expiration-date" 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>
</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;
}

Vue

new Vue({
  el: "#app",
  data: {
    form: {},
  },
  methods: {
  	onSubmit: function() {
    	this.form.submit('/post', {}, function(status, response) {});
    }
  },
  mounted: function () {
  	this.form = VGSCollect.create('tntq4dwvhri', function(state) {});
  	
    this.form.field('#cc-name .fake-input', {
      type: 'text',
      name: 'card_name',
      placeholder: 'Joe Business',
      validations: ['required'],
		});

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

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

    this.form.field('#cc-expiration-date .fake-input', {
      type: 'card-expiration-date',
      name: 'card_exp',
      placeholder: '01 / 2016',
      validations: ['required', 'validCardExpirationDate']
    });
  }
})