All In One
Quadrata SDK Client Examples: All In One
Enabling The All In One Component
The All In One Component is enabled when you specify a combination of properties in the Quadrata Component.
You can enable the All In One Component in one of the following ways:
Specify
sharedProps
and eitherkybProps
orkycProps
Specify both
kybProps
andkycProps
Example
This example demonstrates how to set up the Quadrata
component to launch the All In One multi-component.
This context gives the user an intro screen where they can select either Individual User Onboarding or Business Onboarding.

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
See all available KYB props and configuration at the following page: QuadrataKyb Package
import * as QuadrataTypes from '@quadrata/sdk/types';
import { Quadrata } from '@quadrata/sdk/client';
const quadrataSdkConfig: QuadrataTypes.QuadrataSdkConfiguration = {
environment: QuadrataTypes.QuadrataEnvironment.SANDBOX
};
export default function AllInOneOnboardingComponent(props: { accessToken: string }) {
const quadrataProps = {
accessToken: props.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
account: '0x123',
attributes: [
QuadrataTypes.QuadrataAttribute.DID,
QuadrataTypes.QuadrataAttribute.COUNTRY,
QuadrataTypes.QuadrataAttribute.AML
],
chainId: QuadrataTypes.QuadrataNetwork.SEPOLIA,
privacyScopes: [
QuadrataTypes.QuadrataPrivacyConsent.EMAIL,
QuadrataTypes.QuadrataPrivacyConsent.DATE_OF_BIRTH,
QuadrataTypes.QuadrataPrivacyConsent.FIRST_NAME,
QuadrataTypes.QuadrataPrivacyConsent.LAST_NAME,
QuadrataTypes.QuadrataPrivacyConsent.ADDRESS
],
},
kybProps: {
// since clientConfig and sharedProps define everything, nothing is
// required here unless you want to override anything or have more
// control over the callbacks
// 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.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>
);
}
Last updated