Building a Receipt Template

Overview

In this guide, you'll create a receipt template suitable for retail, e-commerce, or service-based businesses. The receipt will include a business header, itemized line items, tax calculation, and payment details.

Page Setup

Receipts are typically smaller than standard documents:

• Width: 300px (roughly 80mm thermal paper) or 595px for A4
• Orientation: Portrait
• Margins: 20px all sides

Header Section

1. Add an image element for your business logo (centered, 80px height)
2. Add a text element for the business name — bold, 16px, centered
3. Add a text element for address and contact info — 10px, gray, centered

Receipt Details

Add field elements for dynamic receipt information:

Line Items Table

Add a table element with these columns:

• Item — Product or service name
• Qty — Quantity
• Price — Unit price
• Total — Line total

Bind the table to a items array field key.

Totals Section

Below the table, add field elements for:

• Subtotal — subtotal field, right-aligned
• Tax — tax field with label showing tax rate
• Total — total field, bold, larger font

Sample API Data

{
  "templateId": "tmpl_receipt",
  "data": {
    "receiptNumber": "RCP-2025-0042",
    "date": "2025-01-15",
    "cashier": "John D.",
    "paymentMethod": "Visa •••• 4242",
    "items": [
      { "item": "Espresso", "qty": 2, "price": "$4.50", "total": "$9.00" },
      { "item": "Muffin", "qty": 1, "price": "$3.25", "total": "$3.25" },
      { "item": "Water", "qty": 1, "price": "$1.50", "total": "$1.50" }
    ],
    "subtotal": "$13.75",
    "tax": "$1.10",
    "total": "$14.85"
  }
}

Footer

Add a centered text element at the bottom for:

• Thank-you message
• Return policy
• Website or social media links

Next Steps

• Invoice Template — Full invoice with payment terms
• Tables — Table configuration
• Data Binding — Dynamic content