Introducing flutter_stripe_connect: Embed Stripe Connect in Your Flutter App

INTRODUCTION

Building a marketplace or platform app? If you've ever tried integrating Stripe Connect into a Flutter application, you know how painful it can be. There's no official Flutter SDK from Stripe for Connect embedded components, which means you're left stitching together native iOS and Android code, web bridges, and a lot of glue logic.

That's exactly why I built flutter_stripe_connect — an open-source Flutter plugin that lets you embed Stripe Connect components like Account Onboarding, Payments, Payouts, and more directly into your Flutter app, across iOS, Android, and Web, with just a few lines of code.

In this post, I'll walk you through what the package does, why I built it, and how you can start using it in your own projects.

The Problem: Stripe Connect + Flutter = Pain

Stripe Connect is incredibly powerful. It allows platforms to onboard connected accounts, manage payouts, handle disputes, and more — all through pre-built UI components. But here's the catch: Stripe only provides native SDKs for iOS and Android separately, and a JavaScript-based Connect.js for Web.

If you're building a Flutter app that targets all three platforms, you're stuck dealing with:

Platform channels to communicate between Dart and native iOS/Android code
Separate implementations for each platform's Stripe SDK
Web support requiring an entirely different approach with Connect.js
No unified API across platforms

This fragmentation makes it incredibly time-consuming to integrate Stripe Connect into a Flutter app. I wanted a single, clean Dart API that "just works" across all platforms.

The Solution: flutter_stripe_connect

flutter_stripe_connect wraps all of this complexity into a simple Flutter plugin. Here's what it offers:

13 Embedded Components

The plugin supports all 13 Stripe Connect embedded components:

Component	What It Does
Account Onboarding	Collect connected account information
Account Management	Let accounts manage their settings
Payments	Show payment history
Payouts	Display payout history and status
Balances	Show balance information
Notification Banner	Display required compliance actions
Documents	Show downloadable documents
Tax Settings	Configure tax settings
Tax Registrations	Manage tax registrations
Disputes List	View and manage disputes
Payment Details	Detailed payment information
Payout Details	Detailed payout information
Payouts List	Filterable list of payouts

Three Rendering Modes

One of the unique features of this plugin is its flexible rendering approach:

Three rendering modes: Native SDK, Connect.js, and WebView

Native SDK — On iOS and Android, components like Account Onboarding, Payments, and Payouts use the platform-native Stripe SDK for the best performance and UX.
Connect.js (Web) — On Flutter Web, the plugin uses Stripe's Connect.js library through HtmlElementView, embedding real Stripe components directly in the DOM.
WebView Mode — For components that don't have native SDK support on mobile (like Tax Settings, Disputes, etc.), the plugin can render them via a self-hosted web app in a WebView. This means every single Stripe Connect component works on every platform.

Getting Started in 3 Steps

Step 1: Install the Package

yaml

dependencies:
  flutter_stripe_connect: ^0.3.7

Step 2: Initialize the SDK

dart

import 'package:flutter_stripe_connect/flutter_stripe_connect.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  
  await StripeConnect.instance.initialize(
    publishableKey: 'pk_test_...',
    clientSecretProvider: () async {
      // Fetch client secret from your server
      final response = await http.post(
        Uri.parse('https://your-server.com/create-account-session'),
      );
      return jsonDecode(response.body)['client_secret'];
    },
  );
  
  runApp(MyApp());
}

Step 3: Drop in a Component

dart

StripeAccountOnboarding(
  onLoaded: () => print('Onboarding loaded'),
  onLoadError: (error) => print('Error: $error'),
  onExit: () => print('User exited onboarding'),
)

That's it. Three steps, and you've got a fully working Stripe Connect onboarding flow in your Flutter app. The plugin handles all the platform-specific details behind the scenes.

Architecture Deep Dive

For those curious about how it works under the hood, the plugin uses a layered architecture:

Plugin layered architecture diagram

Public API Layer — Platform-agnostic widgets that developers interact with. These use kIsWeb and defaultTargetPlatform to route to the correct implementation.
Native Layer — Uses UiKitView on iOS and AndroidView on Android to embed native Stripe SDK views. Communicates via MethodChannel for callbacks like onLoaded, onExit, and onLoadError.
Web Layer — Uses HtmlElementView with dart:ui_web platform view factories to embed Stripe Connect.js components directly in the browser DOM.
WebView Layer — Uses webview_flutter to load a self-hosted Next.js web app that renders Stripe Connect components. This is the fallback for components without native SDK support on mobile.
Conditional Imports — The plugin uses Dart's conditional imports (if (dart.library.html)) to ensure web-specific code never gets compiled into mobile builds, and vice versa.

Customization

The plugin supports appearance customization through the ConnectAppearance class:

dart

StripeAccountOnboarding(
  appearance: ConnectAppearance(
    fontFamily: 'Roboto',
    cornerRadius: 12.0,
    colors: ConnectColors(
      primary: '#635BFF',
      background: '#FFFFFF',
      text: '#1A1A1A',
    ),
  ),
)

This allows you to match the Stripe components to your app's branding and design system.

Real-World Use Case

I built this plugin while working on Kizu, an AI-powered financial recovery platform. Kizu needed to onboard merchants, show their payment and payout history, and let them manage their connected accounts — all within a single Flutter app targeting iOS, Android, and Web.

Without flutter_stripe_connect, this would have required maintaining three separate Stripe integrations. With it, I was able to ship the entire Connect flow in a fraction of the time, and keep it maintainable with a single codebase.

Community & Contributions

The package is fully open source and I actively maintain it. Just recently, a community member reported a scrolling issue on Flutter Web (Issue #3), and I was able to diagnose and fix it within the same day — shipping v0.3.7 with the fix.

If you run into issues, have feature requests, or want to contribute, the GitHub repo is open:

GitHub: github.com/sheriax/flutter_stripe_connect
pub.dev: pub.dev/packages/flutter_stripe_connect

CONCLUSION

Integrating Stripe Connect into a Flutter app doesn't have to be a headache. flutter_stripe_connect gives you a clean, unified API that works across iOS, Android, and Web — with support for all 13 Stripe Connect embedded components, native SDK rendering where available, and a WebView fallback for everything else.

Whether you're building a marketplace, a SaaS platform, or any app that needs to manage connected accounts, this plugin can save you weeks of development time. Give it a try, star the repo if you find it useful, and don't hesitate to open an issue if something doesn't work as expected. Open source thrives on community feedback, and every issue reported makes the package better for everyone.

yaml

flutter_stripe_connect: ^0.3.7