VGS Collect. Extend exp date year.

by VeryGoodFiddle

HTML

<script src="https://js.verygoodvault.com/vgs-collect/1.4.2/vgs-collect-examples.js"></script>
<body>
  <form id="collect-form">
    <div class="group">
      <label>
        <span>Card number</span>
        <div id="card-number" class="field"></div>
      </label>
      <label>
        <span>Expiry date</span>
        <div id="card-expiry" class="field"></div>
      </label>
      <label>
        <span>CVC</span>
        <div id="card-cvc" class="field"></div>
      </label>
      <label>
        <span>Cardholder name</span>
        <div id="card-name" class="field"></div>
      </label>
    </div>
    <button type="submit">Submit payment</button>
  </form>
  <div class="response-container">
    <pre id="response"></pre>
  </div>
</body>

CSS

* {
  font-family: "Helvetica Neue", Helvetica;
  font-size: 15px;
  font-variant: normal;
  padding: 0;
  margin: 0;
}

pre {
  color: #31325F;
  font-family: "Consolas", monospace; 
  font-weight: 200;
}

html {
  height: 100%;
}

body {
  background: #E6EBF1;
  min-height: 100%;
  padding: 30px
}

form {
  width: 480px;
  margin: 20px 0;
}

iframe {
  width: 100%;
  height: 100%;
}

.group {
  background: white;
  box-shadow: 0 7px 14px 0 rgba(49, 49, 93, 0.10), 0 3px 6px 0 rgba(0, 0, 0, 0.08);
  border-radius: 4px;
  margin-bottom: 20px;
}

label {
  position: relative;
  color: #8898AA;
  font-weight: 300;
  height: 40px;
  line-height: 40px;
  margin-left: 20px;
  display: flex;
  flex-direction: row;
}

.group label:not(:last-child) {
  border-bottom: 1px solid #F0F5FA;
}

label > span {
  width: 120px;
  text-align: right;
  margin-right: 30px;
}

.field {
  background: transparent;
  font-weight: 300;
  border: 0;
  color: #31325F;
  outline: none;
  flex: 1;
  padding-right: 10px;
  padding-left: 10px;
  cursor: text;
}

.field::-webkit-input-placeholder {
  color: #CFD7E0;
}

.field::-moz-placeholder {
  color: #CFD7E0;
}

button {
  display: block;
  background: #35c2a1;
  color: white;
  box-shadow: 0 7px 14px 0 rgba(49, 49, 93, 0.10), 0 3px 6px 0 rgba(0, 0, 0, 0.08);
  border-radius: 4px;
  border: 0;
  margin-top: 20px;
  font-size: 15px;
  font-weight: 400;
  width: 100%;
  height: 40px;
  line-height: 38px;
  outline: none;
}

button:hover {
 background: #30ad8f;
}

JavaScript

const form = VGSCollect.create('tntq4dwvhri', function(state) {});

const css = {
  'font-family': '"Helvetica Neue", Helvetica',
  'box-sizing': 'border-box',
  'line-height': '1.5em',
  'font-size': '14px',
  'font-weight': '200',
  'border': 'none',
  'color': '#31325F',
  'width': '100%',
  'height': '100%',
  '&::placeholder': {
    'color': '#CFD7E0',
  }
}

const name = form.field('#card-name', {
  type: 'text',
  name: 'card-name',
  validations: ['required'],
  autoComplete: 'cc-name',
  css: css,
  placeholder: 'John Doe',
});

const cardNumber = form.field('#card-number', {
  type: 'card-number',
  name: 'card-number',
  validations: ['required', 'validCardNumber'],
  autoComplete: 'cc-number',
  showCardIcon: 'true',
  css: css,
  placeholder: '1234 1234 1234 1234',
});

const cvc = form.field('#card-cvc', {
  elementId: 'cc-cvc-field',
  type: 'card-security-code',
  name: 'card-cvc',
  validations: ['required', 'validCardSecurityCode'],
  autoComplete: 'cc-csc',
  css: css,
  placeholder: 'CVC',
});

const expDate = form.field('#card-expiry', {
  type: 'card-expiration-date',
  name: 'card-expiry',
  validations: ['required', 'validCardExpirationDate'],
  autoComplete: 'cc-exp',
  css: css,
  yearLength: '2',
  serializers: [form.SERIALIZERS.replace('(\\d{2})\\s\\/\\s(\\d{2})', '$1 / 20$2')],
  placeholder: 'MM / YY',
});

cardNumber.setCVCDependency(cvc);

document.getElementById('collect-form').addEventListener('submit', function(e) {
  e.preventDefault();
  form.submit('/post', {}, function(status, data) {
    document.getElementById('response').innerText = JSON.stringify(data.json, null, 4);
  });
}, false);