Payment Received Notification

A clean payment confirmation email template. Confirms successful payment with transaction details.

responsive

dark-mode

VARIABLES

Template Variables

Variable	Type	Description	Example
`{{user_name}}`required	string	The customer's name	John
`{{amount}}`required	string	Payment amount with currency	$99.00
`{{payment_method}}`required	string	Payment method used	Visa ending in 4242
`{{invoice_id}}`required	string	Invoice or transaction ID	INV-2024-0042
`{{invoice_url}}`required	string	Link to view the full invoice	https://app.example.com/invoices/INV-2024-0042
`{{product_name}}`required	string	Your product or company name	Acme App
`{{plan_name}}`	string	Subscription plan or product purchased	Pro Plan

CODE

Template Source

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Payment Received</title>
</head>
<body style="margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background-color: #f4f4f5;">
  <table width="100%" cellpadding="0" cellspacing="0" style="max-width: 600px; margin: 0 auto; padding: 40px 20px;">
    <tr>
      <td style="background-color: #ffffff; border-radius: 8px; padding: 40px;">
        <div style="width: 48px; height: 48px; background-color: #22c55e; border-radius: 50%; margin-bottom: 24px; display: flex; align-items: center; justify-content: center;">
          <span style="color: white; font-size: 24px;">✓</span>
        </div>
        <h1 style="margin: 0 0 8px; font-size: 24px; color: #09090b;">
          Payment Received
        </h1>
        <p style="margin: 0 0 24px; font-size: 16px; color: #71717a;">
          Thank you for your payment, {{user_name}}!
        </p>
        <table width="100%" style="background-color: #f4f4f5; border-radius: 8px; padding: 20px; margin-bottom: 24px;">
          <tr>
            <td style="padding: 8px 0; border-bottom: 1px solid #e4e4e7;">
              <span style="color: #71717a; font-size: 14px;">Amount</span><br>
              <span style="color: #09090b; font-size: 18px; font-weight: 600;">{{amount}}</span>
            </td>
          </tr>
          <tr>
            <td style="padding: 8px 0; border-bottom: 1px solid #e4e4e7;">
              <span style="color: #71717a; font-size: 14px;">Payment Method</span><br>
              <span style="color: #09090b; font-size: 14px;">{{payment_method}}</span>
            </td>
          </tr>
          <tr>
            <td style="padding: 8px 0;">
              <span style="color: #71717a; font-size: 14px;">Invoice</span><br>
              <span style="color: #09090b; font-size: 14px;">{{invoice_id}}</span>
            </td>
          </tr>
        </table>
        <a href="{{invoice_url}}" style="display: inline-block; padding: 12px 24px; background-color: #09090b; color: #ffffff; text-decoration: none; border-radius: 6px; font-weight: 600; font-size: 14px;">
          View Invoice
        </a>
      </td>
    </tr>
  </table>
</body>
</html>

Usage Tips

Timing

Send this email immediately after payment confirmation from your payment processor. Don't wait for webhooks to be processed in batch.

Required Information

Always include:

Amount paid (with currency symbol)
Last 4 digits of payment method
Invoice or transaction ID
Link to view full invoice

Optional Additions

Consider adding:

Next billing date for subscriptions
What they purchased (plan name, product)
Link to manage subscription
PDF invoice attachment