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

# Subscriptions list

The Subscriptions list component renders a customer's active subscriptions with view details and view all actions. Use it when you want to embed subscription management into your product.

---

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

---

## Overview

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

Each subscription row can show a view details button. You can also cap the number of subscriptions shown and optionally display a "View all" button.

## Mount the component

**`Subscriptions list component`**

```js Subscriptions 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('subscriptions-list', {
    container: '#sdk-root',
    portalObject: customerPortalObject,
    configuration: {
        showViewDetailsButton: true,
        showViewAllButton: true,
    },
});

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

## Configuration

| Option                  | Type      | Default | Description                                                                 |
| ----------------------- | --------- | ------- | --------------------------------------------------------------------------- |
| `maxItems`              | `number`  |         | Maximum number of subscriptions shown.                                      |
| `showViewAllButton`     | `boolean` |         | Show a "View all" button when there are more subscriptions than `maxItems`. |
| `showViewDetailsButton` | `boolean` |         | Show a button to view subscription details.                                 |

## Events

Subscriptions list fires `action-request` DOM events when the customer interacts with subscription actions.

**`Handling action requests`**

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

    switch (action) {
        case 'view-subscription-details':
            navigate(`/subscriptions/${data.subscriptionId}`);
            break;
        case 'view-all-subscriptions':
            navigate('/subscriptions');
            break;
    }
});
```

| Event                       | Payload                      | Description                                    |
| --------------------------- | ---------------------------- | ---------------------------------------------- |
| `view-subscription-details` | `{ subscriptionId: string }` | Customer clicked to view subscription details. |
| `view-all-subscriptions`    | none                         | Customer clicked to view all subscriptions.    |