How should a payments company structure its website for merchants and developers?
A payments company should structure its website around two entry paths from the header: one for merchants and business buyers, and one for developers. Each path answers its own first questions and ends in its own action. Trust, security and licensing pages are shared, written so both audiences can read them.
Large payments companies such as Stripe have made this pattern familiar: product and solution pages for business buyers, and a prominent developers section leading to docs and API reference. A startup can't copy that scale, and doesn't need to. This guide shows how to keep the structure and cut the page count. For trust patterns across fintech, see our hub on fintech website design.
What do merchants and developers each need from a payments website design?
Merchants need to know what it costs, how fast they get paid, what it works with and whether businesses like theirs use it. Developers need to know how quickly they can make a first successful call, how good the docs are and whether the API is reliable. The same page rarely answers both well.
Question | Merchant | Developer |
|---|---|---|
First thing they look for | Pricing and fees | Docs and quickstart |
Proof they trust | Named customers, reviews, partners | Clear docs, SDKs, changelog, status page |
Integration question | Does it work with my platform? | Which languages and SDKs exist? |
Risk question | Payout timing, chargebacks, reserves | Uptime, rate limits, webhooks |
Primary CTA | Start accepting payments or talk to sales | Get API keys or read the docs |
Who signs off | Owner, finance or ops lead | Engineering lead |
In many B2B deals both audiences are involved. A finance lead picks the provider and an engineer has to approve the integration. Your site has to let each of them check their part without wading through the other's content.
What should the navigation look like?
The navigation should name both audiences directly, usually with a Products or Solutions menu for merchants, a Developers link that goes straight to docs, and Pricing as a top-level item. Hiding the developer path inside Resources is the most common mistake on startup payments sites.
- Products: what you sell, such as online payments, payouts, invoicing or cards, one line each.
- Solutions: by business type or platform, only if you genuinely serve several.
- Developers: docs, API reference, SDKs, status page and changelog in one menu.
- Pricing: a top-level link with your full fee table.
- Header actions: "Sign in" plus a primary CTA, with "Get API keys" or "Contact sales" as the secondary.
Which pages does a startup payments website need?
A startup payments website needs about six marketing pages plus documentation: home, product, pricing, developers, security and compliance, and about or contact. Add solution pages only when you have real customers in each segment to show.
- Home: one sentence on what you do and for whom, then a split into merchant and developer paths.
- Product: how payments, payouts and reporting work, with real interface screenshots.
- Pricing: every fee in a plain table. Our fintech pricing page guide covers the patterns.
- Developers: quickstart, a code sample, SDK list, sandbox access and a status link.
- Security and compliance: PCI scope, licensing or partner relationships, and data handling in plain words.
- About and contact: who you are, who backs you and how to reach sales or support.
The developer page can borrow heavily from developer-tool sites. Our guide to API company website design covers getting a developer to their first successful call, which is the moment that matters most.
A hypothetical page map for a seed-stage payouts startup
For example, suppose a startup offers payouts to contractors through an API. Its home page leads with "Pay contractors in any country from one API," then splits into two cards: "For finance teams" and "For developers."
The finance path covers payout timing, supported countries, fees and a demo request. The developer path goes to a quickstart with a copyable request, sandbox keys after signup and a status page. Security, licensing and partner-bank information live on one shared page that both paths link to. That's six pages, plus docs, and both buyers find what they need.
How do you show trust and compliance on a payments site?
You show trust on a payments site by stating plainly who you are, who you partner with to move money, what security standards you meet and how merchants get support. Merchants worry about payouts and chargebacks. Developers worry about reliability. Compliance pages should answer both in plain language.
State your regulatory position
Say whether you're licensed directly or work through partner banks or processors, in language counsel approves.
Explain PCI scope
Tell merchants what they're responsible for and what you handle, without implying certifications you don't hold.
Publish a status page
A public status page with incident history is strong proof for developers and ops teams.
Show payout terms
Payout timing and any reserves are trust questions. Put them on pricing and product pages, not only in the terms.
Use real proof
Named customers and partner logos only with permission. Our guide to fintech website compliance covers disclosure placement.
Should a payments company build its site in Next.js or a visual builder?
A payments company should usually build in Next.js if docs, status, code samples and the marketing site need to feel like one product, and choose a visual builder if marketing needs to ship pages without engineering help. Both can work. The deciding factor is who maintains the site after launch.
Pros
- Next.js keeps marketing pages, docs and code samples in one codebase
- Fine control over performance, security headers and analytics
- Easy to embed live API examples or calculators
- Fits teams where engineers already own the web stack
Cons
- Marketing may need a developer for layout changes without a good CMS
- Initial setup takes more engineering than a visual builder
- Requires a clear owner for updates after launch
- Visual builders can be faster for frequent campaign pages
If you're already on a builder and outgrowing it, our guide to Framer to Next.js migration cost explains what moving involves. For motion that helps explain money flows without slowing pages, see our guide to website animation.
