# 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="/pages/VU3cYdgIRKykHHxGRikK">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 %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.quadrata.com/integration/how-to-integrate/onboard-users/business-passport-onboarding/3.-quadratakyb-package.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.