Component: Invoices Table

| 🌟 The Invoice Table received a major update in 109. |

Overview

The Invoices Table component allows customers to view their invoices in a self-service Finance Portal. These users can download a specific invoice, and pay any open invoices, both partially or in full. This makes it easier and quicker for users to pay outstanding balances, as well as having one central view to see all invoices.

This component is designed for B2B SaaS businesses and is part of the Self-service / Manage My Account section.

View invoices

• Displays a table of invoices with the following configurable columns:

  • Invoice Date (always shown) - invoiceDate in Zuora

  • Due Date (optional) - dueDate in Zuora

  • Reference (always shown) - InvoiceNumber in Zuora

  • Price (optional) - shows total invoice amount (Amount in Zuora)

  • Balance (optional) - shows outstanding amount (Balance in Zuora) with green = paid, red = unpaid

  • Download (optional) - Allows users to download the invoice as a PDF

  • Pay (optional) - Allows users to pay invoices, in partial or full (see below section for more information)

• Invoices inherit Limio’s date and currency formatting settings.

Props for display settings:

Prop	Type	Default	Purpose
Invoice date header	String	Invoice date	Column label
Due date header	String	Due date	Column label
Reference header	String	Reference	Column label
Price header	String	Price	Column label
Balance header	String	Balance	Column label
Download invoice header	String	Export	Column label
Download invoice tooltip text	String	Download invoice	Hover text
Pay invoice tooltip text	String	Pay invoice	Hover text
Show due date?	Boolean	true	Toggle due date column
Show price?	Boolean	true	Toggle price column
Show balance?	Boolean	true	Toggle balance column
Allow the users to download invoices?	Boolean	true	Toggle download button
Allow the users to pay invoices?	Boolean	false	Toggle pay button
Filters button text	String	Filters	Label for filter button
Filters: Balance Paid text	String	Paid	Filter label
Filters: Balance Unpaid text	String	Unpaid	Filter label
Results per page text	String	Results per page	Pagination label
No invoices text	String	There are no invoices associated with your account.	Empty state
Error text	String	There was a problem retrieving your invoices.	Error state

Pay invoices

• The pay invoice button is visible only if invoice balance > 0 and pay option is enabled ("Allow the users to pay invoices?" = true).

• When a customer tries to pay an invoice:

  • If a default payment method exists → confirmation modal appears with amount due.

  • If no default payment method exists → modal instructs customer to set one before proceeding.

• Users can also pay a partial invoice if "Allow users to pay partial invoices?" = true.

  • In this case, users can input the amount they want to pay into the confirmation modal

• Limio will use the saved payment method and process a Pay Invoice event

  • For Zuora integration, see

Props for paying invoices

Prop	Type	Default	Purpose
Confirm invoice payment modal: Heading	String	Confirm payment	Heading text on payment confirmation modal
Confirm invoice payment modal: Text	String	This invoice will be paid with your default payment method:	Body text on payment confirmation modal
Confirm invoice payment modal: Success Payment Heading	String	Payment Successful	Heading text when payment processes successfully
Confirm invoice payment modal: Success Payment Text	String	Your payment has been successfully processed.	Body text displayed when payment processes successfully
Confirm invoice payment modal: Failed Payment Heading	String	Payment Failed	Heading text when payment fails
Confirm invoice payment modal: Failed Payment Text	String	Unfortunately, your payment could not be processed at this time. Please try again or contact support	Body text when payment fails
Confirm invoice payment modal: Change payment button URL	String	/payment-methods	URL to redirect user to if they want to change their default payment method
Confirm invoice payment modal: Total amount to pay label	String	Amount due:	Shows amount due in payment modal
Confirm invoice payment modal: Allow users to pay partial invoices	Boolean	False	If true, allows customers to pay partial balances on invoices
No default payment method modal: Heading	Sting	No default payment method set	Heading text if there is no default payment method set
No default payment method modal: Text	String	You must have a default payment method set before you can proceed with this payment.	Body text if there is no default payment method set
No default payment method modal: Set payment method button label	String	Go to payment methods	Button text to redirect user to if they need to set their default payment method
No default payment method modal: Set payment method button URL	String	/payment-methods	URL to redirect user to if they need to set their default payment method

---

| 🌟 The Invoice Table below is for release up to 108. |

Purpose: Use this component to display a list of customer invoices for their subscriptions, allow them to download a PDF of a selected invoice and settle any invoice with an outstanding balance.

The table is customisable, which the option to show, or not show, the total invoice price and outstanding balance.

Label	Type	Default	Purpose
Header	String	Invoices	To denote the title of the invoices table
Date Header	String	Date	Label of Date column
Reference Header	String	Reference	Label of Reference column
Price Header	String	Price	Label of Price column, if show price is true
Balance Header	String	Balance	Label of Balance column, if show balance is true
Invoice Link Header	String	Invoice (pdf)	Label of Invoice Link column
Show balance?	Boolean	true	If true, shows the Balance column
Show total price?	Boolean	false	If true, shows the Price column
Allow the user to download invoices?	Boolean	true	If true, shows the Invoice link column

Please note that the text for the Date, Reference, and on the download button are configurable via the localisation tab in the Limio page builder.