React SDK
Install and use the Notus React SDK
Install
pnpm add @notus-api/react-sdkUsage
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