Payment history

The Payment history component renders the list of payment attempts for a specific invoice. Use it when you want to show a customer what payment attempts have been made against an invoice.

Overview

Payment history 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 all payment attempts for that invoice. Your frontend never handles API keys directly.

Mount the component

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