<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<!-- Collect.js is loaded -->
<script src="https://secure.apsmerchantgateway.com/token/Collect.js" data-tokenization-key="5mN8N7-jhr55W-N22pxX-uAW2s9">
</script>


<body>
  <h2 class="pageTitle"><span>Lightbox Example</span></h2>

  <form class="theForm">
    <div class="formInner">
      <div class="form-group">
        <input type="text" class="form-control" placeholder="First Name" name="fname" value="John" autofocus>
      </div>
      <div class="form-group">
        <input type="text" class="form-control" placeholder="Last Name" name="lname" value="Smith">
      </div>
      <div class="form-group">
        <input type="text" class="form-control" placeholder="Street Address" name="address1" value="123 Collect Js.">
      </div>
      <div class="form-group">
        <input type="text" class="form-control" placeholder="City" name="city" value="SAQ-A">
      </div>
      <div class="form-group">
        <input type="state" class="form-control" placeholder="State" name="state" value="IL">
      </div>
      <div class="form-group">
        <input type="text" class="form-control" placeholder="Zip code" name="zip" value="12345">
      </div>
    </div>

    <input type="submit" id="payButton" value="Pay $5" class="btn btn-primary btn-block">

  </form>

  <div id="paymentTokenInfo"></div>

</body>
                
html {
  font-family: 'Abel';
}

.pageTitle {
  text-align: center;
  margin-top: 20px;
  font-size: 40px;
  font-family: "Domine" !important;
}

.form-group {
  width: 290px;
}

.formInner {
  width: 600px;
  max-width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 20px auto;
}

#payButton {
  width: 290px;
  display: block;
  margin: 20px auto;
  height: 50px !important;
  font-size: 20px;
  background-color: #1AD18E;
  border-color: #1AD18E;
  box-shadow: 0 3px 10px #bbbbbb;
}

#payButton:hover {
  background-color: #19C687;
  border-color: #19C687;
  box-shadow: 0 3px 4px #bbbbbb;
}

#payButton:active {
  opacity: 0.7;
}

.form-control {
  border: 3px solid #ffffff !important;
  box-shadow: 0 2px 8px #dddddd !important;
  font-family: 'Abel';
}

.form-control:hover {
  box-shadow: 0 2px 4px #dddddd;
}

.form-control:focus {
  box-shadow: 0 2px 4px #dddddd !important;
  border: 3px solid #1AD18E !important;
}

#paymentTokenInfo {
  display: block;
  width: 600px;
  margin: 30px auto;
}

@media only screen and (max-width: 600px) {
  .pageTitle {
    font-size: 30px;
  }

  .theForm {
    width: 300px;
    max-width: 90%;
    margin: auto;
  }

  .form-group {
    width: 100%;
  }

  #paymentTokenInfo {
    width: 100%;
  }
}
                
// This prints out the contents of the payment token to the page.
document.addEventListener('DOMContentLoaded', function () {
  CollectJS.configure({
    'paymentType': 'cc',
    'callback': function (response) {
      document.getElementById("paymentTokenInfo").innerHTML =
        '<b>Payment Token:</b> ' + response.token +
        '<br><b>Card:</b> ' + response.card.number +
        '<br><b>BIN/EIN:</b> ' + response.card.bin +
        '<br><b>Expiration:</b> ' + response.card.exp +
        '<br><b>Hash:</b> ' + response.card.hash +
        '<br><b>Card Type:</b> ' + response.card.type +
        '<br><b>Check Account Name:</b> ' + response.check.name +
        '<br><b>Check Account Number:</b> ' + response.check.account +
        '<br><b>Check Account Hash:</b> ' + response.check.hash +
        '<br><b>Check Routing Number:</b> ' + response.check.aba;
    }
  });
});

External CSS

  1. https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css
  2. https://fonts.googleapis.com/css?family=Domine:700|Abel&amp;display=swap

External JavaScript

This Pen doesn't use any external JavaScript resources.