Payments received / A5
Payment receipt HTML template
Proof that a payment was made: the amount, the payment reference, the method, and what it was for.
When this document is the right one
A payment succeeds. The customer forwards this to an expense system months later, so it has to be readable by software and by a finance team that has never seen your product.
Why each part is there
The fields are visible in the markup. What is not visible is why they are present, which is the part that gets removed first when someone adapts a template for their own use.
- The amount, set large and near the top, because it is the only number anyone looks for.
- The processor's payment reference, which is what a dispute or a refund is traced by and is not the same as your order number.
- The payment method as brand and last four digits, which is how an expense system matches the line on a card statement.
- A timestamp with a timezone, since reconciliation is by date and a payment at 23:50 belongs to different days in different places.
- The merchant legal name, which is frequently not the brand on the website and is what appears on the card statement.
The template
A complete file. Doctype, stylesheet, body: paste it into a renderer unchanged and it produces a finished A5 page. Replace the sample data and the styling holds.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Receipt RC-88412</title>
<style>
/* A5 rather than A4. A receipt has eight lines of content and an A4 sheet
leaves most of the page empty, which reads as an unfinished document. */
@page { size: A5; margin: 12mm; }
* { box-sizing: border-box; }
body { margin: 0; font: 9.5pt/1.5 "Helvetica Neue", Arial, sans-serif; color: #111; }
header { text-align: center; border-bottom: 1px solid #111; padding-bottom: 6mm; }
.brand { font-size: 14pt; font-weight: 700; letter-spacing: -0.01em; }
.brand-sub { font-size: 8pt; color: #666; margin-top: 1mm; }
h1 { margin: 5mm 0 0; font-size: 10pt; text-transform: uppercase;
letter-spacing: 0.14em; font-weight: 400; }
.paid { margin: 7mm 0; text-align: center; }
.paid .amount { font-size: 26pt; font-weight: 700; font-variant-numeric: tabular-nums;
line-height: 1; }
.paid .label { font-size: 8pt; text-transform: uppercase; letter-spacing: 0.1em;
color: #666; margin-top: 2mm; }
dl { display: grid; grid-template-columns: 34mm 1fr; gap: 2mm 4mm; margin: 0;
font-size: 9pt; border-top: 1px solid #e4e4e4; padding-top: 5mm; }
dt { color: #666; }
dd { margin: 0; font-variant-numeric: tabular-nums; }
table { width: 100%; border-collapse: collapse; margin-top: 6mm; font-size: 9pt; }
th { text-align: left; font-size: 7.5pt; text-transform: uppercase; color: #666;
letter-spacing: 0.06em; border-bottom: 1px solid #111; padding-bottom: 1.5mm; }
td { padding: 2mm 0; border-bottom: 1px solid #f0f0f0; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
footer { margin-top: 8mm; border-top: 1px solid #e4e4e4; padding-top: 4mm;
font-size: 8pt; color: #666; }
</style>
</head>
<body>
<header>
<div class="brand">Fennel & Rye</div>
<div class="brand-sub">Fennel and Rye Trading Ltd · VAT GB 388 4412 07</div>
<h1>Payment receipt</h1>
</header>
<div class="paid">
<div class="amount">GBP 148.20</div>
<div class="label">Paid in full</div>
</div>
<dl>
<dt>Receipt number</dt><dd>RC-88412</dd>
<dt>Payment date</dt><dd>14 May 2026, 11:42 GMT+1</dd>
<dt>Payment reference</dt><dd>ch_3PkQ8mF2eZvKYlo21n4WdXyz</dd>
<dt>Method</dt><dd>Visa ending 4021</dd>
<dt>Order</dt><dd>ORD-99031</dd>
</dl>
<table>
<tr><th>Item</th><th class="num">Amount</th></tr>
<tr><td>Cold brew subscription, 6 months</td><td class="num">123.50</td></tr>
<tr><td>VAT at 20%</td><td class="num">24.70</td></tr>
</table>
<footer>
Keep this receipt for your records. It is proof that payment was received and
is accepted by most expense systems as a supporting document. The amount and
the payment reference above are the two fields a reconciliation is matched on.
Questions: hello@fennelandrye.example.
</footer>
</body>
</html>The layout decision worth understanding
The page is A5 rather than A4. A receipt is eight lines of content and an A4 sheet leaves two thirds of the page empty, which reads as a document that failed to finish rendering. Choosing the smaller page is a design decision that costs nothing and changes how the file is perceived.
The mistake people make adapting it
Putting the amount inside an image, or in a font that does not embed. Expense software extracts text, and an amount that is not selectable text means the claim has to be keyed by hand, which is exactly the work the receipt was meant to remove.
Rendering it
The page box is declared in the template's own CSS as A5, so the size travels with the markup rather than living in the code that calls the renderer. A5 is also one of the six named formats the API accepts, so it can be passed in the request options instead if that suits your setup better.
curl -X POST https://api.pdfpipe.xyz/v1/pdf \
-H "Authorization: Bearer $PDFPIPE_KEY" \
-H "Content-Type: application/json" \
-d '{
"html": "<!doctype html>...",
"options": { "format": "A5" }
}' \
--output receipt.pdfFrequently asked
Can I use this template commercially?
Yes. Copy it, change it, ship it. It is sample markup written to be taken, and the sample data in it is invented, so replace the names and the numbers before anyone sees it.
Why is the page size in the CSS rather than in the API call?
Because a payment receipt is a A5 document, and that is a property of the document rather than of the code that renders it. Declaring it in the page box means the size cannot be lost between the template and the call, which is the usual way a document ends up on the wrong paper.
Will it look the same in every renderer?
The layout will, because it uses ordinary CSS. The page break behaviour will not: break-inside and break-after are implemented differently by browser engines and by dedicated print engines, and some of the paged media specification is not implemented in browser renders at all. That difference is documented per property in the paged CSS reference.
Other templates
Documents from the same part of a business, and one from each of the other groups.
80mm thermal receipt HTML template
The point-of-sale receipt printed on an 80mm roll, designed for a print head that is narrower than the paper and has no greys.
Rent receipt format HTML template
A landlord's acknowledgement that rent was received for a stated period, in the form a payroll or tax process will accept.
Charitable donation receipt template
A charity's acknowledgement of a gift, in a form the donor can use as evidence for a tax deduction.
HTML invoice template with CSS
The standard commercial invoice: a demand for payment with line items, a tax figure, and terms that say when the money is due.
Quotation HTML template with CSS
A priced proposal with a validity date, a scope, optional items kept out of the headline total, and somewhere to sign.
Packing slip HTML template
The document that goes in the box: what was ordered, what was actually shipped, and no prices at all.
Work order HTML template for field service
A job sheet issued to an engineer: the asset, the reported fault, space to record what was done and what parts were used, and two signatures.
Every template
The full set, grouped by what part of a business produces the document.
A5 page size for PDF generation
A5 is half an A4 sheet, and the right size for a document that is short enough that A4 looks empty.
Paste the template into the playground and get the PDF back. No signup, no key.