Furever: Stripe Connect Embedded Components Demo

Follow these steps to run the FurEver demo locally:

1. Prerequisites

• A Stripe account with Connect enabled.
• Branding information configured in Connect settings.
• MongoDB Community Edition installed and running.

2. Install Dependencies

yarn

3. Configure Environment Variables

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

cp .env.example .env

4. Start MongoDB (macOS example)

brew tap mongodb/brew && brew update
brew install mongodb-community@7.0
brew services start mongodb-community@7.0

5. Run the Application

yarn dev

Access the app at http://localhost:{process.env.PORT}.

yarn
cp .env.example .env
# Start MongoDB
brew tap mongodb/brew && brew update
brew install mongodb-community@7.0
brew services start mongodb-community@7.0
# Run app
yarn dev

The authOptions object defines the authentication configuration for the application using next-auth. It uses a jwt session strategy and specifies custom pages for signing in (/login) and signing out (/).

Key callback behaviors include:

• signIn: A hook to perform logic during the sign-in process.
• session: Populates the session object with user data from the JWT token, including email, setup, primaryColor, companyName, companyLogoUrl, and stripeAccountId.
• jwt: Manages the JWT token lifecycle. It supports an update trigger to refresh specific user fields like primaryColor, companyName, companyLogoUrl, and setup without requiring a full re-authentication.

export const authOptions: AuthOptions = {
  session: {
    strategy: 'jwt',
  },
  pages: {
    signIn: '/login',
    signOut: '/',
  },
  callbacks: {
    async signIn({user}) { ... },
    async session({session, token}) { ... },
    async jwt({token, trigger, session, user}) { ... },
  },
  providers: [ ... ],
};

The demo utilizes several supported Stripe Connect embedded components to provide UI surfaces for account management:

• <ConnectOnboarding />: Enables an embedded onboarding experience.
• <ConnectBalanceReport />: Provides a downloadable financial report of balance activity.
• <ConnectPayments />: Displays Stripe payments, refunds, and disputes (includes filtering, pagination, and CSV exports).
• <ConnectPayouts />: Displays Stripe payouts and balance (includes filtering, pagination, and CSV exports).
• <ConnectPayoutReconciliationReport />: Provides a downloadable report for reconciling payouts.
• <ConnectAccountManagement />: Allows users to edit Stripe account settings.
• <ConnectNotificationBanner />: Displays current and future risk requirements.
• <ConnectDocuments />: Displays a list of tax invoice documents.
• <ConnectTaxSettings />: Allows users to set up Stripe Tax.
• <ConnectTaxRegistrations />: Allows users to control tax compliance settings.

The application provides several CredentialsProvider options for different user flows:

1. login (Email & Password): Standard login using email and password stored in the Salon model.
2. loginas (Account ID): Allows logging in using a stripeAccountId. If the user does not exist locally, it attempts to retrieve the account from Stripe and creates a local Salon record.
3. signup (Email & Password): Creates a new local Salon record with setup: true and changedPassword: true.
4. createprefilledaccount: A specialized flow for testing/demoing. It creates a dummy bank account token, a local Salon record, and a fully configured Stripe Connect account with pre-filled business and individual details.
5. createaccount: Creates a Stripe account based on provided business details (country, business type, name, etc.) and links it to a local Salon record.
6. updateemail: A provider specifically for updating the user's email.

providers: [
  CredentialsProvider({ id: 'updateemail', ... }),
  CredentialsProvider({ id: 'login', ... }),
  CredentialsProvider({ id: 'loginas', ... }),
  CredentialsProvider({ id: 'createprefilledaccount', ... }),
  CredentialsProvider({ id: 'createaccount', ... }),
  CredentialsProvider({ id: 'signup', ... }),
]