Surcharging with Card Type Detection (Collect.js)

var base = 29.99, rate = 0.03;

CollectJS.configure({
  variant: 'inline',
  fields: { ccnumber: { selector: '#ccnumber' }, ccexp: { selector: '#ccexp' }, cvv: { selector: '#cvv' } },
  fieldsAvailableCallback: function() {
    CollectJS.on('card', function(card) {
      if (card.type === 'credit') {
        var fee   = parseFloat((base * rate).toFixed(2));
        var total = parseFloat((base + fee).toFixed(2));
        document.getElementById('surcharge-row').style.display = 'flex';
        document.getElementById('surcharge-amt').textContent   = '$' + fee.toFixed(2);
        document.getElementById('total-amt').textContent       = '$' + total.toFixed(2);
        document.getElementById('charge-amount').value         = total.toFixed(2);
      } else {
        document.getElementById('surcharge-row').style.display = 'none';
        document.getElementById('total-amt').textContent       = '$' + base.toFixed(2);
        document.getElementById('charge-amount').value         = base.toFixed(2);
      }
    });
  },
  callback: function(token) {
    document.getElementById('payment-token').value = token.token;
    document.getElementById('checkout-form').submit();
  },
});