@azakawcompliance/azakaw-web-sdk

v1.1.0

Published

6 days ago

Azakaw web sdk includes the web components required for customer onboarding.

0High
0Medium
0Low

azakaw

tareqazakaw

maaz-siddiqui-azakaw

Overview

The Azakaw web SDK allows you to add customer onboarding in your web application using web components. It provides you with a custom element that encapsulates the functionality of the customer onboarding.

Installation

npm install @azakawcompliance/azakaw-web-sdk

Important Note

The web components are registered on the web page itself, so it is necessary that the library is imported on your website before using it in your code.

Usage

Import @azakawcompliance/azakaw-web-sdk in your main javascript file.

import './node_modules/@azakawcompliance/azakaw-web-sdk/dist/main.js';

In the HTML file you can then use the customer onboarding element, for example:

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="index.js" type="module"></script>
  </head>
  <body>
    <az-customer-onboarding
      session-id="d43151a9-a031-4067-a4c7-21baee51cfa3"
      host-origin="http://localhost:4200"
      environment="Sandbox"
      region="KSA"
    ></az-customer-onboarding>
  </body>
</html>

React

Add the type declaration for JSX in the global.d.ts file

Add this single line to your global.d.ts file (or any .d.ts covered by your tsconfig.json include):

/// <reference types="@azakawcompliance/azakaw-web-sdk/react" />

This registers <az-customer-onboarding> on React's JSX types, so the element and all of its attributes — including the SdkRegion / SdkEnvironment enum values — are type-checked and autocompleted.

Import the package and use the custom element inside your React component.

import { useEffect, useRef } from 'react';
import './App.css';
import '@azakawcompliance/azakaw-web-sdk';
import {
  CustomerOnboardingWebComponent,
  SdkEnvironment,
  SdkRegion,
} from '@azakawcompliance/azakaw-web-sdk';

function App() {
  const ref = useRef<CustomerOnboardingWebComponent>(null);

  useEffect(() => {
    if (!ref?.current) return;

    const azakawElemRef = ref?.current;

    const onOnboardingComplete = () => {
      console.log('Completed onboarding.');
    };

    azakawElemRef?.addEventListener(
      'onboardingCompleted',
      onOnboardingComplete
    );

    return () => {
      azakawElemRef?.removeEventListener(
        'onboardingCompleted',
        onOnboardingComplete
      );
    };
  }, []);

  return (
    <>
      <div className='wrapper'>
        <az-customer-onboarding
          ref={ref}
          session-id='7c035899-083c-4d4e-8d2d-5de92ceaa73d'
          host-origin='http://localhost:5173'
          environment={SdkEnvironment.Sandbox}
          region={SdkRegion.KSA}
        ></az-customer-onboarding>
      </div>
    </>
  );
}

export default App;

Angular

Add CUSTOM_ELEMENTS_SCHEMA in the schemas property of AppModule

import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, AppRoutingModule],
  providers: [],
  bootstrap: [AppComponent],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class AppModule {}

Import the package and attach any event listeners to the customer onboarding web component

import { Component, ElementRef, OnDestroy, ViewChild } from '@angular/core';
import '@azakawcompliance/azakaw-web-sdk';
import { CustomerOnboardingWebComponent } from '@azakawcompliance/azakaw-web-sdk';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent implements OnDestroy {
  @ViewChild('customerOnboardingElem')
  customerOnboardingElem!: ElementRef<CustomerOnboardingWebComponent>;

  ngAfterViewInit(): void {
    this.customerOnboardingElem?.nativeElement?.addEventListener(
      'onboardingCompleted',
      this.onOnboardingCompleted
    );
  }

  ngOnDestroy(): void {
    this.customerOnboardingElem?.nativeElement?.removeEventListener(
      'onboardingCompleted',
      this.onOnboardingCompleted
    );
  }

  private onOnboardingCompleted = () => {
    console.log('Completed onboarding');
  };
}

Use the custom element in your template file


<div class="wrapper">
  <az-customer-onboarding
    session-id="7c035899-083c-4d4e-8d2d-5de92ceaa73d"
    host-origin="http://localhost:4201"
    environment="Sandbox"
    region="KSA"
  ></az-customer-onboarding>
</div>

API

Inputs

| Input | Type | Default | Required | Description | | ------------------------ | ------------------------- | --------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | session-id | string | null | yes | Session id against which the user onboarding will be performed. | | host-origin | string | null | yes | The url on which your web application is hosted. | | auto-resize | boolean | false | no | The Iframe height will resized dynamically based on the content that is shown inside it. | | hide-sidebar | boolean | false | no | It will hide the sidebar on the user onboarding page. | | hide-onboarding-sections | boolean | false | no | It will start the user onboarding from the first page of the form, user will only be allowed to see the onboarding sections page once the onboarding is completed. | | environment | SdkEnvironment (Sandbox | Production) | Sandbox | yes | Target environment for the onboarding session. Case-sensitive. | | region | SdkRegion (KSA | Qatar | UAE) | UAE | no | Region in which the onboarding session is processed; selects the portal domain. Case-sensitive; omit to use UAE. |

Events

| Event name | Returns | Description | | ------------------- | ------- | ----------------------------------------- | | onboardingCompleted | void | Fired when user completes the onboarding. |