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.

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

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', {
19     container: '#sdk-root',
20     portalObject: customerPortalObject,
21     configuration: {
22         showEditButton: true,
23     },
24 });
25 
26 window.addEventListener('beforeunload', () => {
27     unmount?.();
28 });

Configuration

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

Events

Handling action requests

1 document.addEventListener('action-request', (event) => {
2     const { action } = event.detail;
3 
4     if (action === 'edit-billing-information') {
5         openEditBillingInformationFlow();
6     }
7 });

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

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', {
19	container: '#sdk-root',
20	portalObject: customerPortalObject,
21	configuration: {
22	showEditButton: true,
23	},
24	});
25
26	window.addEventListener('beforeunload', () => {
27	unmount?.();
28	});

1	document.addEventListener('action-request', (event) => {
2	const { action } = event.detail;
3
4	if (action === 'edit-billing-information') {
5	openEditBillingInformationFlow();
6	}
7	});