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

# Billing information

The Billing information component renders a customer's billing address and details. Use it when you want to display or let customers manage their billing information in your product.

---

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

---

## Overview

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

When `showEditButton` is enabled, the component fires an `edit-billing-information` action request when the customer clicks the button. Your app handles the edit flow.

## Mount the component

**`Billing information component`**

```js Billing information 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('billing-information', {
    container: '#sdk-root',
    portalObject: customerPortalObject,
    configuration: {
        showEditButton: true,
    },
});

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

## Configuration

| Option           | Type      | Default | Description                                               |
| ---------------- | --------- | ------- | --------------------------------------------------------- |
| `showEditButton` | `boolean` |         | Show a button to edit the customer's billing information. |

## Events

**`Handling action requests`**

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

    if (action === 'edit-billing-information') {
        openEditBillingInformationFlow();
    }
});
```

| Event                      | Payload | Description                                           |
| -------------------------- | ------- | ----------------------------------------------------- |
| `edit-billing-information` | none    | Customer clicked the edit billing information button. |