The HTML behind it
Payment receipt template HTML
This is the whole template. The fields in double braces fill from your data on every render. Copy it into your account and change anything you like.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<style data-thirds="base">
html,body{margin:0}
[data-thirds="canvas"]{position:relative;overflow:hidden}
[data-thirds="canvas"] [data-thirds]{position:absolute;box-sizing:border-box;margin:0}
[data-thirds="text"]{white-space:pre-wrap;overflow-wrap:anywhere}
[data-thirds="image"]{display:block}
[data-thirds="table"]{border-collapse:collapse}
[data-thirds="table"] th,[data-thirds="table"] td{padding:4px 6px;text-align:left;vertical-align:top;border-bottom:1px solid var(--rule,#dde1e8)}
[data-thirds="table"] th{background:var(--head,transparent)}
[data-thirds="list"]{display:flex;flex-direction:column}
[data-thirds="canvas"] [data-thirds="item"]{position:relative;flex:none}
</style>
<style>@page { size: 794px 1123px; margin: 0; } body { font-family: Arial, Helvetica, sans-serif; } [data-thirds="table"] th,[data-thirds="table"] td { padding: 8px 10px; }</style>
</head>
<body>
<div data-thirds="canvas" data-thirds-kind="pdf" data-thirds-page="p1" data-thirds-name="Page 1" style="width:794px;height:1123px;background:#ffffff">
<div data-thirds="text" data-thirds-id="business-name" data-thirds-name="Business name" style="left:56px;top:54px;width:400px;height:30px;font-size:20px;color:#14532d;font-weight:700;line-height:1.2;">{{ business_name }}</div>
<div data-thirds="text" data-thirds-id="business-contact" data-thirds-name="Business contact" style="left:56px;top:86px;width:400px;height:40px;font-size:12px;color:#575f6d;font-weight:400;line-height:1.4;">{{ business_address }}<br>{{ business_email }}</div>
<div data-thirds="text" data-thirds-id="title" data-thirds-name="Title" style="left:400px;top:48px;width:338px;height:60px;font-size:44px;color:#0b0b0b;font-weight:800;line-height:1.2;text-align:right;">Receipt</div>
<div data-thirds="text" data-thirds-id="receipt-number" data-thirds-name="Receipt number" style="left:400px;top:106px;width:338px;height:24px;font-size:14px;color:#575f6d;font-weight:700;line-height:1.2;text-align:right;">{{ receipt_number }}</div>
<div data-thirds="box" data-thirds-id="header-rule" data-thirds-name="Header rule" style="left:56px;top:150px;width:682px;height:3px;background:#14532d"></div>
<div data-thirds="text" data-thirds-id="paid-by-label" data-thirds-name="Paid by label" style="left:56px;top:180px;width:300px;height:20px;font-size:11px;color:#575f6d;font-weight:700;line-height:1.2;letter-spacing:1.3px;text-transform:uppercase;">Paid by</div>
<div data-thirds="text" data-thirds-id="customer" data-thirds-name="Customer" style="left:56px;top:204px;width:320px;height:50px;font-size:14px;color:#0b0b0b;font-weight:400;line-height:1.4;"><strong>{{ customer_name }}</strong><br>{{ customer_email }}</div>
<div data-thirds="text" data-thirds-id="paid-on-label" data-thirds-name="Paid on label" style="left:440px;top:180px;width:140px;height:20px;font-size:11px;color:#575f6d;font-weight:700;line-height:1.2;letter-spacing:1.3px;text-transform:uppercase;">Paid on</div>
<div data-thirds="text" data-thirds-id="paid-on" data-thirds-name="Paid on" style="left:440px;top:204px;width:140px;height:24px;font-size:14px;color:#0b0b0b;font-weight:400;line-height:1.2;">{{ paid_on|date }}</div>
<div data-thirds="text" data-thirds-id="method-label" data-thirds-name="Method label" style="left:600px;top:180px;width:138px;height:20px;font-size:11px;color:#575f6d;font-weight:700;line-height:1.2;letter-spacing:1.3px;text-transform:uppercase;">Payment method</div>
<div data-thirds="text" data-thirds-id="payment-method" data-thirds-name="Payment method" style="left:600px;top:204px;width:138px;height:44px;font-size:14px;color:#0b0b0b;font-weight:400;line-height:1.4;">{{ payment_method }}</div>
<div data-thirds="box" data-thirds-id="paid-stamp" data-thirds-name="Paid stamp" style="left:560px;top:268px;width:180px;height:70px;border:5px solid #19c37d;border-radius:12px;transform:rotate(-8deg)"></div>
<div data-thirds="text" data-thirds-id="paid-stamp-text" data-thirds-name="Paid stamp text" style="left:560px;top:282px;width:180px;height:44px;font-size:34px;color:#19c37d;font-weight:800;line-height:1.0;text-align:center;letter-spacing:6px;text-transform:uppercase;transform:rotate(-8deg);">{{ stamp }}</div>
<table data-thirds="table" data-thirds-id="items" data-thirds-name="Items" style="left:56px;top:380px;width:682px;font-size:13px;--head:#ecfdf5;"><thead><tr><th>Item</th><th style="text-align:right">Qty</th><th style="text-align:right">Amount</th></tr></thead><tbody>{% for item in items %}<tr><td>{{ item.description }}</td><td style="text-align:right">{{ item.quantity|number }}</td><td style="text-align:right">{{ item.amount|currency }}</td></tr>{% endfor %}</tbody></table>
<div data-thirds="text" data-thirds-id="subtotal-label" data-thirds-name="Subtotal label" style="left:440px;top:720px;width:150px;height:22px;font-size:13px;color:#575f6d;font-weight:400;line-height:1.2;">Subtotal</div>
<div data-thirds="text" data-thirds-id="subtotal" data-thirds-name="Subtotal" style="left:590px;top:720px;width:148px;height:22px;font-size:13px;color:#0b0b0b;font-weight:400;line-height:1.2;text-align:right;">{{ subtotal|currency }}</div>
<div data-thirds="text" data-thirds-id="tax-label" data-thirds-name="Tax label" style="left:440px;top:750px;width:150px;height:22px;font-size:13px;color:#575f6d;font-weight:400;line-height:1.2;">{{ tax_label }}</div>
<div data-thirds="text" data-thirds-id="tax" data-thirds-name="Tax" style="left:590px;top:750px;width:148px;height:22px;font-size:13px;color:#0b0b0b;font-weight:400;line-height:1.2;text-align:right;">{{ tax|currency }}</div>
<div data-thirds="box" data-thirds-id="total-rule" data-thirds-name="Total rule" style="left:440px;top:784px;width:298px;height:2px;background:#0b0b0b"></div>
<div data-thirds="text" data-thirds-id="total-label" data-thirds-name="Total paid label" style="left:440px;top:800px;width:150px;height:30px;font-size:20px;color:#0b0b0b;font-weight:700;line-height:1.2;">Total paid</div>
<div data-thirds="text" data-thirds-id="total" data-thirds-name="Total paid" style="left:590px;top:800px;width:148px;height:30px;font-size:20px;color:#14532d;font-weight:800;line-height:1.2;text-align:right;">{{ total|currency }}</div>
<div data-thirds="box" data-thirds-id="note-box" data-thirds-name="Note box" style="left:56px;top:900px;width:682px;height:80px;background:#f0fdf4;border-radius:8px"></div>
<div data-thirds="text" data-thirds-id="note" data-thirds-name="Note" style="left:76px;top:918px;width:642px;height:48px;font-size:13px;color:#14532d;font-weight:400;line-height:1.45;">{{ note }}</div>
<div data-thirds="text" data-thirds-id="footer" data-thirds-name="Footer" style="left:56px;top:1064px;width:682px;height:20px;font-size:11px;color:#575f6d;font-weight:400;line-height:1.2;">{{ footer }}</div>
</div>
</body>
</html>
Sample data
The values that made the picture.
Change any of them, and the same HTML makes a new file.
{
"business_name": "Summit Outdoor",
"business_address": "14 Ridge Road, Queenstown",
"business_email": "shop@summit.example",
"customer_name": "Amara Osei",
"customer_email": "amara@example.com",
"receipt_number": "R-88213",
"paid_on": "2026-09-06",
"payment_method": "Visa ending 4417",
"stamp": "Paid",
"items": [
{
"description": "Ridgeline 2-person tent",
"quantity": 1,
"amount": 449
},
{
"description": "Trail pack 38 L",
"quantity": 1,
"amount": 189
},
{
"description": "Wool hiking socks",
"quantity": 3,
"amount": 66
}
],
"subtotal": 704,
"tax_label": "GST 15%",
"tax": 105.6,
"total": 809.6,
"note": "Thank you for your order. Bring this receipt for returns within 30 days.",
"footer": "Summit Outdoor Ltd. Keep this receipt for your records."
}