FurEver: Stripe Connect embedded components demo

FurEver is a vertical SaaS grooming platform for pet salons to manage their e2e business operations. FurEver wants to provide access to Stripe products and UIs directly in their website, at a fraction of the engineering cost, using Stripe Connect and Stripe Connect embedded components.

See a live version on furever.dev.

Features

FurEver showcases the integration between a platform's website, Stripe Connect, and Stripe Connect embedded components. Users sign up within the platform's website and through the process, a corresponding Stripe unified account is created with the following configuration:

• Stripe owns loss liability
• Platform owns pricing
• Stripe is onboarding owner
• The connected account has no access to the Stripe dashboard

The user will then onboard with Stripe via embedded onboarding. Thereafter, Connect embedded components will provide the UI surfaces for account management and dashboard UI elements with just a few lines of code. The demo website also uses the Stripe API to create test payments and payouts. This app also contains a basic authentication system.

FurEver makes use of the following Connect embedded components:

• <ConnectOnboarding /> enables an embedded onboarding experience without redirecting users to Stripe hosted onboarding.
• <ConnectPayments /> provides a list to display Stripe payments, refunds, and disputes. This also includes handling list filtering, pagination, and CSV exports.
• <ConnectPayouts /> provides a list to display Stripe payouts and balance. This also includes handling list filtering, pagination, and CSV exports.
• <ConnectAccountManagement /> allows users to edit their Stripe account settings without navigating to the Stripe dashboard.
• <ConnectNotificationBanner /> displays a list of current and future risk requirements an account needs to resolve.
• <ConnectDocuments /> displays a list of tax invoice documents.
• <ConnectTaxSettings /> allows users to set up Stripe Tax.
• <ConnectTaxRegistrations /> allows users to control their tax compliance settings.

Additionally, the following preview components are also used:

• <ConnectCapitalOverview /> preview allows users to check their eligibility for financing, get an overview of their in-progress financing, and access the reporting page to review paydown transactions.
• <ConnectFinancialAccount /> preview renders a view of an individual Financial Account
• <ConnectFinancialAccountTransactions /> preview provides a list of transactions associated with a financial account.
• <ConnectIssuingCardsList /> preview provides a list of all the cards issued.

Architecture

The web application is implemented as as full-stack application using Express, React, Typescript, and Material UI.

This demo is built with

• Next.js
• Tailwind CSS
• shadcn/ui

To integrate Stripe Connect embedded components, check out our documentation.

1. hooks/useConnect.ts shows the client side integration with Connect embedded components.
2. api/account_session/route.ts shows the server request to v1/account_sessions.

Requirements

You'll need a Stripe account to manage pet salon onboarding and payments:

• Sign up for free, then enable Connect by filling in your Connect settings.
• Fill in the necessary information in the Branding section in Connect settings.

Getting started

Install dependencies using npm (or yarn):

yarn

Copy the environment file and add your own Stripe API keys:

cp .env.example .env

Install MongoDB Community Edition. Refer to the official documentation. Then, run MongoDB:

brew tap mongodb/brew && brew update
brew install [email protected]
brew services start [email protected]

Run the app:

yarn dev

Go to http://localhost:{process.env.PORT} in your browser to start using the app.