Printable payment receipt for SaaS billing: seller and billed-to, line items, a zero-rated VAT line with its reason, total paid, card last four and PDF download. Refunds are appended with the net, never rewriting the charge. React + Tailwind.
import * as React from "react";
import { CardLogos, Receipt, type CardLogoMap } from "@/components/ui/payment-receipt";
/* ==========================================================================
Two receipts from Tallyworks to Northwind Studio for the Team plan.
September is an ordinary paid month. May was charged twice during an
upgrade and refunded four days later — the refund is appended under the
total with the net, instead of replacing the receipt, so the record still
says what was charged.
Northwind is a UK business buying from abroad, so VAT is a reverse-charge
line at zero, printed with its reason. Amounts are integers in cents.
========================================================================== */
/* --------------------------------------------------------- payment marks --
The component ships no network logos: it renders a neutral card glyph
unless you hand it your marks through <CardLogos>. This is that half —
the Visa mark, light and dark, cropped to the 32 × 20 badge. */
const VIEW = "1.5 6.5 29 19";
function VisaArt({ ground, ink }: { ground: string; ink: string }) {
return (
<>
<rect x="2" y="7" width="28" height="18" rx="3" ry="3" fill={ground} />
<path
d="m27,7H5c-1.657,0-3,1.343-3,3v12c0,1.657,1.343,3,3,3h22c1.657,0,3-1.343,3-3v-12c0-1.657-1.343-3-3-3Zm2,15c0,1.103-.897,2-2,2H5c-1.103,0-2-.897-2-2v-12c0-1.103.897-2,2-2h22c1.103,0,2,.897,2,2v12Z"
opacity=".15"
/>
<path
d="m27,8H5c-1.105,0-2,.895-2,2v1c0-1.105.895-2,2-2h22c1.105,0,2,.895,2,2v-1c0-1.105-.895-2-2-2Z"
fill="#fff"
opacity=".2"
/>
<path
d="m13.392,12.624l-2.838,6.77h-1.851l-1.397-5.403c-.085-.332-.158-.454-.416-.595-.421-.229-1.117-.443-1.728-.576l.041-.196h2.98c.38,0,.721.253.808.69l.738,3.918,1.822-4.608h1.84Z"
fill={ink}
/>
<path
d="m20.646,17.183c.008-1.787-2.47-1.886-2.453-2.684.005-.243.237-.501.743-.567.251-.032.943-.058,1.727.303l.307-1.436c-.421-.152-.964-.299-1.638-.299-1.732,0-2.95.92-2.959,2.238-.011.975.87,1.518,1.533,1.843.683.332.912.545.909.841-.005.454-.545.655-1.047.663-.881.014-1.392-.238-1.799-.428l-.318,1.484c.41.188,1.165.351,1.947.359,1.841,0,3.044-.909,3.05-2.317"
fill={ink}
/>
<path
d="m25.423,12.624h-1.494c-.337,0-.62.195-.746.496l-2.628,6.274h1.839l.365-1.011h2.247l.212,1.011h1.62l-1.415-6.77Zm-2.16,4.372l.922-2.542.53,2.542h-1.452Z"
fill={ink}
/>
<path fill={ink} d="M15.894 12.624L14.446 19.394 12.695 19.394 14.143 12.624 15.894 12.624z" />
</>
);
}
const MARKS: CardLogoMap = {
visa: (
<>
<svg viewBox={VIEW} width="32" height="20" role="img" aria-label="Visa" className="block h-5 w-8 dark:hidden">
<VisaArt ground="#fff" ink="#1434cb" />
</svg>
<svg viewBox={VIEW} width="32" height="20" role="img" aria-label="Visa" className="hidden h-5 w-8 dark:block">
<VisaArt ground="#1434cb" ink="#fff" />
</svg>
</>
),
};
const SELLER = {
name: "Tallyworks",
company: "Tallyworks, Inc.",
address: ["2261 Market Street #4410", "San Francisco, CA 94114", "United States"],
};
const BILLED_TO = {
name: "Michael Carter",
company: "Northwind Studio",
address: ["12 Fenwick Row", "Bristol BS1 4QA", "United Kingdom"],
taxId: "GB 284 1197 06",
};
const RECEIPTS = {
sep: { number: "INV-2026-0914", date: "14 Sep 2026", period: "14 Sep – 14 Oct 2026" },
may: { number: "INV-2026-0514", date: "14 May 2026", period: "14 May – 14 Jun 2026" },
} as const;
type Which = keyof typeof RECEIPTS;
export default function ReceiptDemo() {
const [which, setWhich] = React.useState<Which>("sep");
const r = RECEIPTS[which];
return (
<div className="flex min-h-screen w-full items-center justify-center bg-background p-8">
<div className="flex w-full max-w-[480px] flex-col gap-3">
<div
role="radiogroup"
aria-label="Receipt"
className="flex gap-1 self-start rounded-[10px] bg-muted p-1"
>
{(
[
["sep", "14 Sep · paid"],
["may", "14 May · refunded"],
] as const
).map(([id, label]) => (
<button
key={id}
type="button"
role="radio"
aria-checked={which === id}
onClick={() => setWhich(id)}
className={
"h-6 rounded-[6px] px-2.5 text-[12px] font-medium transition-colors " +
(which === id
? "bg-card text-foreground shadow-[0_1px_2px_rgb(0_0_0/0.08)]"
: "text-muted-foreground hover:text-foreground")
}
>
{label}
</button>
))}
</div>
<CardLogos logos={MARKS}>
<Receipt
number={r.number}
issuedOn={r.date}
seller={SELLER}
billedTo={BILLED_TO}
lines={[{ label: "Team plan", detail: `${r.period} · 10 seats`, amount: 8900 }]}
tax={{ label: "VAT", amount: 0, note: "reverse charge, customer to account" }}
total={8900}
payment={{ network: "visa", last4: "2119", on: r.date }}
refund={which === "may" ? { amount: 8900, on: "18 May 2026", reason: "charged twice during the upgrade" } : undefined}
onDownload={() => console.info("download", r.number)}
/>
</CardLogos>
</div>
</div>
);
}
Part of Layro — browse the full library on 21st.dev.