For AI agents: a documentation index is available at the root level at /llms.txt and /llms-full.txt. Append /llms.txt to any URL for a page-level index, or .md for the markdown version of any page.
Logo
LoginSandbox
Platform GuidesAPI DocsSDKMCP ServerChangelog
Platform GuidesAPI DocsSDKMCP ServerChangelog
  • Frontend Components
    • Overview
    • Quickstart
    • Core
      • Invoices list
      • Invoice
      • Invoice details
      • Payment history
      • Subscriptions list
      • Subscription schedules
      • Billing information
      • Billing information form
      • Customer payment methods
      • Payment method form
      • Wallet balances
    • Release notes
LoginSandbox
On this page
  • Overview
  • Mount the component
  • Configuration
  • Events
Frontend ComponentsUI components

Invoice

Was this page helpful?
Previous

Invoice details

Next
Built with

The Invoice component renders a single invoice in full detail. Use it when you want to show a customer a specific invoice, including line items, billing information, and payment attempts.

Overview

Invoice 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 that invoice. Your frontend never handles API keys directly.

The component can optionally show a PDF download button, the customer’s billing information, and a list of payment attempts, each of which can be toggled independently.

Mount the component

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

Configuration

OptionTypeRequiredDefaultDescription
invoiceIdstringYesThe ID of the invoice to display.
enableDownloadButtonbooleanNotrueShow a button to download the invoice as PDF.
enableCustomerBillingInformationbooleanNotrueShow the customer’s billing information on the invoice.
enablePaymentAttemptsbooleanNotrueShow the list of payment attempts for the invoice.

Events

This component does not fire any events.