Show.js. React.js.

by VeryGoodFiddle

HTML

<script src="https://js.verygoodvault.com/vgs-show/2.0.2/show.js"></script>
<div id="app"></div>

CSS

* {
  box-sizing: border-box;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

body {
  background: #E6EBF1;
  display: flex;
  align-items: center;
  justify-content: space-around;
  min-height: 100%;
  padding: 30px;
}

.container {
  text-align: center;
}

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;
}

React

class VgsShowCardNumber extends React.Component {
  constructor(props) {
    super(props);
    this.secretRef = React.createRef();
  }

  componentDidMount() {
    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(this.secretRef.current, {
      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, Arial, sans-serif',
      borderRadius: "4px",
    });
  }

  render() {
    return (
      <div className="container">
        <div>VGS Show.js React</div>
        <div className="flex">
          <div id="secret-card-number" ref={this.secretRef} />
        </div>
      </div>
    );
  }
}

ReactDOM.render(<VgsShowCardNumber />, document.getElementById("app"));