Customer-Friendly Surcharge Toolkit

This toolkit guides you through implementing a compliant, transparent surcharging experience that maintains customer trust while recovering card processing costs.

Compliance Requirements

• Surcharges may only apply to credit cards — never debit or prepaid
• Surcharge cannot exceed your merchant discount rate, capped at 3%
• Must notify Visa/Mastercard 30 days before implementing
• Must be clearly disclosed before payment is completed
• Must appear as a separate line item on receipts
• Prohibited in some US states — verify your state's rules

Disclosure Best Practices

• Display surcharge percentage prominently on the payment page
• Show surcharge as a separate line item once a credit card is detected
• Update the order total in real time as card type is identified
• Offer a no-surcharge alternative (debit card, ACH) and highlight savings

Implementation with Collect.js

CollectJS.configure({
  fields: { ccnumber: { selector: '#ccnumber' }, ccexp: { selector: '#ccexp' }, cvv: { selector: '#cvv' } },
  fieldsAvailableCallback: function() {
    CollectJS.on('card', function(card) {
      if (card.type === 'credit') {
        showSurcharge(orderTotal * 0.03);
      } else {
        hideSurcharge();
      }
    });
  },
  callback: function(token) { submitPayment(token); }
});

See Surcharging with Card Type Detection (Collect.js) for the full implementation guide.