Skip to main content

Usage

Learn how to use the Azakaw Web SDK in your application.

Authentication​

The SDK does not take API credentials. Authentication is performed via a session-id issued by your backend:

  1. Your backend calls the Create Session endpoint with your AppKey and the customer details, and receives a sessionId.
  2. Your backend hands the sessionId to the browser (page render, API response, cookie — your choice).
  3. You pass that sessionId into the <az-customer-onboarding> element as the session-id attribute.

Sessions can be revoked with the Invalidate Session endpoint — call it once onboarding completes so the same link cannot be reopened.

Basic Implementation​

The simplest way to implement the SDK is:

<az-customer-onboarding
  session-id="your-session-id"
  host-origin="http://localhost:4200"
  environment="Sandbox"
  region="UAE"
></az-customer-onboarding>

Event Handling​

You can listen for the onboarding completion event:

const onboardingElement = document.querySelector('az-customer-onboarding');

onboardingElement.addEventListener('onboardingCompleted', () => {
  console.log('Customer onboarding completed');
});

Full Implementation Example​

Here's a complete example showing how to integrate the SDK:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Azakaw KYC Integration</title>
  </head>
  <body>
    <div class="container">
      <az-customer-onboarding
        session-id="your-session-id"
        host-origin="http://localhost:4200"
        environment="Sandbox"
        region="UAE"
      ></az-customer-onboarding>
    </div>

    <script type="module">
      // Initialize the SDK
      import '@azakawcompliance/azakaw-web-sdk';

      // Get reference to the element
      const kycElement = document.querySelector('az-customer-onboarding');

      // Handle completion
      kycElement.addEventListener('onboardingCompleted', () => {
        console.log('Onboarding completed successfully');
        // Add your completion logic here
      });
    </script>
  </body>
</html>

The inline script must be type="module" — a bare import in a classic script throws Uncaught SyntaxError: Cannot use import statement outside a module.

The bare specifier '@azakawcompliance/azakaw-web-sdk' is resolved by your bundler. If you are opening a plain HTML file with no build step, point the import at the bundled file instead:

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

Layout Options​

Three optional boolean attributes control how the onboarding flow is presented:

<az-customer-onboarding
  session-id="your-session-id"
  host-origin="http://localhost:4200"
  environment="Sandbox"
  region="UAE"
  auto-resize="true"
  hide-sidebar="true"
  hide-onboarding-sections="true"
></az-customer-onboarding>
  • auto-resize — the iframe height is resized dynamically to match its content, so the host page does not need a fixed-height container.
  • hide-sidebar — hides the sidebar on the onboarding page.
  • hide-onboarding-sections — starts the user on the first page of the form; the onboarding sections page is only shown once onboarding is complete.

See the API Reference for defaults.

Best Practices​

  1. Initialization

    • Import the SDK before using the component
    • Ensure host-origin matches your application's URL
    • Handle the onboardingCompleted event

  2. Error Handling

    • Implement error handling for session creation
    • Validate session ID before initialization
    • Handle network connectivity issues

  3. User Experience

    • Place the component in a container with appropriate sizing, or enable auto-resize
    • Consider mobile responsiveness
    • Implement proper loading states

Next Steps​

See the API Reference for detailed information about all available options and events.