August 29, 2025
Constructing production-ready electronic mail receipts may be difficult, particularly when it’s worthwhile to deal with a number of eventualities like visitor vs. logged-in clients, completely different delivery strategies, reductions, and multi-currency help. This complete information will present you find out how to create a responsive, dynamic electronic mail receipt template utilizing MJML for structure and Mailjet’s templating language for electronic mail personalization.
By the top of this tutorial, you’ll have a completely useful receipt template that may deal with complicated order information, connect PDF invoices, and ship reliably by means of Mailjet’s Ship API v3.1.
Why use templates with templating language?
Earlier than diving into the implementation, let’s perceive why this method is superior to creating one-off HTML emails:
- Fewer templates to keep up: One “sensible” receipt template can deal with a number of eventualities (visitor vs. logged-in customers, delivery vs. pickup, reductions, multi-currency)
- Server-side personalization: Inject dynamic information utilizing {{var:*}} or {{information:*}} variables and management rendering with circumstances and loops
- Quicker integration: Retailer the template as soon as, then set off it with a single API name per order
What you’ll construct
Your ultimate electronic mail receipt template will embody:
- Responsive MJML structure that works throughout all electronic mail purchasers
- Dynamic line merchandise loops for order particulars
- Tax, low cost, and whole calculations
- Conditional delivery data show
- Localized textual content and forex formatting
- Non-obligatory PDF bill attachments
- Dependable supply by means of Mailjet’s Ship API v3.1 with occasion monitoring
Stipulations
Earlier than beginning, guarantee you’ve:
- Created a Mailjet account with a validated sender area (arrange SPF/DKIM for optimum deliverability)
- An MJML workflow (CLI or editor) to compile MJML to HTML
- Mailjet API credentials (API key and secret for HTTP Primary Auth)
- Non-obligatory: A webhook endpoint to obtain supply occasions (despatched, open, click on, bounce, and so forth.)
Step 1: Construction the receipt with MJML
Let’s begin by creating the fundamental construction of our receipt template utilizing MJML. It will guarantee our electronic mail is responsive and renders persistently throughout completely different electronic mail purchasers.
Your receipt
Thanks on your buy!
Order {{var:order_id}} • {{var:order_date}} • {{var:forex}}
Supply to: {{var:delivery.identify}}, {{var:delivery.address1}}, {{var:delivery.metropolis}}
Merchandise
Qty
Worth
Subtotal {{var:cash.subtotal}}
Tax {{var:cash.tax}}
{{var:cash.discount_row}}
Whole {{var:cash.whole}}
Paid with {{var:fee.model}} ending {{var:fee.last4}}. Want a PDF? It is hooked up.
Questions? Reply to this electronic mail or go to your order web page: {{var:order_url}}
© {{var:yr}} Your Firm • {{var:support_email}}
Vital Notes:
- Hold forex formatting on the server-side and cross ready-to-render strings (cash.*) to keep away from locale inconsistencies
- MJML compiles to responsive HTML that works throughout main electronic mail purchasers
Step 2: Add Mailjet templating tags
Now we’ll improve our template with Mailjet’s templating language to deal with dynamic content material. This consists of variables, circumstances, and loops that might be processed when the e-mail is shipped.
Variable varieties
Mailjet’s templating language helps a number of variable varieties:
- Order variables: {{var:order_id}}, {{var:forex}}, {{var:fee.model}}
- Contact information: {{information:firstname:”Buyer”}} (with fallback values)
- Situations: {% if var:has_shipping %} … {% endif %}
- Loops: {% for merchandise in var:gadgets %} … {% endfor %}
Including dynamic line gadgets
Insert this code inside your MJML desk to loop by means of order gadgets:
{% for merchandise in var:gadgets %}
{{merchandise.identify}}
{{merchandise.qty}}
{{merchandise.worth}}
{% endfor %}
Conditional delivery data
Add conditional blocks to point out delivery particulars solely when related:
{% if var:has_shipping %}
Supply to: {{var:delivery.identify}}, {{var:delivery.address1}}, {{var:delivery.metropolis}}
{% endif %}
Step 3: Save the HTML as a reusable template
When you’ve compiled your MJML to HTML and added templating tags, it’s worthwhile to reserve it as a template in Mailjet. You could have two choices:
Choice A: Utilizing the Mailjet dashboard
Paste your compiled HTML into a brand new template within the Mailjet app (Passport).
Choice B: Utilizing the template API
Create a brand new template:
curl -s -X POST
--user "$MJ_APIKEY_PUBLIC:$MJ_APIKEY_PRIVATE"
https://api.mailjet.com/v3/REST/template
-H 'Content material-Sort: software/json'
-d '{
"Identify":"Receipt v1",
"OwnerType":"person",
"IsTextPartGenerationEnabled":"true",
"Locale":"en_US"
}'
Add your HTML content material to the template:
curl -s -X POST
--user "$MJ_APIKEY_PUBLIC:$MJ_APIKEY_PRIVATE"
https://api.mailjet.com/v3/REST/template/TEMPLATE_ID/detailcontent
-H 'Content material-Sort: software/json'
-d '{
"Html-part":"...your compiled MJML with templating tags...",
"Textual content-part":"Your plain textual content fallback"
}'
Step 4: Ship the receipt with Ship API v3.1
Now comes the thrilling half – sending your dynamic receipt electronic mail. Right here’s a whole instance that features template variables, PDF attachment, and correct configuration:
curl -s -X POST
--user "$MJ_APIKEY_PUBLIC:$MJ_APIKEY_PRIVATE"
https://api.mailjet.com/v3.1/ship
-H 'Content material-Sort: software/json'
-d '{
"Messages":[
{
"From":{"Email":"billing@yourbrand.com","Name":"Your Brand Billing"},
"To":[{"Email":"customer@example.com","Name":"{{data:firstname:"Customer"}}"}],
"TemplateID": TEMPLATE_ID,
"TemplateLanguage": true,
"Topic": "Your receipt {{var:order_id}}",
"Variables": {
"order_id": "ORD-98765",
"order_date": "2025-08-27",
"forex": "USD",
"gadgets": [
{"name":"Sneakers","qty":1,"price":"$99.00"},
{"name":"Socks","qty":2,"price":"$10.00"}
],
"cash":{"subtotal":"$119.00","tax":"$9.52","low cost":"$0.00","whole":"$128.52"},
"has_shipping": true,
"delivery":{"identify":"A. Smith","address1":"10 Market St","metropolis":"Austin"},
"fee":{"model":"Visa","last4":"4242"},
"order_url":"https://yourapp.com/orders/ORD-98765",
"support_email":"help@yourbrand.com",
"yr":"2025"
},
"Attachments":[
{
"ContentType":"application/pdf",
"Filename":"Invoice-ORD-98765.pdf",
"Base64Content":""
}
]
}
]
}'
Helpful ship choices
- Globals: Keep away from repetition throughout bulk sends (From, Topic, headers)
- SandboxMode: Set to true to validate payload with out sending
- CustomID: Use “order-ORD-98765” to correlate occasions
- URLTags: Add “utm_source=receipt&utm_medium=electronic mail” for monitoring
URLTags: Add “utm_source=receipt&utm_medium=electronic mail” for monitoring
Step 5: Confirm supply and monitor occasions
Monitoring your electronic mail supply is essential for sustaining buyer belief and debugging points.
Organising webhooks
Register your webhook endpoint to obtain real-time occasions:
- Despatched, delivered, opened, clicked
- Bounced, spam complaints, blocked
- Unsubscribed
Checking message standing
- Message information: GET /v3/REST/message/{Message_ID} for metadata
- Occasion timeline: GET /v3/REST/messagehistory/{Message_ID} for detailed occasions
- Statistics: Use /v3/REST/statcounters for aggregated supply metrics
Step 6: Internationalization and forex
For international companies, correct localization is crucial:
- Forex formatting: Format quantities server-side for the recipient’s locale and cross ready-to-render strings in Variables (e.g., cash.whole = “129,90 €”)
- Fallback textual content: Use {{information:firstname:”Shopper”}} for language-aware fallbacks
- Multi-language templates: Both preserve one template with conditional blocks ({% if var:locale == “fr” %}…{% endif %}) or create separate templates per locale
Step 7: Deliverability and compliance
Guarantee your receipts attain the inbox and adjust to rules:
Technical setup
- Confirm your area and configure SPF/DKIM data
- Ship out of your verified area for greatest status
- Hold templates light-weight with compressed photos and minimal exterior fonts
- At all times present a plain textual content model
Safety and privateness
- By no means embody full fee card numbers – use final 4 digits and model solely
- Safe PDF attachments and reduce PII
- Respect unsubscribe preferences for any promotional content material
Step 8: Superior manufacturing ideas
For groups deploying at scale, take into account these optimizations:
Attachment methods
- Use Attachments for PDFs that customers obtain
- Use InlinedAttachments for logos referenced by way of cid: in HTML
Marketing campaign group
- Set CustomCampaign: “transactional_receipts” for higher reporting
- Allow DeduplicateCampaign to forestall duplicate sends in batches
Error dealing with and observability
- Log Ship API errors with particular codes and fields for debugging
- Tag every ship with CustomID for simple correlation
- Embrace EventPayload with order metadata for downstream reconciliation
Troubleshooting widespread points
Listed here are some points to troubleshoot in case you run into issues with the above.
Template variables not rendering
- Guarantee TemplateLanguage: true is ready in your Ship API name
- Confirm variable names in your template match these within the Variables object
Authentication errors
- “Sender not approved”: Validate your From area/tackle first
- Verify that your API credentials are right and have correct permissions
Lacking content material
- “Not less than HTMLPart, TextPart or TemplateID have to be offered”: Make sure you’re offering a TemplateID
Occasion monitoring points
- Verify your webhook endpoint returns HTTP 200
- Verify for charge limiting in your webhook endpoint
- Think about using grouped occasions for high-volume eventualities
Nexts steps
You now have a whole, production-ready electronic mail receipt system! Listed here are some methods to reinforce it additional:
- Implement A/B testing for various receipt designs
- Add extra refined conditional logic for various product varieties
- Arrange automated monitoring and alerting for supply points
- Discover Mailjet’s statistics API for detailed efficiency analytics
For added assets and code samples, take a look at the Mailjet templating samples repository which features a full working instance you need to use as a place to begin.
Abstract
This information walked you thru creating knowledgeable electronic mail receipt template utilizing MJML for responsive design and Mailjet’s templating language for dynamic content material. You discovered find out how to deal with complicated order information, connect PDF invoices, guarantee dependable supply, and monitor efficiency; all important elements for a manufacturing ecommerce electronic mail system that scales with your online business.
Writer:
