> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://docs.solvimon.com/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://docs.solvimon.com/_mcp/server.

# Invoices list

The Invoices list component renders a paginated list of a customer's invoices. Use it when you want to embed invoice history into your product without building the list yourself.

---

![](/_fern-img/dd0575293be763292ca0492e50f00b7b80aa64d3618df34f5cb5317782a1d956.webp)

---

## Overview

Invoices list is driven by a `portalObject` your backend generates for a specific customer. The SDK uses it to fetch and display that customer's invoices. Your frontend never handles API keys directly.

Pagination is enabled by default, loading 15 invoices per batch. Each invoice row can show a pay button, a view button, or both, depending on your configuration.

## Mount the component

**`Invoices list component`**

```js Invoices list component
import { createSolvimonCore } from '@solvimon/solvimon-web/core';

// Generated by your backend via the Solvimon API.
const customerPortalObject = {
    object_type: 'PORTAL_URL',
    id: 'purl_example',
    type: 'CUSTOMER_PORTAL',
    customer_id: 'cust_example',
    token: 'replace-with-a-real-portal-token',
    status: 'PUBLISHED',
};

const solvimon = createSolvimonCore({
    environment: 'TEST',
    locale: 'en-US',
});

const unmount = solvimon.createComponent('invoices-list', {
    container: '#sdk-root',
    portalObject: customerPortalObject,
    configuration: {
        showPayButton: true,
        showViewButton: true,
        pagination: {
            enabled: true,
            batchSize: 15,
        },
    },
});

window.addEventListener('beforeunload', () => {
    unmount?.();
});
```

## Configuration

| Option                 | Type      | Default | Description                                         |
| ---------------------- | --------- | ------- | --------------------------------------------------- |
| `showPayButton`        | `boolean` | `true`  | Show a pay button on unpaid invoices.               |
| `showViewButton`       | `boolean` | `true`  | Show a view button on invoices.                     |
| `pagination.enabled`   | `boolean` | `true`  | Enable pagination.                                  |
| `pagination.batchSize` | `number`  | `15`    | Number of invoices loaded per batch. Maximum is 50. |

## Events

Invoices list fires `action-request` DOM events when the customer interacts with invoice actions.

**`Handling action requests`**

```js Handling action requests 
document.addEventListener('action-request', (event) => {
    const { action, data } = event.detail;

    switch (action) {
        case 'view-invoice':
            navigate(`/invoices/${data.invoiceId}`);
            break;
        case 'pay-invoice':
            openPaymentModal(data.invoiceId);
            break;
    }
});
```

| Event          | Payload                 | Description                          |
| -------------- | ----------------------- | ------------------------------------ |
| `view-invoice` | `{ invoiceId: string }` | Customer clicked to view an invoice. |
| `pay-invoice`  | `{ invoiceId: string }` | Customer clicked to pay an invoice.  |