React SDK
Install and use the Notus React SDK
Install
pnpm add @notus-api/react-sdk
Usage
import { Liveness } from '@notus-api/react-sdk'
export default function KycLiveness() {
return (
<div style={{ width: '100%', height: 600 }}>
<Liveness sessionId="<SESSION_ID>" />
</div>
)
}
With event callbacks
import { Liveness } from '@notus-api/react-sdk'
export default function KycLiveness() {
return (
<Liveness
sessionId="<SESSION_ID>"
onSuccess={() => console.log('KYC liveness completed')}
onError={(e) => console.error('KYC liveness error', e)}
/>
)
}
Theming
You can customize the UI colors with the theme
prop:
<Liveness
sessionId="<SESSION_ID>"
language="en"
theme={{
primaryColor: '#111827',
primaryTextColor: '#FFFFFF',
backgroundColor: '#0B1220',
textColor: '#E5E7EB',
disabledColor: '#4B5563',
disabledTextColor: '#9CA3AF',
}}
/>
Supported theme fields: primaryColor
, primaryTextColor
, backgroundColor
, textColor
, disabledColor
, disabledTextColor
.
Language
Set the interface language via language
prop: 'en' | 'pt'
(default 'en'
).
Example project
See a complete example app here: notus-api-examples/liveness-kyc-sdk-notus-api