---
title: "Creating a whitelabeled connected account dashboard with embedded components"
description: "This tutorial explains how to build a whitelabeled connected account dashboard using Stripe Connect embedded components, eliminating the need to manually implement pagination, permissions, and state management. The example uses FurEver, a pet grooming SaaS platform, and integrates the ConnectPayments, ConnectPayouts, and ConnectNotificationBanner components for payments, refunds, dispute management, balance and payout views, and account enablement alerts. The server-side requires creating an account session with enabled components, while the frontend initializes ConnectComponentsProvider with the fetched client secret and publishable key. Platform user roles can be enforced by setting features such as refund_management based on admin status in the account session, automatically adjusting component behavior. The dashboard’s appearance matches the platform using the appearance API with variables for colors, fonts, and locale, and it receives automatic updates for new payment methods and compliance."
---

# Creating a whitelabeled connected account dashboard with embedded components

[Stripe](https://yomu.fyi/company/stripe) · Jorge Aguirre Gonzalez · Oct 2, 2026

**Type:** Tutorial

## Summary

This tutorial explains how to build a whitelabeled connected account dashboard using Stripe Connect embedded components, eliminating the need to manually implement pagination, permissions, and state management. The example uses FurEver, a pet grooming SaaS platform, and integrates the ConnectPayments, ConnectPayouts, and ConnectNotificationBanner components for payments, refunds, dispute management, balance and payout views, and account enablement alerts. The server-side requires creating an account session with enabled components, while the frontend initializes ConnectComponentsProvider with the fetched client secret and publishable key. Platform user roles can be enforced by setting features such as refund\_management based on admin status in the account session, automatically adjusting component behavior. The dashboard’s appearance matches the platform using the appearance API with variables for colors, fonts, and locale, and it receives automatic updates for new payment methods and compliance.

## Context

This tutorial builds on previous work that implemented embedded onboarding for connected accounts, extending it to a full-featured whitelabeled dashboard.

## Approach / What changed

Create an account session on the server using the Stripe API with the required components enabled (payments, payouts, notification\_banner), then on the frontend install @stripe/connect-js and @stripe/react-connect-js, initialize ConnectComponentsProvider using the returned client secret, and render ConnectPayments, ConnectPayouts, and ConnectNotificationBanner components. Role-based features are configured in the account session features object, and appearance is customized via the appearance property with variables for colors, fonts, and locale.

## Takeaways

- Stripe Connect embedded components handle pagination, permissions, refunds, disputes, and capture flows out of the box without manual implementation.
- Account session features allow granular control over component capabilities based on user roles, such as enabling refund\_management only for admin users.
- The appearance API supports full theming consistency with the platform, including dark mode, custom fonts, and locale, and components automatically receive updates for new payment methods and compliance.

## FAQ

### How do I restrict refund and dispute actions to admin users?

In the account session creation, set refund\_management and dispute\_management features to enabled: true only for admin users in the payments component's features object. The component then adjusts its behavior accordingly.

### How can I customize the look of the embedded components?

Use the appearance property when calling loadConnectAndInitialize, passing variables for colors, fonts, and locale. The theming doc site can generate appearance values from a screenshot of your site for fine-tuning.

### What setup is needed to start using embedded components?

Install @stripe/connect-js and @stripe/react-connect-js, create an account session endpoint on the server that returns a client secret, wrap your app with ConnectComponentsProvider initialized with that client secret, and then use component tags like ConnectPayments in your React components.

**Tags:** [Embedded Components](https://yomu.fyi/topic/embedded-components), [React](https://yomu.fyi/topic/react), [Stripe](https://yomu.fyi/topic/stripe)

- Source: [Stripe](https://stripe.dev/blog/creating-a-whitelabeled-connected-account-dashboard-with-embedded-components)
- Source URL: https://stripe.dev/blog/creating-a-whitelabeled-connected-account-dashboard-with-embedded-components
- Ingested by Yomu: 2026-10-02T03:00:08.782Z

[Read original post](https://stripe.dev/blog/creating-a-whitelabeled-connected-account-dashboard-with-embedded-components)