Turn ecommerce orders into invoice PDFs
Render an order from your store as a branded invoice PDF. Map product rows, quantities, shipping and customer details into JSON, then reuse the same HTML layout for each order. Your commerce platform supplies the final prices and tax calculations.
Challenges
Map order data before rendering
Products, discounts and shipping
Use an items array for purchased products. Add shipping or a discount as a separate row when appropriate, and send final formatted totals. The renderer does not look up products, inventory or tax rates.
Long orders and print layout
Test both short and long product names and orders that span multiple pages. Use print CSS, an explicit @page size and a repeating table header. Check the generated PDF as well as the browser preview.
Solution
Build an order-to-PDF workflow
1. Upload an invoice template
Save the HTML below as template.html and upload it with the multipart request. Keep the returned template_id in your server configuration.
2. Map the finalized order
Save the sample data as invoice.json, then replace it with your order reference, billing address, product rows and totals. Format money and dates before calling the API.
3. Download the PDF
Generate the document from your backend after the appropriate order event. Deduplicate the event using the order or invoice ID in your own database. Store the binary PDF or associate its reference with the order.
Integration
Quick Start Code
1. Save as template.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Invoice {{invoice.number}}</title>
<style>
@page { size: A4; margin: 20mm; }
body { font: 14px sans-serif; color: #171717; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 10px 0; text-align: left; border-bottom: 1px solid #ddd; }
.amount { text-align: right; }
tr { break-inside: avoid; }
</style>
</head>
<body>
<h1>Invoice {{invoice.number}}</h1>
<p>{{seller.name}} · {{seller.address}}</p>
<p>Bill to: {{customer.name}} · {{customer.address}}</p>
<p>Issued: {{invoice.issued}} · Due: {{invoice.due}}</p>
<p>{{invoice.reference}}</p>
<table>
<thead><tr><th>Description</th><th>Quantity</th><th class="amount">Amount</th></tr></thead>
<tbody>
{{ items loop }}
<tr><td>{{item.description}}</td><td>{{item.quantity}}</td><td class="amount">{{item.amount}}</td></tr>
{{ end loop }}
</tbody>
</table>
<p>Subtotal: {{totals.subtotal}}</p>
<p>Tax: {{totals.tax}}</p>
<p><strong>Total: {{totals.total}}</strong></p>
</body>
</html>2. Save as invoice.json
Fictional data. Amounts are already calculated and formatted.
{
"seller": {
"name": "Example Studio",
"address": "10 Example Street"
},
"customer": {
"name": "Ada's Workshop",
"address": "20 Sample Road"
},
"totals": {
"subtotal": "EUR 100.00",
"tax": "EUR 20.00",
"total": "EUR 120.00"
},
"invoice": {
"number": "EXAMPLE-2",
"issued": "2026-09-01",
"due": "2026-09-15",
"reference": "Order: ORDER-1042"
},
"items": [
{
"description": "Notebook",
"quantity": 2,
"amount": "EUR 90.00"
},
{
"description": "Shipping",
"quantity": 1,
"amount": "EUR 10.00"
}
]
}3. Upload, then generate the PDF
Create an API key in Settings. Replace TEMPLATE_ID with template_id returned by the first request. Run these commands from your backend environment.
curl --fail-with-body -X POST 'https://api.templatr.app/upload' \
-H 'Authorization: Bearer YOUR_API_KEY' \
-F 'file=@template.html' -F 'name=Invoice'
curl --fail-with-body -X POST 'https://api.templatr.app/pdf/TEMPLATE_ID?format=pdf' \
-H 'Authorization: Bearer YOUR_API_KEY' \
-H 'Content-Type: application/json' \
--data-binary @invoice.json --output invoice.pdfFAQ
Frequently Asked Questions
Do I need a platform-specific plugin?
The integration uses HTTPS requests from your backend. Export your store's order data and map it to the template. These examples do not require or provide an official Shopify, WooCommerce or other store plugin.
Does Templatr calculate VAT, shipping or discounts?
No. Your store calculates the amounts. Supply each line and total as a JSON value, with the currency and formatting you want displayed.
Can I add product images or a logo?
Use images served from public HTTPS URLs in the HTML. Ensure those URLs remain accessible to the PDF renderer. Private store assets that require a browser session will not load automatically.
What should I check before sending an invoice?
Check the order reference, customer details, totals, required invoice fields and page breaks in the generated PDF. This technical example does not validate tax or legal requirements and does not provide certified e-invoicing.
Preview your first order invoice
Use fictional order data to test the layout, then connect your store through the REST API.