logoImejis.io

Invoice & Receipt Image Generation for SaaS

imejis

imejis

@Imejis_io

Invoice & Receipt Image Generation for SaaS

Our payment confirmation email had a 12% open rate. Not great, but people don't care about receipts until they need them later.

Then we added a visual receipt image to the email. Same information, just rendered as a professional-looking receipt instead of plain text.

Open rate jumped to 31%. People actually looked at their receipts. More importantly, they started sharing them on social media—free marketing we didn't expect.

Here's how to add invoice and receipt images to your SaaS without building a complex PDF generator.

Why generate invoice and receipt imagesWhy Generate Invoice and Receipt Images?

Most SaaS products send text-based email confirmations. Some generate PDFs. Very few generate images, which is a missed opportunity.

Images have advantages:

  • Load instantly in email (no download required)
  • Mobile-friendly (no pinch-to-zoom on PDFs)
  • Shareable on social media
  • Can embed directly in emails and apps
  • Render consistently across all email clients

PDFs are great for accounting and record-keeping. But for the immediate "your payment went through" confirmation, images work better.

What goes on a receipt or invoice imageWhat Goes on a Receipt or Invoice Image

Keep it simple and scannable.

Essential elements:

  • Company logo and branding
  • Receipt/invoice number
  • Date and time
  • Itemized charges
  • Total amount (most prominent)
  • Payment method (last 4 digits)
  • Customer name or email

Optional but recommended:

  • Thank you message
  • Customer support contact
  • Billing address
  • Tax breakdown
  • Subscription renewal date (if applicable)

The goal is quick visual confirmation that the transaction completed successfully and they can reference this later.

Common use casesCommon Use Cases

Receipt images work anywhere you charge customers.

Saas subscription paymentsSaaS Subscription Payments

Monthly or annual subscription renewals need receipts. Most customers don't check their email for these unless there's a problem.

A visual receipt makes it obvious the payment went through. Plus, customers can screenshot it for their expense reports without downloading anything.

Key elements for subscriptions:

  • Subscription plan name
  • Billing period (Monthly, Annual)
  • Next renewal date
  • Total amount charged
  • Receipt number for support inquiries

One time purchasesOne-Time Purchases

Software licenses, digital products, course purchases—anything with a one-time payment deserves a good receipt.

Key elements for one-time purchases:

  • Product or license name
  • Purchase date
  • Order number
  • Total paid
  • Download links (if applicable)

Usage based billingUsage-Based Billing

If you charge based on API calls, storage, or other metered usage, show the breakdown clearly.

Key elements for usage billing:

  • Usage period
  • Units consumed (API calls, GB stored, etc.)
  • Rate per unit
  • Total charges
  • Visual breakdown of usage

This transparency builds trust. Customers understand exactly what they paid for.

Event ticketsEvent Tickets

If your SaaS sells event access, generate ticket receipts with QR codes for entry.

Key elements:

  • Event name and date
  • Ticket type
  • Attendee name
  • QR code for check-in
  • Order number

Learn more about event ticket generation for detailed implementation.

E commerce order confirmationsE-commerce Order Confirmations

For SaaS with e-commerce components, order confirmation images show everything at a glance.

Key elements:

  • Order number
  • Items purchased
  • Shipping address
  • Estimated delivery
  • Total amount

Similar to e-commerce product image automation, but focused on post-purchase confirmation.

How to set up receipt image generationHow to Set Up Receipt Image Generation

The technical setup is simpler than building a PDF generator.

Step 1 design your receipt templateStep 1: Design Your Receipt Template

Create a professional receipt design that matches your brand.

Design considerations:

  • Clear visual hierarchy (total amount should be most prominent)
  • Professional typography (monospace fonts work well for numbers)
  • Plenty of whitespace (don't cram everything together)
  • Subtle branding (logo at top, brand colors)

In Imejis.io, create your receipt layout and mark all transaction-specific fields as editable (amount, date, items, etc.).

Step 2 trigger generation after paymentStep 2: Trigger Generation After Payment

When a payment succeeds in your payment processor (Stripe, Paddle, PayPal), trigger the receipt generation.

curl -X POST "https://render.imejis.io/v1/YOUR_TEMPLATE_ID" \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "receipt_number": "RCP-2026-00347",
    "date": "February 12, 2026",
    "customer_name": "Sarah Johnson",
    "plan": "Professional Plan",
    "amount": "$49.00",
    "payment_method": "Visa •••• 4242",
    "next_billing": "March 12, 2026"
  }'

The API returns the receipt image immediately. Embed it in your confirmation email or save it to the customer's account.

Step 3 embed in email or appStep 3: Embed in Email or App

Most SaaS products email receipts immediately. Embed the generated image directly in the email HTML.

<img
  src="https://your-cdn.com/receipts/RCP-2026-00347.png"
  alt="Receipt for Professional Plan subscription"
  style="max-width: 600px; width: 100%;"
/>

You can also display receipts in-app on the customer's billing page, available for download anytime.

Code examplesCode Examples

Here's how to generate receipt images when payments succeed.

Nodejs with stripeNode.js with Stripe

const stripe = require("stripe")(process.env.STRIPE_SECRET_KEY)
const axios = require("axios")
 
// Stripe webhook handler
app.post("/stripe-webhook", async (req, res) => {
  const event = req.body
 
  if (event.type === "invoice.payment_succeeded") {
    const invoice = event.data.object
 
    // Generate receipt image
    const receiptImage = await generateReceipt({
      receiptNumber: invoice.number,
      date: new Date(invoice.created * 1000).toLocaleDateString(),
      customerName: invoice.customer_name,
      amount: `$${(invoice.total / 100).toFixed(2)}`,
      plan: invoice.lines.data[0].description,
      paymentMethod: `${invoice.payment_method_details.type} •••• ${invoice.payment_method_details.last4}`,
      nextBilling: new Date(invoice.period_end * 1000).toLocaleDateString(),
    })
 
    // Send email with receipt
    await sendReceiptEmail(invoice.customer_email, receiptImage)
  }
 
  res.json({ received: true })
})
 
async function generateReceipt(data) {
  const response = await axios({
    method: "post",
    url: "https://render.imejis.io/v1/YOUR_TEMPLATE_ID",
    headers: {
      Authorization: "Bearer YOUR_API_KEY",
      "Content-Type": "application/json",
    },
    data: data,
    responseType: "arraybuffer",
  })
 
  return response.data
}

Python with paddlePython with Paddle

import requests
from flask import Flask, request
 
app = Flask(__name__)
 
@app.route('/paddle-webhook', methods=['POST'])
def paddle_webhook():
    event = request.json
 
    if event.get('alert_name') == 'subscription_payment_succeeded':
        receipt_image = generate_receipt({
            'receipt_number': f"RCP-{event['subscription_payment_id']}",
            'date': event['event_time'],
            'customer_name': event['customer_name'],
            'amount': f"${event['sale_gross']}",
            'plan': event['subscription_plan_name'],
            'payment_method': event['payment_method'],
            'next_billing': event['next_bill_date']
        })
 
        send_receipt_email(event['email'], receipt_image)
 
    return {'success': True}
 
def generate_receipt(data):
    response = requests.post(
        'https://render.imejis.io/v1/YOUR_TEMPLATE_ID',
        headers={
            'Authorization': 'Bearer YOUR_API_KEY',
            'Content-Type': 'application/json'
        },
        json=data
    )
 
    return response.content

Php with custom payment systemPHP with Custom Payment System

<?php
function generate_receipt($transaction) {
    $data = [
        'receipt_number' => $transaction['receipt_id'],
        'date' => date('F j, Y', $transaction['timestamp']),
        'customer_name' => $transaction['customer_name'],
        'amount' => '$' . number_format($transaction['amount'], 2),
        'plan' => $transaction['plan_name'],
        'payment_method' => $transaction['payment_method'],
        'next_billing' => date('F j, Y', $transaction['next_billing'])
    ];
 
    $response = wp_remote_post('https://render.imejis.io/v1/YOUR_TEMPLATE_ID', [
        'headers' => [
            'Authorization' => 'Bearer YOUR_API_KEY',
            'Content-Type' => 'application/json'
        ],
        'body' => json_encode($data),
        'timeout' => 15
    ]);
 
    if (!is_wp_error($response)) {
        return wp_remote_retrieve_body($response);
    }
 
    return false;
}
 
// After successful payment
$transaction = [
    'receipt_id' => 'RCP-2026-00347',
    'timestamp' => time(),
    'customer_name' => 'Sarah Johnson',
    'amount' => 49.00,
    'plan_name' => 'Professional Plan',
    'payment_method' => 'Visa •••• 4242',
    'next_billing' => strtotime('+1 month')
];
 
$receipt_image = generate_receipt($transaction);
send_receipt_email($transaction['customer_email'], $receipt_image);
?>

Template design best practicesTemplate Design Best Practices

Your receipt template determines how professional every transaction looks.

Visual hierarchyVisual Hierarchy

Not all information is equally important. Design with priority in mind.

Order of importance:

  1. Total amount (largest, most prominent)
  2. What they paid for (plan name, items)
  3. Receipt number and date
  4. Payment method
  5. Additional details (billing address, support contact)

Customers scan for the total first to confirm the charge matches their expectations.

Use typography to your advantageUse Typography to Your Advantage

Receipts have a traditional look. Work with that, not against it.

  • Monospace fonts for numbers and amounts (looks like a traditional receipt)
  • Bold sans-serif for headings and labels
  • Regular weight for details and descriptions
  • Large size (48-72pt) for the total amount

Show itemized breakdownShow Itemized Breakdown

If the charge includes multiple items or fees, break them down clearly.

Professional Plan           $49.00
Extra Storage (50GB)        $10.00
                          --------
Subtotal                    $59.00
Tax                          $5.31
                          --------
Total                       $64.31

Transparency builds trust. Don't hide fees in the total.

Add payment security indicatorsAdd Payment Security Indicators

Reassure customers their payment was secure.

  • Show last 4 digits of card only
  • Include payment processor logo (Stripe, PayPal, etc.)
  • Add "Secure payment processed" message
  • Include transaction ID for reference

Brand consistencyBrand Consistency

Every receipt is a touchpoint with your brand.

  • Use your brand colors (but keep them subtle)
  • Include your logo at the top
  • Match your email and website design language
  • Consistent typography with your product

Handling different transaction typesHandling Different Transaction Types

Not all receipts are the same. Adjust your templates for different scenarios.

Successful paymentsSuccessful Payments

Your default receipt template. Clean, professional, confirmation that payment went through.

Failed paymentsFailed Payments

Generate a "payment failed" notice with clear next steps. Different visual treatment (maybe yellow/orange instead of green) to signal the issue.

{
  "status": "Payment Failed",
  "reason": "Card declined",
  "amount_due": "$49.00",
  "action": "Update payment method",
  "support_link": "https://yourapp.com/billing"
}

RefundsRefunds

Refund receipts need different messaging. Show the original transaction and the refund amount.

{
  "type": "Refund Receipt",
  "original_receipt": "RCP-2026-00347",
  "refund_amount": "$49.00",
  "refund_date": "February 15, 2026",
  "reason": "Subscription cancelled"
}

Credits and discountsCredits and Discounts

When you apply credits or give discounts, show the calculation clearly.

{
  "plan": "Professional Plan",
  "regular_price": "$49.00",
  "discount": "-$10.00",
  "credit_applied": "-$5.00",
  "total_charged": "$34.00"
}

Social sharing considerationsSocial Sharing Considerations

Some customers share receipts on social media—especially if they're excited about your product or got a good deal.

Design for sharingDesign for Sharing

Make your receipts shareable without being obnoxious.

  • Clean, attractive design (people won't share ugly receipts)
  • Subtle branding (logo and product name visible)
  • Appropriate aspect ratio (1200x630px works on most platforms)
  • No sensitive personal information prominently displayed

Privacy aware designPrivacy-Aware Design

If customers might share receipts, don't show:

  • Full credit card numbers (last 4 digits only)
  • Full addresses (city and state is enough)
  • Internal customer IDs
  • Sensitive pricing information (if B2B with negotiated rates)

Encourage sharingEncourage Sharing

Some SaaS companies add a small "Share" CTA to receipts for customers who want to show their support.

"Love [Your Product]? Share this receipt and help spread the word!"

Don't be pushy, but make it easy for happy customers to tell their friends.

Receipt storage and retrievalReceipt Storage and Retrieval

Generate receipts, but also make them accessible later.

Customer dashboardCustomer Dashboard

Store receipt images in the customer's account. They should be able to download any past receipt for expense reports or tax purposes.

Email archivesEmail Archives

Customers lose emails. Make sure they can retrieve receipts from your app without digging through old messages.

Bulk exportBulk Export

Some customers (especially businesses) need to download all receipts at once for accounting. Provide a bulk download option.

async function exportAllReceipts(customerId, year) {
  const transactions = await getCustomerTransactions(customerId, year)
  const receipts = []
 
  for (const tx of transactions) {
    const receipt = await generateReceipt(tx)
    receipts.push({
      filename: `receipt-${tx.id}.png`,
      data: receipt,
    })
  }
 
  // Create ZIP file with all receipts
  return createZip(receipts)
}

Measuring impactMeasuring Impact

Track how receipt images affect customer engagement.

Email metricsEmail Metrics

  • Open rates (do visual receipts increase opens?)
  • Click-through rates (if you include links)
  • Time spent viewing (longer engagement means they're reading details)

Support ticket reductionSupport Ticket Reduction

Good receipts reduce "did my payment go through?" support tickets. Track if support volume drops after adding visual receipts.

Social mentionsSocial Mentions

Monitor social media for people sharing your receipts. This organic brand awareness is valuable.

Customer satisfactionCustomer Satisfaction

Survey customers about their billing experience. Clear receipts improve satisfaction with the payment process.

FaqFAQ

Why generate invoice images instead of pdfsWhy generate invoice images instead of PDFs?

Images load instantly in emails and don't require downloads. Perfect for quick confirmations and social sharing. Many SaaS companies generate both—PDFs for records, images for immediate visual confirmation.

Can i include payment method details on receiptsCan I include payment method details on receipts?

Yes, but mask sensitive data. Show last 4 digits of cards, payment method type, but never full numbers. The API renders whatever data you pass, so sanitize it before generating images.

What image size works best for email receiptsWhat image size works best for email receipts?

600-800px wide works well in most email clients. Tall enough to show all details without scrolling, but not so large it gets clipped. Test in Gmail, Outlook, and Apple Mail before finalizing.

Can customers share receipt images on social mediaCan customers share receipt images on social media?

Absolutely. Many companies encourage this for brand awareness. Design your receipt with subtle branding and a shareable layout. Some customers post receipts to show support or share deals they scored.

How do i handle receipts in multiple currenciesHow do I handle receipts in multiple currencies?

Pass the formatted currency string to the API. Your template renders whatever you send—dollars, euros, pounds, yen. Just format the amount correctly with currency symbols before generating.

Make receipts actually usefulMake Receipts Actually Useful

Nobody gets excited about receipts. But they need them, reference them, and sometimes even share them.

A plain text email confirmation does the bare minimum. A well-designed receipt image does more—it confirms, reassures, and represents your brand professionally.

Set this up once with a good template and an API call. Every customer transaction gets a clean, branded receipt automatically.

Less confusion, fewer support tickets, better customer experience. All from adding one image to your confirmation emails.

Get started with Imejis.io →

See all posts