Payments Website Design Examples

23 real sites · 1,079 sections

There are 23 payments website designs here — live sites that handle payments, invoicing or billing, including Mercury, Stripe, Lemon Squeezy, Klarna and Affirm — cut into 1,079 sections. 83% use a light theme and 17% a dark one; the most common headline fonts are Arcadia Display (1), Sohne (1) and Circular pro (1). 17 of 23 open with a hero, 5 show pricing on the homepage and 13 carry testimonials.

At a glance

Sites: 23
Sections captured: 1,079
Light / dark: 83% light · 17% dark
Top heading fonts: Arcadia Display (1), Sohne (1) and Circular pro (1)
Accent colours: neutral 8blue 7red 5
Most common sections: features (22), hero (17), call to action (16) and faq (14)
Top industries: Finance (16)
Award winners: 2 of 23

What makes a good payments website design

Payments sites sell to developers and finance teams together: developer-friendly APIs, supported methods and currencies, pricing per transaction, uptime and compliance.

What these 23 payments websites have in common

Measured from the captures, not opinion — use it to plan a payments website against what already works.

Sections they use

22 include features, 17 include hero, 16 include call to action and 14 include faq. 14 answer objections with an FAQ and 16 (70%) close with a dedicated call to action. Read top to bottom, the most common running order is hero → features → stats → testimonials → call to action. Compare them side by side: features section examples, hero section examples, call to action section examples.

Type and colour

Light layouts lead (83% vs 17% dark). Headlines are most often set in Arcadia Display (1), Sohne (1) and Circular pro (1). The most common accent hues are neutral (8), blue (7) and red (5). Every example lists its exact fonts and hex palette on its page.

Page length

The average homepage here is about 8,994px tall at desktop width — roughly 10 screens of scrolling, with Mercury the longest at 11,000px. Open any site to scroll the full-page capture and see where each section falls.

23 payments website designs worth studying

Stripe — “Stripe is a financial services platform that helps all types of businesses accept payments, build flexible billing models and manage money movement.” 51 sections, headlines in Sohne, light theme, palette #ffffff and #061b31; the homepage runs hero → showcase → stats → showcase.
Klarna — “Manage your everyday payments securely with Klarna - online or in store. Enjoy flexible and interest-free payment options in Canada.” 31 sections, headlines in Klarna Title, light theme, palette #ffffff and #0b051d; the homepage runs hero → features → showcase → testimonials.
Modern Treasury — “Launch payment operations in days, not months. One API for multi-rail payments with programmable accounts, real-time reporting, and built-in compliance.” 42 sections, headlines in Mt neue display, light theme, palette #151515 and #f8f7f5; the homepage runs hero → logo cloud → stats → footer.
Harvest — “Time tracking and management software with powerful easy reporting and streamlined online invoicing. Loved by 73,000 businesses. Get started for free.” 42 sections, headlines in Besley, light theme, palette #000000 and #fbf5f0; the homepage runs hero → features → integrations → features.
Mercury — “Everything you do with money. All in one place. Apply in 10 minutes for business banking that transforms how you operate.” 85 sections, headlines in Arcadia Display, light theme, palette #ededf3 and #c3c3cc; the homepage runs hero → features → logo cloud → testimonials.
Lemon Squeezy — “Sell digital products and SaaS software the easy peasy way with Lemon Squeezy. As your merchant of record, we handle the tax compliance burden so you can focus…” 86 sections, headlines in Circular pro, light theme, palette #ffffff and #5423e7; the homepage runs hero → statement → logo cloud → features.

How to use these references for a payments website

Show a code snippet and a checkout UI side by side, list payment methods and countries, and make per-transaction pricing easy to find. Start with Mercury, Stripe and Lemon Squeezy, open each site at full size and compare their features and hero sections; every reference carries its palette, fonts and a build prompt you can paste into your editor.