Customer overview | Solvimon

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.

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

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

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.