JSFiddle - React, Tailwind, and code Playground

by VeryGoodFiddle

HTML

<link href="https://fonts.googleapis.com/css2?family=PT+Mono&display=swap" rel="stylesheet">
<div class="container">
  <div class="flex card" id="cc">
    <div id="masked-card-number">**** **** **** 1111</div>
    <div id="secret-card-number"></div>
    <span id="company"></span>
  </div>
  <button id="update" onclick="updateCompany()">Update company</button>
  <button id="reveal">Reveal</button>
  <div id="copy"></div>
</div>
<script src="https://js.verygoodvault.com/vgs-show/1.2/show.js"></script>

CSS

* {
  box-sizing: border-box;
}

body {
  background: #E6EBF1;
  display: flex;
  align-items: center;
  justify-content: space-around;
  min-height: 100%;
  padding: 30px;
  color: white;
  font-family: 'PT Mono', monospace;
}

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

.flex {
  margin-top: 150px;
  align-self: center;
  display: flex;
}

#masked-card-number {
  position: absolute;
  top: 60px;
  left: 20px;
}

#company {
  position: absolute;
  bottom: 10px;
  left: 20px;
  font-size: 12px;
}

.card iframe {
  position: absolute;
  top: 60px;
  left: 20px;
  border: 0px solid transparent;
  width: 280px;
  height: 20px;
}

#copy iframe {
  width: 100%;
  height: 100px;
}

.card {
  position: relative;
  background-color: black;
  width: 300px;
  height: 170px;
  border-radius: 12px;
  margin-bottom: 20px;
}

button {
  width: 100%;
  padding: 10px;
  border-radius: 5px;
  margin-bottom: 15px;
  border: 1px solid #c7c9d3;
}

.VeryGoodCompany {
  background-color: black;
  color: white;
}

.AwaesomeCompany {
  background-color: #ffdd40;
  color: #56bcf9;
}

.BestCompany {
  background-color: #56bcf9;
  color: black;
}

JavaScript

const show = VGSShow.create('tntvrf6mlhu', function(state) {});
const revealBtn = document.getElementById('reveal');
const company = document.getElementById('company');
const updateBtn = document.getElementById('update');

const updateCompany = () => {
  document.getElementById('cc').classList.remove(companyName);
  companyIdx = companyIdx >= companiesList.length - 1 ? 0 : ++companyIdx;
  companyName = companiesList[companyIdx];
  setCompany(companyName);
}

const setCompany = (companyName) => {
  company.innerText = `Company: ${companyName}`;
  document.getElementById('cc').classList.add(companyName);
}

const companiesList = ['VeryGoodCompany', 'AwaesomeCompany', 'BestCompany'];
let companyIdx = 0;
let companyName = companiesList[companyIdx];
setCompany(companyName);

const styles = {
  VeryGoodCompany: {
    color: 'white',
  },
  AwaesomeCompany: {
    color: '#56bcf9',
  },
  BestCompany: {
    color: 'black',
  },
}

revealBtn.addEventListener('click', () => {
  document.getElementById('masked-card-number').style.display = 'none';
  revealBtn.style.display = 'none';
  updateBtn.style.display = 'none';
  
  const cardNumber = show.request({
    name: 'data-text',
    method: 'POST',
    path: '/post',
    payload: {'card_number': 'tok_sandbox_buH88U6sx9KqhTwvvGfhcK'},
    htmlWrapper: 'text',
    serializers: [show.SERIALIZERS.replace('(\\d{4})(\\d{4})(\\d{4})(\\d{4})', '$1 $2 $3 $4')],
    jsonPathSelector: 'json.card_number',
  });

  cardNumber.render('#secret-card-number', {
    '@font-face': { 
      'font-family': 'PT Mono',
      'font-style': 'normal',
      'font-weight': '400',
      'font-display': 'swap',
      'src': 'local("PT Mono"), local("PTMono-Regular")          url(https://fonts.gstatic.com/s/ptmono/v7/9oRONYoBnWILk-9AnCszM_HxEcn7Hg.woff2) format("woff2")',
      'unicode-range': 'U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116'
    },
    'font-family': '"PT Mono", monospace',
    ...styles[companyName],
  });
  
    const copyBtn =...