Show.js. Custom font.

by VeryGoodFiddle

HTML

<link href="https://fonts.googleapis.com/css2?family=PT+Mono&display=swap" rel="stylesheet">
<div class="container">
  <div class="flex card">
    <div id="masked-card-number">**** **** **** 1111</div>
    <div id="secret-card-number"></div>
  </div>
  <button id="reveal">Reveal</button>
</div>
<script src="https://js.verygoodvault.com/vgs-show/2.0.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;
}

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

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

button {
  width: 100%;
  padding: 10px;
  border-radius: 5px;
}

JavaScript

const show = VGSShow.create('tntvrf6mlhu', function(state) {}).setEnvironment('sandbox');
const button = document.getElementById('reveal');

button.addEventListener('click', () => {
  document.getElementById('masked-card-number').style.display = 'none';
  button.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',
    'color': 'white',
  });
});