Order Confirmation Template HTML and JSON

This guide is based on the Order Confirmation 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="banner">
<h1>Order Confirmed! \u2713</h1>
<p>Thank you for your purchase, {{customer_name}}</p>
</div>
<div class="order-meta">
<div>
<strong>Order Number</strong>{{order_number}}</div>
<div>
<strong>Order Date</strong>{{order_date}}</div>
<div>
<strong>Shipping To</strong>{{shipping_address}}</div>
<div>
<strong>Est. Delivery</strong>{{delivery_date}}</div>
</div>
<table>
<thead>
<tr>
<th>Item</th>
<th>Qty</th>
<th class="r">Price</th>
</tr>
</thead>
<tbody>{{#each items}}<tr>
<td>{{this.name}}</td>
<td>{{this.qty}}</td>
<td class="r">${{this.price}}</td>
</tr>{{/each}}</tbody>
</table>
<div class="summary">
<div class="s-box">
<div class="s-row">
<span>Subtotal</span>
<span>${{subtotal}}</span>
</div>
<div class="s-row">
<span>Shipping</span>
<span>${{shipping}}</span>
</div>
<div class="s-row total">
<span>Total</span>
<span>${{total}}</span>
</div>
</div>
</div>
<div class="note">Your tracking number will be emailed once your order ships.</div>

Step 2 - Matching JSON payload

JSON

{
  "customer_name": "Alex Johnson",
  "order_number": "ORD-2026-78432",
  "order_date": "March 9, 2026",
  "shipping_address": "789 Pine St, Chicago, IL 60601",
  "delivery_date": "March 14, 2026",
  "items": [
    {
      "name": "Wireless Mechanical Keyboard",
      "qty": 1,
      "price": "129.99"
    },
    {
      "name": "USB-C Hub (7-in-1)",
      "qty": 1,
      "price": "49.99"
    },
    {
      "name": "Desk Mat (XL)",
      "qty": 1,
      "price": "24.99"
    }
  ],
  "subtotal": "204.97",
  "shipping": "Free",
  "total": "204.97"
}

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

{{customer_name}} -> customer_name
{{order_number}} -> order_number
{{order_date}} -> order_date
{{shipping_address}} -> shipping_address
{{#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-order-confirmation-template_id>",
    "payload": {
      "customer_name": "Alex Johnson",
      "order_number": "ORD-2026-78432",
      "order_date": "March 9, 2026",
      "shipping_address": "789 Pine St, Chicago, IL 60601",
      "delivery_date": "March 14, 2026",
      "items": [
        {
          "name": "Wireless Mechanical Keyboard",
          "qty": 1,
          "price": "129.99"
        },
        {
          "name": "USB-C Hub (7-in-1)",
          "qty": 1,
          "price": "49.99"
        }
      ],
      "subtotal": "204.97"
    }
  }'

Use this template for free now

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

Use this template free

Order Confirmation Template: HTML + JSON Payload