3. QuadrataKyb Package
<QuadrataKyb /> Component
<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)
onConsentGranted={handleConsentGranted} // Optional callback function: triggered when consent is granted
requestPrivacyConsent={true} // Optional boolean to enable privacy consent flow
isPrivacyConsentRequired={true} // Optional boolean to require privacy consent in order to submit the application
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
<QuadrataKyb />
Propschildren
(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
darkMode
(optional)
Toggle between dark and light mode.
Default: false
boolean
requestPrivacyConsent
(optional)
Boolean value to prompt the business applicant to provide consent for privacy sharing.
boolean
isPrivacyConsentRequired
(optional)
Boolean value to require business applicants to consent to privacy sharing in order to continue with the application.
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
onConsentGranted
(optional)
A callback function: triggered when the applicant consents to privacy data sharing.
tip: Import the PrivacyConsentScopeParams from the @quadrata/kyb-react library
QuadClientOnConsentGrantedCallback
(scopes: PrivacyConsentScopeParams[]) => void
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
_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
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
Last updated