We use cookies
We use cookies to enhance your experience and analyse site usage.
Order confirmation with product list, shipping info, and order summary.
<!DOCTYPE html>
<html>
<head>
<style>
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: -apple-system, sans-serif; color: #1e293b; background: #f8fafc; padding: 40px 20px; }
.email { max-width: 600px; margin: 0 auto; background: white; border-radius: 12px; overflow: hidden; }
.hero { background: linear-gradient(135deg, #1e3a5f, #2563eb); color: white; padding: 40px 32px; text-align: center; }
.hero h1 { font-size: 24px; font-weight: 700; margin-bottom: 8px; }
.hero p { opacity: .8; font-size: 14px; }
.content { padding: 32px; }
.order-info { background: #f8fafc; border-radius: 8px; padding: 16px; margin-bottom: 28px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; font-size: 13px; }
.order-info span { color: #64748b; display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 3px; }
h3 { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: #94a3b8; margin-bottom: 16px; }
.item { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid #f1f5f9; font-size: 14px; }
.item-name { font-weight: 500; }
.item-qty { color: #64748b; font-size: 12px; margin-top: 2px; }
.totals .row { display: flex; justify-content: space-between; font-size: 14px; padding: 8px 0; color: #64748b; }
.totals .grand { font-weight: 700; font-size: 16px; color: #1e293b; border-top: 2px solid #e2e8f0; padding-top: 12px; margin-top: 4px; }
.shipping { background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 8px; padding: 16px; margin-top: 24px; font-size: 13px; }
.footer { padding: 24px 32px; text-align: center; font-size: 12px; color: #94a3b8; border-top: 1px solid #f1f5f9; }
</style>
</head>
<body>
<div class="email">
<div class="hero">
<h1>Order Confirmed!</h1>
<p>Hi {{customer_name}}, your order is on its way.</p>
</div>
<div class="content">
<div class="order-info">
<div><span>Order Number</span>{{order_number}}</div>
<div><span>Order Date</span>{{order_date}}</div>
<div><span>Payment</span>{{payment_method}}</div>
<div><span>Estimated Delivery</span>{{delivery_date}}</div>
</div>
<h3>Items Ordered</h3>
<div>{{items}}</div>
<div class="totals" style="margin-top:20px;">
<div class="row"><span>Subtotal</span><span>{{subtotal}}</span></div>
<div class="row"><span>Shipping</span><span>{{shipping_cost}}</span></div>
<div class="row"><span>Tax</span><span>{{tax}}</span></div>
<div class="row grand"><span>Total</span><span>{{total}}</span></div>
</div>
<div class="shipping">
<strong>Shipping to:</strong> {{shipping_address}}
</div>
</div>
<div class="footer">{{company_name}} · {{company_email}}<br>{{company_address}}</div>
</div>
</body>
</html>Sign in to open this template in the playground, or copy the HTML and use it with the API.
curl -X POST https://api.htmlpdf.dev/api/pdf \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"html": "<!DOCTYPE html>\n<html>\n<head>\n<style>\n * { box-sizing: border-box; margin: 0; p...",
"format": "A4"
}' \
--output ecommerce-receipt.pdf