UI SDK

Getting Started

Installation

npm 

npm install @alviere/ui

CDN

Prebuilt bundles are served from the Alviere CDN. Use versioned URLs for integrity-pinned deployments, or latest for always-current:

https://js.prd.alvierecdn.com/ui/{version}/
https://js.prd.alvierecdn.com/ui/latest/

Dev/staging builds are at js.dev.alvierecdn.com with the same path structure.

For the Web Components bundle, load it via a <script> tag with the published SRI hash:

<script
  type="module"
  src="https://js.prd.alvierecdn.com/ui/{version}/web-components.js"
  integrity="sha384-..."
  crossorigin="anonymous"
></script>

The SRI hash for each release is published alongside the bundle at web-components.js.sri.

Usage

Option 1: Web Components (Vanilla HTML/JS) 

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Alviere UI Demo</title>
    <script src="node_modules/@alviere/ui/dist/web-components.js"></script>
  </head>
  <body>
    <alviere-create-consumer-account
      jwt="your-jwt-token"
      business-uuid="your-business-uuid"
      public-certificate="retrieved-public-certificate"
      public-certificate-id="retrieved-public-certificate-id"
      debug="true"
    ></alviere-create-consumer-account>

    <script>
      const el = document.querySelector('alviere-create-consumer-account');

      el.addEventListener('account', event => {
        console.log('Account:', event.detail);
      });

      el.addEventListener('form-success', event => {
        console.log('Form success:', event.detail);
      });

      el.addEventListener('form-error', event => {
        console.error('Form error:', event.detail);
      });
    </script>
  </body>
</html>

If you are using a bundler (Vite/Webpack/Next), register web components with:

import '@alviere/ui/web-components';

Option 2: Svelte Components 

<script lang="ts">
  import { CreateConsumerAccount } from '@alviere/ui';

  const jwt = 'your-jwt-token';
  const businessUuid = 'your-business-uuid';
</script>

<CreateConsumerAccount
  {jwt}
  {businessUuid}
  publicCertificate="retrieved-public-certificate"
  publicCertificateId="retrieved-public-certificate-id"
  debug={true}
  on:account={(event) => console.log('Account:', event.detail)}
  on:form-success={(event) => console.log('Form success:', event.detail)}
  on:form-error={(event) => console.error('Form error:', event.detail)}
/>

Available Components

Input Components

Inputs

Form Components

Forms

Flow Components

Flows

Element Components

Elements

Authentication and Configuration

Authentication

Authentication is backend-to-backend and contract-based. After successful authentication you typically receive:

  • JWT
  • Public certificate
  • Public certificate ID

JWT

All forms and flows require a valid JWT token.

Example claims:

{
  "api_domain": "https://api.dev.alviere.com",
  "sub": "account UUID",
  "exp": 1717526400
}

Business UUID

Most onboarding/payment components require a business context:

  • Web Components: business-uuid
  • Svelte Components: businessUuid

Debugging

Debug logs are stripped in production builds. Use debug mode in development/non-production builds.

<alviere-create-consumer-account debug="true"></alviere-create-consumer-account>

Troubleshooting

  1. Components not rendering: confirm node_modules/@alviere/ui/dist/web-components.js is loaded, or import '@alviere/ui/web-components' runs before component usage.
  2. Auth errors: verify JWT validity and claims.
  3. Event handling issues: listen for standardized events (form-success, form-error, account, etc.) on the host element.

Next steps

Form Components Link to a page in the guide Flow Components Link to a page in the guide Events Link to a page in the guide Customization Link to a page in the guide
Previous
Overview
Next
Elements