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

# Customer overview

The Customer overview screen renders a complete billing dashboard for a customer in a single mount. Use it when you want to expose the full billing self-service experience without composing individual components.

---

![](/_fern-img/68ee82a9e7fadb9c592e075685a370d561dba8494ee86a195db451bf085054e3.webp)

---

## Overview

Customer overview is driven by a `portalObject` your backend generates for a specific customer. The SDK uses it to load all billing data for that customer. Your frontend never handles API keys directly.

The screen is a composed layout of five sections:

* Active subscriptions with view details and view all actions
* A paginated invoice list
* Open wallet balances
* Saved payment methods
* Billing address details

Actions that require navigation or app-level handling, like paying an invoice or viewing a subscription's details, are surfaced as `action-request` events rather than handled internally.

## Mount the screen

**`Customer overview screen`**

```js Customer overview screen
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',
    branding: {
        colors: {
            primary: '#1d4ed8',
            secondary: '#0f172a',
        },
    },
});

const unmount = solvimon.createScreen('customer-overview', {
    container: '#sdk-root',
    portalObject: customerPortalObject,
});

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

## Configuration

The Customer overview screen accepts an optional `configuration` object to control the payment methods section.

| Option                            | Type      | Default | Description                                                                          |
| --------------------------------- | --------- | ------- | ------------------------------------------------------------------------------------ |
| `configuration.maxItems`          | `number`  | `3`     | Maximum number of payment methods shown.                                             |
| `configuration.showViewAllButton` | `boolean` |         | Show a "View all" button when the customer has more payment methods than `maxItems`. |
| `configuration.showAddButton`     | `boolean` |         | Show an "Add" button when the customer has fewer than `maxItems` payment methods.    |

## Events

Customer overview fires `action-request` DOM events for actions that require navigation or app-level handling. Listen on the container or on `document`.

**`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;
        case 'view-subscription-details':
            navigate(`/subscriptions/${data.subscriptionId}`);
            break;
        case 'view-all-subscriptions':
            navigate('/subscriptions');
            break;
        case 'add-payment-method':
            openAddPaymentMethodFlow();
            break;
    }
});
```

| Event                       | Payload                      | Description                                    |
| --------------------------- | ---------------------------- | ---------------------------------------------- |
| `view-invoice`              | `{ invoiceId: string }`      | Customer clicked to view an invoice.           |
| `pay-invoice`               | `{ invoiceId: string }`      | Customer clicked to pay an invoice.            |
| `view-subscription-details` | `{ subscriptionId: string }` | Customer clicked to view subscription details. |
| `view-all-subscriptions`    | none                         | Customer clicked to view all subscriptions.    |
| `edit-billing-information`  | none                         | Customer clicked to edit billing information.  |
| `view-all-payment-methods`  | none                         | Customer clicked to view all payment methods.  |
| `add-payment-method`        | none                         | Customer clicked to add a payment method.      |