Using the KYC plugin

Using Sumsub Plugin with React

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.gg/xjXQwVTF 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:

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

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