Web SDK

Framework integrations

Initialize and open the Web SDK modal in browser applications and JavaScript frameworks.

The Web SDK is framework-neutral. Call init() once to prepare the session, then open() when the customer should see the modal. No container element is required.

Vanilla JavaScript

main.js

javascript

import { ZippyKycSdk } from "@zippykyc/web-sdk";

const startButton = document.querySelector("#start-kyc");

ZippyKycSdk.init({
  inquiryId: "147f10c6-d42c-4c31-9518-a14d582bde6b",
  environment: "staging",
  onComplete: ({ inquiryId, referenceId }) => {
    console.log("Verification complete", { inquiryId, referenceId });
  },
  onClose: () => {
    console.log("User dismissed the modal");
  },
  onError: ({ code, message }) => {
    console.error(code, message);
  },
});

startButton?.addEventListener("click", () => {
  ZippyKycSdk.open();
});

React

KycVerification.tsx

tsx

import { useEffect } from "react";
import { ZippyKycSdk } from "@zippykyc/web-sdk";

export function KycVerification() {
  useEffect(() => {
    ZippyKycSdk.init({
      inquiryId: "147f10c6-d42c-4c31-9518-a14d582bde6b",
      environment: "staging",
      onComplete: ({ inquiryId, referenceId }) => {
        console.log("Verification complete", { inquiryId, referenceId });
      },
      onClose: () => {
        console.log("User dismissed the modal");
      },
      onError: ({ code, message }) => {
        console.error(code, message);
      },
    });
  }, []);

  return (
    <button type="button" onClick={() => ZippyKycSdk.open()}>
      Start verification
    </button>
  );
}

Angular

kyc-verification.component.ts

typescript

import { Component, OnInit } from "@angular/core";
import { ZippyKycSdk } from "@zippykyc/web-sdk";

@Component({
  selector: "app-kyc-verification",
  standalone: true,
  template: `
    <button type="button" (click)="openKyc()">
      Start verification
    </button>
  `,
})
export class KycVerificationComponent implements OnInit {
  ngOnInit() {
    ZippyKycSdk.init({
      inquiryId: "147f10c6-d42c-4c31-9518-a14d582bde6b",
      environment: "staging",
      onComplete: (result) => console.log(result),
      onClose: () => console.log("dismissed"),
      onError: (error) => console.error(error),
    });
  }

  openKyc() {
    ZippyKycSdk.open();
  }
}

Vue

KycVerification.vue

vue

<script setup lang="ts">
import { onMounted } from "vue";
import { ZippyKycSdk } from "@zippykyc/web-sdk";

onMounted(() => {
  ZippyKycSdk.init({
    inquiryId: "147f10c6-d42c-4c31-9518-a14d582bde6b",
    environment: "staging",
    onComplete: (result) => console.log(result),
    onClose: () => console.log("dismissed"),
    onError: (error) => console.error(error),
  });
});

function openKyc() {
  ZippyKycSdk.open();
}
</script>

<template>
  <button type="button" @click="openKyc">Start verification</button>
</template>

Next.js

Initialize the SDK from a Client Component. Do not call SDK methods during server rendering.

KycVerification.tsx

tsx

"use client";

import { useEffect } from "react";
import { ZippyKycSdk } from "@zippykyc/web-sdk";

export default function KycVerification() {
  useEffect(() => {
    ZippyKycSdk.init({
      inquiryId: "147f10c6-d42c-4c31-9518-a14d582bde6b",
      environment: "staging",
      onComplete: (result) => console.log(result),
      onClose: () => console.log("dismissed"),
      onError: (error) => console.error(error),
    });
  }, []);

  return (
    <button type="button" onClick={() => ZippyKycSdk.open()}>
      Start verification
    </button>
  );
}

Web SDK overview

Configuration and lifecycle