> For the complete documentation index, see [llms.txt](https://docs.verified.network/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.verified.network/reference/verified-sdk/know-your-customer/using-the-kyc-plugin.md).

# Using the KYC plugin

Use the KYC Plugin when onboarding new clients.

This integration embeds the KYC flow into your application, allowing users to complete identity verification. Once the user submits their information and the verification is completed, their details are automatically registered with Verified Network.

Recommended use case:

1. Onboarding new customers.
2. Collecting KYC information from users who have not yet been registered with your organization.
3. Providing a seamless verification experience directly within your application.

Registering existing users? See the [Webhook Integration Guide](/reference/verified-sdk/know-your-customer/using-kyc-webhooks.md).

\
Please note that the Sumsub app token needs to be generated by the Verified Network support team for any third party integration that uses the KYC/AML process of the Verified Network. Contact Verified Team on Discord: <https://discord.com/invite/N5xYeePjmt>\
\
The app tokens from Verified Team are needed to make request to Sumsub API to generate access token that the KYC plugin needs to work. To generate access token from Sumsub Api:

```javascript
/** install ethers, axios and crypto-js: npm i ethers axios crypto-js **/

//Import ethers, axios e.t.c
import { ethers } from 'ethers';
import axios from 'axios';
import hmacSHA256 from 'crypto-js/hmac-sha256';
import hex from 'crypto-js/enc-hex';

const abiCoder = new ethers.utils.AbiCoder();
const userAddress = 'address of user for kyc';
const networkId = 'chain id(string) of network connected to';
const hashedAddress = abiCoder.encode(
  ["string", "string"],
  [userAddress, networkId]
);
const userId = hashedAddress + Math.random().toString(36).substr(2, 9); //id verified uses
const baseUrl = 'https://api.sumsub.com'; //sumsub base url. note: without '/'
const secondUrl = `/resources/accessTokens?userId=${userId}&levelName=contact-details&ttlInSecs=1200`; //note: starts with '/'
const sumsubAppToken = 'your sumsub app token'; //contact Verified Network Team on Discord to get this
const sumsubSecretKey = 'your sumsub secret key'; //contact Verified Network Team on Discord to get this
const ts = Math.floor(Date.now() / 1000); //format current time
const hmacMessage = ts + "POST" + secondUrl; //combine ts, request method(POST) and second url
const signature = hmacSHA256(hmacMessage, sumsubSecretKey); //hash the message with sumsub secret key

//note: url = baseUrl + secondUrl;
//api url to use is 'https://api.sumsub.com/resources/accessTokens?userId=${userId}&levelName=contact-details&ttlInSecs=1200'
const generateSumsubAccessToken = async (url) => {
  return await axios({
    method: "POST",
    url: url,
    headers: {
      Accept: "application/json",
      "X-App-Token": sumsubAppToken,
      "X-App-Access-Ts": ts,
      "X-App-Access-Sig": hex.stringify(signature), 
    },
  })
    .then((res) => {
      const response = res.data;
      return response.token; //return access token
    })
    .catch((err) => {
      //handle request error
      console.error(`Post request to url: ${url} failed with error: ${err}`);
      return;
    });
};

const url = baseUrl + secondUrl;
const accessToken = await generateSumsubAccessToken(url);
```

Access token above will be used with KYC plugin to handle users KYC Verifications

```javascript
/** install websdk-react: npm i @sumsub/websdk-react --save **/

//Import SumsubWebSdk
import { useState } from "react"
import SumsubWebSdk from '@sumsub/websdk-react'

const [isCompleted, setIsCompleted] = useState(false);

//render/display plugin using html/jsx
const accessToken = 'sumsub access token generated above'
<>
<SumsubWebSdk
  accessToken={accessToken}
  expirationHandler={() => Promise.resolve(accessToken)}
  config={{
    lang: "en",
    i18n: {
      document: {
        subTitles: {
          IDENTITY: "Upload a document that proves your identity",
        },
      },
    },
    onMessage: (type, payload) => {
      console.log("WebSDK onMessage", type, payload);
    },
    //customCss can be configured to best suit UI/UX
    uiConf: {
      customCssStr:
        ":root {\n  --black: #000000;\n   --grey: #F5F5F5;\n  --grey-darker: #B2B2B2;\n  --border-color: #DBDBDB;\n}\n\np {\n  color: var(--black);\n  font-size: 16px;\n  line-height: 24px;\n}\n\nsection {\n  margin: 40px auto;\n}\n\ninput {\n  color: var(--black);\n  font-weight: 600;\n  outline: none;\n}\n\nsection.content {\n  background-color: var(--grey);\n  color: var(--black);\n  padding: 40px 40px 16px;\n  box-shadow: none;\n  border-radius: 6px;\n}\n\nbutton.submit,\nbutton.back {\n  text-transform: capitalize;\n  border-radius: 6px;\n  height: 48px;\n  padding: 0 30px;\n  font-size: 16px;\n  background-image: none !important;\n  transform: none !important;\n  box-shadow: none !important;\n  transition: all 0.2s linear;\n}\n\nbutton.submit {\n  min-width: 132px;\n  background: none;\n  background-color: var(--black);\n}\n\n.round-icon {\n  background-color: var(--black) !important;\n  background-image: none !important;\n}",
    },
    onError: (error) => {
      //log error on console to better explain it
      console.error("WebSDK onError", error);
    },
   }
  }
  options={{ addViewportTag: false, adaptIframeHeight: true 
  }}
  onMessage={(type, payload) => {
    console.log("onMessage", type, payload);
    if (type === "idCheck.applicantStatus") {
    //check kyc review status
      if (
        payload.reviewStatus === "pending" ||
        payload.reviewStatus === "completed"
      ) {
        //status is pending or user has completed verification
        //set a state to keep track of this or redirect/render to new page
        setIsCompleted(true);
      }
    }
  }
  }
  onError={(data) => console.log("onError", data)}
/>
{isCompleted && (
//customise this as helper modal to let users know kyc is completed
<div>KYC Completed. You will receive an email after your KYC submission is approved<div>
)}
</>

```