# 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. {% embed url="" %} ### 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 [https://docs.limio.com/integrations/keeping-zuora-and-limio-in-sync/how-limio-events-updates-zuora-for-commerce](https://docs.limio.com/integrations/keeping-zuora-and-limio-in-sync/how-limio-events-updates-zuora-for-commerce "mention") #### 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.