SupportSign Up
IntroductionKYCKYBPortalFraudOneSDKAPIRelease Notes
IntroductionKYCKYBPortalFraudOneSDKAPIRelease Notes
  • OneSDK
    • About OneSDK
    • Quickstart Guide
    • Modules
    • Hosted OneSDK Implementation Examples
    • Embedded Implementation Examples
    • Framework Integrations
    • Native Integration
    • Version History
LogoLogo
SupportSign Up
OneSDKEmbedded Implementation ExampleseKYC Flows

eKYC with Fraud Check

A guide on creating a customized electronic Know Your Customer (eKYC) flow with form handling, validation, and fraud detection capabilities.
Features
  • OneSDK eKYC-only flow
  • Multi-step verification process
  • Retry handling mechanism
  • Using Sardine to help checking device verification

Instead of building your own flow, it’s highly recommended to fork an existing flow from the public sample codes found here

1

Initialize OneSDK

1const oneSDKInstance = await OneSDK({
2 session: sessionObjectFromBackend,
3 mode: "production",
4 recipe: {
5 form: {
6 provider: {
7 name: "react",
8 googleApiKey: '<YOUR GOOGLE MAPS API KEY>'
9 },
10 },
11 },
12});

Replace <YOUR GOOGLE MAPS API KEY> with your actual Google Maps API key for the address feature.

2

Configure Form Components

Basic Forms
1 // Initialize device tracking
2 const device = oneSDKInstance.component("device", {
3 activityType: "REGISTRATION",
4 });
5 device.start();
6
7// Welcome Screen
8const welcome = oneSDKInstance.component("form", {
9 name: "WELCOME",
10 mode: "individual",
11 type: "manual",
12});
13
14// Consent Form
15const consent = oneSDKInstance.component("form", {
16 name: "CONSENT",
17 mode: "individual",
18 type: "manual",
19});
Personal Details Form
1const personal = oneSDKInstance.component("form", {
2 name: "PERSONAL",
3 mode: "individual",
4 type: "manual",
5 title: {
6 label: "Personal Details",
7 },
8 descriptions: [
9 {
10 label: "In this section, we need your personal information",
11 },
12 {
13 label: "Please enter your information accordingly",
14 },
15 ],
16});
Result Handling Forms
1const result_success = oneSDKInstance.component("form", {
2 name: "RESULT",
3 type: "manual",
4 state: "SUCCESS",
5 title: { label: "Complete" },
6 descriptions: [
7 { label: "Process is now complete. You can close the page" },
8 ],
9 cta: { label: "Done" },
10});
11
12const result_fail = oneSDKInstance.component("form", {
13 name: "RESULT",
14 type: "manual",
15 state: "FAIL",
16});

Event Handling

1welcome.on("form:welcome:ready", () => {
2 consent.mount(appContainer);
3});
4
5consent.on("form:consent:ready", async () => {
6personal.mount(appContainer);
7});
8
9personal.on("form:personal:ready", async () => {
10document.mount(appContainer);
11});

Retry Logic Implementation

The implementation includes a retry mechanism that allows users up to 2 attempts before showing the failure screen.

1let retryCount = 0;
2review.on("form:review:partial", async () => {
3 if (retryCount < 2) {
4 partial.mount(appContainer);
5 } else {
6 result_fail.mount(appContainer);
7 }
8});
9
10partial.on("form:result:partial", async () => {
11 retryCount += 1;
12 retry.mount(appContainer);
13});

Best Practices

Error Handling

Always implement proper error handling and validation for each form step to ensure data quality.

User Experience

Provide clear feedback and instructions in the user’s preferred language, especially for country-specific forms.

Was this page helpful?
Previous

IDV Only

Next
Built with
IDV Only

A guide on creating a customized electronic Know Your Customer (eKYC) flow with form handling, validation, and fraud detection capabilities.