Order confirmation email
Table layout with inline styles from the template, wrapped by wrapInEmailLayout.
Order confirmation email
examples/email-demo/templates/OrderConfirmation.astroconst preset = emailPreset({ provider: 'ses' });
const runtime = createAstroRuntime({
baseContext: preset.baseContext,
services: preset.services,
});
const email = await runtime.getService('email');
const html = await runtime.renderComponent(OrderConfirmation, {
orderNumber: 'DE-2024-99812',
customerName: 'Jane Doe',
items: [{ name: 'Premium Abonnement (1 Jahr)', quantity: 1, price: '99.00 €' }],
/* subtotal, shipping, total, shippingAddress */
});
email.wrapInEmailLayout(html, { title: 'Bestellbestätigung' });<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Bestellbestätigung
</title>
</head>
<body style="margin: 0; padding: 0; background-color: #f4f4f4;">
<div style="display: none; max-height: 0; overflow: hidden;">Vielen Dank für Ihren Einkauf!
</div>
<table role="presentation" cellpadding="0" cellspacing="0" width="100%" style="background-color: #f4f4f4;">
<tr>
<td align="center">
<table role="presentation" cellpadding="0" cellspacing="0" width="600" style="max-width: 600px;">
<tr>
<td>
<html>
<head>
<title>Bestellbestätigung #DE-2024-99812
</title>
</head>
<body style="margin: 0; padding: 0; background-color: #f4f4f4; font-family: Arial, sans-serif;">
<table role="presentation" cellpadding="0" cellspacing="0" width="100%" style="background-color: #f4f4f4;">
<tr>
<td align="center" style="padding: 40px 0;">
<table role="presentation" cellpadding="0" cellspacing="0" width="600" style="max-width: 600px; background-color: #ffffff; border-radius: 8px;">
<tr>
<td style="padding: 40px; text-align: center; background-color: #10b981; border-radius: 8px 8px 0 0;">
<div style="font-size: 48px; margin-bottom: 10px;">✓
</div>
<h1 style="margin: 0; color: #ffffff; font-size: 24px;">Bestellung bestätigt
</h1>
</td>
</tr>
<tr>
<td style="padding: 40px;">
<p style="margin: 0 0 10px; color: #333333; font-size: 16px;">Hallo Jane Doe,
</p>
<p style="margin: 0 0 30px; color: #666666; font-size: 16px; line-height: 1.6;">Vielen Dank für Ihre Bestellung! Wir haben Ihre Bestellung
<strong>#DE-2024-99812
</strong> erhalten und bearbeiten sie.
</p>
<table role="presentation" cellpadding="0" cellspacing="0" width="100%" style="border: 1px solid #e5e7eb; border-radius: 8px;">
<tr style="background-color: #f8f9fa;">
<td style="padding: 12px; font-weight: bold; border-bottom: 1px solid #e5e7eb;">Artikel
</td>
<td style="padding: 12px; font-weight: bold; border-bottom: 1px solid #e5e7eb; text-align: center;">Menge
</td>
<td style="padding: 12px; font-weight: bold; border-bottom: 1px solid #e5e7eb; text-align: right;">Preis
</td>
</tr>
<tr>
<td style="padding: 12px; border-bottom: 1px solid #e5e7eb;">Premium Abonnement (1 Jahr)
</td>
<td style="padding: 12px; border-bottom: 1px solid #e5e7eb; text-align: center;">1
</td>
<td style="padding: 12px; border-bottom: 1px solid #e5e7eb; text-align: right;">99.00 €
</td>
</tr>
<tr>
<td style="padding: 12px; border-bottom: 1px solid #e5e7eb;">Einrichtungsgebühr
</td>
<td style="padding: 12px; border-bottom: 1px solid #e5e7eb; text-align: center;">1
</td>
<td style="padding: 12px; border-bottom: 1px solid #e5e7eb; text-align: right;">0.00 €
</td>
</tr>
<tr>
<td colspan="2" style="padding: 12px; text-align: right; border-bottom: 1px solid #e5e7eb;">Zwischensumme:
</td>
<td style="padding: 12px; text-align: right; border-bottom: 1px solid #e5e7eb;">99.00 €
</td>
</tr>
<tr>
<td colspan="2" style="padding: 12px; text-align: right; border-bottom: 1px solid #e5e7eb;">Versand:
</td>
<td style="padding: 12px; text-align: right; border-bottom: 1px solid #e5e7eb;">0.00 €
</td>
</tr>
<tr style="background-color: #f8f9fa;">
<td colspan="2" style="padding: 12px; text-align: right; font-weight: bold;">Gesamt:
</td>
<td style="padding: 12px; text-align: right; font-weight: bold; font-size: 18px; color: #10b981;">99.00 €
</td>
</tr>
</table>
<div style="margin-top: 30px; padding: 20px; background-color: #f8f9fa; border-radius: 8px;">
<h3 style="margin: 0 0 10px; font-size: 14px; color: #666666; text-transform: uppercase;">Lieferadresse
</h3>
<p style="margin: 0; color: #333333; font-size: 14px; white-space: pre-line;">Jane Doe Musterstraße 1 10115 Berlin
</p>
</div>
</td>
</tr>
<tr>
<td style="padding: 20px 40px; background-color: #f8f9fa; border-radius: 0 0 8px 8px; text-align: center;">
<p style="margin: 0; color: #666666; font-size: 14px;">Bei Fragen kontaktieren Sie uns unter support@example.com
</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>