How to create invoices in Bubble

You create invoices in Bubble by storing them as a data type (for example, Invoice), then generating them using a backend workflow that fills in fields like customer, line items, amounts, and status. You can display them in the app, let users download them as PDF using a plugin (like SelectPDF or PDF Conjurer), and optionally send them by email through an email action or API.

Core Structure

An invoice in Bubble is just a data entry. You define a data type with the fields you need.

• Client (User)
• Line items (List of Line Item)
• Total (number)
• Status (text, e.g. Draft / Sent / Paid)
• Invoice number (text)
• Date issued (date)

You also define a Line Item type with fields like description, quantity, and price.

Creating the Invoice

• Create a backend workflow (in Backend → API Workflows). This makes the invoice creation stable and lets you automate it.
• The workflow runs Create a new thing → Invoice and fills its fields from parameters you pass in.
• After creating the invoice, run another action to calculate totals. You can loop through line items using :sum on a list field.

// Example of calculating total inside a Backend Workflow expression
Current user's Cart Line Items:sum's price

Displaying and Sending the Invoice

• Show the invoice on a page using a Repeating Group for line items.
• To generate PDFs, use a plugin such as SelectPDF or PDF Conjurer and pass the invoice page or template to it.
• Send the PDF via Bubble’s built‑in email action or an email API (SendGrid, Postmark, etc.).

Optional: Payment

If the invoice needs payment, store a Stripe PaymentIntent ID in the invoice, and update the Invoice’s status using a Stripe webhook received through Bubble’s API Connector.