Embedded Finance and Solutions UI Components and Showcase Applications

Live Demo

React component library and showcase application for J.P. Morgan Embedded Finance APIs.

Note: Uses MSW (Mock Service Worker) for API mocking. If issues occur, hard refresh (Ctrl+Shift+R) to reload the service worker.

React component library for embedded banking features.

Components: OnboardingFlow, LinkedAccountWidget, RecipientsWidget, Accounts, PaymentFlow, TransactionsDisplay

NPM: @jpmorgan-payments/embedded-finance-components

React application demonstrating component usage. Built with Vite, React 18, TypeScript, TanStack Router, Tailwind CSS, MSW.

Main demo: /sellsense-demo

Demo for partially hosted (drop-in) embedded components integration using session transfer API.

Prerequisites: Node.js 18+, Yarn

Run showcase:

yarn install
cd app/client-next-ts
yarn install
yarn dev

Open http://localhost:3000

Run Storybook:

cd embedded-components
yarn install
yarn storybook

Open http://localhost:6006

The main showcase at /sellsense-demo demonstrates a complete e-commerce platform with embedded finance features:

• Wallet Overview - Account balances and transaction history
• KYC Onboarding - Client onboarding flow with document upload
• Linked Bank Accounts - External account linking with microdeposits
• Payment Processing - Send and receive payments
• Recipient Management - Add and manage payment recipients
• Theme Customization - See how components adapt to different brand styles

Browse all available components on the landing page:

• Interactive component demos
• Code examples and integration guides
• Theme customization examples
• Responsive design demonstrations

All demos use Mock Service Worker (MSW) to simulate API responses, so everything works without any backend setup.

If you want to connect to J.P. Morgan's sandbox environment with real API endpoints, follow the Quick Start Guide.

For partially hosted onboarding integration, see the Session Transfer Demo README for detailed setup instructions.

• Setup Guide - Installation and development commands
• Component Implementation - React patterns and best practices
• Testing Guidelines - Test patterns and MSW setup
• TypeScript Conventions - Type safety and patterns
• Git Workflow - Commit conventions and branching