Get Started

Payment Receipt — SaaS

A restrained SaaS payment receipt with a check-mark hero, payment details table (amount, plan, date, card, billing period), and a view-invoice CTA.

Transactional saasminimalgeometricreceiptherocta

Updated Jul 10, 2026

The prompt

Paste the brief below into ChatGPT or Claude with Temway's MCP enabled — the agent builds the email step by step. Or adapt it for your own brand and copy.

  • An email is a top-to-bottom stack of blocks — the recipe follows that order.
  • A [layout] step becomes a single image (great for heroes); everything else stays live text and links.
  • Theme the footer to match — the recipe's last step does exactly that.

Want this exact email? Tell your agent to clone the Temway share L9xtq-8j89RG_jdPtbrSn, then rebrand it. For the full model, point it at get_concept — email-structure, layouts-vs-emails, design-recipes.

The receipt a subscriber gets when their plan renews: a checkmark, the amount up top, and the clean details underneath — plan, date, card, billing period — with one link to the full invoice. Calm and factual, the way a receipt should read.

Snapshot

  • Goal: confirm a subscription payment cleared and give the subscriber their receipt details plus an invoice link.
  • Audience & tone: subscribers who just paid for their plan. Professional, calm, confirming — just the facts.
  • Palette: page #f8fafc · container #ffffff · text #0f172a / #64748b (muted) · accent teal #0d9488
  • Font: Verdana, sans-serif
  • Artwork: none — fully native blocks.

Build recipe

Each step is one block in the flat stack, top to bottom. [native] = a real email block. [layout] = a free-form layout embedded as a single image.

  1. [native] Wordmark — text. “FLOWBASE”. fontSize: 15, fontWeight: 700, color teal #0d9488, letterSpacing: 2px, center, generous top padding.
  2. [native] Confirmation mark — text. ”✅”. fontSize: 40, center. A single glyph stands in for a hero image — no decoration.
  3. [native] Heading — text. “Payment received”. fontSize: 24, fontWeight: 700, color #0f172a, center.
  4. [native] Subtext — text. “We’ve processed your payment. Here’s your receipt.” fontSize: 15, color #64748b, center.
  5. [native] Amount — text. “$49.00”. fontSize: 30, fontWeight: 700, color #0f172a, center, generous vertical padding. This is the focal point — the amount, big and unambiguous.
  6. [native] Divider — hairline #e2e8f0, generous vertical padding. Opens the receipt rows — the flat model stacks and divides, it does not box a table-card.
  7. [native] Detail rows — text. “Plan   Pro (Monthly) · Date   July 10, 2026 · Payment method   Visa ending in 4242 · Billing period   Jul 10 – Aug 10, 2026”. fontSize: 14, color #0f172a with the labels in #64748b, left, lineHeight: 1.8.
  8. [native] Divider — hairline #e2e8f0, generous vertical padding.
  9. [native] CTA button — button. Label “View invoice”, teal #0d9488 fill, white text, rounded corners, center.
  10. [native] Footer — social + address. Recolor both to the palette: social.color = #0d9488, address.color = #94a3b8, address.fontFamily = Verdana, sans-serif. Include billing + help links. Without this they fall back to a generic brand-blue that clashes with the teal.

Make it yours

  1. Swap the amount, plan, card, and billing period for the real charge.
  2. Point “View invoice” at the hosted invoice or billing portal.
  3. Recolor the teal accent to your product’s brand.
Use this template