Integration methods

We offer two primary integration methods: an embedded SDK (Web SDK) and a hosted SDK.

❗️

Security

Use a separate service to generate session tokens instead of embedding credentials directly in your app’s environment variables. This keeps your codebase more secure. The example provided in the codebase is just for demonstration purposes on how to fetch a session token using credentials.

The OneSDK Package is available via NPM. We have guides on how to integrate with your framework of choice:



OneSDK Public Sample Code

This repository has a collection of sample projects showing how to integrate OneSDK into various front-end frameworks and build tools. Each sample is designed to show best practices and different integration strategies.

React with...Description
Vanilla React with WebpackA basic React setup using vanilla JavaScript and Webpack
WebpackA React project using Webpack as the module bundler
RollupA React project using Rollup as the module bundler
ViteA React project using Vite for a fast development experience
Next.js with...Description
WebpackA Next.js project using Webpack as the build tool
RollupA Next.js project using Rollup as the build tool
ViteA Next.js project using Vite as the build tool.
Angular with...Description
WebpackA Angular project using Webpack as the build tool
RollupA Angular project using Rollup as the build tool
ViteA Angular project using Vite as the build tool.
Vue with...Description
WebpackA Vue project using Webpack as the build tool
RollupA Vue project using Rollup as the build tool
ViteA Vue project using Vite as the build tool.

Create-React-App

OneSDK requires TypeScript 5. If your React app was created with create-react-app, not only is create-react-app deprecated by the React team, you're likely using an older TypeScript version.

To address this, you have two options:

  1. Upgrade TypeScript to version 5 or later.

  2. Use Legacy Peer Dependencies: If upgrading isn't an option, run npm install --legacy-peer-deps. However, be aware that this might introduce breaking changes in your codebase.


Environment Configuration

In each folder, you'll find a .env.example file, which serves as a template for creating your own .env file. Here's an explanation of each variable:

VariableDescription
REACT_APP_API_KEYYour API key
REACT_APP_CUSTOMER_IDYour customer ID.
REACT_APP_CUSTOMER_CHILD_IDYour customer child ID
REACT_APP_BFF_BASE_URLThe base URL pointing to our Backend for Frontend (BFF) service

- For UAT environments, set to https://backend.kycaml.uat.frankiefinancial.io.
- For production, set to https://backend.kycaml.frankiefinancial.io

Note: The prefixes for environment variables differ based on the framework you're using. For example:

  • React: REACT_APP_
  • Next.js: NEXT_PUBLIC_
  • Vite: VITE_