Simple Receipt Template HTML and JSON

This guide is based on the Simple Receipt template in the Gallery.

It explains a practical flow: template HTML structure, matching JSON payload, and API render request.

Step 1 - Template HTML structure

HTML

<div class="receipt-header">
<h1>{{store_name}}</h1>
<p>{{store_address}}</p>
<p>Tel: {{store_phone}}</p>
</div>
<div class="meta">
<p>Receipt #: {{receipt_number}}</p>
<p>Date: {{date}}</p>
<p>Cashier: {{cashier}}</p>
</div>
<div class="items">{{#each items}}<div class="item">
<span>{{this.name}} x{{this.qty}}</span>
<span>${{this.price}}</span>
</div>{{/each}}</div>
<div class="divider">
</div>
<div class="total-line">
<span>TOTAL</span>
<span>${{total}}</span>
</div>
<div class="item">
<span>Paid ({{payment_method}})</span>
<span>${{paid}}</span>
</div>
<div class="item">
<span>Change</span>
<span>${{change}}</span>
</div>
<div class="footer">
<p>Thank you for your purchase!</p>
<p>{{store_name}}</p>
</div>

Step 2 - Matching JSON payload

JSON

{
  "store_name": "Corner Market",
  "store_address": "789 Main St",
  "store_phone": "(555) 123-4567",
  "receipt_number": "R-88421",
  "date": "2026-03-09 14:32",
  "cashier": "Sarah",
  "items": [
    {
      "name": "Organic Coffee",
      "qty": 2,
      "price": "8.50"
    },
    {
      "name": "Sandwich",
      "qty": 1,
      "price": "6.99"
    },
    {
      "name": "Sparkling Water",
      "qty": 3,
      "price": "4.50"
    }
  ],
  "total": "19.99",
  "payment_method": "Card",
  "paid": "20.00",
  "change": "0.01"
}

Step 3 - Final rendered preview in page

Rendered output preview Template style preview

Preview uses the original Gallery template HTML and CSS with sample payload values.

Step 4 - Key mapping checklist

{{store_name}} -> store_name
{{store_address}} -> store_address
{{store_phone}} -> store_phone
{{receipt_number}} -> receipt_number
{{#each items}} -> items[]
{{this.name}} -> items[].name

Step 5 - Render request example

BASH

curl -X POST "https://api.hookpdf.com/v1/render" \
  -H "Authorization: Bearer <api_key>" \
  -H "Content-Type: application/json" \
  -d '{
    "template_id": "<gallery-simple-receipt-template_id>",
    "payload": {
      "store_name": "Corner Market",
      "store_address": "789 Main St",
      "store_phone": "(555) 123-4567",
      "receipt_number": "R-88421",
      "date": "2026-03-09 14:32",
      "cashier": "Sarah",
      "items": [
        {
          "name": "Organic Coffee",
          "qty": 2,
          "price": "8.50"
        },
        {
          "name": "Sandwich",
          "qty": 1,
          "price": "6.99"
        }
      ]
    }
  }'

Use this template for free now

Start with this template in HookPDF and render your first PDF for free.

Use this template free

Simple Receipt Template: HTML + JSON Payload