Free React Email Payment Failed Template

import * as React from 'react';

import {
  Band,
  Brand,
  CTAButton,
  DataRow,
  DataTable,
  Display,
  EmailLayout,
  Highlight,
  InlineLink,
  Kicker,
  Lead,
  Note,
  colors,
} from './components';

export interface PaymentFailedEmailProps {
  brand?: Brand;
  subject?: string;
  preview?: string;
  label?: string;
  kicker?: string;
  headline?: React.ReactNode;
  lead?: React.ReactNode;
  cta?: { label: string; href: string };
  details?: DataRow[];
  note?: React.ReactNode;
}

/**
 * Payment failed — states the deadline in the first paragraph and puts the fix
 * above the detail, because everything else is secondary to updating the card.
 */
export function PaymentFailedEmail({
  brand,
  subject = 'Action needed: your payment didn’t go through',
  preview = 'Visa •• 4429 was declined — update it to keep Northwind running.',
  label = 'Billing',
  kicker = 'Payment declined',
  headline = (
    <>
      WE COULDN’T
      <br />
      CHARGE
      <br />
      YOUR CARD.
    </>
  ),
  lead = (
    <>
      {'Visa ending '}
      <Highlight>4429</Highlight>
      {
        ' was declined for the August invoice. We’ll retry twice more, then the workspace pauses on '
      }
      <Highlight color="paper">Aug 31</Highlight>
      {'.'}
    </>
  ),
  cta = {
    label: 'Update payment method',
    href: 'https://sonar.example.com/billing',
  },
  details = [
    { label: 'Invoice INV-2026-0842', value: '$99.00' },
    { label: 'Attempted', value: 'Aug 24, 04:12 UTC' },
    { label: 'Next retry', value: 'Aug 27' },
  ],
  note = (
    <>
      {
        'Common causes: expired card, new billing address, or a bank block on international charges. Questions? '
      }
      <InlineLink href="mailto:billing@sonar.example.com">
        billing@sonar.example.com
      </InlineLink>
    </>
  ),
}: PaymentFailedEmailProps = {}) {
  return (
    <EmailLayout
      brand={brand}
      subject={subject}
      preview={preview}
      label={label}
      accent="orange"
    >
      <Band tone="ink" padding="50px 32px">
        <Kicker color="orange">{kicker}</Kicker>
        <Display size={46} on="light">
          {headline}
        </Display>
        <Lead color={colors.muted}>{lead}</Lead>
        <CTAButton href={cta.href} background="orange" color="ink">
          {cta.label}
        </CTAButton>
      </Band>

      <Band padding="36px 32px">
        <DataTable rows={details} />
        <Note>{note}</Note>
      </Band>
    </EmailLayout>
  );
}

export default PaymentFailedEmail;