KYC Only

Quadrata SDK Client Examples: KYC Only

This example demonstrates how to set up the Quadrata component to launch KYC only.

Not all of the required configuration or props are included in this example

See all available KYC props and configuration at the following page: QuadClient Package

It is suggested that you use the built-in withWagmiConnect props initializer to abstract connecting a wallet and signing transactions, but you are free to implement your own logic.

You can use the createAccessToken API Service to create the access token you need to pass in to the component.

import * as QuadrataTypes from '@quadrata/sdk/types';
import { Quadrata } from '@quadrata/sdk/client';

const quadrataSdkConfig: QuadrataTypes.QuadrataSdkConfiguration = {
    environment: QuadrataTypes.QuadrataEnvironment.SANDBOX
};

export default function KycOnboardingComponent(props: { accessToken: string }) {
    const quadrataProps = {
        accessToken: props.accessToken,
        sdkConfig: quadrataSdkConfig,
        clientConfig: {
            _debug: true,
            protocolName: 'Your Company Name'
        },
        kycProps: {
            // see available props at
            // https://docs.quadrata.com/integration/how-to-integrate/onboard-users/individual-passport-onboarding/4.-quadclient-package#less-than-quadclient-greater-than-props
            account: '0x123',
            attributes: [
                QuadrataTypes.QuadrataAttribute.DID,
                QuadrataTypes.QuadrataAttribute.COUNTRY,
                QuadrataTypes.QuadrataAttribute.AML
            ],
            chainId: QuadrataTypes.QuadrataNetwork.SEPOLIA,
            onApplicationEnd: (data: Record<string, any>) => {
                console.log('Application ended', data.status, data.error);
            },
            privacyScopes: [
                QuadrataTypes.QuadrataPrivacyConsent.EMAIL,
                QuadrataTypes.QuadrataPrivacyConsent.DATE_OF_BIRTH,
                QuadrataTypes.QuadrataPrivacyConsent.FIRST_NAME,
                QuadrataTypes.QuadrataPrivacyConsent.LAST_NAME,
                QuadrataTypes.QuadrataPrivacyConsent.ADDRESS
            ],
        },
    };
    return (
        <Quadrata {...quadrataProps}>
            {((helper: QuadrataTypes.Client.Components.Helper) => {
                if (helper.isApplicationComplete) {
                    return <p>Application is Complete</p>;
                }
                if (helper.isPassportInReview) {
                    return <p>Your application is in review.</p>;
                }
                return (
                    <button
                        disabled={!helper.isApplicationReady}
                        onClick={helper.launchApplication}
                    >
                        Launch Application
                    </button>
                );
            })}
        </Quadrata>
    );
}