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

# Payment method form

The Payment method form component renders a form for adding or authorizing a payment method. Use it when you want to let customers save a new payment method or complete a payment directly in your product.

---

![](/_fern-img/033fb72e3ab4969246f4c67f7d1de78844706ca52d8fd7006c4f6be604d0721e.webp)

---

## Overview

Payment method form is driven by a `portalObject` your backend generates for a specific customer. The SDK uses it to load the available payment options and handle the submission. Your frontend never handles API keys directly.

The component supports two variants controlled by `configuration.variant`:

* `TOKENIZE` (default) — saves the payment method for future use without charging the customer.
* `AUTHORIZE` — charges the customer immediately. Requires `amount` and `context`.

## Mount the component

**`Payment method form component`**

```js Payment method form 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('payment-method-form', {
    container: '#sdk-root',
    portalObject: customerPortalObject,
    configuration: {
        variant: 'TOKENIZE',
        successRedirectUrl: 'https://yourapp.com/payment-methods',
    },
});

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

## Configuration

| Option                    | Type                          | Required                 | Description                                                                                              |
| ------------------------- | ----------------------------- | ------------------------ | -------------------------------------------------------------------------------------------------------- |
| `variant`                 | `'TOKENIZE'` \| `'AUTHORIZE'` | No                       | Form mode. `TOKENIZE` saves the payment method, `AUTHORIZE` charges immediately. Defaults to `TOKENIZE`. |
| `invoiceId`               | `string`                      | No                       | Associate the payment method with a specific invoice.                                                    |
| `amount`                  | `Amount`                      | Required for `AUTHORIZE` | The amount to charge.                                                                                    |
| `context`                 | `object`                      | Required for `AUTHORIZE` | Authorization context required by the payment provider.                                                  |
| `selectedOption`          | `string`                      | No                       | Pre-select a payment method option.                                                                      |
| `successRedirectUrl`      | `string`                      | No                       | URL to redirect the customer to after a successful submission.                                           |
| `countryCode`             | `string`                      | No                       | Two-letter country code used to filter available payment options.                                        |
| `forceStorePaymentMethod` | `boolean`                     | No                       | Force the payment method to be stored even in `AUTHORIZE` mode.                                          |

## Events

This component does not fire any events.