JSFiddle - React, Tailwind, and code Playground

by VeryGoodFiddle

HTML

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

  <div id="secret-data"></div>

  <button id="request-data">
    Request Sensitive Data
  </button>

  <p>State response payload (not part of iframe):</p>
  <pre id="state"></pre>

  <style media="screen">
    iframe {
      border: 0px solid transparent;
      height: 200px;
    }
  </style>
  <script type="text/javascript" src="https://js.verygoodvault.com/vgs-show/2.0.2/show.js"></script>
  <script type="text/javascript">
  const button = document.getElementById('request-data');

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

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