Onboarding Example

Quadrata SDK Onboarding Example

SDK Configuration

Set up your configuration so you can use it across API calls and Client Components

import { QuadrataSdkConfiguration, QuadrataEnvironment } from '@quadrata/sdk/types';

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

Authentication

Use the API Service createAccessToken to authenticate and get an accessToken to pass in to your Client Components.

import { createAccessToken } from '@quadrata/sdk/api';

const { data: { accessToken } } = await createAccessToken(
    {
        apiKey: process.env.QUADRATA_API_KEY,
        options: {
            cache: 'no-cache'
        }
    },
    quadrataSdkConfig
);

See API Service Options for more information about API options.

The Quadrata Component

This example uses the withWagmiConnect props initializer to handle all wallet connection, message signing, and transaction signing for you.

See With Wagmi Connect for more information on initializing Wagmi.

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

export default function OnboardingComponent({ accessToken }) {
    const quadrataProps = withWagmiConnect({
        accessToken: accessToken,
        sdkConfig: quadrataSdkConfig,
        clientConfig: {
            _debug: true,
            protocolName: 'Your Company Name'
        },
        sharedProps: {
            onApplicationEnd: (data: Record<string, any>) => {
                console.log('Application ended', data.status, data.error);
            },
        },
        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
            attributes: [
                QuadrataTypes.QuadrataAttribute.DID,
                QuadrataTypes.QuadrataAttribute.COUNTRY,
                QuadrataTypes.QuadrataAttribute.AML
            ],
            privacyScopes: [
                QuadrataTypes.QuadrataPrivacyConsent.EMAIL,
                QuadrataTypes.QuadrataPrivacyConsent.DATE_OF_BIRTH,
                QuadrataTypes.QuadrataPrivacyConsent.FIRST_NAME,
                QuadrataTypes.QuadrataPrivacyConsent.LAST_NAME,
                QuadrataTypes.QuadrataPrivacyConsent.ADDRESS
            ],
        },
        kybProps: {
            // see available props at
            // https://docs.quadrata.com/integration/how-to-integrate/onboard-users/business-passport-onboarding/3.-quadratakyb-package
        }
    });
    return (
        <Quadrata {...quadrataProps}>
            {((helper: QuadrataTypes.Client.Component.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>
    );
}

See Client Examples for more information about KYC, KYB and All In One integration.