Collect.js Advanced Integrations

ACH / eCheck

CollectJS.configure({
  variant: 'inline',
  fields: {
    checkaccount: { selector: '#checkaccount', placeholder: 'Account Number' },
    checkrouting: { selector: '#checkrouting', placeholder: 'Routing Number' },
    checkname:    { selector: '#checkname',    placeholder: 'Account Holder Name' },
  },
  callback: function(token) { submitForm(token); },
});

Validation Events

CollectJS.configure({
  validationCallback: function(field, status, message) {
    var el = document.getElementById(field.replace('#','') + '-error');
    if (el) el.textContent = status ? '' : message;
  },
  callback: function(token) { /* process */ },
});

React Integration

useEffect(() => {
  const script = document.createElement('script');
  script.src = 'https://secure.cyogate.net/token/Collect.js';
  script.setAttribute('data-tokenization-key', process.env.REACT_APP_PUBLIC_KEY);
  script.onload = () => {
    window.CollectJS.configure({
      variant: 'inline',
      fields: {
        ccnumber: { selector: '#ccnumber' },
        ccexp:    { selector: '#ccexp' },
        cvv:      { selector: '#cvv' },
      },
      callback: (token) => onPaymentToken(token.token),
    });
  };
  document.body.appendChild(script);
  return () => document.body.removeChild(script);
}, []);