3. QuadrataKyb Package

<QuadrataKyb /> Component

import { QuadClientKybConfig, QuadrataKyb } from '@quadrata/kyb-react';

const MyComponent = () => {
    <QuadrataKyb
        accessToken={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

Prop	Description	Type
accessToken (required)	JWT access token. See "API Authentication" page	string
children (optional)	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.	string
config (required)	The configuration object. See the "Configuration Object" below.	QuadClientKybConfig
darkMode (optional)	Toggle between dark and light mode. Default: false	boolean
onHide (optional)	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.	QuadrataOnApplicationEndCallback Statuses: - APPROVED - DENIED - INITIALIZED - IN_REVIEW
onPageChange (optional)	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

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 component
const quadKybConfig: 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

Property	Description	Type
_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.	Page
apiUrl	string value to set the api endpoint Possible values: https://int.quadrata.com/api/v1 'https://prod.quadrata.com/api/v1'	string
contactEmail (optional)	Contact email address Default: [e-mail]	string
discordUrl (optional)	Discord link URL Default: Quadrata Discord Server	string
environment (optional)	Possible values: sandbox production Default: sandbox Never set to sandbox in production. tip: The sandbox environment will not perform real verifications.	QuadClientEnvironment
protocolName (required)	Your protocol name Example: "Acme, Inc."	string
showSocialButtons (optional)	Show or hide the social media share buttons on the "mint complete" page. Default: true	boolean

NOTE: Contact Quadrata via Discord or email to request API keys.