Frontend ComponentsUI components

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

Configuration

OptionTypeDefaultDescription
showEditButtonbooleanShow a button to edit the customer’s billing information.

Events

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