Framework Integrations

OneSDK offers flexible integration options to suit your application architecture and requirements. Choose from our embedded SDK, hosted SDK, or Web SDK solutions.

Security Best Practice

Never embed credentials directly in your app’s environment variables. Use a separate service to generate session tokens instead. The example credentials in our sample code are for demonstration purposes only.

Integration Options

Embedded OneSDK

Integrate OneSDK directly into your application codebase for maximum control and customization.

Hosted OneSDK

Use our hosted solution for quick implementation with minimal setup requirements.

Web SDK

Lightweight web-specific implementation ideal for browser-based applications.

Framework Integration

The OneSDK package is available via NPM

React Integration

Seamless integration with React applications, including hooks and components.

Next.js Integration

Server-side rendering support and optimized for Next.js applications.

Angular Integration

Angular-specific implementation with TypeScript support.

Vue.js Integration

Vue.js integration with Composition API support.

Sample Code Repository

Explore our public sample code repository for complete integration examples across different frameworks and build tools.

React Examples

Build ToolDescriptionLink
Vanilla React + webpackBasic React setupView Example
webpackModern build tool setupView Example
rollupAlternative build toolView Example
ViteFast development experienceView Example
Build ToolDescriptionLink
WebpackProduction-ready setupView Example
RollupOptimized bundlingView Example
ViteModern build toolView Example
Build ToolDescriptionLink
WebpackStandard setupView Example
RollupPerformance focusedView Example
ViteRapid developmentView Example
Build ToolDescriptionLink
WebpackVue optimizedView Example
RollupEfficient bundlingView Example
ViteNative Vue supportView Example

Important Notes for Create-React-App Users

TypeScript Compatibility

OneSDK requires TypeScript 5. Create-React-App users may need to take additional steps for compatibility.

1

Check Your Options

You have two paths for Create-React-App compatibility:

2

Option 1: Upgrade TypeScript

$npm install typescript@latest
3

Option 2: Use Legacy Peer Dependencies

$npm install --legacy-peer-deps

Using legacy peer dependencies may introduce breaking changes in your codebase.

Environment Configuration

Create a .env file based on the .env.example template in your project. Required variables:

VariableDescriptionExample
*_API_KEYYour API keyyour-api-key
*_CUSTOMER_IDYour customer IDcustomer-123
*_CUSTOMER_CHILD_IDYour customer child IDchild-456
*_BFF_BASE_URLBackend URLhttps://backend.kycaml.uat.frankiefinancial.io
Framework-Specific Prefixes

Replace * with your framework’s prefix: - React: REACT_APP_ - Next.js: NEXT_PUBLIC_ - Vite: VITE_

For production environments, use https://backend.kycaml.frankiefinancial.io as your BFF base URL. For UAT environments, use https://backend.kycaml.uat.frankiefinancial.io.

Built with