transactional

Payment Failed Template

Notify users of failed payment attempts

Preview

import {
  Body,
  Button,
  Container,
  Head,
  Heading,
  Html,
  Preview,
  Section,
  Text,
} from "@react-email/components";

type PaymentFailedProps = {
  name: string;
  amount: string;
  updatePaymentUrl: string;
};

export function PaymentFailedEmail({
  name,
  amount,
  updatePaymentUrl,
}: PaymentFailedProps) {
  return (
    <Html>
      <Head />
      <Preview>Payment of {amount} failed—please update your payment method</Preview>
      <Body style={main}>
        <Container style={container}>
          <Section style={iconContainer}>
            <span style={icon}>⚠️</span>
          </Section>
          <Heading style={h1}>Payment failed</Heading>
          <Text style={text}>Hi {name},</Text>
          <Text style={text}>
            We couldn't process your payment of <strong>{amount}</strong>. Please
            update your payment method to avoid service interruption.
          </Text>
          <Section style={buttonContainer}>
            <Button style={button} href={updatePaymentUrl}>
              Update Payment Method
            </Button>
          </Section>
          <Text style={muted}>
            If you believe this is an error, please contact us.
          </Text>
        </Container>
      </Body>
    </Html>
  );
}

const main = {
  backgroundColor: "#f6f9fc",
  fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
};

const container = {
  backgroundColor: "#ffffff",
  margin: "0 auto",
  padding: "40px 20px",
  maxWidth: "480px",
};

const iconContainer = {
  textAlign: "center" as const,
  marginBottom: "24px",
};

const icon = {
  fontSize: "48px",
};

const h1 = {
  color: "#1f2937",
  fontSize: "24px",
  fontWeight: "600",
  textAlign: "center" as const,
  margin: "0 0 20px",
};

const text = {
  color: "#374151",
  fontSize: "16px",
  lineHeight: "24px",
  margin: "0 0 16px",
};

const muted = {
  color: "#6b7280",
  fontSize: "14px",
  lineHeight: "20px",
};

const buttonContainer = {
  textAlign: "center" as const,
  margin: "32px 0",
};

const button = {
  backgroundColor: "#dc2626",
  borderRadius: "8px",
  color: "#fff",
  fontSize: "16px",
  fontWeight: "600",
  padding: "12px 24px",
  textDecoration: "none",
};

Install: npm install @react-email/components

Template Variables

Pass these props to your email component:

Variable	Description
`name`	Customer's name
`amount`	Failed payment amount
`updatePaymentUrl`	Link to update payment method

Best Practices

Retry Strategy

•Implement smart retries (wait 24h, then 48h, then 72h)
•Try different times of day (payday patterns)
•Use card updater services for expired cards

Communication

•Be clear but not alarming—avoid 'URGENT' language
•Explain what happens if not resolved (grace period)
•Make it easy to update payment (one-click link)

Dunning Best Practices

•Send 3-4 reminders before cancellation
•Offer to pause subscription instead of cancel
•Consider reaching out via other channels (SMS, in-app)

Ready to send emails?

Get started with 1,000 free emails per month.

Start for free