Mint passport for businesses

Help users claim (or mint) their passport directly from your DApp. The onboarding process performs KYC, AML risk scoring, and wallet screening on passport holders. If the verification is successful, the user is prompted to claim their passport.
For business passports, Quadrata Passport Issuers are responsible for minting the Quadrata Passport to the user wallet addresses.
Example implementation
Note: The @quadrata/kyb-react library does NOT include any CSS styling.
To match with the overall branding and style of your Dapp, It is the developer's responsibility to style the KYB form as they see fit.
Tip: There are CSS class names baked in most of the HTML elements that should be used to add custom CSS freely and flexibly.
There's also a className prop that can be used to encapsulate the CSS selectors and prevent CSS override issues.
Recommendation: Use styled-components library for CSS styling.

Install Quadrata NPM Package

Our UI library can be easily installed and imported to your project.
@quadrata/kyb-react is version-specific. The latest version is 0.0.8.
  1. 1.
    Install Quadrata NPM Package:
    • yarn add @quadrata/kyb-react
    • or npm install @quadrata/kyb-react
2. Contact Quadrata via Discord or email to request a KYB_ID and a BACKEND_URL
Protocol integrating with Quadrata Passport can request to have their personalized Quadrata NFT Passport by reserving a tokenId. Contact Quadrata to get your assigned tokenId and your custom NFT animation.

<QuadrataKyb /> Component

import { QuadrataKyb } from '@quadrata/kyb-react';
const MyComponent = () => {
return <QuadrataKyb kybId={KYB_ID} backendUrl={KYB_BACKEND_URL} />
}

<QuadrataKyb /> Props

Prop
Description
Type
kybId
The KYB ID provided by the issuer. You can request one via Discord or [email protected].
string (required)
backendUrl
The backend URL provided by Quadrata. You can request one via Discord or [email protected]. (THIS URL IS NOT THE SAME AS THE KYC BACKEND URL).
string (required)
children
Overrides the default loader component inside of the form markup. This component will be shown in all loading states during the flow.
React.ReactNode (optional)
className
The class name to be appended to the root DOM element of the form. className can be used for styling. We recommend using styled-components library to add custom styles.
string | undefined (optional)
discordUrl
The discord URL for support, this link will be displayed as "Join Discord" at the bottom of some of the pages. Default to Quadrata Discord URL.
string | undefined (optional)
contactEmail
The contact email address this link will be displayed as the email address provided at the bottom of some of the pages. Default to [email protected]
string | undefined (optional)
onPageChange
A callback function that is triggrerd when a page is changed. Passes a PageKyb type.
(page: PageKyb) => void (optional)
_unsafeForcePage
A dev-only helper prop to force a specific page to be displayed. Useful when styling and testing different pages. Never use this prop in production.
(page: PageKyb) => void (optional)
_debug
Development debug flag. when true, useful debug information will be printed in the console. Never use this prop in production.
boolean | undefined (optional)

Example Nextjs Dapp Implementing the KYB library

React.js
import type { NextPage } from 'next';
import { QuadrataKyb } from '@quadrata/kyb-react';
// Email [email protected] to request your KYB_ID.
const KYB_ID = process.env.NEXT_PUBLIC_KYB_ID!;
const KYB_BACKEND_URL = process.env.NEXT_PUBLIC_KYB_BACKEND_URL!;
const PageKybFlow: NextPage = () => {
return <QuadrataKyb kybId={KYB_ID} backendUrl={KYB_BACKEND_URL}/>;
};
export default PageKybFlow;

CSS Styling

CSS Styling

The @quadrata/kbc-react library does NOT include any CSS styling.
To match with the overall branding and style of your DApp, It is the developer's responsibility to style the KYB form as they see fit.
Tip: There are CSS class names baked in most of the HTML elements that should be used to add custom CSS freely and flexibly.
There's also a className prop that can be used to encapsulate the CSS selectors and prevent CSS override issues.
Recommendation: Use styled-components library for CSS styling.