Billing information form

The Billing information form component renders an editable form for a customer’s billing address and details. Use it when you want to let customers update their billing information directly in your product.

Overview

Billing information form is driven by a portalObject your backend generates for a specific customer. The SDK uses it to load the customer’s current billing details and handle the update. Your frontend never handles API keys directly.

Mount the component

Billing information form component

1 import { createSolvimonCore } from '@solvimon/sdk/core';
2 
3 // Generated by your backend via the Solvimon API.
4 const 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 
13 const solvimon = createSolvimonCore({
14     environment: 'TEST',
15     locale: 'en-US',
16 });
17 
18 const unmount = solvimon.createComponent('billing-information-form', {
19     container: '#sdk-root',
20     portalObject: customerPortalObject,
21 });
22 
23 window.addEventListener('beforeunload', () => {
24     unmount?.();
25 });

Configuration

This component does not accept any configuration options.

Events

This component does not fire any events.

1	import { createSolvimonCore } from '@solvimon/sdk/core';
2
3	// Generated by your backend via the Solvimon API.
4	const 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
13	const solvimon = createSolvimonCore({
14	environment: 'TEST',
15	locale: 'en-US',
16	});
17
18	const unmount = solvimon.createComponent('billing-information-form', {
19	container: '#sdk-root',
20	portalObject: customerPortalObject,
21	});
22
23	window.addEventListener('beforeunload', () => {
24	unmount?.();
25	});