Payment Receipt Template HTML and JSON

This guide is based on the Payment 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">
<div class="receipt-header">
<h1>{{company_name}}</h1>
<p>Payment Receipt</p>
</div>
<div class="success">
<div class="icon">\u2713</div>
<h2>${{amount}}</h2>
<p>Payment Successful</p>
</div>
<div class="details">
<div class="detail-row">
<span class="label">Transaction ID</span>
<span class="value">{{transaction_id}}</span>
</div>
<div class="detail-row">
<span class="label">Date</span>
<span class="value">{{date}}</span>
</div>
<div class="detail-row">
<span class="label">Description</span>
<span class="value">{{description}}</span>
</div>
<div class="detail-row">
<span class="label">Payment Method</span>
<span class="value">{{payment_method}}</span>
</div>
<div class="detail-row">
<span class="label">Customer</span>
<span class="value">{{customer_name}}</span>
</div>
<div class="detail-row">
<span class="label">Email</span>
<span class="value">{{customer_email}}</span>
</div>
</div>
<div class="receipt-footer">{{company_name}} | {{company_website}}</div>
</div>

Step 2 - Matching JSON payload

JSON

{
  "company_name": "CloudSync Pro",
  "company_website": "cloudsync.pro",
  "amount": "49.00",
  "transaction_id": "TXN-2026-0309-A7F2",
  "date": "March 9, 2026 14:32 UTC",
  "description": "Pro Plan - Monthly Subscription",
  "payment_method": "Visa ending 4242",
  "customer_name": "Maria Garcia",
  "customer_email": "maria@example.com"
}

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

{{company_name}} -> company_name
{{company_website}} -> company_website
{{amount}} -> amount
{{transaction_id}} -> transaction_id

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-payment-receipt-template_id>",
    "payload": {
      "company_name": "CloudSync Pro",
      "company_website": "cloudsync.pro",
      "amount": "49.00",
      "transaction_id": "TXN-2026-0309-A7F2",
      "date": "March 9, 2026 14:32 UTC",
      "description": "Pro Plan - Monthly Subscription",
      "payment_method": "Visa ending 4242"
    }
  }'

Use this template for free now

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

Use this template free

Payment Receipt Template: HTML + JSON Payload