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.
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 beta components are also used:
<ConnectCapitalOverview />
beta 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 />
beta renders a view of an individual Financial Account<ConnectFinancialAccountTransactions />
beta provides a list of transactions associated with a financial account.<ConnectIssuingCardsList />
beta provides a list of all the cards issued.
The web application is implemented as as full-stack application using Express, React, Typescript, and Material UI.
This demo is built with
To integrate Stripe Connect embedded components, check out our documentation.
hooks/useConnect.ts
shows the client side integration with Connect embedded components.api/account_session/route.ts
shows the server request tov1/account_sessions
.
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.
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 https://localhost:{process.env.PORT}
in your browser to start using the app.