> 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.

# Invoice

The Invoice component renders a single invoice in full detail. Use it when you want to show a customer a specific invoice, including line items, billing information, and payment attempts.

---

![](/_fern-img/5b1198a1ac6f372100d1a9eba2cc584238e8b52cee36a600925eaa4f68e0f9dc.webp)

---

## Overview

Invoice is driven by a `portalObject` your backend generates for a specific customer, combined with an `invoiceId` you pass in configuration. The SDK fetches and displays that invoice. Your frontend never handles API keys directly.

The component can optionally show a PDF download button, the customer's billing information, and a list of payment attempts, each of which can be toggled independently.

## Mount the component

**`Invoice component`**

```js Invoice 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('invoice', {
    container: '#sdk-root',
    portalObject: customerPortalObject,
    configuration: {
        invoiceId: 'inv_example',
        enableDownloadButton: true,
        enableCustomerBillingInformation: true,
        enablePaymentAttempts: true,
    },
});

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

## Configuration

| Option                             | Type      | Required | Default | Description                                             |
| ---------------------------------- | --------- | -------- | ------- | ------------------------------------------------------- |
| `invoiceId`                        | `string`  | Yes      |         | The ID of the invoice to display.                       |
| `enableDownloadButton`             | `boolean` | No       | `true`  | Show a button to download the invoice as PDF.           |
| `enableCustomerBillingInformation` | `boolean` | No       | `true`  | Show the customer's billing information on the invoice. |
| `enablePaymentAttempts`            | `boolean` | No       | `true`  | Show the list of payment attempts for the invoice.      |

## Events

This component does not fire any events.