Billing and receivables / A4
Credit note HTML template
A document that reverses part or all of an invoice, naming the invoice it reverses and the reason.
When this document is the right one
Goods come back, a line was overcharged, or a discount is agreed after the invoice went out. A credit note is issued rather than editing the invoice, because the invoice has already been sent, filed and possibly paid.
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 invoice it is issued against, by number and date, in the most prominent block on the page. A credit note that does not name its invoice cannot be reconciled.
- The reason, in a sentence. It is what the customer's accounts payable needs to approve the credit without a phone call.
- Negative quantities and negative amounts, shown as negative rather than as positive numbers under a heading that says credit.
- Its own sequential number, in its own sequence.
- A settlement statement saying what the revised balance is and whether a refund follows, since the two are different outcomes.
The template
A complete file. Doctype, stylesheet, body: paste it into a renderer unchanged and it produces a finished A4 page. Replace the sample data and the styling holds.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Credit note CN-2026-0043</title>
<style>
@page { size: A4; margin: 18mm 16mm; }
* { box-sizing: border-box; }
body { margin: 0; font: 10pt/1.45 "Helvetica Neue", Arial, sans-serif; color: #111; }
header { display: flex; justify-content: space-between; align-items: flex-start;
border-bottom: 2px solid #b3261e; padding-bottom: 8mm; }
h1 { margin: 0; font-size: 20pt; color: #b3261e; text-transform: uppercase;
letter-spacing: 0.04em; }
.ref { text-align: right; font-size: 9pt; }
.ref dl { display: grid; grid-template-columns: auto auto; gap: 1mm 4mm; margin: 3mm 0 0; }
.ref dt { color: #666; text-align: right; }
.ref dd { margin: 0; font-variant-numeric: tabular-nums; }
/* A credit note that does not name the invoice it reverses cannot be
reconciled. This callout is the load-bearing field on the page. */
.against { margin: 7mm 0; background: #fdeceb; border-left: 4px solid #b3261e;
padding: 4mm 5mm; }
.against strong { display: block; font-size: 11pt; }
.parties { display: grid; grid-template-columns: 1fr 1fr; gap: 10mm; margin-bottom: 8mm; }
.parties h2 { margin: 0 0 2mm; font-size: 8pt; text-transform: uppercase;
letter-spacing: 0.08em; color: #666; }
address { font-style: normal; }
table { width: 100%; border-collapse: collapse; }
thead { display: table-header-group; }
th { text-align: left; font-size: 8pt; text-transform: uppercase; letter-spacing: 0.06em;
color: #666; border-bottom: 1px solid #111; padding-bottom: 2mm; }
td { padding: 3mm 0; border-bottom: 1px solid #e4e4e4; vertical-align: top; }
tr { break-inside: avoid; }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.reason { display: block; color: #666; font-size: 8.5pt; margin-top: 1mm; }
.totals { width: 80mm; margin: 6mm 0 0 auto; break-inside: avoid; }
.totals div { display: flex; justify-content: space-between; padding: 1.5mm 0; }
.totals .grand { border-top: 2px solid #b3261e; margin-top: 2mm; padding-top: 2.5mm;
font-size: 12.5pt; font-weight: 700; color: #b3261e; }
.settlement { margin-top: 12mm; border-top: 1px solid #e4e4e4; padding-top: 5mm;
font-size: 9pt; break-inside: avoid; }
</style>
</head>
<body>
<header>
<div>
<div style="font-size:15pt;font-weight:700">Northgate Supply Co.</div>
<address>18 Wharf Road, Bristol BS1 4RN<br>VAT GB 412 8871 03</address>
</div>
<div class="ref">
<h1>Credit note</h1>
<dl>
<dt>Number</dt><dd>CN-2026-0043</dd>
<dt>Issued</dt><dd>21 May 2026</dd>
</dl>
</div>
</header>
<div class="against">
<strong>Issued against invoice INV-2026-0184, dated 14 May 2026</strong>
Reason: two panels delivered with edge damage, returned on 19 May 2026 under
RMA-1142. This note credits those lines in full and does not affect the
remainder of the invoice, which stands and remains due on 13 June 2026.
</div>
<section class="parties">
<div>
<h2>Credited to</h2>
<address><strong>Calder Interiors Ltd</strong><br>
7 Meridian Court, Leeds LS11 5AL</address>
</div>
<div>
<h2>Original purchase order</h2>
<p style="margin:0">PO-88213</p>
</div>
</section>
<table>
<thead>
<tr><th>Credited line</th><th class="num">Qty</th><th class="num">Unit price</th>
<th class="num">Amount</th></tr>
</thead>
<tbody>
<tr>
<td>Oak veneer panel, 2400 x 1200
<span class="reason">Returned damaged, RMA-1142, inspected 20 May</span></td>
<td class="num">-2</td><td class="num">86.00</td><td class="num">-172.00</td>
</tr>
<tr>
<td>Return collection charge, waived
<span class="reason">Goodwill, agreed with A. Boland on 19 May</span></td>
<td class="num">-1</td><td class="num">35.00</td><td class="num">-35.00</td>
</tr>
</tbody>
</table>
<div class="totals">
<div><span>Net credit</span><span>-207.00</span></div>
<div><span>VAT at 20%</span><span>-41.40</span></div>
<div class="grand"><span>Total credited</span><span>GBP -248.40</span></div>
</div>
<section class="settlement">
<strong>Settlement.</strong> This credit will be applied against invoice
INV-2026-0184 on your account. The revised balance due on 13 June 2026 is
GBP 2,665.20. No refund will be issued unless you request one in writing,
in which case it is paid to the account the original payment came from.
</section>
</body>
</html>The layout decision worth understanding
Everything structural is inherited from the invoice template deliberately: the same table, the same totals block, the same break rules. The only visual difference is the accent colour and the reference block. A credit note that looks like a different kind of document makes reconciliation harder, not easier.
The mistake people make adapting it
Issuing a credit note dated in a period that is already closed. It has to fall in an open period, which sometimes means the correct answer is a credit note today for something that went wrong two months ago, rather than backdating.
Rendering it
The page box is declared in the template's own CSS as A4, so the size travels with the markup rather than living in the code that calls the renderer. A4 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": "A4" }
}' \
--output credit-note.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 credit note is a A4 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.
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.
EU VAT invoice HTML template
A cross-border invoice inside the EU, with both parties' VAT identification numbers, tax broken out per rate, and a reverse charge statement.
GST tax invoice HTML template for India
An Indian tax invoice with GSTIN for both parties, HSN codes per line, and tax split into CGST and SGST or charged as IGST depending on the place of supply.
Commercial invoice template for customs
The customs document that travels with an international shipment: what the goods are, what they are worth, where they were made, and under what terms they move.
Payment receipt HTML template
Proof that a payment was made: the amount, the payment reference, the method, and what it was for.
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.
Every template
The full set, grouped by what part of a business produces the document.
A4 page size for PDF generation
A4 is the default page for business documents everywhere except North America, and the default this API uses when no format is given.
Paste the template into the playground and get the PDF back. No signup, no key.