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

# Customer payment methods

The Customer payment methods component renders a customer's saved payment methods. Use it when you want to let customers view and manage their payment methods in your product.

---

![](/_fern-img/1ad203b7cea30ddee59a55b17fae0f3c1713ef1b98e4d7e34785ba99c116c711.webp)

---

## Overview

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

You can cap the number of methods shown and control whether "View all" and "Add" buttons are displayed. Both buttons fire action requests for your app to handle.

## Mount the component

**`Customer payment methods component`**

```js Customer payment methods 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('customer-payment-methods', {
    container: '#sdk-root',
    portalObject: customerPortalObject,
    configuration: {
        maxItems: 3,
        showViewAllButton: true,
        showAddButton: true,
    },
});

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

## Configuration

| Option              | Type      | Default | Description                                                                          |
| ------------------- | --------- | ------- | ------------------------------------------------------------------------------------ |
| `maxItems`          | `number`  | `3`     | Maximum number of payment methods shown.                                             |
| `showViewAllButton` | `boolean` |         | Show a "View all" button when the customer has more payment methods than `maxItems`. |
| `showAddButton`     | `boolean` |         | Show an "Add" button when the customer has fewer than `maxItems` payment methods.    |

## Events

**`Handling action requests`**

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

    switch (action) {
        case 'view-all-payment-methods':
            navigate('/payment-methods');
            break;
        case 'add-payment-method':
            openAddPaymentMethodFlow();
            break;
    }
});
```

| Event                      | Payload | Description                                   |
| -------------------------- | ------- | --------------------------------------------- |
| `view-all-payment-methods` | none    | Customer clicked to view all payment methods. |
| `add-payment-method`       | none    | Customer clicked to add a new payment method. |