You can generate invoices in Bubble by building an invoice template page populated with order data from your database, then converting it to PDF using a plugin like PDF Conjurer. The process involves creating an Invoice data type with line items, designing a printable layout, and adding a workflow to generate and download the PDF automatically or on button click.
Generate Professional Invoices in Bubble
This tutorial shows you how to build an invoice generation system in your Bubble app. You will create the data structure for invoices and line items, design a professional invoice layout, and convert it to downloadable PDFs. This is useful for e-commerce apps, SaaS billing, freelancer tools, or any app that needs to produce financial documents.
Prerequisites
- A Bubble account with an existing app
- An Order or Transaction data type already set up
- Basic understanding of Data Types, relationships, and Repeating Groups
- Familiarity with the Design tab and page layouts
Step-by-step guide
Create the Invoice and LineItem Data Types
Create the Invoice and LineItem Data Types
Go to Data tab → Data types. Create a new type called 'Invoice' with fields: invoice_number (text), customer (User), issue_date (date), due_date (date), subtotal (number), tax_rate (number), tax_amount (number), total (number), status (text — draft/sent/paid), and notes (text). Create another type called 'LineItem' with fields: invoice (Invoice), description (text), quantity (number), unit_price (number), and line_total (number). This structure separates individual items from the invoice summary.
Pro tip: Generate invoice numbers with a unique prefix + sequential number pattern. Use a backend workflow that searches for the highest existing invoice number and increments it.
Expected result: Two Data Types exist: Invoice (with summary fields) and LineItem (with per-item details linked to an Invoice).
Build the Invoice Creation Workflow
Build the Invoice Creation Workflow
When an order is completed (or a user clicks 'Generate Invoice'), create a workflow that: (1) Creates a new Invoice with the customer, dates, and a unique invoice number. (2) For each order item, creates a LineItem linked to the new invoice with description, quantity, unit_price, and calculated line_total (quantity * unit_price). (3) Calculates the subtotal (sum of all line_totals), applies tax, and updates the Invoice's total. Use 'Result of step X' to reference the newly created Invoice when creating LineItems.
Expected result: A complete Invoice record with associated LineItems is created in the database when triggered.
Design the Invoice Template Page
Design the Invoice Template Page
Create a new page called 'invoice' with Type of content set to 'Invoice'. Design a professional layout: at the top, add your company logo, name, and address on the left, and 'INVOICE' heading with the invoice number on the right. Below that, add the customer's name and address. Add a section showing issue date and due date. In the middle, add a Repeating Group for LineItems (data source: Search for LineItems where invoice = Current Page Invoice) with columns for description, quantity, unit price, and line total. Below the RG, add subtotal, tax, and total summary. At the bottom, add payment terms and notes.
Pro tip: Set the page width to a standard paper size (around 800px) and use a Column layout for clean vertical stacking. This makes the page look good when printed or converted to PDF.
Expected result: A professional invoice template page that dynamically displays all invoice data from the database.
Install a PDF Plugin and Add PDF Generation
Install a PDF Plugin and Add PDF Generation
Go to Plugins → '+ Add plugins' → search for 'PDF Conjurer' or 'PDF Generator'. Install your chosen plugin. On the invoice page, add a Button labeled 'Download PDF'. Create a workflow on the button: use the PDF plugin's action to capture the invoice layout and generate a PDF file. Configure the PDF settings — page size A4, orientation portrait, margins. The plugin typically lets you specify which Group element to convert to PDF. Point it to the main invoice container group. Set the filename dynamically: 'Invoice-' merged with 'Current Page Invoice's invoice_number'.
Expected result: Clicking 'Download PDF' generates a professional PDF invoice and triggers a file download.
Add Invoice Listing and Status Management
Add Invoice Listing and Status Management
Create an 'invoices' page with a Repeating Group showing all invoices (filtered by user role — customers see their own, admins see all). Display invoice number, customer name, date, total, and status in each row. Add status badges using conditional formatting (green for paid, yellow for sent, gray for draft). Add action buttons: 'View' (navigates to the invoice page), 'Mark as Sent' (changes status), and 'Mark as Paid' (changes status). For the Mark as Sent action, also trigger an email workflow that sends the invoice PDF to the customer.
Expected result: An invoices dashboard where users can view, manage, and track the status of all invoices.
Complete working example
1DATA TYPES:2- Invoice3 - invoice_number (text, unique)4 - customer (User)5 - issue_date (date)6 - due_date (date)7 - subtotal (number)8 - tax_rate (number, default: 0.10 for 10%)9 - tax_amount (number)10 - total (number)11 - status (text: draft | sent | paid)12 - notes (text)1314- LineItem15 - invoice (Invoice)16 - description (text)17 - quantity (number)18 - unit_price (number)19 - line_total (number)2021PAGE: invoice (Type of content: Invoice)2223LAYOUT:24- Group InvoiceContainer (Column layout, max-width 800px, centered)25 - Group Header (Row)26 - Left: Company logo, name, address27 - Right: "INVOICE" heading, invoice_number, issue_date, due_date28 - Group CustomerInfo29 - "Bill To:", customer name, customer email30 - Group LineItemsTable31 - Header Row: Description | Qty | Unit Price | Total32 - RepeatingGroup LineItems33 - Source: Search for LineItems (invoice = Current Page Invoice)34 - Cell: description | quantity | unit_price :formatted | line_total :formatted35 - Group Totals (align right)36 - Subtotal: Current Page Invoice's subtotal :formatted as $#,##0.0037 - Tax (10%): Current Page Invoice's tax_amount :formatted38 - Total: Current Page Invoice's total :formatted (bold)39 - Group Footer40 - Payment terms text41 - Notes: Current Page Invoice's notes42 - Button "Download PDF"4344WORKFLOWS:451. Generate Invoice (triggered from order completion)46 → Create Invoice: number = generate unique, customer = order's user,47 issue_date = Current date, due_date = Current date +(days):30, status = "draft"48 → For each order item:49 Create LineItem: invoice = Result of step 1, description, qty, price,50 line_total = qty * price51 → Make changes to Result of step 1:52 subtotal = Search for LineItems (invoice = Result of step 1):each item's line_total:sum53 tax_amount = subtotal * tax_rate54 total = subtotal + tax_amount55562. Download PDF clicked57 → PDF Conjurer: generate PDF from Group InvoiceContainer58 → Filename: "Invoice-" & Current Page Invoice's invoice_number59 → Download file60613. Mark as Sent clicked62 → Make changes to Invoice: status = "sent"63 → Send email to customer with invoice PDF attached64654. Mark as Paid clicked66 → Make changes to Invoice: status = "paid"Common mistakes when creating invoice generation in Bubble.io: Step-by-Step Guide
Why it's a problem: Calculating totals on the frontend instead of storing them
How to avoid: Calculate subtotal, tax, and total when the invoice is created or modified, and store the values as fields on the Invoice data type.
Why it's a problem: Not generating unique invoice numbers
How to avoid: Use a backend workflow that searches for the maximum existing invoice number and increments it, or use a prefix + timestamp pattern.
Why it's a problem: Using the browser print function as the only PDF option
How to avoid: Use a PDF generation plugin that produces consistent output and can attach the file to emails programmatically.
Best practices
- Store calculated totals (subtotal, tax, total) as fields on the Invoice to avoid recalculating on every view.
- Use a sequential invoice numbering system with a prefix (e.g., INV-2026-0001) for professional accounting.
- Set invoice due dates automatically (e.g., 30 days from issue date) but allow manual override.
- Add Privacy Rules to ensure customers can only see their own invoices and admins can see all.
- Design the invoice layout at standard paper dimensions for clean PDF output.
- Keep a history of status changes by creating a StatusLog data type for audit trails.
- Send automated email reminders for overdue invoices using scheduled backend workflows.
Still stuck?
Copy one of these prompts to get a personalized, step-by-step explanation.
I'm building an invoicing feature in Bubble.io. I need an Invoice data type with line items, a professional invoice template page, PDF generation, and status tracking (draft/sent/paid). How should I structure the data types and workflows?
Create an invoice generation system. Add Invoice and LineItem data types. Build an invoice template page with company info, customer details, line items table, and totals. Add PDF download using a plugin. Create an invoices list page with status management.
Frequently asked questions
Which PDF plugin is best for invoice generation in Bubble?
PDF Conjurer is the most popular choice for converting Bubble page elements to PDF. It supports custom layouts, headers/footers, and page sizing. For server-side generation, consider API-based services like html2pdf or DocRaptor via the API Connector.
Can I send invoices as email attachments?
Yes. Generate the PDF first and save the file URL, then use the Send Email action with the PDF URL as an attachment. Some PDF plugins provide the generated file URL in the workflow result.
How do I handle multiple currencies?
Add a 'currency' field (text or Option Set) to the Invoice data type. Format amounts using the appropriate currency symbol. Store all amounts in the specified currency and convert if needed using an exchange rate API.
Can I generate recurring invoices automatically?
Yes. Create a scheduled backend workflow that runs monthly. It searches for active subscriptions, creates a new Invoice for each, copies the line items from the previous invoice, and sends the invoice via email.
How do I ensure invoice numbers are sequential and unique?
Use a backend workflow that searches for the Invoice with the highest invoice_number, parses the number portion, increments it by 1, and formats it with your prefix. Run this with 'Ignore privacy rules' to ensure it sees all invoices.
Can I customize the invoice design for different clients?
Yes. Create an InvoiceTemplate data type with logo, colors, and layout preferences. Associate it with the customer or company. For complex multi-tenant invoicing, professional developers like RapidDev can build custom template systems.
Talk to an Expert
Our team has built 600+ apps. Get personalized help with your project.
Book a free consultation