transactional

Order Confirmation Template

Confirm orders and provide order details

Preview

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

type OrderConfirmationProps = {
  name: string;
  orderNumber: string;
  orderTotal: string;
  orderUrl: string;
  deliveryDate: string;
};

export function OrderConfirmationEmail({
  name,
  orderNumber,
  orderTotal,
  orderUrl,
  deliveryDate,
}: OrderConfirmationProps) {
  return (
    <Html>
      <Head />
      <Preview>Order #{orderNumber} confirmed</Preview>
      <Body style={main}>
        <Container style={container}>
          <Section style={iconContainer}>
            <span style={icon}>✓</span>
          </Section>
          <Heading style={h1}>Order Confirmed!</Heading>
          <Text style={text}>Hi {name},</Text>
          <Text style={text}>
            Thanks for your order! We've received it and will get started right
            away.
          </Text>
          <Section style={detailsBox}>
            <Text style={detailRow}>
              <span style={detailLabel}>Order number:</span>
              <span style={detailValue}> #{orderNumber}</span>
            </Text>
            <Text style={detailRow}>
              <span style={detailLabel}>Total:</span>
              <span style={detailValue}> {orderTotal}</span>
            </Text>
            <Text style={detailRow}>
              <span style={detailLabel}>Estimated delivery:</span>
              <span style={detailValue}> {deliveryDate}</span>
            </Text>
          </Section>
          <Section style={buttonContainer}>
            <Button style={button} href={orderUrl}>
              View Order
            </Button>
          </Section>
        </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 = {
  display: "inline-block",
  width: "60px",
  height: "60px",
  backgroundColor: "#d1fae5",
  borderRadius: "50%",
  fontSize: "30px",
  lineHeight: "60px",
  color: "#059669",
};

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 detailsBox = {
  backgroundColor: "#f9fafb",
  borderRadius: "8px",
  padding: "20px",
  margin: "20px 0",
};

const detailRow = {
  color: "#374151",
  fontSize: "16px",
  margin: "0 0 8px",
};

const detailLabel = {
  color: "#6b7280",
};

const detailValue = {
  fontWeight: "600",
  color: "#1f2937",
};

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

const button = {
  backgroundColor: "#2563eb",
  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
`orderNumber`	Unique order identifier
`orderTotal`	Total order amount
`orderUrl`	Link to view order details
`deliveryDate`	Estimated delivery date

Best Practices

Essential Information

•Include order number prominently for support reference
•Show itemized list of products ordered
•Display shipping address for verification

Set Expectations

•Provide realistic delivery estimates
•Explain next steps (shipping notification, etc.)
•Include tracking info if available immediately

Cross-Sell Opportunity

•Keep it subtle—focus on confirmation first
•Consider 'You might also like' in follow-up email instead
•Include easy reorder link for repeat customers

Ready to send emails?

Get started with 1,000 free emails per month.

Start for free