JSFiddle - React, Tailwind, and code Playground

by VeryGoodFiddle

HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Keyboard example</title>
</head>
<body>
<div class="container">
  <form id="cc-form">
    <h3>Manual Credit Card Entry</h3>
    <div id="cc-number" class="form-group mb-15">
      <label for="cc-number-field">CARD NUMBER</label>
      <div class="form-control-static">
        <span class="fake-input"></span>
      </div>
    </div>
    <div class="input-group">
    <div id="cc-cvc" class="form-group mb-15">
      <label for="cc-cvc-field">CVV</label>
      <div class="form-control-static">
        <span class="fake-input"></span>
      </div>
    </div>
    <div id="cc-expiration-date" class="form-group mb-15">
      <label for="cc-expiration-date-field">EXP DATE</label>
      <div class="form-control-static">
        <span class="fake-input"></span>
      </div>
    </div>
    </div>
    <div id="zip" class="form-group mb-15">
      <label for="zip-field">ZIP</label>
      <div class="form-control-static">
        <span class="fake-input"></span>
      </div>
    </div>
  </form>
  <div class="keyboard">
    <div id="space-for-keyboard" class="mb-15" style="height: 200px"></div>
    <button type="submit" id="submit-btn" class="btn btn-info">Submit</button>
  </div>
</div>

<pre id="state"></pre>
<pre id="response"></pre>
<script type="text/javascript" src="https://js.verygoodvault.io/vgs-collect/keyboard/development.js"></script>
</body>
</html>

CSS

* {
    box-sizing: border-box;
    font-family: Helvetica, sans-serif;
    color: #212733;
  }

  label {
    font-size: 10px;
  }

  .mb-15 {
    margin-bottom: 15px;
  }

  .input-group {
    display: flex;
    justify-content: space-between;
  }

  .input-group .form-control-static span.fake-input {
    max-width: 160px;
  }

  button {
    width: 93%;
    margin: 0 auto;
    display: block;
    padding: 12px;
    background-color: #5fca71;
    border-radius: 5px;
    color: white;
    font-size: 14px;
  }

  .container {
    width: 100%;
    margin: 0 auto 30px;
    display: flex;
    background-color: #f3f3f3;
  }

  #cc-form {
    padding: 70px 35px;
    width: 60%;
  }

  .keyboard {
    width: 40%;
    background-color: #ededed;
    padding: 150px 15px 0;
  }

  .form-control-static iframe {
    height: 100%;
    vertical-align: middle;
  }
  .form-control-static span.fake-input {
    height: 45px;
    width: 100%;
    display: inline-block;
  }

  iframe {
    border: 0px solid transparent;
    height: 100%;
    width: 100%;
  }

  #state, #response {
    font-family: Arial;
    font-size: 12px;
    width: fit-content;
    margin: 0 auto;
  }

JavaScript

let f = VGSCollect.create('development', function (state) {
    document.getElementById('state').innerText = JSON.stringify(state, null, '  ');
  });
  
	f.getUrl = () => 'your vault URL'
  // Format for vault Url -'https://tnterab5np8.SANDBOX.verygoodproxy.io';
  // Make sure you have an inbound route :)
  
  const input_style = {
    height: '45px',
    border: '1px solid #c3c3c3',
    borderRadius: '5px',
    boxSizing: 'border-box',
    backgroundColor: 'white',
    padding: '0 30px',
  };

  f.keyboard('#space-for-keyboard', {
    type: 'keyboard',
    name: 'keyboard',
    css: {
      display: 'flex',
      flexWrap: 'wrap',
      justifyContent: 'center',
      boxSizing: 'border-box',
      '.keyboard-btn': {
        margin: '2px',
        position: 'static',
        flexBasis: '30%',
        boxSizing: 'border-box',
        padding: '15px',
        borderRadius: '5px',
        border: '1px solid #d5d5d5',
        fontSize: '14px',
      },
    },
  });

  f.field('#zip .fake-input', {
    type: 'text',
    name: 'zip',
    validations: ['required'],
    fieldId: 'custom',
    css: input_style,
  });

  f.field('#cc-number .fake-input', {
    elementId: 'cc-number-field',
    type: 'card-number',
    name: 'card.number',
    placeholder: '4111 1111 1111 1111',
    validations: ['required', 'validCardNumber'],
    css: input_style,
  });

  f.field('#cc-cvc .fake-input', {
    elementId: 'cc-cvc-field',
    type: 'card-security-code',
    name: 'card.cvc',
    placeholder: '344',
    validations: ['required', 'validCardSecurityCode'],
    css: input_style,

  });

  f.field('#cc-expiration-date .fake-input', {
    elementId: 'cc-expiration-date-field',
    type: 'card-expiration-date',
    name: 'card.expirationDate',
    placeholder: '01 / 2016',
    validations: ['required', 'validCardExpirationDate'],
    css: input_style,

  });

  document.getElementById('submit-btn').addEventListener('click', function(e) {
    e.preventDefault();
   ...