JSFiddle - React, Tailwind, and code Playground

by VeryGoodFiddle

HTML

<!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;">
    <div class="row"><div class="col-sm-6">

      <form id="form">
        <div class="form-group">
          <label for="exampleInputEmail1">Payment amount:</label>
          <input type="number" name="amount" class="form-control" id="exampleInputEmail1"  value="100">      
        </div>
        
        <div class="form-group">
          <label>Card number</label>
          <span type="password" class="form-control" id="cc-number"></span>
        </div>

        <div class="form-group">
          <label for="exampleInputPassword1">Expiration</label>
          <span type="password" class="form-control" id="cc-exp"></span>
        </div>
        
        
        <div class="form-group">
          <label for="exampleInputPassword1">CVC</label>
          <span type="password" class="form-control" id="cc-cvc"></span>
        </div>
        
        <div class="form-group">
          <label for="exampleInputPassword1">Name On Card</label>
          <span type="password" 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>

  <script src="https://js.verygoodvault.com/vgs-collect/1/vgs-collect-examples.js"></script>
  </body>
  </html>

CSS

iframe {
      border: 0 none transparent;
      height: 100%;
      vertical-align: middle;
      width: 100%;
    }
    .form-control {
      height: 38px;
    }

JavaScript

var f = VGSCollect.create('tntq4dwvhri', function(state) {});

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

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

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

f.field('#cc-exp', {
  type: 'card-expiration-date',
  name: 'card.expirationDate',
  placeholder: '01 / 2016',
  defaultValue: '02/3030',
  serializers: [f.SERIALIZERS.separate({monthName: 'month', yearName: 'year'})],
  validations: ['required', 'validCardExpirationDate']
});

const getFormField = () => {
  const data = {};
  document.querySelectorAll("input").forEach( el => {
    const { name, value } = el;
    data[name] = value;
  });
  return data;
}

document.getElementById('form')
  .addEventListener('submit', function(e) {
    e.preventDefault();
    let targetForm = e.target;
    const inputs = document.querySelectorAll("input");
    
    f.submit('/post', {
      data: getFormField(),
    }, function(status, data) {
      document.getElementById('card-preview').innerText = JSON.stringify(data, null, '  ');
    }, function (errors) {
    });
  }, false);