Frontend Components

Quickstart

Install the SDK and render your first checkout screen in under 10 minutes.

Install the package

The SDK is hosted on a private GitLab registry. Add a .npmrc file to the root of your project with the following:

.npmrc
$@solvimon:registry=https://gitlab.com/api/v4/projects/38958827/packages/npm/
$//gitlab.com/api/v4/projects/38958827/packages/npm/:_authToken=${NPM_TOKEN}
$always-auth=true

Replace NPM_TOKEN with your actual token, or set it as an environment variable.

Then install the package:

$npm install @solvimon/sdk

Render the checkout screen

The example below mounts the checkout screen into a #sdk-root container.

The portalObject must come from your backend. It’s a PORTAL_URL resource you create via the Solvimon API for the customer initiating the checkout. Replace the placeholder values with a real one.

Checkout example
1<!doctype html>
2<html lang="en">
3    <head>
4        <meta charset="UTF-8" />
5        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6        <title>Solvimon SDK JavaScript Example</title>
7    </head>
8    <body>
9        <main>
10            <section class="card">
11                <div id="sdk-root"></div>
12            </section>
13        </main>
14
15        <script type="module">
16            import { createSolvimonCore } from '@solvimon/sdk/core';
17
18            const container = document.getElementById('sdk-root');
19
20            if (!container) {
21                throw new Error('Missing #sdk-root container');
22            }
23
24            // Replace these placeholder values with a real checkout portal object from your backend.
25            const checkoutPortalObject = {
26                object_type: 'PORTAL_URL',
27                id: 'purl_example',
28                type: 'INIT_PRICING_PLAN_SUBSCRIPTION',
29                pricing_plan_id: 'ppl_example',
30                token: 'replace-with-a-real-portal-token',
31                status: 'PUBLISHED',
32            };
33
34            const solvimon = createSolvimonCore({
35                environment: 'TEST',
36                locale: 'en-US',
37                logLevel: 'info',
38                branding: {
39                    colors: {
40                        primary: '#1d4ed8',
41                        secondary: '#0f172a',
42                    },
43                },
44            });
45
46            const unmount = solvimon.createScreen('checkout', {
47                container,
48                portalObject: checkoutPortalObject,
49                configuration: {
50                    email: 'john@example.com',
51                    countryCode: 'NL',
52                },
53            });
54
55            window.addEventListener('beforeunload', () => {
56                unmount?.();
57            });
58        </script>
59    </body>
60</html>