# 3. QuadrataKyb Package

## `<QuadrataKyb /> Component`&#x20;

```tsx
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

<table data-full-width="true"><thead><tr><th width="287">Prop</th><th width="398.33652928735216">Description</th><th>Type</th></tr></thead><tbody><tr><td><code>accessToken</code> (required)</td><td>JWT access token. <br><br>See "<a href="2.-api-authentication">API Authentication</a>" page</td><td><code>string</code></td></tr><tr><td><code>children</code> (optional)</td><td>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.</td><td><code>React.ReactNode</code></td></tr><tr><td><code>className</code> (optional)</td><td>The class name to be appended to the component's root DOM element.</td><td><code>string</code></td></tr><tr><td><p><code>config</code></p><p>(required)</p></td><td>The configuration object.<br><br><em>See the "</em><a href="#configuration-object"><em>Configuration Object</em></a><em>" below.</em></td><td><code>QuadClientKybConfig</code></td></tr><tr><td><code>darkMode</code> (optional)</td><td><p>Toggle between dark and light mode.</p><p></p><p>Default: <em>false</em></p></td><td><code>boolean</code></td></tr><tr><td><code>requestPrivacyConsent</code> (optional)</td><td>Boolean value to prompt the business applicant to provide consent for privacy sharing.</td><td><code>boolean</code></td></tr><tr><td><code>isPrivacyConsentRequired</code> (optional)</td><td>Boolean value to require business applicants to consent to privacy sharing in order to continue with the application.</td><td>boolean</td></tr><tr><td><code>onHide</code> (optional)</td><td>A callback function: triggered when the modal is closed.</td><td></td></tr><tr><td><code>onApplicationEnd</code> (optional)</td><td>A callback function: triggered when the application reaches an end state - error or completion.<br><br>Event object includes status and error properties for additional information.</td><td><p><code>QuadrataOnApplicationEndCallback</code><br></p><p>Statuses:<br>- <code>APPROVED</code><br>- <code>DENIED</code><br>- <code>INITIALIZED</code><br>- <code>IN_REVIEW</code></p></td></tr><tr><td><code>onConsentGranted</code> (optional)</td><td><p>A callback function: triggered when the applicant consents to privacy data sharing.</p><p></p><p>tip: Import the PrivacyConsentScopeParams from the @quadrata/kyb-react library</p></td><td><p><code>QuadClientOnConsentGrantedCallback</code></p><p></p><p>(<code>scopes: PrivacyConsentScopeParams[]) => void</code></p></td></tr><tr><td><code>onPageChange</code> (optional)</td><td><p>A callback function: triggered when a page is changed. Passes a PageKyb type string<em>.</em></p><p></p><p><em>tip: Import the</em> <code>PageKyb</code> <em>type from the <code>@quadrata/kyb-react</code> library</em></p></td><td><code>(page:</code> PageKyb<code>) => void</code></td></tr></tbody></table>

## Configuration Object

Pass a configuration object to the `config` prop:

```typescript
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} />
```

{% hint style="warning" %}
Always define your configuration object outside of your React components to prevent unexpected behavior
{% endhint %}

<table data-full-width="true"><thead><tr><th width="240">Property</th><th width="564.3333333333333">Description</th><th>Type</th></tr></thead><tbody><tr><td><p><code>_debug</code></p><p>(optional)</p></td><td>When true, debug information will be printed in the console. <strong>Never use in production.</strong></td><td><code>boolean</code></td></tr><tr><td><code>_unsafeForcePage</code> (optional)</td><td>Forcing a specific page to be displayed. Useful when styling and testing different pages. <mark style="color:orange;">Set the </mark><em><mark style="color:orange;"><strong>_debug</strong></mark></em><mark style="color:orange;"> prop to <code>true</code> when using.</mark> <strong>Never use in production.</strong> </td><td><code>Page</code></td></tr><tr><td><code>apiUrl</code></td><td><p>string value to set the api endpoint</p><p></p><p>Possible values:</p><ul><li><pre><code>https://int.quadrata.com/api/v1
</code></pre></li><li><pre><code><strong>https://prod.quadrata.com/api/v1
</strong></code></pre></li></ul></td><td><code>string</code></td></tr><tr><td><code>contactEmail</code> (optional)</td><td>Contact email address<br><br><em>Default: support@quadrata.com</em></td><td><code>string</code></td></tr><tr><td><p><code>discordUrl</code></p><p>(optional)</p></td><td><p>Discord link URL<br><br><em>Default:</em></p><p><em>Quadrata Discord Server</em></p></td><td><code>string</code></td></tr><tr><td><code>environment</code><br>(optional)</td><td><p>Possible values:</p><ul><li>sandbox</li><li>production<br></li></ul><p>Default: <em><code>sandbox</code></em><br></p><p><mark style="color:orange;">Never set to <code>sandbox</code> in production.</mark></p><p><br><em>tip: The sandbox environment will not perform real verifications.</em></p></td><td><code>QuadClientEnvironment</code></td></tr><tr><td><code>protocolName</code> (required)</td><td>Your protocol name<br><br><em>Example: "Acme, Inc."</em></td><td><code>string</code></td></tr><tr><td><code>showSocialButtons</code> (optional)</td><td><p>Show or hide the social media share buttons on the "mint complete" page.</p><p></p><p><em>Default: <code>true</code></em></p></td><td><code>boolean</code></td></tr></tbody></table>

{% hint style="success" %}
NOTE: Contact Quadrata via [Discord](https://discord.com/invite/67QgzrymHW) or [email](mailto:contact@quadrata.com) to request API keys.
{% endhint %}