Integrating the Frontend Component

Step 1 — Include Collect.js

<script src="https://secure.cyogate.net/token/Collect.js"
        data-tokenization-key="YOUR_PUBLIC_KEY"
        data-variant="inline"></script>

Step 2 — Add Field Containers

<form id="checkout-form" method="POST" action="/process">
  <div id="ccnumber"></div>
  <div id="ccexp"></div>
  <div id="cvv"></div>
  <input type="hidden" id="payment-token" name="payment_token">
  <button type="button" id="pay-button">Pay Now</button>
</form>

Step 3 — Configure and Trigger

CollectJS.configure({
  variant: 'inline',
  fields: {
    ccnumber: { selector: '#ccnumber', placeholder: '1234 5678 9012 3456' },
    ccexp:    { selector: '#ccexp',    placeholder: 'MM / YY' },
    cvv:      { selector: '#cvv',      placeholder: 'CVV' },
  },
  validationCallback: function(field, status, message) {
    // Show inline validation errors
  },
  callback: function(token) {
    document.getElementById('payment-token').value = token.token;
    document.getElementById('checkout-form').submit();
  },
});
document.getElementById('pay-button').addEventListener('click', function() {
  CollectJS.startPaymentRequest();
});

Field Reference