Show.js card example

by VeryGoodFiddle

HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
</head>
<body>
  <h2>Show.js example</h2>

  <div class="container">
    <span>Card number: &nbsp;</span>
    <div id="secret-data"></div>
  </div>

  <button id="request-data">
    Request card number
  </button>

  <p>Iframe state:</p>
  <pre id="state"></pre>

  <script type="text/javascript" src="https://js.verygoodvault.com/vgs-show/1.1/ACw3jiRsE2V5nhHyi2UgUBLe.js"></script>
  <script type="text/javascript">
  const button = document.getElementById('request-data');

  button.addEventListener('click', function() {
    const show = VGSShow.create('tnt7d8u7gv3', function(state) {
      document.getElementById('state').innerText = JSON.stringify(state, null, ' '); 
    });
 
    const iframe = show.request({
      name: 'data-text',
      method: 'POST',
      path: '/post',
      payload: {'card_number': 'tok_sandbox_uTsYqMdZbjd8xgeSAivQxg'},
      htmlWrapper: 'text',
      jsonPathSelector: 'json.card_number'
    });
    
    iframe.render('#secret-data');
    button.remove();
  });

  </script>
</body>
</html>

CSS

html {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
iframe {
  border: 0px solid transparent;
  height: 20px;
}
button {
  font-size: 14px;
  line-height: 40px;
  color: #fff;
  border-radius: 6px;
  background-color: #35c2a1;
  box-shadow: 0 10px 15px rgba(0,0,0,.15);
  text-align: center;
  padding: 0 16px;
  display: inline-block;
  cursor: pointer;   
}

.container {
  display: flex;
  justify-content: flex-start;
  margin-bottom: 30px;
}