|
Illustrative browser preview with sample data. Links are inactive. Test final rendering in your supported email clients.
When to use it
Send after confirmed payment, using the payment system as the source of truth. Add any invoice or tax fields required for your own business; this starter is not a jurisdiction-specific invoice.
Make it yours
Replace every placeholder using your template engine. Escape values for their HTML context and validate action URLs against your approved HTTPS origins.
| Variable | Illustrative value |
|---|---|
{{app_name}} | Atlas |
{{amount}} | $24.00 USD |
{{order_reference}} | AT-1042 |
{{payment_date}} | October 4, 2026 |
{{receipt_url}} | https://example.com/receipts/sample |
{{support_email}} | support@example.com |
Implementation checklist
- Derive amount, currency, and payment status from the verified payment event.
- Deduplicate by the payment event or receipt operation.
- Require appropriate authorization on the linked billing page.
- Distinguish a receipt from a payment request or pending authorization.
Inspect the source
HTML source
<!doctype html>
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Your {{app_name}} receipt — {{order_reference}}</title></head>
<body style="margin:0;padding:0;background:#f3f5f4;color:#26352e;font-family:Arial,Helvetica,sans-serif;">
<table role="presentation" style="width:100%;border-collapse:collapse;"><tr><td style="padding:24px 12px;">
<table role="presentation" style="width:100%;max-width:560px;margin:0 auto;border-collapse:collapse;background:#ffffff;border:1px solid #dce5df;">
<tr><td style="padding:32px 28px 12px;font-size:16px;font-weight:bold;">{{app_name}}</td></tr>
<tr><td style="padding:8px 28px 28px;">
<h1 style="margin:0 0 20px;font-size:26px;line-height:1.3;font-weight:600;">Your payment receipt</h1>
<p style="margin:0 0 20px;font-size:16px;line-height:1.7;">We received your payment of {{amount}} for {{app_name}}. Thank you.</p>
<p style="margin:0 0 24px;font-size:14px;line-height:1.7;">Order: {{order_reference}}<br>Paid on: {{payment_date}}<br>Amount: {{amount}}</p>
<table role="presentation" style="border-collapse:collapse;margin-bottom:24px;"><tr><td bgcolor="#274f3b" style="border-radius:4px;background:#274f3b;text-align:center;"><a href="{{receipt_url}}" style="display:inline-block;padding:14px 22px;color:#ffffff;text-decoration:none;font-size:16px;font-weight:bold;">View receipt</a></td></tr></table>
<p style="font-size:13px;line-height:1.7;margin:0 0 8px;">If the button does not work, copy this link into your browser:</p>
<p style="font-size:12px;line-height:1.7;margin:0 0 25px;word-break:break-all;"><a href="{{receipt_url}}" style="color:#245f45;">{{receipt_url}}</a></p>
<p style="font-size:13px;line-height:1.7;margin:0;color:#58655e;">Keep this email for your records. For a question about this payment, contact our support team.</p>
</td></tr><tr><td style="padding:20px 28px;border-top:1px solid #e6ebe8;font-size:12px;line-height:1.7;color:#58655e;">{{app_name}} · Questions? <a href="mailto:{{support_email}}" style="color:#245f45;">{{support_email}}</a></td></tr>
</table></td></tr></table></body></html>Plain-text version
Your {{app_name}} receipt — {{order_reference}}
Your payment receipt
We received your payment of {{amount}} for {{app_name}}. Thank you.
Order: {{order_reference}}
Paid on: {{payment_date}}
Amount: {{amount}}
View receipt:
{{receipt_url}}
Keep this email for your records. For a question about this payment, contact our support team.
{{app_name}}
Questions? {{support_email}}
Free to use, modify, and distribute in personal or commercial projects. No attribution required. Supplied as a starting point without warranty.