Charcoal Invoice with Payment QR Template
Send a branded invoice with a deep green masthead, itemized charges, a prominent balance, and a payment QR. Built for studios and service businesses that accept bank transfers or online payments.
- Paper format
- A4
- Included
- HTML layout + sample JSON
- Customization
- Content, colors, typography
- Rendering
- Handlebars + Chromium
Preview the sample document, then make it yours. Change the layout in your editor or clone it into your RelayPDF dashboard to create an editable draft.
Open full-size previewFrom a sample to
your next document.
This layout uses standard HTML and CSS with Handlebars fields. The preview is rendered from the downloadable source and sample data shown below.
Use the sample as a starting point. Your application supplies dates, labels, and calculated amounts; the template handles their presentation.
Personalize the design
Update the organization name, typography, and CSS accent colors. Replace the sample wording with content appropriate to your business.
Connect your data
Keep the field structure in the sample JSON and replace its values. Repeating arrays create the document’s rows or sections.
Preview, publish, generate
Test with your longest content. Publish the draft, then generate PDFs using its templateId and fresh templateData.
What you can customize
| Field | Purpose |
|---|---|
number | Your document reference; use a stable, unique identifier. |
issuedOnLabel | Display-ready text, formatted by your application before rendering. |
dueOnLabel | Display-ready text, formatted by your application before rendering. |
totalLabel | Display-ready text, formatted by your application before rendering. |
subtotalLabel | Display-ready text, formatted by your application before rendering. |
taxRate | Editable document content. Replace the sample value with your own data. |
taxLabel | Display-ready text, formatted by your application before rendering. |
notes | Additional context or instructions shown with the document. |
company | Your business identity and contact details. |
customer | The recipient’s billing identity and address. |
items | Repeatable line items; each object becomes a row. |
payment | Payment terms, bank information, and optional payment link or QR image. |
Start with real sample data
Download sample JSON ↓Inspect sample JSON
{
"number": "INV-4821",
"issuedOnLabel": "21 Aug 2026",
"dueOnLabel": "20 Sep 2026",
"totalLabel": "$4,179.60",
"subtotalLabel": "$3,870.00",
"taxRate": "8%",
"taxLabel": "$309.60",
"notes": "Fees cover schematic through design development for the Harbor Pavilion. Reimbursable printing is billed separately. Please reference INV-4821 on the transfer.",
"company": {
"name": "Northline Atelier",
"cityLine": "Portland · Architecture & identity",
"email": "studio@northline.studio",
"address": "14 Pier Street, Suite 3, Portland, ME 04101",
"phone": "+1 207 555 0148",
"taxId": "81-4291763",
"website": "northline.studio"
},
"customer": {
"name": "Harbor & Co.",
"attn": "Elise Maren, Studio Director",
"address": "88 Commercial Street, Portland, ME 04101",
"email": "accounts@harborandco.com"
},
"items": [
{
"description": "Spatial identity system — Harbor Pavilion",
"detail": "Naming, mark, and environmental graphic standards",
"quantity": 1,
"unitPriceLabel": "$2,400.00",
"amountLabel": "$2,400.00"
},
{
"description": "Wayfinding drawings, eight sheets",
"detail": "1:50 plans, elevations, and mounting details",
"quantity": 8,
"unitPriceLabel": "$115.00",
"amountLabel": "$920.00"
},
{
"description": "Material board & finish schedule",
"detail": "Reception, gallery, and terrace finishes",
"quantity": 1,
"unitPriceLabel": "$550.00",
"amountLabel": "$550.00"
}
],
"payment": {
"terms": "Net 30",
"bank": "First Atlantic Trust",
"account": "004821-991",
"routing": "011200450",
"url": "https://pay.northline.studio/INV-4821",
"qrImage": "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Crect width='120' height='120' fill='white'/%3E%3Cg fill='black'%3E%3Crect x='6' y='6' width='34' height='34'/%3E%3Crect x='14' y='14' width='18' height='18' fill='white'/%3E%3Crect x='80' y='6' width='34' height='34'/%3E%3Crect x='88' y='14' width='18' height='18' fill='white'/%3E%3Crect x='6' y='80' width='34' height='34'/%3E%3Crect x='14' y='88' width='18' height='18' fill='white'/%3E%3Crect x='48' y='52' width='8' height='8'/%3E%3Crect x='62' y='52' width='8' height='8'/%3E%3Crect x='76' y='52' width='8' height='8'/%3E%3Crect x='48' y='66' width='8' height='8'/%3E%3Crect x='62' y='66' width='8' height='8'/%3E%3Crect x='76' y='66' width='8' height='8'/%3E%3Crect x='48' y='80' width='8' height='8'/%3E%3Crect x='62' y='80' width='8' height='8'/%3E%3Crect x='76' y='80' width='8' height='8'/%3E%3C/g%3E%3C/svg%3E"
}
}Clone through the API
curl https://api.relaypdf.com/v1/templates \
-H "Authorization: Bearer $RELAYPDF_API_KEY" \
-H "Content-Type: application/json" \
-d '{"name":"Charcoal Invoice with Payment QR Template","galleryId":"charcoal-masthead-invoice-with-payment-qr"}'This creates an account-owned draft. Publish it before using its slug or UUID as templateId with templateData on POST /v1/pdf. Follow the complete template workflow →
Will the PDF match this preview?
The preview uses the same HTML and sample data included with this template. RelayPDF renders HTML using Chromium. Use the document’s intended A4 paper size and enable print backgrounds. Review page breaks when you add longer content or more rows.
Can I use my own branding and data?
Yes. Edit the HTML and CSS, replace the sample values, and keep the field names your template expects. Save your customized draft in the dashboard and publish a version when it is ready for your application.