Subscription schedules

The Subscription schedules component renders the schedule of upcoming plan changes for a specific subscription. Use it when you want to show customers what changes are planned for their subscription.

Overview

Subscription schedules is driven by a portalObject your backend generates for a specific customer. The SDK uses it to load the schedule data for the given subscription. Your frontend never handles API keys directly.

Mount the component

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

Configuration

Option	Type	Required	Description
`subscriptionId`	`string`	Yes	The ID of the subscription whose schedules 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('subscription-schedules', {
19	container: '#sdk-root',
20	portalObject: customerPortalObject,
21	configuration: {
22	subscriptionId: 'sub_example',
23	},
24	});
25
26	window.addEventListener('beforeunload', () => {
27	unmount?.();
28	});