Plan Renewal Receipt email template
A subscription receipt in two cards: the amount paid and invoice details on top, then the billing period with plan, add on, discount and amount paid.
Light shows the email as designed. Dark and Gmail show how email apps can change its colors.
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="x-apple-disable-message-reformatting">
<meta name="format-detection" content="telephone=no, date=no, address=no, email=no, url=no">
<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">
<title>Plan Renewal Receipt</title>
<!--[if gte mso 9]><xml><o:OfficeDocumentSettings><o:AllowPNG/><o:PixelsPerInch>96</o:PixelsPerInch></o:OfficeDocumentSettings></xml><![endif]-->
<style>
:root{color-scheme:light dark;supported-color-schemes:light dark;}
body{margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;}
table,td{mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;}
img{border:0;outline:none;text-decoration:none;-ms-interpolation-mode:bicubic;}
a[x-apple-data-detectors]{color:inherit!important;text-decoration:none!important;font-size:inherit!important;font-family:inherit!important;font-weight:inherit!important;line-height:inherit!important;}
u + .ete-body a{color:inherit;text-decoration:none;}
@media only screen and (max-width:620px){
.ete-container{width:100%!important;max-width:100%!important;}
.ete-outer{padding:0!important;}
.ete-content{border-radius:0!important;}
.ete-px{padding-left:20px!important;padding-right:20px!important;}
.ete-stack{display:block!important;width:100%!important;min-width:0!important;max-width:100%!important;box-sizing:border-box;padding-left:0!important;padding-right:0!important;}
.ete-stack-gap{padding-bottom:20px!important;}
.ete-fluid{width:100%!important;max-width:100%!important;height:auto!important;}
.ete-fluid-cap{width:100%!important;max-width:280px!important;height:auto!important;display:block!important;margin-left:auto!important;margin-right:auto!important;}
.ete-stack-center,.ete-stack-center p{text-align:center!important;}
.ete-h1{font-size:28px!important;line-height:34px!important;}
.ete-h2{font-size:22px!important;line-height:28px!important;}
.ete-code{font-size:24px!important;letter-spacing:2px!important;}
.ete-btn-full{display:block!important;width:100%!important;box-sizing:border-box;}
.ete-cell{padding-left:0!important;padding-right:0!important;}
.ete-nav-cell{padding-top:12px!important;}.ete-nav-cell p{text-align:center!important;}
.ete-ds-32{font-size:28px!important;line-height:31px!important;}
}
@media (prefers-color-scheme: dark){
.ete-body,.ete-bg{background-color:#121212!important;}
.ete-content{background-color:#1c1c1e!important;}
.ete-text{color:#d4d4d6!important;}
.ete-heading{color:#ffffff!important;}
.ete-muted{color:#9c9ca3!important;}
.ete-link{color:#6aa8ff!important;}
.ete-border{border-color:#34343a!important;}
.ete-panel{background-color:#26262b!important;border-color:#34343a!important;}
.ete-btn{background-color:#0068ff!important;border-color:#0068ff!important;}
.ete-btn-text{color:#ffffff!important;}
.ete-btn-outline{border-color:#0068ff!important;}
.ete-btn-outline-text{color:#0068ff!important;}
.ete-logo-light{display:none!important;}
.ete-logo-dark{display:block!important;max-height:none!important;overflow:visible!important;}
}
[data-ogsc] .ete-text{color:#d4d4d6!important;}
[data-ogsc] .ete-heading{color:#ffffff!important;}
[data-ogsc] .ete-muted{color:#9c9ca3!important;}
[data-ogsc] .ete-link{color:#6aa8ff!important;}
[data-ogsb] .ete-body,[data-ogsb] .ete-bg{background-color:#121212!important;}
[data-ogsb] .ete-content{background-color:#1c1c1e!important;}
[data-ogsb] .ete-panel{background-color:#26262b!important;border-color:#34343a!important;}
</style>
</head>
<body class="ete-body" style="margin:0;padding:0;width:100%;background-color:#f5f5f5;">
<!-- Made with emailtemplateexamples.com -->
<div class="ete-preheader" style="display:none;font-size:1px;line-height:1px;max-height:0;max-width:0;opacity:0;overflow:hidden;mso-hide:all;">Receipt from Loopworks Studio. Paid August 1. ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ </div>
<table role="presentation" class="ete-bg" width="100%" cellpadding="0" cellspacing="0" border="0" style="width:100%;background-color:#f5f5f5;">
<tr><td align="center" class="ete-outer" style="padding:24px 12px;">
<!--[if mso]><table role="presentation" width="600" align="center" cellpadding="0" cellspacing="0" border="0"><tr><td><![endif]-->
<table role="presentation" class="ete-container" width="600" cellpadding="0" cellspacing="0" border="0" style="width:100%;max-width:600px;margin:0 auto;">
<tr><td class="ete-content" style="background-color:#ffffff;">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="width:100%;">
<tr><td class="ete-px" style="padding:24px 32px 20px;"><div style="font-size:0;text-align:left;"><!--[if mso]><table role="presentation" width="536" cellpadding="0" cellspacing="0" border="0"><tr><td width="128" valign="middle"><![endif]--><div class="ete-stack ete-stack-center" style="display:inline-block;vertical-align:middle;min-width:23.88%;max-width:100%;width:23.88%;width:calc((429px - 100%) * 429);font-size:16px;text-align:left;"><span class="" style="font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:20px;line-height:25px;font-weight:700;letter-spacing:-0.3px;color:#0068ff;">LOOPWORKS</span></div><!--[if mso]></td><td width="408" valign="middle"><![endif]--><div class="ete-stack ete-stack-center ete-nav-cell" style="display:inline-block;vertical-align:middle;min-width:76.11%;max-width:100%;width:76.11%;width:calc((429px - 100%) * 429);font-size:16px;text-align:right;"><p style="margin:0;text-align:right;"><a href="https://example.com/login" style="display:inline-block;padding:4px 10px;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:13px;line-height:20px;font-weight:700;color:#0068ff;text-decoration:none;text-transform:uppercase;letter-spacing:1px;">Sign in</a></p></div><!--[if mso]></td></tr></table><![endif]--></div></td></tr>
<tr><td class="ete-px" style="padding:8px 32px;"><p class="ete-muted" style="margin:0;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:13px;line-height:21px;color:#6f7070;text-align:left;">Receipt from Loopworks Studio, Inc.</p></td></tr>
<tr><td class="ete-px" style="padding:24px 32px 8px;"><h1 class="ete-heading ete-ds-32" style="margin:0;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:32px;line-height:38px;font-weight:700;color:#242424;text-align:left;mso-line-height-rule:exactly;">$59.85</h1></td></tr>
<tr><td class="ete-px" style="padding:8px 32px;"><p class="ete-muted" style="margin:0;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:13px;line-height:21px;color:#6f7070;text-align:left;">Paid August 1, 2026</p></td></tr>
<tr><td class="ete-px" style="padding:8px 32px;"><table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td class="ete-border" style="border-top:1px solid #eaeaea;font-size:0;line-height:0;"> </td></tr></table></td></tr>
<tr><td class="ete-px" style="padding:8px 32px;"><p class="ete-text" style="margin:0;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:13px;line-height:21px;color:#474849;text-align:left;"><a class="ete-link" style="color:#0068ff;text-decoration:underline;" href="https://example.com/receipts/1923-2093.pdf">Download receipt</a></p></td></tr>
<tr><td class="ete-px" style="padding:16px 32px;"><table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td class="ete-panel" style="padding:24px;background-color:#fafafa;border:1px solid #eaeaea;border-radius:0px;"><table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="margin-top:8px;"><tr><td class="ete-muted" width="90" valign="top" style="padding:8px 0;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:12px;line-height:22px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:#6f7070;">Receipt</td><td class="ete-text" valign="top" style="padding:8px 0;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:16px;line-height:22px;color:#474849;">1923-2093</td></tr><tr><td class="ete-muted" width="90" valign="top" style="padding:8px 0;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:12px;line-height:22px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:#6f7070;">Invoice</td><td class="ete-text" valign="top" style="padding:8px 0;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:16px;line-height:22px;color:#474849;">2ABC1234-20923</td></tr><tr><td class="ete-muted" width="90" valign="top" style="padding:8px 0;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:12px;line-height:22px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:#6f7070;">Paid with</td><td class="ete-text" valign="top" style="padding:8px 0;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:16px;line-height:22px;color:#474849;">Visa ending 4252</td></tr></table></td></tr></table></td></tr>
<tr><td class="ete-px" style="padding:20px 32px;"><table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td class="ete-border" style="border-top:6px solid #eaeaea;font-size:0;line-height:0;"> </td></tr></table></td></tr>
<tr><td class="ete-px" style="padding:16px 32px;"><h2 class="ete-heading ete-h2" style="margin:0;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:24px;line-height:32px;font-weight:700;color:#242424;text-align:left;mso-line-height-rule:exactly;">Receipt #1923-2093</h2><p class="ete-muted" style="margin:0;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:14px;line-height:22px;color:#6f7070;padding-top:4px;">July 10, 2026 to August 1, 2026</p><table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="margin-top:16px;"><tr><td class="ete-text ete-border" valign="top" style="padding:14px 0;border-bottom:1px solid #eaeaea;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:15px;line-height:22px;color:#474849;"><strong>Loopworks Pro</strong><br><span class="ete-muted" style="color:#6f7070;font-size:13px;">5 seats</span></td><td class="ete-text ete-border" align="right" valign="top" style="padding:14px 0;border-bottom:1px solid #eaeaea;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:15px;line-height:22px;color:#474849;;white-space:nowrap;">$99.75</td></tr><tr><td class="ete-text ete-border" valign="top" style="padding:14px 0;border-bottom:1px solid #eaeaea;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:15px;line-height:22px;color:#474849;"><strong>Publishing add-on</strong></td><td class="ete-text ete-border" align="right" valign="top" style="padding:14px 0;border-bottom:1px solid #eaeaea;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:15px;line-height:22px;color:#474849;;white-space:nowrap;">$19.95</td></tr><tr><td class="ete-text ete-border" valign="top" style="padding:14px 0;border-bottom:1px solid #eaeaea;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:15px;line-height:22px;color:#474849;"><strong>Startup discount (50% off)</strong></td><td class="ete-text ete-border" align="right" valign="top" style="padding:14px 0;border-bottom:1px solid #eaeaea;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:15px;line-height:22px;color:#474849;;white-space:nowrap;">-$59.85</td></tr></table><table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="margin-top:8px;"><tr><td class="ete-heading" style="padding:12px 0 0;border-top:2px solid #242424;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:17px;line-height:24px;font-weight:700;color:#242424;">Amount paid</td><td class="ete-heading" align="right" style="padding:12px 0 0;border-top:2px solid #242424;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:17px;line-height:24px;font-weight:700;color:#242424;">$59.85</td></tr></table></td></tr>
<tr><td class="ete-px" style="padding:20px 32px;"><table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td class="ete-border" style="border-top:6px solid #eaeaea;font-size:0;line-height:0;"> </td></tr></table></td></tr>
<tr><td align="left" class="ete-px" style="padding:28px 32px 32px;"><p class="ete-muted" style="margin:0;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:13px;line-height:21px;color:#6f7070;line-height:20px;text-align:left;"><strong>Loopworks Studio, Inc.</strong><br>500 Second Avenue, Seattle, WA 98104</p><p class="ete-muted" style="margin:0;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:13px;line-height:21px;color:#6f7070;line-height:20px;text-align:left;padding-top:10px;">Can we help? <a class="ete-link" style="color:#6f7070;text-decoration:underline;" href="mailto:help@example.com">Email us</a> or read the <a class="ete-link" style="color:#6f7070;text-decoration:underline;" href="https://example.com/docs">docs and support</a>.</p><p class="ete-muted" style="margin:0;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:13px;line-height:21px;color:#6f7070;line-height:20px;text-align:left;padding-top:10px;"><a class="ete-link" href="{{unsubscribe_url}}" style="color:#6f7070;text-decoration:underline;">Unsubscribe</a></p></td></tr>
</table>
</td></tr>
<tr><td align="center" class="ete-muted" style="padding:20px 12px 0;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:12px;line-height:18px;color:#6f7070;">Made with <a class="ete-link" href="https://emailtemplateexamples.com/" style="color:#6f7070;text-decoration:underline;">Email Template Examples</a></td></tr>
</table>
<!--[if mso]></td></tr></table><![endif]-->
</td></tr>
</table>
</body>
</html>
Adapted from Waypoint responsive transactional email templates (saas subscription receipt) by usewaypoint, MIT license.
About this template
A renewal receipt for a software subscription. It follows the two part layout that many finance teams like: the summary first, the line items second.
A blue wordmark sits next to a Sign in link. The first part shows who the receipt is from, the amount in large type, the payment date, a link to download the receipt and a small panel with the receipt number, invoice number and card used.
A thick grey rule leads to the second part, titled with the receipt number and the billing period. It lists the plan with its seat count, an add on and a discount line, then the amount paid in bold.
The footer links to email support and the help docs. Generate the numbers from your billing system; the structure stays the same each month.
Use it in your email tool
- Click Copy HTML, or download the .html file.
- In Mailchimp, Brevo, HubSpot or Klaviyo, start a new email with the custom HTML or code editor and paste it in.
- Change the text, links and images. Map merge tags such as {{first_name}} and {{unsubscribe_url}} to the tags of your tool.
- Send a test to yourself on desktop and phone before you send it to your list.
Sections in this email
- Wordmark with sign in link
- Amount and date
- Download link
- Receipt and invoice numbers
- Billing period and items
- Amount paid
- Footer
Subject line ideas
- Your Loopworks receipt for August
- Payment received: $59.85
- Receipt #1923-2093 from Loopworks
Preview text idea
Receipt from Loopworks Studio. Paid August 1.