Skip to main content

Usage

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

Basic Implementation​

The simplest way to implement the SDK is:

<az-customer-onboarding
  session-id="your-session-id"
  host-origin="http://localhost:4200"
></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>
    <script src="index.js" type="module"></script>
  </head>
  <body>
    <div class="container">
      <az-customer-onboarding
        session-id="your-session-id"
        host-origin="http://localhost:4200"
      ></az-customer-onboarding>
    </div>

    <script>
      // 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>

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
    • Consider mobile responsiveness
    • Implement proper loading states

Next Steps​

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