Billing information | Solvimon

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

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('billing-information', {
    container: '#sdk-root',
    portalObject: customerPortalObject,
    configuration: {
        showEditButton: true,
    },
});
window.addEventListener('beforeunload', () => {
    unmount?.();
});

Configuration

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

Events

Handling action requests

document.addEventListener('action-request', (event) => {
    const { action } = event.detail;
    if (action === 'edit-billing-information') {
        openEditBillingInformationFlow();
    }
});

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