Invoice details

The Invoice details component renders the line items and breakdown of a specific invoice. Use it when you want to show invoice details in isolation, without the full invoice view.

Overview

Invoice details is driven by a portalObject your backend generates for a specific customer, combined with an invoiceId you pass in configuration. The SDK fetches and displays the details for that invoice. Your frontend never handles API keys directly.

Mount the component

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

Configuration

Option	Type	Required	Description
`invoiceId`	`string`	Yes	The ID of the invoice to display.

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