Show.js. Copy button.

by VeryGoodFiddle

HTML

<div class="container">
  <div class="flex">
    <div id="secret-card-number"></div>
    <div id="copy"></div>
  </div>
  <input type="textarea" placeholder="Clipboard output"/>
</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;
}

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

.flex {
  margin-top: 150px;
  align-self: center;
  display: flex;
  margin-bottom: 30px;
  width: 100%;
  height: 100%;
}

iframe {
  border: 0px solid transparent;
  height: 60px;
  margin-right: 10px;
}

#copy iframe {
  width: 50px;
  height: 60px;
  margin-right: 0;
}

input {
  background-color: '#35c2a1';
  font-size: 14px;
  box-shadow: 0 7px 14px 0 rgba(49, 49, 93, 0.1), 0 3px 6px 0 rgba(0, 0, 0, 0.08);
  border-radius: 4px;
  border: none;
  width: 100%;
  height: 50px;
  outline: none;
  padding: 10px;
}

JavaScript

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

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',
  headers: {
    'myauthheader': 'test',
  }
});

cardNumber.render('#secret-card-number', {
  padding: '10px',
  fontSize: '14px',
  display: 'block',
  background: 'white',
  boxShadow: '0 7px 14px 0 rgba(49, 49, 93, 0.10), 0 3px 6px 0 rgba(0, 0, 0, 0.08)',
  fontFamily: '"Helvetica Neue", Helvetica',
  borderRadius: '4px',
});

const copyBtn = show.copyFrom(cardNumber,
  {
    text: 'Copy',
    serializers: [show.SERIALIZERS.replace(' ', '')],
  },
  function (status) {
    if (status === 'success') {
      alert('Copied!');
    }
});

copyBtn.render('#copy', {
  padding: '10px',
  backgroundColor: '#35c2a1',
  fontSize: '12px',
  color: 'white',
  boxShadow: '0 7px 14px 0 rgba(49, 49, 93, 0.10), 0 3px 6px 0 rgba(0, 0, 0, 0.08)',
  fontFamily: '"Helvetica Neue", Helvetica',
  borderRadius: '4px',
  height: '37px',
  outline: 'none',
});