Skip to content
Launch offerSolo $19 $49 · Team $39 $79Launch pricing ends Sunday
Mailblocks
LibraryGet it →

Payment receipt email

Stripe-style receipt with line items, tax, payment method and a PDF link.

Free — get the code ↓
16.8 KB · Gmail-safe

Code

import * as React from "react";
import { A, Btn, Divider, Eyebrow, H1, KV, LineItems, P, Shell, Small, type TemplateProps } from "../components";

export type ReceiptProps = TemplateProps & {
  receiptNumber?: string;
  date?: string;
  amount?: string;
  cardBrand?: string;
  last4?: string;
  items?: { name: string; detail?: string; amount: number }[];
  tax?: number;
  pdfUrl?: string;
  billingUrl?: string;
};

export default function Receipt({
  style,
  brand,
  receiptNumber = "2418-7730",
  date = "October 16, 2026",
  amount = "$158.40",
  cardBrand = "Visa",
  last4 = "4242",
  items = [
    { name: "Team plan", detail: "6 seats × $24 · Oct 16 – Nov 16, 2026", amount: 144 },
  ],
  tax = 14.4,
  pdfUrl = "https://fieldnote.app/billing/receipts/2418-7730.pdf",
  billingUrl = "https://fieldnote.app/billing",
}: ReceiptProps) {
  const subtotal = items.reduce((n, i) => n + i.amount, 0);
  return (
    <Shell style={style} brand={brand} label="Receipt" preview={`Receipt #${receiptNumber} — ${amount} paid on ${date}.`}>
      <Eyebrow>Receipt #{receiptNumber}</Eyebrow>
      <H1>{amount} paid — thank you.</H1>
      <KV
        rows={[
          ["Date paid", date],
          ["Payment method", `${cardBrand} •••• ${last4}`],
          ["Receipt number", receiptNumber],
        ]}
      />
      <LineItems
        items={items}
        totals={[
          { label: "Subtotal", amount: subtotal },
          { label: "Tax (10%)", amount: tax },
          { label: "Amount paid", amount: subtotal + tax, strong: true },
        ]}
      />
      <Btn href={pdfUrl} variant="secondary">Download PDF receipt</Btn>
      <Divider my={8} />
      <P mb={8}>
        Manage invoices, billing details and tax IDs in <A href={billingUrl}>billing settings</A>.
      </P>
      <Small mb={0}>Questions about this charge? Just reply — this goes to our billing team.</Small>
    </Shell>
  );
}

Receipt.PreviewProps = {} satisfies ReceiptProps;

The TSX imports components.tsx and theme.ts from the kit. Grab the free starter (all six free templates with their components) on the free page.

Related

← Trial endedInvoice →
Invoice email template preview

Invoice

№08 · Billing

Invoice with bill-to details, due date, line items and a pay-now button.

Payment failed email template preview

Payment failed

№09 · Billing

Dunning email with the reason, retry date and a one-tap update-card button.

Plan changed email template preview

Plan changed

№10 · Billing

Upgrade/downgrade confirmation with a before → after comparison and proration.

Subscription canceled email template preview

Subscription canceled

№11 · Billing

Graceful cancellation confirmation with access end date, export link and a way back.