LendUp Example

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/vgs-collect-examples.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

</head>
<body>
  <div class="container" style="padding-top: 50px;">
    <p>
    Last4: <span id="last4"></span> 
    Month: <span id="expiration-date-month"></span>
    Year: <span id="expiration-date-year"></span>
    </p>
    <div class="row"><div class="col-sm-6">
      <form id="form">
        <div class="form-group">
          <label>Card number(VGS Collect field)</label>
          <span class="form-control" id="cc-number"></span>
        </div>

        <div class="form-group">
          <label for="cc-exp">Expiration date(Regular input)</label>
          <input type="text" id="cc-exp-month" placeholder="MM"/> /
          <input type="text" id="cc-exp-year" placeholder="YY"/>
        </div>
        
        <div class="form-group">
          <label for="cc-cvc">CVC(VGS Collect field)</label>
          <span  class="form-control" id="cc-cvc"></span>
        </div>
        
        <div class="form-group">
          <label for="cc-name">Name On Card</label>
          <span class="form-control" id="cc-name"></span>
        </div>
          
        <button type="submit" class="btn btn-primary">Submit</button>
      </form>
    </div>

    <div class="col-sm-6" style="background-color: #f1f1f1; border-radius: 5px; padding: 15px;">
      <pre><code id="card-preview">Response</code></pre>
    </div>
  </div>
  </div>
  </body>
  </html>

CSS

iframe {
  border: 0 none transparent;
  height: 100%;
  vertical-align: middle;
  width: 100%;
}
.form-control {
  height: 38px;
}
input {
  height: 38px;
  width: 45%;
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
}

JavaScript

document.getElementById('cc-exp-month').addEventListener("change", function(e) {
  document.getElementById("expiration-date-month").innerHTML = document.getElementById('cc-exp-month').value;
});

document.getElementById('cc-exp-year').addEventListener("change", function(e) {
  document.getElementById("expiration-date-year").innerHTML = document.getElementById('cc-exp-year').value;
});

var f = VGSCollect.create('tntq4dwvhri', function(state) {
		try {
    	last4 = state['card.number'].last4;
    	document.getElementById('last4').innerHTML = last4;
    } catch (e) {}
});

var field = f.field('#cc-name', {
  type: 'text',
  name: 'card.name',
  placeholder: 'Cardholder',
  validations: ['required'],
});

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

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

document.getElementById('form')
  .addEventListener('submit', function(e) {
    e.preventDefault();
    f.submit('/post', {
    	data: {
        expirationDate: document.getElementById('cc-exp-month').value + '/' + document.getElementById('cc-exp-year').value,
      }
    }, function(status, data) {
      document.getElementById('card-preview').innerText = JSON.stringify(data, null, '  ');
    }, function (errors) {
    });
  }, false);