Failed Payment Notice email template
A friendly failed payment email for a subscription app: an orange warning panel, card illustration, update payment button and what happens next.
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>Failed Payment Notice</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;}
}
@media (prefers-color-scheme: dark){
.ete-body,.ete-bg{background-color:#120f0c!important;}
.ete-content{background-color:#1c1815!important;}
.ete-text{color:#e4dbd3!important;}
.ete-heading{color:#ffffff!important;}
.ete-muted{color:#ab9f95!important;}
.ete-link{color:#fdba74!important;}
.ete-border{border-color:#352c25!important;}
.ete-panel{background-color:#27201b!important;border-color:#352c25!important;}
.ete-btn{background-color:#f97316!important;border-color:#f97316!important;}
.ete-btn-text{color:#1d0d02!important;}
.ete-btn-outline{border-color:#f97316!important;}
.ete-btn-outline-text{color:#f97316!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:#e4dbd3!important;}
[data-ogsc] .ete-heading{color:#ffffff!important;}
[data-ogsc] .ete-muted{color:#ab9f95!important;}
[data-ogsc] .ete-link{color:#fdba74!important;}
[data-ogsb] .ete-body,[data-ogsb] .ete-bg{background-color:#120f0c!important;}
[data-ogsb] .ete-content{background-color:#1c1815!important;}
[data-ogsb] .ete-panel{background-color:#27201b!important;border-color:#352c25!important;}
</style>
</head>
<body class="ete-body" style="margin:0;padding:0;width:100%;background-color:#fbf4ee;">
<!-- 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;">Your last Stride+ payment failed. Update your card to keep your plan running. ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ </div>
<table role="presentation" class="ete-bg" width="100%" cellpadding="0" cellspacing="0" border="0" style="width:100%;background-color:#fbf4ee;">
<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;border-radius:14px;overflow:hidden;">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="width:100%;">
<tr><td align="center" class="ete-px" style="padding:28px 32px 20px;"><span class="ete-heading" style="font-family:'Trebuchet MS', Tahoma, sans-serif;font-size:24px;line-height:30px;font-weight:700;letter-spacing:-0.3px;color:#1d1915;">Stride+</span></td></tr>
<tr><td align="center" class="ete-px" style="padding:40px 32px;background-color:#ffedd5;"><p style="margin:0 0 12px;font-family:Arial, Helvetica, sans-serif;font-size:12px;line-height:16px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:#7c2d12;text-align:center;">Payment problem</p><h1 class="ete-h1" style="margin:0;font-family:'Trebuchet MS', Tahoma, sans-serif;font-size:32px;line-height:40px;font-weight:700;color:#7c2d12;text-align:center;mso-line-height-rule:exactly;">We could not charge your card</h1><p class="" style="margin:0;font-family:Arial, Helvetica, sans-serif;font-size:17px;line-height:27px;color:#7c2d12;padding-top:14px;text-align:center;">Your $9.99 monthly payment for Stride+ failed on 20 August. Your plan still works for now.</p></td></tr>
<tr><td align="center" class="ete-px" style="padding:12px 32px;"><img src="https://emailtemplateexamples.com/wp-content/plugins/ete-core/assets/template-images/stride-card.png" alt="Dark payment card with an orange warning sign" width="260" height="195" class="" style="display:block;width:260px;max-width:100%;height:auto;border:0;outline:none;text-decoration:none;margin:0 auto;"></td></tr>
<tr><td align="center" class="ete-px" style="padding:16px 32px;"><table role="presentation" cellpadding="0" cellspacing="0" border="0" align="center"><tr><td align="center"><!--[if mso]><v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="https://example.com/billing" style="height:48px;v-text-anchor:middle;width:253px;" arcsize="21%" strokecolor="#c2410c" fillcolor="#c2410c"><w:anchorlock/><center style="color:#ffffff;font-family:Arial,sans-serif;font-size:16px;font-weight:bold;">Update payment method</center></v:roundrect><![endif]--><!--[if !mso]><!--><a class="ete-btn" href="https://example.com/billing" style="display:inline-block;background-color:#c2410c;border:1px solid #c2410c;line-height:48px;border-radius:10px;color:#ffffff;font-family:Arial, Helvetica, sans-serif;font-size:16px;font-weight:700;text-align:center;text-decoration:none;padding:0 28px;-webkit-text-size-adjust:none;mso-hide:all;"><span class="ete-btn-text" style="color:#ffffff;">Update payment method</span></a><!--<![endif]--></td></tr></table></td></tr>
<tr><td class="ete-px" style="padding:24px 32px 8px;"><h3 class="ete-heading" style="margin:0;font-family:'Trebuchet MS', Tahoma, sans-serif;font-size:19px;line-height:26px;font-weight:700;color:#1d1915;text-align:left;mso-line-height-rule:exactly;">What happens next</h3></td></tr>
<tr><td class="ete-px" style="padding:8px 32px;"><p class="ete-text" style="margin:0;font-family:Arial, Helvetica, sans-serif;font-size:15px;line-height:24px;color:#3f3a36;text-align:left;">1. We will try your card again on 23 August.<br>
2. If that fails, we email you one more time.<br>
3. On 27 August your plan pauses until the card works.</p></td></tr>
<tr><td class="ete-px" style="padding:8px 32px;"><p class="ete-muted" style="margin:0;font-family:Arial, Helvetica, sans-serif;font-size:15px;line-height:24px;color:#77706a;text-align:left;">Your runs, routes and training plan are safe either way. Nothing gets deleted.</p></td></tr>
<tr><td align="center" class="ete-px" style="padding:28px 32px 32px;"><p class="ete-muted" style="margin:0;font-family:Arial, Helvetica, sans-serif;font-size:13px;line-height:21px;color:#77706a;line-height:20px;text-align:center;"><strong>Stride+ Running</strong><br>230 Track Avenue, Boulder, CO 80302</p><p class="ete-muted" style="margin:0;font-family:Arial, Helvetica, sans-serif;font-size:13px;line-height:21px;color:#77706a;line-height:20px;text-align:center;padding-top:10px;">Billing email for your Stride+ subscription.</p><p class="ete-muted" style="margin:0;font-family:Arial, Helvetica, sans-serif;font-size:13px;line-height:21px;color:#77706a;line-height:20px;text-align:center;padding-top:10px;"><a class="ete-link" href="{{unsubscribe_url}}" style="color:#77706a;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:Arial, Helvetica, sans-serif;font-size:12px;line-height:18px;color:#77706a;">Made with <a class="ete-link" href="https://emailtemplateexamples.com/" style="color:#77706a;text-decoration:underline;">Email Template Examples</a></td></tr>
</table>
<!--[if mso]></td></tr></table><![endif]-->
</td></tr>
</table>
</body>
</html>
Adapted from Postmark Transactional Email Templates by Wildbit (now ActiveCampaign), MIT license.
About this template
A card fails for boring reasons: it expired, the bank flagged it, or the balance was low. This dunning email for Stride+, a sample running app, treats the problem as a quick fix and not as a threat.
An orange panel at the top states the problem in one sentence. A small card illustration with a warning dot backs it up visually. The update payment button comes next. A numbered list explains what happens over the next week, and a short line at the end tells the runner that their stats and plans are safe.
Send the first notice on the day of the failed charge and one or two reminders after that. Keep the tone calm. Say the date when access will pause, so people know how much time they have.
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
- Warning panel
- Card illustration
- Update payment button
- What happens next list
- Reassurance note
- Footer
Subject line ideas
- Your Stride+ payment did not go through
- Quick fix needed for your Stride+ plan
- Update your card to keep your training plan
Preview text idea
Your last Stride+ payment failed. Update your card to keep your plan running.