Surcharging with Card Type Detection

The Payment Component detects credit vs. debit cards in real time, enabling compliant surcharging on credit cards only.

var BASE = 29.99, RATE = 0.03, isCredit = false;

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

Server-Side Validation

$base = 29.99;
$is_credit = ($_POST['is_credit'] == '1');
$surcharge = $is_credit ? round($base * 0.03, 2) : 0;
$total = $base + $surcharge;
$post['amount'] = number_format($total, 2, '.', '');