Charcoal UI

Payline: Payments API template

Accept money anywhere with one API.

For payment and fintech APIs: a terminal hero, a live payments map, integrations, usage pricing, a quote wall, searchable FAQs and a CLI close.

About the Payline template

Payline is for payment and fintech APIs. A terminal hero with webhooks, a live map of payments, payment methods as an integrations directory, usage pricing, a quote wall, a searchable FAQ and a CLI close.

Accept money anywhere with one API. It is a complete payments api landing page for React and Tailwind CSS 4, assembled from 9 Charcoal UI sections.

Who Payline is for

  • Payments APIs.
  • Billing and subscription platforms.
  • Payouts and treasury APIs.
  • Fintech infrastructure.

What is inside

9 sections, top to bottom:

  • Navbar Floating: A glass pill that hides on scroll down, with a gliding hover highlight and a mobile sheet.
  • Hero Terminal: Developer-tool hero: beams on a grid, and a terminal that types your install and dev commands.
  • Stats Live: Dotted world map with live pings, a running counter and a feed of what just happened where.
  • Features Integrations: Searchable integrations directory with category filters, monogram tiles and a request link.
  • Pricing Usage: Usage-based pricing: drag the slider and the monthly estimate rolls to match.
  • Testimonials Wall: A masonry wall of quotes with ratings, revealed as you scroll.
  • FAQ Search: Help-centre FAQ with instant search, highlighted matches and topic chips.
  • CTA Terminal: Developer CTA with a copyable install command beside a terminal that runs it.
  • Footer Newsletter: Big footer led by a newsletter sign-up, then the sitemap, socials, theme toggle and live status.

How it is built

Payment methods are listed with the integrations section. Every section is a separate Charcoal UI section, so you can reorder, remove or restyle any of them, and the accent colour is one CSS variable on the page wrapper.

Install Payline

npx shadcn@latest add @charcoal/payline

Templates are part of Charcoal UI Pro. One seat covers all 100 templates, 107 sections and 300 Pro components. The command installs the page and every section and component it uses, so it runs the moment it lands.

Frequently asked questions

Can I use Payline for a client site?
Yes. A Pro seat covers unlimited personal and commercial projects, client work included.
Is Payline a Next.js template?
It is a React 19 page that works in Next.js (App Router or Pages Router), Vite, Remix and Astro. Drop it into a route and it renders.

Sections in this template

  • Navbar Floating: A glass pill that hides on scroll down, with a gliding hover highlight and a mobile sheet.
  • Hero Terminal: Developer-tool hero: beams on a grid, and a terminal that types your install and dev commands.
  • Stats Live: Dotted world map with live pings, a running counter and a feed of what just happened where.
  • Features Integrations: Searchable integrations directory with category filters, monogram tiles and a request link.
  • Pricing Usage: Usage-based pricing: drag the slider and the monthly estimate rolls to match.
  • Testimonials Wall: A masonry wall of quotes with ratings, revealed as you scroll.
  • FAQ Search: Help-centre FAQ with instant search, highlighted matches and topic chips.
  • CTA Terminal: Developer CTA with a copyable install command beside a terminal that runs it.
  • Footer Newsletter: Big footer led by a newsletter sign-up, then the sitemap, socials, theme toggle and live status.

Payline as Markdown