Fees Page
The public Fees page is a marketing and transparency page that explains CardNexus marketplace fees to buyers and sellers. It provides an interactive calculator, region-based comparisons with competitors (Cardmarket for EU, TCGPlayer for NA), and an FAQ section.
Public URL
The page is accessible at /{locale}/fees (e.g. /en/fees, /fr/fees).
What It Displays
The page is composed of several sections:
- Hero Section — headline with region toggle (EU / North America) and side-by-side fee comparison cards showing CardNexus vs. the dominant competitor for that region.
- Fee Calculator — interactive input where users enter a transaction amount (10,000) and see buyer fees, seller fees, total fees, and savings compared to competitors in real time.
- Fee Breakdown Table — detailed comparison table. In EU mode, includes a payment-method toggle (pay by card vs. pay from account) that adjusts the competitor’s fee display.
- Explainer Sections — two cards explaining why Cardmarket and TCGPlayer charge more, with highlight boxes for key takeaways.
- FAQ Section — collapsible accordion with common fee questions, pulled from i18n translations.
- Final CTA — call-to-action encouraging users to start selling, with a link to the listing flow (or sign-in for unauthenticated users).
Fee Data
All fee values are defined in a single data file. When fees change, update this file and the values propagate to all sections automatically.
If you update fee values in the data file, also update the corresponding help-center page at help-center/fees-and-payments/fee-structure-overview.mdx and the backend fee calculator at packages/backend/features/checkout/src/fee-calculator.ts to keep everything in sync.
How Users Reach the Fees Page
- Footer — a “Fees” link in the “Marketplace” section of the site footer.
- Cart — an information icon (ⓘ) next to the “Service fees” line in the cart summary shows a tooltip with a “Learn more” link to the fees page.
- Fees page FAQ — the help-center fee-structure-overview page links to the public fees page for the interactive calculator.
Code Locations
| Component | Location |
|---|---|
| Page entry | apps/frontend/app/[locale]/(default)/fees/page.tsx |
| Main UI | apps/frontend/app/[locale]/(default)/fees/fees-ui.tsx |
| Fee data & calculations | apps/frontend/app/[locale]/(default)/fees/components/fee-data.ts |
| Hero section | apps/frontend/app/[locale]/(default)/fees/components/hero-section.tsx |
| Fee calculator | apps/frontend/app/[locale]/(default)/fees/components/fee-calculator-section.tsx |
| Fee breakdown table | apps/frontend/app/[locale]/(default)/fees/components/fee-breakdown-section.tsx |
| Backend fee calculator | packages/backend/features/checkout/src/fee-calculator.ts |
| Help-center overview | apps/internal-doc/src/content/help-center/fees-and-payments/fee-structure-overview.mdx |