Invoice email template
Notify a customer that an invoice is ready with a clean billing summary. Free to copy as HTML, React Email or plain text.
Get the code
View the code ↓- From
- Acme <hello@acme.com>
- Subject
- Invoice INV-1042 is ready
- Preview
- Your invoice is available for review and payment.
Copy the code
Email-client-safe HTML, the same email as a React Email component, and a plain-text version for clients that do not show HTML.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html dir="ltr" lang="en"><head><meta name="viewport" content="width=device-width"/><meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/><meta name="x-apple-disable-message-reformatting"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><meta name="x-apple-disable-message-reformatting"/><meta name="format-detection" content="telephone=no,address=no,email=no,date=no,url=no"/><meta name="color-scheme" content="light"/><meta name="supported-color-schemes" content="light"/><title>Your invoice is available for review and payment.</title><style>
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400;
mso-font-alt: 'Arial';
}
* {
font-family: 'Inter', Arial;
}
</style><style>blockquote,h1,h2,h3,img,li,ol,p,ul{margin-top:0;margin-bottom:0}@media only screen and (max-width:425px){.mr-hide-mobile{display:none!important;max-height:0!important;overflow:hidden!important}.mr-show-mobile{display:block!important;max-height:none!important;overflow:visible!important}.tab-row-stack{width:100%!important}.tab-col-stack{display:block!important;width:100%!important;height:auto!important}.tab-pad-stack{padding-left:0!important;padding-right:0!important}.tab-mobile-gap-0{padding-top:0px!important;padding-bottom:0px!important}.tab-mobile-gap-2{padding-top:1px!important;padding-bottom:1px!important}.tab-mobile-gap-4{padding-top:2px!important;padding-bottom:2px!important}.tab-mobile-gap-6{padding-top:3px!important;padding-bottom:3px!important}.tab-mobile-gap-8{padding-top:4px!important;padding-bottom:4px!important}.tab-mobile-gap-10{padding-top:5px!important;padding-bottom:5px!important}.tab-mobile-gap-12{padding-top:6px!important;padding-bottom:6px!important}.tab-mobile-gap-14{padding-top:7px!important;padding-bottom:7px!important}.tab-mobile-gap-16{padding-top:8px!important;padding-bottom:8px!important}.tab-mobile-gap-18{padding-top:9px!important;padding-bottom:9px!important}.tab-mobile-gap-20{padding-top:10px!important;padding-bottom:10px!important}.tab-mobile-gap-22{padding-top:11px!important;padding-bottom:11px!important}.tab-mobile-gap-24{padding-top:12px!important;padding-bottom:12px!important}.tab-mobile-gap-26{padding-top:13px!important;padding-bottom:13px!important}.tab-mobile-gap-28{padding-top:14px!important;padding-bottom:14px!important}.tab-mobile-gap-30{padding-top:15px!important;padding-bottom:15px!important}.tab-mobile-gap-32{padding-top:16px!important;padding-bottom:16px!important}.tab-mobile-gap-34{padding-top:17px!important;padding-bottom:17px!important}.tab-mobile-gap-36{padding-top:18px!important;padding-bottom:18px!important}.tab-mobile-gap-38{padding-top:19px!important;padding-bottom:19px!important}.tab-mobile-gap-40{padding-top:20px!important;padding-bottom:20px!important}}</style></head><body dir="ltr" lang="en" style="background-color:#f4f4f5;margin:0;padding-top:0;padding-bottom:0;padding-right:0;padding-left:0"><!--$--><!--html--><!--head--><!--body--><table border="0" width="100%" cellPadding="0" cellSpacing="0" role="presentation" align="center"><tbody><tr><td dir="ltr" lang="en" style="margin:0px;background-color:#f4f4f5;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;font-family:Inter, Arial, sans-serif"><div style="display:none;overflow:hidden;line-height:1px;opacity:0;max-height:0;max-width:0" data-skip-in-text="true">Your invoice is available for review and payment.<div> </div></div><table align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation" style="max-width:640px;background-color:#ffffff;min-width:0px;border-radius:0px;border-width:0px;border-color:transparent;width:100%;margin:0 auto"><tbody><tr style="width:100%"><td style="padding-top:24px;padding-right:24px;padding-bottom:24px;padding-left:24px"><table align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation" style="margin-top:8px;margin-right:0;margin-bottom:8px;margin-left:0"><tbody style="width:100%"><tr style="width:100%"><td align="left" data-id="__react-email-column" style="border-color:#e4e4e7;border-width:1px;border-style:solid;background-color:#f4f4f5;border-radius:10px;padding-top:22px;padding-right:24px;padding-bottom:22px;padding-left:24px"><p style="font-size:15px;line-height:26.25px;text-align:center;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:#09090b;margin:0 0 12px 0;margin-top:0;margin-right:0;margin-bottom:12px;margin-left:0"><span style="color:#18181b"><strong>BILLING</strong></span></p><h1 style="margin-left:0px;margin-right:0px;margin-top:0px;margin-bottom:12px;text-align:center;color:#09090b;font-size:36px;line-height:40px;font-weight:800">Invoice {{invoice_number}} is ready</h1><p style="font-size:15px;line-height:26.25px;text-align:center;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:#09090b;margin:0 0 0px 0;margin-top:0;margin-right:0;margin-bottom:0px;margin-left:0">Your latest invoice is available in your billing workspace.</p><table align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation" style="max-width:37.5em;height:8px"><tbody><tr style="width:100%"><td></td></tr></tbody></table><table align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation" style="max-width:100%;text-align:center;margin-bottom:0px"><tbody><tr style="width:100%"><td><a href="{{action_url}}" style="line-height:100%;text-decoration:none;display:inline-block;max-width:100%;mso-padding-alt:0px;color:#ffffff;background-color:#18181b;border-color:#18181b;border-width:2px;border-style:solid;font-size:14px;font-weight:600;border-radius:0px;padding:10px 32px 10px 32px;padding-top:10px;padding-right:32px;padding-bottom:10px;padding-left:32px" target="_blank"><span><!--[if mso]><i style="mso-font-width:400%;mso-text-raise:15px" hidden>    </i><![endif]--></span><span style="max-width:100%;display:inline-block;line-height:120%;mso-padding-alt:0px;mso-text-raise:7.5px">View invoice</span><span><!--[if mso]><i style="mso-font-width:400%" hidden>    ​</i><![endif]--></span></a></td></tr></tbody></table></td></tr></tbody></table><table align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation" style="max-width:37.5em;height:20px"><tbody><tr style="width:100%"><td></td></tr></tbody></table><table align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation" style="margin-top:0;margin-right:0;margin-bottom:0;margin-left:0"><tbody style="width:100%"><tr style="width:100%"><td align="left" data-id="__react-email-column" style="border-color:#e4e4e7;border-width:1px;border-style:solid;background-color:#ffffff;border-radius:8px;padding-top:22px;padding-right:20px;padding-bottom:22px;padding-left:20px"><p style="font-size:15px;line-height:26.25px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:#09090b;margin:0 0 12px 0;margin-top:0;margin-right:0;margin-bottom:12px;margin-left:0"><span style="color:#18181b"><strong>Invoice summary</strong></span></p><p style="font-size:15px;line-height:26.25px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:#09090b;margin:0 0 12px 0;margin-top:0;margin-right:0;margin-bottom:12px;margin-left:0">Amount due: {{amount_due}}
Due date: {{due_date}}
Payment method: {{payment_method}}</p><p style="font-size:15px;line-height:26.25px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:#09090b;margin:0 0 0px 0;margin-top:0;margin-right:0;margin-bottom:0px;margin-left:0">You can download the PDF, update billing details, or pay from the billing page.</p></td></tr></tbody></table><table align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation" style="max-width:37.5em;height:8px"><tbody><tr style="width:100%"><td></td></tr></tbody></table><table align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation" style="margin-top:40px;margin-right:0;margin-bottom:0;margin-left:0"><tbody style="width:100%"><tr style="width:100%"><td align="left" data-id="__react-email-column" style="border-color:#e2e8f0;border-width:0;border-style:solid;background-color:#ffffff;border-radius:0;padding-top:24px;padding-right:16px;padding-bottom:24px;padding-left:16px"><p style="font-size:15px;line-height:26.25px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:#09090b;margin:0 0 0px 0;margin-top:0;margin-right:0;margin-bottom:0px;margin-left:0">You received this email because {{email}} is the billing contact for this account.
{{organization_name}} • {{organization_address}}</p></td></tr></tbody></table></td></tr></tbody></table></td></tr></tbody></table><!--/$--></body></html>Send it from your own domain
This email goes to one person at a time, from your app. In MarkRelay it is a built-in starter template: save it in the editor, then send it by ID through the email API in your own Cloudflare account, over Cloudflare Email Sending. The variables below are the ones this template uses.
POST $MARKRELAY_API_URL/emails/send
{
"from": "Acme <hello@acme.com>",
"to": "customer@example.com",
"templateId": "tpl_…",
"variables": {
"action_url": "https://example.com",
"amount_due": "$240.00",
"due_date": "August 15",
"invoice_number": "INV-1042",
"organization_address": "123 Main Street, Springfield",
"organization_name": "Acme",
"payment_method": "Visa ending in 4242"
}
}The template is free to use with any sending service. See how templates work in MarkRelay.
More transactional templates
Own your email stack today
Buy MarkRelay once and run it in your Cloudflare account. MarkRelay adds no per-message or per-seat charge; Cloudflare usage and service limits remain separate.