API Reference

Complete reference for the Azakaw Web SDK API.

Component Properties

Inputs

Input	Type	Required	Default	Description
session-id	string	Yes	null	Session ID against which the user onboarding will be performed
host-origin	string	Yes	null	The URL on which your web application is hosted

Events

Event Name	Returns	Description
onboardingCompleted	void	Fired when user completes the onboarding

Types

CustomerOnboardingWebComponent

The main web component interface:

interface CustomerOnboardingWebComponent {
  sessionId: string;
  hostOrigin: string;
  addEventListener(event: 'onboardingCompleted', handler: () => void): void;
  removeEventListener(event: 'onboardingCompleted', handler: () => void): void;
}

Usage with TypeScript

For TypeScript projects, you can import the types directly:

import { CustomerOnboardingWebComponent } from '@azakawcompliance/azakaw-web-sdk';

Component Lifecycle

The web component follows this lifecycle:

1. Component Initialization

   • Validates required properties
   • Sets up event listeners

2. Session Handling

   • Validates session ID
   • Establishes connection

3. Onboarding Process

   • Renders UI
   • Handles user interactions
   • Manages state

4. Completion

   • Fires onboardingCompleted event
   • Cleans up resources

Error States

The component handles various error states:

1. Invalid Session ID

   • Component will show error message
   • Won't proceed with onboarding

2. Network Issues

   • Displays connection error
   • Attempts to reconnect

3. Invalid Host Origin

   • Shows configuration error
   • Prevents initialization

Examples

Basic Implementation

<az-customer-onboarding
  session-id="d43151a9-a031-4067-a4c7-21baee51cfa3"
  host-origin="http://localhost:4200"
></az-customer-onboarding>

With Event Handling

const element = document.querySelector('az-customer-onboarding');
element.addEventListener('onboardingCompleted', () => {
  // Handle completion
});

TypeScript Implementation

import { CustomerOnboardingWebComponent } from '@azakawcompliance/azakaw-web-sdk';

const element: CustomerOnboardingWebComponent = document.querySelector('az-customer-onboarding')!;

const handleComplete = () => {
  console.log('Onboarding completed');
};

element.addEventListener('onboardingCompleted', handleComplete);