import { QuadClientKybConfig, QuadrataKyb } from'@quadrata/kyb-react';constMyComponent= () => { <QuadrataKybaccessToken={accessToken} // JWT token obtained by calling /v1/api/login onApplicationEnd={handleOnApplicationEnd} // Optional callback function: triggered when the application reaches an end state (error or completion)
config={quadKybConfig} // Custom Configuration (i.e endpoint, protocol name)onHide={() =>setShowKyb(false)} // Optional callback function: triggered when the modal is closed ></QuadrataKyb> Loading...</QuadClient>}
<QuadrataKyb /> Props
Configuration Object
Pass a configuration object to the config prop:
import { QuadClientEnvironment } from'@quadrata/core-react';import { QuadClientKybConfig, QuadrataKyb } from'@quadrata/kyb-react';// Outside of your react componentconstquadKybConfig:QuadClientKybConfig= { apiUrl:'https://prod.quadrata.com/api/v1',// Testing url: https://int.quadrata.com/api/v1 environment:QuadClientEnvironment.PRODUCTION,// Set to QuadClientEnvironment.SANDBOX for testing environment protocolName:'NewCo',// Set to your company name _debug:false,// Set to 'false' for production environment};// Inside your react component<QuadrataKyb config={quadKybConfig} />
Always define your configuration object outside of your React components to prevent unexpected behavior
NOTE: Contact Quadrata via Discord or email to request API keys.
Overrides the default loader component inside of the form markup. This component will be shown in all loading states during the flow. if not defined, a "Loading..." text will be shown instead.
React.ReactNode
className (optional)
The class name to be appended to the component's root DOM element.
A callback function: triggered when the modal is closed.
onApplicationEnd (optional)
A callback function: triggered when the application reaches an end state - error or completion.
Event object includes status and error properties for additional information.
A callback function: triggered when a page is changed. Passes a PageKyb type string.
tip: Import the PageKyb type from the @quadrata/kyb-react library
(page: PageKyb) => void
_debug
(optional)
When true, debug information will be printed in the console. Never use in production.
boolean
_unsafeForcePage (optional)
Forcing a specific page to be displayed. Useful when styling and testing different pages. Set the _debug prop to true when using.Never use in production.