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

# Overview

The Solvimon Frontend SDK lets you embed billing UI elements directly into your product: invoices, subscriptions, checkout, and payment methods, without building any of it yourself.

---

![](/_fern-img/9f656f95c0e3f7503744e21fabba6346d3864b5945d578da9bcaa951496de57e.webp)

---

## What's in the SDK

The SDK exposes two types of UI:

**Screens** are full-page compositions. Drop one in when you want a complete billing experience with minimal setup.

| Screen              | What it renders                                       |
| ------------------- | ----------------------------------------------------- |
| `customer-overview` | A customer's active subscriptions and payment methods |
| `checkout`          | A full checkout flow for initiating a subscription    |

**Components** are single-responsibility widgets. Use them when you need more control over layout or want to compose your own billing page.

| Component                  | What it renders                                                      |
| -------------------------- | -------------------------------------------------------------------- |
| `invoices-list`            | Paginated list of invoices with pay and view actions                 |
| `invoice`                  | A single invoice with line items, billing info, and payment attempts |
| `invoice-details`          | Invoice details by ID                                                |
| `subscriptions-list`       | A customer's subscriptions with cancel, renew, and view actions      |
| `billing-information`      | Customer billing address and details                                 |
| `customer-payment-methods` | Saved payment methods with add and manage actions                    |
| `customer-wallet-balances` | Customer wallet and credit balances                                  |
| `payment-history`          | Payment attempts for a specific invoice                              |

## How it works

Every screen and component requires a `portalObject`: a short-lived token your backend generates via the Solvimon API. The SDK uses it to authenticate requests on behalf of the customer. Your frontend never handles API keys directly.

The typical flow:

1. Customer loads a page in your product.
2. Your backend calls the Solvimon API to create a portal URL for that customer.
3. Your frontend passes the portal URL to the SDK when mounting the screen or component.

## Action requests

Instead of navigating internally, the SDK fires `action-request` custom DOM events that bubble up to your app. You decide what happens when a customer clicks "Pay invoice" or "Cancel subscription"; the SDK just tells you it happened.

Actions include: `view-invoice`, `pay-invoice`, `view-subscription-details`, `cancel-subscription`, `renew-subscription`, `edit-billing-information`, `add-payment-method`, and more.