An invoice email and a payment receipt may look almost identical while doing different jobs. One requests or records an amount due; the other confirms that money was received. If the template blurs that distinction, customers may pay twice, contact support unnecessarily, or use the wrong document for accounting.
Emailify can turn a Figma email design into responsive HTML for major email clients and email platforms. The safe workflow begins with billing events and data contracts, not a polished card containing sample totals.
Define every billing event
List the messages the product can send and the system event that triggers each one. Common examples include:
- new invoice available;
- invoice due soon;
- overdue invoice;
- successful payment receipt;
- partial payment received;
- credit applied;
- refund issued;
- corrected or voided invoice.
Do not make one generic “billing confirmation” template serve every state. The subject line, opening sentence, amount label, primary action, and accounting language should make the event unambiguous before the customer opens an attachment.
This workflow is different from a payment failure email sequence. Failure emails help the customer recover a payment method; invoice and receipt emails establish what is owed, what was paid, and which document records the transaction.
Write a transaction data contract
For each message, define the required, optional, and forbidden fields. A receipt may need:
- legal seller name and customer name;
- invoice or receipt number;
- transaction date and timezone;
- currency and total paid;
- subtotal, discounts, tax, and credits where applicable;
- masked payment method;
- line items and billing period;
- link to the authoritative billing portal;
- support and legal entity details.
Specify what happens when fields are long, absent, zero, negative, or repeated. Test multi-line company names, many line items, long plan names, tax identifiers, right-to-left text, and currencies whose symbols appear before or after the amount.
The backend or billing provider must remain authoritative. Do not calculate tax, balance, or totals in the email template. Render values supplied by the billing system and verify that the displayed parts reconcile with the invoice document.
Make the status obvious without relying on colour
Lead with a literal statement such as “Payment received” or “Invoice due 14 October,” then show the most important amount and date. Avoid vague headings like “Your billing update.” Use text and structure—not only green, amber, or red—to convey status.
Put the primary action next to the reason for it. “View invoice” should open an authenticated account page or a secure, expiring document route owned by the billing system. Never place full card numbers, passwords, or sensitive authentication details in the email.
Attachments need a deliberate policy. Some customers require invoice PDFs; other organisations avoid attachments for security or version-control reasons. If the email links to a portal, explain where the customer can download the official document. Ensure a corrected invoice cannot leave an obsolete attachment circulating as if it were current.
Build resilient modules in Figma
Create components for the status header, transaction summary, line-item table, tax and credit rows, payment method, primary action, support block, and legal footer. Use realistic fixtures rather than Product 1 and $10.00.
Include at least these states:
- one simple line item;
- multiple items and discounts;
- tax-inclusive and tax-exclusive totals;
- zero-amount invoice covered by credit;
- refund or negative adjustment;
- long localised copy;
- missing optional payment method;
- overdue invoice with a revised due date.
If the email includes a data table, check semantic reading order and narrow-screen behaviour. On mobile, a wide desktop table may need stacked labels or a concise summary with a link to the complete invoice.
Export and test the actual HTML
Use Emailify’s responsive preview while designing, then export the production HTML and test that output across the real clients important to the customer base. Check:
- amount and date hierarchy with images blocked;
- table alignment in Outlook;
- dark-mode contrast and logo variants;
- link destinations and tracking behaviour;
- long data wrapping on mobile;
- preheader content;
- accessible button labels;
- plain-text fallback;
- legal footer and support contact.
The order confirmation email workflow offers useful transactional-state guidance, but an invoice or receipt must also withstand bookkeeping, tax, correction, and audit use.
Reconcile before release
Generate test messages from a billing sandbox or controlled fixture set. For every case, compare the subject, email totals, portal record, downloadable invoice, currency, tax, dates, and status. Test duplicate-event handling so a retry does not send confusing repeat receipts.
Assign owners for template design, billing logic, tax/legal requirements, deliverability, and support escalation. Monitor bounces and customer questions after release; a spike in “Was I charged?” is a content or event problem even if the HTML rendered perfectly.
Emailify handles the difficult production step from Figma to responsive email. It does not define accounting truth or guarantee that a billing event is correct. When event semantics, data ownership, and reconciliation are settled first, the resulting email becomes a trustworthy record instead of another billing mystery.
Read as Markdown Related resource index Site index for AI agents
Pro Bundle