When to use it
Send before a scheduled subscription renewal, using the current billing record for timing, amount and payment method.
Includes inbox preview text, a clear action, a fallback URL, and a support link. The HTML uses inline styles, a fluid table layout, and system fonts, with a decorative illustration and no tracking pixels. Every action and important detail stays in live text.
The artwork is yours, too
The full collection includes lightweight JPEGs for your emails and full-resolution PNG originals. The HTML uses a shared Stampwing image URL. You can self-host the JPEG and replace its URL, or attach it using your provider’s content-ID support. The collection also includes editable SVG originals for the ten new designs, plus offline previews with sample data.
Illustrations are decorative. If an inbox blocks images, the message, details, and action remain readable.
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.
The subject and preheader are separate: the preheader is the short text many inboxes show beside the subject. Set the subject in your sending API; the HTML already contains the hidden preheader. Send the matching text as the plain-text alternative.
| Variable | Illustrative value |
|---|---|
{{app_name}} | Atlas |
{{plan_name}} | Atlas Pro · Monthly |
{{renewal_date}} | October 12, 2026 |
{{renewal_amount}} | $24.00 USD |
{{payment_method}} | Visa ending in 4242 |
{{billing_url}} | https://example.com/settings/billing |
{{support_email}} | support@example.com |
Implementation checklist
- Use the upcoming invoice as the source of truth.
- State currency explicitly and include relevant taxes in the confirmed amount.
- Avoid claiming payment has happened.
- Make account billing and cancellation controls easy to reach.
Inspect the source
HTML source
HTML templatehtml
<!doctype html>
<!-- Stampwing / Calendar / Olive. Free for personal and commercial use. No attribution required.
Palette: accent #52632d; canvas #eef0e9; ink #18212d. Replace every placeholder before sending. -->
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><meta name="x-apple-disable-message-reformatting"><meta name="color-scheme" content="light"><meta name="supported-color-schemes" content="light"><title>Your {{app_name}} plan renews on {{renewal_date}}</title>
<!--[if mso]><noscript><xml><o:OfficeDocumentSettings xmlns:o="urn:schemas-microsoft-com:office:office"><o:PixelsPerInch>96</o:PixelsPerInch></o:OfficeDocumentSettings></xml></noscript><![endif]-->
<style>body,table,td,a{-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}table,td{mso-table-lspace:0pt;mso-table-rspace:0pt}body{margin:0!important;padding:0!important}a:focus-visible{outline:3px solid #52632d;outline-offset:4px}@media only screen and (max-width:480px){.email-outer{padding:16px 10px!important}.email-padding{padding-left:24px!important;padding-right:24px!important}.email-heading{font-size:34px!important;letter-spacing:-1.2px!important}.email-amount{font-size:36px!important}.email-fact-label{width:30%!important}.email-metric{display:block!important;width:auto!important;border-right:0!important;border-bottom:8px solid #fff!important}}</style></head>
<body style="margin:0;padding:0;width:100%;background:#eef0e9;font-family:Arial,Helvetica,sans-serif;color:#18212d;overflow-wrap:anywhere;word-break:break-word;">
<div style="display:none;font-size:1px;line-height:1px;max-height:0;max-width:0;opacity:0;overflow:hidden;mso-hide:all;">Upcoming renewal: {{renewal_amount}} for {{plan_name}}.͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ </div>
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" id="email-root" style="width:100%;border-collapse:collapse;background:#eef0e9;"><tr><td class="email-outer" align="center" style="padding:40px 16px;background:#eef0e9;"><!--[if mso]><table role="presentation" width="600" cellpadding="0" cellspacing="0" border="0"><tr><td><![endif]-->
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="width:100%;border-collapse:collapse;max-width:600px;table-layout:fixed;background:#ffffff;border:1px solid #dce2eb;border-radius:14px;border-collapse:separate;overflow:hidden;"><tr><td class="email-padding" style="padding:32px 40px;background:#ffffff;"><table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="width:100%;border-collapse:collapse;"><tr><td style="font-size:21px;line-height:1.4;letter-spacing:-.6px;font-weight:700;color:#18212d;">{{app_name}}</td></tr></table><div style="height:26px;line-height:26px;font-size:1px;" aria-hidden="true"> </div><p style="margin:0;color:#52632d;font:700 11px/1.6 'Courier New',Courier,monospace;letter-spacing:1.2px;">UPCOMING RENEWAL</p><div style="height:14px;line-height:14px;font-size:1px;" aria-hidden="true"> </div><h1 class="email-heading" style="margin:0;color:#18212d;font-size:44px;line-height:1.08;letter-spacing:-1.8px;">A little<br>heads-up.</h1><p style="margin:0;color:#596578;font-size:15px;line-height:1.8;margin-top:20px;">Your {{plan_name}} subscription is scheduled to renew on {{renewal_date}}. Here’s what to expect.</p><div style="height:26px;line-height:26px;font-size:1px;" aria-hidden="true"> </div><img src="https://www.stampwing.com/template-assets/v4/subscription-renewal.jpg" width="520" height="200" alt="" role="presentation" style="display:block;width:100%;max-width:520px;height:auto;border:0;outline:none;" /></td></tr><tr><td class="email-padding" style="padding:0 40px 28px;"><table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="width:100%;border-collapse:collapse;"><tr><td style="padding:24px;background:#edf2df;border-top:3px solid #697743;"><p style="margin:0;color:#52632d;font:700 11px/1.6 'Courier New',Courier,monospace;letter-spacing:1.2px;">NEXT RENEWAL</p><p style="margin:12px 0 6px;font-size:30px;line-height:1.2;letter-spacing:-.7px;font-weight:700;color:#18212d;">{{renewal_date}}</p><p style="margin:0;color:#596578;font-size:15px;line-height:1.8;font-size:12px;">Scheduled, not yet charged.</p></td></tr></table><div style="height:12px;line-height:12px;font-size:1px;" aria-hidden="true"> </div><table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="width:100%;border-collapse:collapse;table-layout:fixed;"><tr><td valign="top" width="36%" style="padding:13px 12px 13px 0;border-bottom:1px solid #dde4eb;font-size:12px;line-height:1.7;color:#596578;">Plan</td><td align="right" valign="top" style="padding:13px 0;border-bottom:1px solid #dde4eb;font-size:14px;line-height:1.6;font-weight:bold;color:#18212d;overflow-wrap:anywhere;">{{plan_name}}</td></tr><tr><td valign="top" width="36%" style="padding:13px 12px 13px 0;border-bottom:1px solid #dde4eb;font-size:12px;line-height:1.7;color:#596578;">Upcoming charge</td><td align="right" valign="top" style="padding:13px 0;border-bottom:1px solid #dde4eb;font-size:14px;line-height:1.6;font-weight:bold;color:#18212d;overflow-wrap:anywhere;">{{renewal_amount}}</td></tr><tr><td valign="top" width="36%" style="padding:13px 12px 13px 0;border-bottom:1px solid #dde4eb;font-size:12px;line-height:1.7;color:#596578;">Payment method</td><td align="right" valign="top" style="padding:13px 0;border-bottom:1px solid #dde4eb;font-size:14px;line-height:1.6;font-weight:bold;color:#18212d;overflow-wrap:anywhere;">{{payment_method}}</td></tr></table></td></tr><tr><td class="email-padding" style="padding:0 40px 32px;"><table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="width:100%;border-collapse:collapse;"><tr><td class="" style="background:#52632d;border-radius:7px;mso-padding-alt:17px 20px;"><a href="{{billing_url}}" style="display:block;padding:17px 20px;border:1px solid #52632d;border-radius:7px;font-size:15px;line-height:1.5;font-weight:bold;text-align:center;color:#ffffff;text-decoration:none;">Review billing <span aria-hidden="true"> →</span></a></td></tr></table><p style="margin:0;color:#596578;font-size:15px;line-height:1.8;font-size:12px;margin-top:20px;">Or copy this link into your browser:</p><p style="margin:5px 0 0;font:12px/1.7 'Courier New',Courier,monospace;word-break:break-all;"><a href="{{billing_url}}" style="color:#52632d;text-decoration:underline;">{{billing_url}}</a></p></td></tr><tr><td class="email-padding" style="padding:26px 40px 32px;background:#f7f8fb;border-top:1px solid #e3e7ed;"><p style="margin:0;font-size:16px;line-height:1.75;color:#596578;font-size:13px;line-height:1.8;">This is a reminder, not a receipt. Review your billing settings if you’d like to make a change before renewal.</p>
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="width:100%;border-collapse:collapse;"><tr><td style="padding-top:22px;"><p style="margin:0;font-family:'Courier New',Courier,monospace;font-size:11px;line-height:1.6;font-weight:bold;letter-spacing:1.4px;overflow-wrap:anywhere;word-break:break-word;color:#596578;">NEED A HAND?</p><p style="margin:7px 0 0;font-size:13px;line-height:1.6;color:#596578;">We’re here to help. <a href="mailto:{{support_email}}" style="color:#52632d;text-decoration:underline;">{{support_email}}</a></p></td></tr></table></td></tr></table>
<!--[if mso]></td></tr></table><![endif]-->
<p style="margin:22px 0 0;font-family:'Courier New',Courier,monospace;font-size:10px;line-height:1.8;letter-spacing:.7px;color:#627083;">{{app_name}} / UPCOMING RENEWAL</p></td></tr></table>
</body></html>Plain-text version
Plain-text templatetext
Your {{app_name}} plan renews on {{renewal_date}}
Upcoming renewal: {{renewal_amount}} for {{plan_name}}.
A little
heads-up.
Your {{plan_name}} subscription is scheduled to renew on {{renewal_date}}. Here’s what to expect.
Plan: {{plan_name}}
Renewal date: {{renewal_date}}
Upcoming charge: {{renewal_amount}}
Payment method: {{payment_method}}
Review billing:
{{billing_url}}
This is a reminder, not a receipt. Review your billing settings if you’d like to make a change before renewal.
{{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.