Next.js

Quick Start Video

Setup Instructions

Create Next.js Project

$ npx create-next-app@latest my-next-app
> cd my-next-app

Install Dependencies

$ npm install
> npm install @frankieone/one-sdk

Configure Environment

Create a .env.local file with your OneSDK credentials:

1 NEXT_PUBLIC_CUSTOMER_ID=your_customer_id
2 NEXT_PUBLIC_API_KEY=your_api_key
3 NEXT_PUBLIC_CHILD_ID=your_child_id  # Optional

Implementation Guide

1. Create OneSDK Hook

2. Create End-to-End Component

3. Add Component to Page

Component Configuration

Welcome Form

Document Form

Biometrics

1 const welcome = oneSDKInstance.component("form", {
2   name: "WELCOME",
3   type: "manual",
4   descriptions: [
5     { label: 'Welcome to our KYC process', style: {} },
6     { label: 'Please follow the steps to verify your identity', style: {} },
7   ],
8 });

Event Handling

Form Events

Biometrics Events

Best Practices

Error Handling

Always implement proper error handling for both SDK initialization and component events.

Loading States

Show appropriate loading states during initialization and between component transitions.

Event Cleanup

Properly clean up event listeners when components unmount to prevent memory leaks.

Security

Never expose credentials in client-side code. Use environment variables and server-side token generation.

Remember to handle cleanup in your components by implementing proper unmounting logic and removing event listeners when components are destroyed.