Payment failed email: what to say, with a free HTML and plain-text template
A failed-payment email has one job: get the customer to update their card before access stops, without sounding like a threat. Most failed renewals are expired or replaced cards, not people leaving, so the tone should be "this happens", with one clear button. Below is a checklist and a complete, working template (Mustache placeholders, table-based HTML plus a plain-text twin) you can copy. It is the same payment-failed email that ships in Mailroom Kit.
What a payment-failed email needs
- A plain subject. "We could not take your payment" says what happened. Avoid "URGENT" or "Action required!!!", which look like phishing and trip spam filters.
- The cause, without blame. Say the bank declined the charge and give the usual reasons (expired or replaced card, insufficient funds). Say nothing is wrong with the account yet.
- The facts in a small table. Plan, amount, card brand and last four digits, and the date of the next attempt. Never include a full card number.
- One button to the billing page. Label it for the action ("Update payment method"), and keep the raw link beneath it for clients that block buttons.
- A date, not a vague threat. Say when you will retry and when access pauses. The template has
{{retry_date}}and{{access_until}}; they must match your billing system's real retry schedule. - What happens to their data. Only promise what your product really does. The sample says data is kept and comes back on payment; change it if that is not true for you.
- A plain-text part with the same link. If the HTML and text carry different links, filters notice and some readers see the wrong one.
- No tracking redirect on the link. A billing email that goes through a click-tracker looks like phishing to the person you most need to reach.
- Small size. This one is 8.7 KB, far below the roughly 102 KB where Gmail reportedly clips (details).
This is a single email. If you send a sequence (first failure, second reminder, final notice), reuse the same layout and change the copy and dates for each step; your payment provider's retry settings decide when each one should go out.
Plain-text version (copy as is)
We could not take your payment
Hi {{first_name}},
Your bank declined the latest charge for your Northfield subscription ({{plan_name}}). This happens when a card expires, is replaced or has insufficient funds. Nothing is wrong with your account yet.
Plan: {{plan_name}}
Amount: {{amount}}
Card: {{card_brand}} ending {{card_last4}}
We will try again on: {{retry_date}}
Update payment method:
{{update_url}}
NOTE: If we cannot take payment, your access will pause on {{access_until}}. Your data is kept and everything comes back when you pay.
--
You received this because a payment for your Northfield subscription did not go through.
Questions? Write to [email protected].
Northfield Software Ltd, 12 Example Street, Sampletown AB1 2CD, United Kingdom
Replace Northfield, the support address and the postal address with yours. Placeholders are {{first_name}}, {{plan_name}}, {{amount}}, {{card_brand}}, {{card_last4}}, {{retry_date}}, {{access_until}} and {{update_url}}.
HTML version
Show the full HTML source (8.7 KB)
<!doctype html>
<html lang="en" dir="ltr" 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="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">
<title>We could not take your Northfield payment</title>
<!--[if mso]><noscript><xml><o:OfficeDocumentSettings><o:PixelsPerInch>96</o:PixelsPerInch></o:OfficeDocumentSettings></xml></noscript><![endif]-->
<style>body{margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}table{border-collapse:collapse}img{-ms-interpolation-mode:bicubic}a{overflow-wrap:anywhere}
@media only screen and (max-width:620px){.wrap{width:100%!important}.px{padding-left:20px!important;padding-right:20px!important}}
@media (prefers-color-scheme:dark){.pg{background-color:#10141b!important}.card{background-color:#1a212c!important}.tx{color:#eef1f6!important}.mu{color:#a9b4c4!important}.bd{border-color:#2f3a4a!important}.lk{color:#8fb0ff!important}.btn{background-color:#8fb0ff!important;color:#0d1526!important}.warn{background-color:#3a2c10!important;color:#ffe2a8!important}}</style>
</head>
<body class="pg" style="margin:0;padding:0;background-color:#f2f4f7;">
<div style="display:none;font-size:1px;line-height:1px;max-height:0;max-width:0;opacity:0;overflow:hidden;mso-hide:all;">Update your card by {{retry_date}} to keep your {{plan_name}} access.͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ </div>
<table role="presentation" class="pg" width="100%" cellpadding="0" cellspacing="0" border="0" style="background-color:#f2f4f7;"><tr><td align="center" 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="wrap card" width="600" cellpadding="0" cellspacing="0" border="0" style="width:100%;max-width:600px;background-color:#ffffff;border-radius:10px;">
<tr><td class="px" style="padding:28px 32px 20px 32px;"><span class="tx" style="font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;font-size:20px;line-height:28px;font-weight:700;color:#1b2330;">Northfield</span></td></tr>
<tr><td class="tx px" style="font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;padding:0 32px 8px 32px;font-size:22px;line-height:30px;font-weight:700;color:#1b2330;"><h1 style="margin:0;font-size:22px;line-height:30px;font-weight:700;color:#1b2330;" class="tx">We could not take your payment</h1></td></tr>
<tr><td class="tx px" style="font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;padding:0 32px 16px 32px;font-size:16px;line-height:24px;color:#1b2330;">Hi {{first_name}},</td></tr>
<tr><td class="tx px" style="font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;padding:0 32px 16px 32px;font-size:16px;line-height:24px;color:#1b2330;">Your bank declined the latest charge for your Northfield subscription ({{plan_name}}). This happens when a card expires, is replaced or has insufficient funds. Nothing is wrong with your account yet.</td></tr>
<tr><td class="px" style="padding:0 32px 20px 32px;"><table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" class="bd" style="border-top:1px solid #dde2ea;border-bottom:1px solid #dde2ea;">
<tr><td class="mu bd" style="font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;padding:9px 0;border-top:0px solid #dde2ea;font-size:14px;line-height:21px;color:#556070;width:40%;vertical-align:top;">Plan</td><td class="tx bd" style="font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;padding:9px 0;border-top:0px solid #dde2ea;font-size:15px;line-height:22px;color:#1b2330;text-align:right;vertical-align:top;">{{plan_name}}</td></tr>
<tr><td class="mu bd" style="font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;padding:9px 0;border-top:1px solid #dde2ea;font-size:14px;line-height:21px;color:#556070;width:40%;vertical-align:top;">Amount</td><td class="tx bd" style="font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;padding:9px 0;border-top:1px solid #dde2ea;font-size:15px;line-height:22px;color:#1b2330;text-align:right;vertical-align:top;">{{amount}}</td></tr>
<tr><td class="mu bd" style="font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;padding:9px 0;border-top:1px solid #dde2ea;font-size:14px;line-height:21px;color:#556070;width:40%;vertical-align:top;">Card</td><td class="tx bd" style="font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;padding:9px 0;border-top:1px solid #dde2ea;font-size:15px;line-height:22px;color:#1b2330;text-align:right;vertical-align:top;">{{card_brand}} ending {{card_last4}}</td></tr>
<tr><td class="mu bd" style="font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;padding:9px 0;border-top:1px solid #dde2ea;font-size:14px;line-height:21px;color:#556070;width:40%;vertical-align:top;">We will try again on</td><td class="tx bd" style="font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;padding:9px 0;border-top:1px solid #dde2ea;font-size:15px;line-height:22px;color:#1b2330;text-align:right;vertical-align:top;">{{retry_date}}</td></tr>
</table></td></tr>
<tr><td class="px" align="left" style="padding:8px 32px 20px 32px;">
<!--[if mso]><v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="{{update_url}}" style="height:48px;v-text-anchor:middle;width:250px;" arcsize="14%" stroke="f" fillcolor="#2a56c6"><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="btn" href="{{update_url}}" style="font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;display:inline-block;min-height:48px;line-height:48px;padding:0 28px;border-radius:7px;background-color:#2a56c6;color:#ffffff;font-size:16px;font-weight:700;text-decoration:none;">Update payment method</a><!--<![endif]-->
</td></tr>
<tr><td class="mu px" style="font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;padding:0 32px 20px 32px;font-size:14px;line-height:21px;color:#556070;">If the button does not work, paste this address into your browser:<br><a class="lk" href="{{update_url}}" style="color:#2a56c6;word-break:break-all;">{{update_url}}</a></td></tr>
<tr><td class="px" style="padding:0 32px 20px 32px;"><table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%"><tr><td class="warn" style="font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;background-color:#fff4e0;color:#5c3a00;border-radius:7px;padding:14px 16px;font-size:15px;line-height:22px;">If we cannot take payment, your access will pause on {{access_until}}. Your data is kept and everything comes back when you pay.</td></tr></table></td></tr>
<tr><td class="px bd" style="padding:12px 32px 28px 32px;"><table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%"><tr><td class="mu bd" style="font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;border-top:1px solid #dde2ea;padding-top:16px;font-size:14px;line-height:21px;color:#556070;">You received this because a payment for your Northfield subscription did not go through.<br><br>Questions? Write to <a class="lk" href="mailto:[email protected]" style="color:#2a56c6;">[email protected]</a>.<br>Northfield Software Ltd, 12 Example Street, Sampletown AB1 2CD, United Kingdom</td></tr></table></td></tr>
</table>
<!--[if mso]></td></tr></table><![endif]-->
</td></tr></table>
</body>
</html>
It uses nested tables with inline styles and Outlook conditional comments for the button, no web fonts and no images, which is the conservative pattern for email clients. It has not been tested in every client; send it to your own Gmail, Outlook and Apple Mail accounts before relying on it.
Check it before you send
Paste the HTML into the free email HTML checker to see its size, missing alt text, link problems and contrast, in your browser with nothing uploaded. The other thirteen emails (verify address, magic link, sign-in code, password reset, welcome, invite, receipt and more) are in the kit, and you can open four of them in the demo. The free password reset template works the same way.