Loading post…
StripeJorge Aguirre GonzalezTutorial
Creating a whitelabeled connected account dashboard with embedded components
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.
Source and freshness
- Source
- stripe.dev
- Published
- Added to Yomu
Summaries are generated from the original by a language model. Check the original before relying on it.
Keep reading
Related reading
The Good Stuff
Paid picks we use ourselves. Links carry a referral code — a subscription through one earns us a commission at no extra cost to you.
The best engineering reads, once a week
One useful email. Unsubscribe anytime.