Subscriptions list | Solvimon

The Subscriptions list component renders a customer’s active subscriptions with cancel, renew, and view actions. Use it when you want to embed subscription management into your product.

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, a cancel button, and a renew button, all configurable independently. You can also cap the number of subscriptions shown and optionally display a “View all” button.

Mount the component

Subscriptions list component

import { createSolvimonCore } from '@solvimon/sdk/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,
        showCancelButton: true,
        showRenewButton: true,
    },
});
window.addEventListener('beforeunload', () => {
    unmount?.();
});

Configuration

Option	Type	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.
`showCancelButton`	`boolean`	Show a button to cancel a subscription.
`showRenewButton`	`boolean`	Show a button to renew a subscription.

Events

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

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 'cancel-subscription':
            openCancelDialog(data.subscriptionId);
            break;
        case 'renew-subscription':
            openRenewDialog(data.subscriptionId);
            break;
        case 'view-all-subscriptions':
            navigate('/subscriptions');
            break;
    }
});

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