Does it calculate the total from the line items?

No. Compute seatSubtotal, each tax amount, any credit, and the final total on your server or in your own state, then pass the formatted strings in as props.

How many tax lines can I show?

As many as you need. Pass an array of { label, amount } objects and each renders as its own row below the seat line.

What if there's no credit for this cycle?

Omit the credit prop and the 'Credit applied' row doesn't render at all.

Can I add a 'Pay early' button?

Not built in. Add a Button in the CardFooter alongside or instead of the payment method note if your billing flow supports manual early payment.

Is the total accessible to screen readers?

Yes, the total figure carries an aria-label that spells out 'Next payment amount' followed by the value, not just the raw visual text.

Billing Next Payment Preview

A preview of a customer's next charge, led with the total amount and date, then broken down into a seat-count line, any number of tax lines, and an optional applied credit. Built for subscription billing portals where the charge is seat-based and where showing the total up front, before the itemization, matters more than a line-items-first layout.

By Staaarter Team

Billing

Updated June 1, 2026

Docs

Live preview

Docs

Installation

A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its card dependencies and any missing npm packages, and installs them straight into your project.

npx shadcn add https://staaarter.com/r/billing-next-payment-preview.json

Prefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/billing/billing77.tsx instead.

Usage

The file also exports billing77Demo, the exact props behind the preview above. Spread it to get a working section in one line, then replace it with your own data.

import { Billing77, billing77Demo } from "@/components/blocks/billing/billing77";

export default function Page() {
  return <Billing77 {...billing77Demo} />;
}

Props

Prop	Type	Default	Description
title	string	"Next payment"	Heading shown in the card header.
nextPaymentDate	string	none	Date the next charge occurs, shown in the header and referenced in the total's aria-label.
seatCount	number	none	Number of seats billed; pluralizes 'seat' automatically.
pricePerSeat	string	none	Formatted per-seat price shown next to the seat count.
seatSubtotal	string	none	Formatted subtotal for the seat line, seatCount times pricePerSeat, computed by the caller.
taxes	NextPaymentTaxLine[]	[]	Zero or more tax lines rendered in order below the seat line.
credit	string	none	Optional formatted credit amount, shown in an emerald 'Credit applied' row when set.
total	string	none	Formatted total charge, shown as the large lead figure.
paymentMethodLabel	string	none	Optional payment method description shown in the footer, for example a card's brand and last four digits.
className	string	none	Extra classes for the outer card.

Types

interface NextPaymentTaxLine {
  label: string;
  amount: string;
}

Behavior notes

The total is a plain string you compute and pass in; the component doesn't sum seatSubtotal, tax lines, and credit itself, it only displays the number you give it.
taxes is rendered as an arbitrary-length list, so a customer with VAT plus a local digital-services tax shows two separate rows in the order given.
The credit row only appears when credit is a truthy string, and always renders in an emerald color to distinguish it from charges.
The footer note is omitted entirely when paymentMethodLabel isn't passed, rather than showing an empty footer.

Frequently asked questions

More Billing Blocks

View all →

Billing Invoice List

Invoice history table with status badges, formatted amounts, and a per-row download link, built with shadcn/ui and Tailwind CSS.

Billing Failed Payment Alert

High-contrast failed-payment alert with a message, a retry button, and an optional update-payment-method button, built with shadcn/ui and Tailwind CSS.

Billing Credit Balance

Compact credit balance card with a large total, an optional purchased-versus-promotional breakdown, a low-balance notice, and a top-up button.

Billing Payment Methods

A saved payment method list for React and Next.js with brand icons, a default badge, near-expiry warnings, and remove/set-default actions per row.

Billing Add Card

A card entry form for React and Next.js with auto-formatted fields, internal brand detection, and per-field validation feedback built with shadcn/ui and Tailwind CSS.

Billing Coupon Code

An inline promo code input for React and Next.js with a simulated loading state, an applied summary showing the discount amount, and an invalid-code message.