# Using the KYC plugin

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>
)}
</>

```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.verified.network/reference/verified-sdk/know-your-customer/using-the-kyc-plugin.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.