Skip to content
pagenull

Receipt template

A payment receipt on 80 mm paper, the width of a thermal till roll. The page height grows with the number of items (height: "auto"), so there is never a blank half page.

Get a key to render itHow templates work
Loading preview…

The actual PDF from the API. Open it full size

Render with your data

Built in as receipt. Send your JSON, get the PDF. The data shown is invented sample data.

curl https://api.pagenull.dev/v1/templates/receipt/render \
  -H "Authorization: Bearer $PAGENULL_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
  "data": {
    "shop": "Fieldnote Supply",
    "address": "8 Example Street, Plovdiv",
    "receiptNo": "R-55821",
    "total": "€42.00",
    "subtotal": "€42.00",
    "vatRate": "20%",
    "vat": "€7.00",
    "paidAt": "3 Nov 2026, 14:12",
    "items": [
      {
        "qty": 2,
        "name": "Dot-grid notebook",
        "price": "€24.00"
      },
      {
        "qty": 1,
        "name": "Fineliner set",
        "price": "€12.00"
      },
      {
        "qty": 1,
        "name": "Shipping",
        "price": "€6.00"
      }
    ],
    "method": "Visa ending 4242",
    "order": "#10293",
    "support": "help@example.com"
  }
}' \
  -o receipt.pdf

HTML source

Copy it into the dashboard to make your own version.

receipt.html
<!doctype html><html><head><meta charset="utf-8"><title>Receipt {{receiptNo}}</title><style>
  *{box-sizing:border-box}
  html{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  body{margin:0;font-family:"Helvetica Neue", Helvetica, Arial, "Liberation Sans", "DejaVu Sans", sans-serif;color:#16181d;font-size:14px;line-height:1.5;text-rendering:geometricPrecision}
  table{width:100%;border-collapse:collapse}
  th{text-align:left;font-weight:700;color:#3d424a;font-size:12px;padding:0 0 8px;border-bottom:1.5px solid #16181d}
  td{padding:11px 0;border-bottom:1px solid #d9dbd6;vertical-align:top}
  tr{break-inside:avoid}
  .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
  .muted{color:#4f545c}
  .label{font-size:12px;font-weight:700;color:#4f545c;margin-bottom:4px}

  body{font-size:12.5px;line-height:1.45}
  .head{text-align:center;padding-bottom:12px;border-bottom:1px dashed #9aa0a8}
  .shop{font-size:17px;font-weight:700;letter-spacing:-.01em}
  .addr{font-size:11px;color:#4f545c;margin-top:2px}
  .paid{text-align:center;padding:16px 0 14px;border-bottom:1px dashed #9aa0a8}
  .paid small{display:block;font-size:11px;font-weight:700;color:#4f545c}
  .amount{font-size:30px;font-weight:700;letter-spacing:-.03em;line-height:1.1;margin-top:2px}
  .when{font-size:11px;color:#4f545c;margin-top:2px}
  table{margin-top:10px}
  td{padding:5px 0;border-bottom:0}
  .qty{color:#4f545c;padding-right:8px;width:22px}
  .sub td{padding-top:10px;border-top:1px dashed #9aa0a8;color:#4f545c}
  .grand td{font-size:15px;font-weight:700;padding-top:4px}
  dl{display:grid;grid-template-columns:auto 1fr;gap:3px 12px;margin:12px 0 0;padding-top:10px;border-top:1px dashed #9aa0a8;font-size:11.5px}
  dt{color:#4f545c} dd{margin:0;text-align:right}
  .foot{text-align:center;margin-top:14px;font-size:11px;color:#4f545c}
</style></head><body>
<div class="head"><div class="shop">{{shop}}</div><div class="addr">{{address}}</div></div>
<div class="paid"><small>Amount paid</small><div class="amount">{{total}}</div><div class="when">{{paidAt}}</div></div>
<table><tbody>
{{#items}}<tr><td class="qty">{{qty}}×</td><td>{{name}}</td><td class="num">{{price}}</td></tr>{{/items}}
<tr class="sub"><td></td><td>Subtotal</td><td class="num">{{subtotal}}</td></tr>
<tr><td></td><td style="color:#4f545c">VAT {{vatRate}} included</td><td class="num" style="color:#4f545c">{{vat}}</td></tr>
<tr class="grand"><td></td><td>Total</td><td class="num">{{total}}</td></tr>
</tbody></table>
<dl><dt>Paid with</dt><dd>{{method}}</dd><dt>Receipt</dt><dd>{{receiptNo}}</dd><dt>Order</dt><dd>{{order}}</dd></dl>
<div class="foot">Thank you. Questions? {{support}}</div>
</body></html>