Frontend ComponentsUI components

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.

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
1import { createSolvimonCore } from '@solvimon/sdk/core';
2
3// Generated by your backend via the Solvimon API.
4const customerPortalObject = {
5    object_type: 'PORTAL_URL',
6    id: 'purl_example',
7    type: 'CUSTOMER_PORTAL',
8    customer_id: 'cust_example',
9    token: 'replace-with-a-real-portal-token',
10    status: 'PUBLISHED',
11};
12
13const solvimon = createSolvimonCore({
14    environment: 'TEST',
15    locale: 'en-US',
16});
17
18const unmount = solvimon.createComponent('payment-method-form', {
19    container: '#sdk-root',
20    portalObject: customerPortalObject,
21    configuration: {
22        variant: 'TOKENIZE',
23        successRedirectUrl: 'https://yourapp.com/payment-methods',
24    },
25});
26
27window.addEventListener('beforeunload', () => {
28    unmount?.();
29});

Configuration

OptionTypeRequiredDescription
variant'TOKENIZE' | 'AUTHORIZE'NoForm mode. TOKENIZE saves the payment method, AUTHORIZE charges immediately. Defaults to TOKENIZE.
invoiceIdstringNoAssociate the payment method with a specific invoice.
amountAmountRequired for AUTHORIZEThe amount to charge.
contextobjectRequired for AUTHORIZEAuthorization context required by the payment provider.
selectedOptionstringNoPre-select a payment method option.
successRedirectUrlstringNoURL to redirect the customer to after a successful submission.
countryCodestringNoTwo-letter country code used to filter available payment options.
forceStorePaymentMethodbooleanNoForce the payment method to be stored even in AUTHORIZE mode.

Events

This component does not fire any events.