Use sumsub web SDK for KYC form without access token generation #1
10
src/App.tsx
10
src/App.tsx
@ -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>
|
||||||
|
@ -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}
|
||||||
/>
|
/>
|
||||||
</>
|
</>
|
||||||
)
|
)
|
||||||
|
Loading…
Reference in New Issue
Block a user