Checkout UI Kit — Card Surcharge & Fee Screens by Market (Figma)

For designers of online store, SaaS billing and booking checkouts that pass card costs on to the customer. Type your order amount and what your card processor charges you, and see the card fee you may add in your market, the total, and the text your pay button has to show.

One payment, not a subscription. The result above is yours for free, as often as you like.

The rules this calculator applies

Visa caps US credit card surcharges at 3% of the transaction and Mastercard at 4%, and neither may exceed what the card actually costs you. Debit and prepaid cards cannot be surcharged. The fee must be shown before the customer pays and as its own line on the receipt, and Visa asks for 30 days' written notice to your acquirer before you start. Connecticut and Massachusetts ban credit card surcharges; Colorado caps them at 2%. In the EU, Art. 62(4) of PSD2 (Directive (EU) 2015/2366) bars surcharges on consumer cards, and the UK has banned them since 13 January 2018. Other US states add their own conditions, so check yours before you switch surcharging on.

Free: the card fee notice, 4 variants

Capped (US credit) · Capped (Colorado) · Debit / prepaid · Banned market — as a Figma plugin, SVGs and a .sketch. That is the whole card fee notice on your payment step.

Full kit: the payment step around the notice

Card fee notice · 4Pay button · 4Card number field · 4Payment method chip · 4Order summary card · 4Fee status badge · 4Checkout steps · 4Card fee explainer · 3

8 components, 31 variants, 31 SVGs, one .sketch and the plugin source. Once the notice is on screen, the rest of the payment step has to agree with it: the pay button total, the summary line, the field that drops the fee when a debit card is entered, and the explanation the customer reads before paying.

Why not a free kit? Free Figma Community checkout UI kits draw one pay button and one summary with a single price, and a chatbot will not draw you component variants.

Yardstick: rival checkout UI kits on this shelf list at up to $168 (our shelf measurement, 2026) without the card fee states.

How to get it into Figma

  1. In Figma, drag the .sketch file onto the file browser to open it. It holds the variants as named, coloured shapes without text layers.
  2. Copy an SVG and paste it into a frame — it comes in as vectors with its label.
  3. Plugin: it ships as TypeScript source (code.ts). Run tsc to get code.js, then import manifest.json as a development plugin; it rebuilds the components as real variant sets with text.
  4. Replace #1D4ED8 with your brand colour in Selection colors.
Menu names differ by Figma version and UI language. Some component structure is simplified in the .sketch. Sketch users open the same file.

Open full tool → getreadystack.com