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
React with Different Build Tools
React with Different Build Tools
| Build Tool | Description | Link |
|---|---|---|
| Vanilla React + webpack | Basic React setup | View Example |
| webpack | Modern build tool setup | View Example |
| rollup | Alternative build tool | View Example |
| Vite | Fast development experience | View Example |
Next.js Examples
Next.js Examples
| Build Tool | Description | Link |
|---|---|---|
| Webpack | Production-ready setup | View Example |
| Rollup | Optimized bundling | View Example |
| Vite | Modern build tool | View Example |
Angular Examples
Angular Examples
| Build Tool | Description | Link |
|---|---|---|
| Webpack | Standard setup | View Example |
| Rollup | Performance focused | View Example |
| Vite | Rapid development | View Example |
Vue.js Examples
Vue.js Examples
| Build Tool | Description | Link |
|---|---|---|
| Webpack | Vue optimized | View Example |
| Rollup | Efficient bundling | View Example |
| Vite | Native Vue support | View 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.Environment Configuration
Environment Variables
Environment Variables
Create a
.env file based on the .env.example template in your project. Required variables:| Variable | Description | Example |
|---|---|---|
*_API_KEY | Your API key | your-api-key |
*_CUSTOMER_ID | Your customer ID | customer-123 |
*_CUSTOMER_CHILD_ID | Your customer child ID | child-456 |
*_BFF_BASE_URL | Backend URL | https://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.