Subscription Summary Template HTML and JSON

This guide is based on the Subscription Summary 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="header">
<h1>Subscription Summary</h1>
<span class="badge">{{plan_name}}</span>
</div>
<div class="plan-card">
<div>
<h2>{{plan_name}} Plan</h2>
<p>Billing period: {{billing_period}}</p>
</div>
<div class="price">${{price}}/mo</div>
</div>
<div class="usage-grid">{{#each usage}}<div class="usage-item">
<h3>{{this.label}}</h3>
<div class="val">{{this.value}}</div>
<div class="usage-bar">
<div class="usage-fill" style="width:{{this.percentage}}%">
</div>
</div>
</div>{{/each}}</div>
<div class="section">
<h3>Billing Details</h3>
<div class="detail-row">
<span>Next billing date</span>
<span>{{next_billing}}</span>
</div>
<div class="detail-row">
<span>Payment method</span>
<span>{{payment_method}}</span>
</div>
<div class="detail-row">
<span>Account email</span>
<span>{{email}}</span>
</div>
</div>
<div class="footer">{{company_name}} | Manage your subscription at {{portal_url}}</div>

Step 2 - Matching JSON payload

JSON

{
  "company_name": "HookPDF",
  "plan_name": "Growth",
  "billing_period": "Mar 1 \u2013 Mar 31, 2026",
  "price": "29",
  "usage": [
    {
      "label": "Credits Used",
      "value": "1,247 / 2,500",
      "percentage": "50"
    },
    {
      "label": "Templates",
      "value": "8",
      "percentage": "32"
    },
    {
      "label": "API Calls",
      "value": "892",
      "percentage": "36"
    }
  ],
  "next_billing": "April 1, 2026",
  "payment_method": "Visa ending 4242",
  "email": "dev@startup.io",
  "portal_url": "app.hookpdf.com/plan"
}

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
{{plan_name}} -> plan_name
{{billing_period}} -> billing_period
{{price}} -> price
{{#each usage}} -> usage[]
{{this.label}} -> usage[].label

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-subscription-summary-template_id>",
    "payload": {
      "company_name": "HookPDF",
      "plan_name": "Growth",
      "billing_period": "Mar 1 \u2013 Mar 31, 2026",
      "price": "29",
      "usage": [
        {
          "label": "Credits Used",
          "value": "1,247 / 2,500",
          "percentage": "50"
        },
        {
          "label": "Templates",
          "value": "8",
          "percentage": "32"
        }
      ],
      "next_billing": "April 1, 2026",
      "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

Subscription Summary Template: HTML + JSON Payload