Use sumsub web SDK for KYC form without access token generation #1

Merged
nabarun merged 6 commits from ag-sumsub-integration into kyc-integration 2024-07-25 13:28:23 +00:00
2 changed files with 30 additions and 9 deletions
Showing only changes of commit 89e3e2704a - Show all commits

View File

@ -16,8 +16,12 @@ function App() {
<WalletConnectProvider> <WalletConnectProvider>
<Routes> <Routes>
<Route path="/" element={<ConnectWallet />} /> <Route path="/" element={<ConnectWallet />} />
<Route
path="/user-verification"
element={<UserVerification />}
></Route>
<Route element={<SignPageLayout />}> <Route element={<SignPageLayout />}>
<Route path="/sign-with-nitro-key" element={<SignWithNitroKey />} /> <Route path="/sign-with-nitro-key/:userId" element={<SignWithNitroKey />} />
<Route <Route
path="/sign-with-cosmos/:cosmosAddress/:ethSignature" path="/sign-with-cosmos/:cosmosAddress/:ethSignature"
element={<SignWithCosmos />} element={<SignWithCosmos />}
@ -26,10 +30,6 @@ function App() {
path="/onboarding-success/:cosmosAddress" path="/onboarding-success/:cosmosAddress"
element={<OnboardingSuccess />} element={<OnboardingSuccess />}
></Route> ></Route>
<Route
path="/user-verification"
element={<UserVerification />}
></Route>
</Route> </Route>
<Route path="*" element={<PageNotFound />} /> <Route path="*" element={<PageNotFound />} />
</Routes> </Routes>

View File

@ -1,14 +1,18 @@
import React from 'react' import React, { useState } from 'react'
import { useNavigate } from 'react-router-dom';
import { Box, Typography } from '@mui/material' import { Box, Typography } from '@mui/material'
import SumsubWebSdk from '@sumsub/websdk-react' import SumsubWebSdk from '@sumsub/websdk-react'
const UserVerification = () => { const UserVerification = () => {
const [userId, setUserId] = useState<String>('');
const navigate = useNavigate();
const config = { const config = {
lang: "en", //language of WebSDK texts and comments (ISO 639-1 format) lang: "en", //language of WebSDK texts and comments (ISO 639-1 format)
// email: applicantEmail,
// phone: applicantPhone,
theme: "light", theme: "light",
} }
@ -17,15 +21,31 @@ const UserVerification = () => {
adaptIframeHeight: true adaptIframeHeight: true
} }
// TODO: Implement
const accessTokenExpirationHandler = async () => { const accessTokenExpirationHandler = async () => {
alert("Please renew token");
return "Token expired"; return "Token expired";
} }
const accessToken = { const accessToken = {
"token": process.env.REACT_APP_SUMSUB_TOKEN, "token": process.env.REACT_APP_SUMSUB_TOKEN!,
"userId": "deepstack1234" "userId": "deepstack1234"
} }
const messageHandler = (event: any, payload: any ) => {
if (event === 'idCheck.onApplicantLoaded'){
setUserId(payload.applicantId)
}
if (event === 'idCheck.onApplicantSubmitted'){
console.log('Application is submitted');
navigate(`/sign-with-nitro-key/${userId}`);
}
console.log(event);
console.log("Payload is ", payload);
}
return ( return (
<> <>
<Box <Box
@ -46,6 +66,7 @@ const UserVerification = () => {
expirationHandler={accessTokenExpirationHandler} expirationHandler={accessTokenExpirationHandler}
config={config} config={config}
options={options} options={options}
onMessage={messageHandler}
/> />
</> </>
) )