An email receipt template HTML is a table-based, inline-styled email layout that confirms a purchase by showing the order number, date, itemized products, totals, and payment method, and you can copy the ready-to-use code below and swap in your own details.
The template below works in Gmail, Outlook, Apple Mail, and mobile clients.
Copy-and-Paste Email Receipt Template HTML
Replace the {{placeholders}} with your own data, or map them to merge tags in your email platform or backend.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="color-scheme" content="light dark">
<title>Your receipt from {{company_name}}</title>
</head>
<body style="margin:0; padding:0; background-color:#f4f5f7; font-family:Arial, Helvetica, sans-serif; color:#333333;">
<!-- Preheader (hidden preview text) -->
<div style="display:none; max-height:0; overflow:hidden; opacity:0;">
Receipt for order #{{order_number}} – total {{currency}}{{total}}. Thank you for your purchase!
</div>
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="background-color:#f4f5f7;">
<tr>
<td align="center" style="padding:24px 12px;">
<table role="presentation" width="600" cellpadding="0" cellspacing="0" border="0" style="width:100%; max-width:600px; background-color:#ffffff; border-radius:8px;">
<!-- Header -->
<tr>
<td align="center" style="padding:32px 24px 8px;">
<img src="{{logo_url}}" alt="{{company_name}}" width="140" style="display:block; border:0; height:auto;">
</td>
</tr>
<!-- Title -->
<tr>
<td align="center" style="padding:16px 24px 0;">
<h1 style="margin:0; font-size:24px; line-height:32px; color:#111111;">Thanks for your purchase, {{customer_first_name}}!</h1>
<p style="margin:8px 0 0; font-size:15px; line-height:22px; color:#666666;">
Here is your receipt. Keep it for your records.
</p>
</td>
</tr>
<!-- Order details -->
<tr>
<td style="padding:24px;">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="background-color:#f9fafb; border-radius:6px;">
<tr>
<td style="padding:16px; font-size:14px; line-height:22px;">
<strong>Receipt #:</strong> {{receipt_number}}<br>
<strong>Order #:</strong> {{order_number}}<br>
<strong>Date:</strong> {{order_date}}<br>
<strong>Payment method:</strong> {{payment_method}} ending in {{last4}}
</td>
</tr>
</table>
</td>
</tr>
<!-- Items -->
<tr>
<td style="padding:0 24px;">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<th align="left" style="padding:8px 0; font-size:12px; text-transform:uppercase; color:#888888; border-bottom:1px solid #e5e7eb;">Item</th>
<th align="center" style="padding:8px 0; font-size:12px; text-transform:uppercase; color:#888888; border-bottom:1px solid #e5e7eb;">Qty</th>
<th align="right" style="padding:8px 0; font-size:12px; text-transform:uppercase; color:#888888; border-bottom:1px solid #e5e7eb;">Price</th>
</tr>
<!-- Repeat this row for each product -->
<tr>
<td style="padding:12px 0; font-size:14px; border-bottom:1px solid #f0f0f0;">
<strong>{{item_name}}</strong><br>
<span style="color:#888888; font-size:13px;">{{item_description}}</span>
</td>
<td align="center" style="padding:12px 0; font-size:14px; border-bottom:1px solid #f0f0f0;">{{item_qty}}</td>
<td align="right" style="padding:12px 0; font-size:14px; border-bottom:1px solid #f0f0f0;">{{currency}}{{item_price}}</td>
</tr>
</table>
</td>
</tr>
<!-- Totals -->
<tr>
<td style="padding:16px 24px 0;">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="font-size:14px;">
<tr>
<td align="right" style="padding:4px 0; color:#666666;">Subtotal</td>
<td align="right" width="110" style="padding:4px 0;">{{currency}}{{subtotal}}</td>
</tr>
<tr>
<td align="right" style="padding:4px 0; color:#666666;">Shipping</td>
<td align="right" style="padding:4px 0;">{{currency}}{{shipping}}</td>
</tr>
<tr>
<td align="right" style="padding:4px 0; color:#666666;">Tax</td>
<td align="right" style="padding:4px 0;">{{currency}}{{tax}}</td>
</tr>
<tr>
<td align="right" style="padding:12px 0 4px; font-size:16px; font-weight:bold; border-top:2px solid #111111;">Total paid</td>
<td align="right" style="padding:12px 0 4px; font-size:16px; font-weight:bold; border-top:2px solid #111111;">{{currency}}{{total}}</td>
</tr>
</table>
</td>
</tr>
<!-- Billing / shipping -->
<tr>
<td style="padding:24px;">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td width="50%" valign="top" style="font-size:13px; line-height:20px; color:#555555;">
<strong style="color:#111111;">Billed to</strong><br>
{{billing_name}}<br>{{billing_address}}
</td>
<td width="50%" valign="top" style="font-size:13px; line-height:20px; color:#555555;">
<strong style="color:#111111;">Shipped to</strong><br>
{{shipping_name}}<br>{{shipping_address}}
</td>
</tr>
</table>
</td>
</tr>
<!-- CTA -->
<tr>
<td align="center" style="padding:0 24px 32px;">
<a href="{{order_url}}" style="display:inline-block; background-color:#2563eb; color:#ffffff; text-decoration:none; font-size:15px; font-weight:bold; padding:12px 28px; border-radius:6px;">View your order</a>
</td>
</tr>
<!-- Footer -->
<tr>
<td align="center" style="padding:20px 24px 28px; background-color:#f9fafb; border-radius:0 0 8px 8px; font-size:12px; line-height:18px; color:#888888;">
Questions about this receipt? Contact us at
<a href="mailto:{{support_email}}" style="color:#2563eb;">{{support_email}}</a>.<br><br>
{{company_name}} · {{company_address}}<br>
<a href="{{terms_url}}" style="color:#888888;">Terms</a> ·
<a href="{{privacy_url}}" style="color:#888888;">Privacy</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>What Is an HTML Email Receipt Template?
An email receipt template is a reusable HTML layout that your system fills with order data after a successful payment. It’s a type of transactional email, meaning it’s triggered by a customer action rather than sent as marketing. That distinction matters for both legal compliance and deliverability.
What Should an Email Receipt Include?
A good receipt is clear first and branded second. Include these elements:
- Your business name and logo, so the sender is instantly recognizable
- Receipt and order numbers, for support and bookkeeping
- Date of purchase
- Itemized list with names, quantities, and prices
- Subtotal, shipping, taxes, discounts, and total paid
- Payment method, showing only the last four digits of a card
- Billing and shipping addresses
- Support contact details and a link to view the order online
- Refund or return information, where relevant
Some regions have specific requirements. Many places require a VAT or tax ID on receipts, so check the rules for the markets you sell in.
How to Use This HTML Receipt Template
- Copy the code into your email service provider (Mailchimp, SendGrid, Postmark, Brevo, Amazon SES) or your own backend.
- Replace the placeholders with your platform’s merge tags. For example, Handlebars uses
{{order_number}}, while Liquid and Twig have their own loop syntax for repeating the item row. - Loop the item row so every product in the order gets its own line.
- Host your logo on a secure HTTPS URL and set meaningful alt text.
- Send a test to several inboxes before going live.
How to Test Your HTML Email Receipt
Before launching, check the template in:
- Gmail, Outlook (desktop and web), Apple Mail, and Yahoo
- iOS and Android mail apps
- Light and dark mode
- Image-blocked mode, to confirm the text still makes sense without the logo
Tools like Litmus and Email on Acid automate this, and many email platforms include basic previews for free.
Frequently Asked Questions
What is the best format for an email receipt?
HTML with a plain-text fallback. HTML gives you branding and structure, while the plain-text version helps accessibility and spam filtering.
Is a receipt a transactional or marketing email?
Primarily transactional. Keep promotional content minimal so it remains clearly transactional.
Why does my receipt look broken in Outlook?
Outlook uses Word’s rendering engine, which ignores much modern CSS. Using table layouts and inline styles, as in the template above, avoids most issues.