Notus API

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