Frontend ComponentsUI components

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

Configuration

OptionTypeRequiredDescription
invoiceIdstringYesThe ID of the invoice whose payment attempts to display.

Events

This component does not fire any events.