Boarding Pass Template HTML and JSON

This guide is based on the Boarding Pass 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="pass">
<div class="pass-top">
<span class="airline">{{airline}}</span>
<span class="class-badge">{{travel_class}}</span>
</div>
<div class="pass-body">
<div class="route">
<div class="route-visual">
<div>
<div class="city-code">{{departure_code}}</div>
<div class="city-name">{{departure_city}}</div>
</div>
<div class="route-line">
</div>
<div>
<div class="city-code">{{arrival_code}}</div>
<div class="city-name">{{arrival_city}}</div>
</div>
</div>
<div class="flight-info">
<div class="fi-item">
<label>Flight</label>
<strong>{{flight_number}}</strong>
</div>
<div class="fi-item">
<label>Date</label>
<strong>{{date}}</strong>
</div>
<div class="fi-item">
<label>Boarding</label>
<strong>{{boarding_time}}</strong>
</div>
<div class="fi-item">
<label>Gate</label>
<strong>{{gate}}</strong>
</div>
<div class="fi-item">
<label>Seat</label>
<strong>{{seat}}</strong>
</div>
<div class="fi-item">
<label>Group</label>
<strong>{{group}}</strong>
</div>
</div>
</div>
<div class="pass-qr">
<div class="qr-placeholder">QR CODE</div>
<div style="font-size:10px;color:#636e72">{{booking_ref}}</div>
</div>
</div>
<div class="pass-footer">
<span>Passenger: <strong>{{passenger_name}}</strong>
</span>
<span>{{airline}} | {{flight_number}}</span>
</div>
</div>

Step 2 - Matching JSON payload

JSON

{
  "airline": "SKYLINE AIR",
  "travel_class": "Business",
  "departure_code": "JFK",
  "departure_city": "New York",
  "arrival_code": "LHR",
  "arrival_city": "London",
  "flight_number": "SL 247",
  "date": "Mar 20",
  "boarding_time": "18:45",
  "gate": "B22",
  "seat": "4A",
  "group": "1",
  "booking_ref": "XKRF7M",
  "passenger_name": "TAYLOR / CHRIS MR"
}

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

{{airline}} -> airline
{{travel_class}} -> travel_class
{{departure_code}} -> departure_code
{{departure_city}} -> departure_city

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-boarding-pass-template_id>",
    "payload": {
      "airline": "SKYLINE AIR",
      "travel_class": "Business",
      "departure_code": "JFK",
      "departure_city": "New York",
      "arrival_code": "LHR",
      "arrival_city": "London",
      "flight_number": "SL 247"
    }
  }'

Use this template for free now

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

Use this template free

Boarding Pass Template: HTML + JSON Payload