flutter_stripe_connect

A Flutter plugin for Stripe Connect embedded components. Easily integrate account onboarding, account management, payouts, payments, and more into your Flutter app.

pub package License: MIT

Features

  • Account Onboarding - Collect connected account information with a pre-built UI
  • Account Management - Let connected accounts manage their account settings
  • Payments - Show payment history for connected accounts
  • Payouts - Display payout history and status for connected accounts
  • Balances - Show balance information and payout controls
  • Notification Banner - Display required actions for compliance
  • Documents - Show documents available for download
  • Tax Settings - Allow connected accounts to configure tax settings
  • Tax Registrations - Manage tax registrations
  • Disputes List - View and manage disputes
  • Payment Details - Show detailed payment information
  • Payout Details - Show detailed payout information
  • Payouts List - Filterable list of payouts
  • WebView Mode - Optional self-hosted web rendering for full component access
  • Customizable Appearance - Configure colors, fonts, and corner radius

Platform Support

Platform Supported
Android ✅
iOS ✅
Web ✅

Component Availability by Platform

Component iOS Native Android Native Web Mobile WebView
Account Onboarding ✅ ✅ ✅ Optional
Payments ✅ ✅ ✅ Optional
Payouts ✅ ✅ ✅ Optional
Account Management ✅ ❌ ✅ Required on Android
Notification Banner ❌ ❌ ✅ Required
Balances ❌ ❌ ✅ Required
Documents ❌ ❌ ✅ Required
Tax Settings ❌ ❌ ✅ Required
Tax Registrations ❌ ❌ ✅ Required
Disputes List ❌ ❌ ✅ Required
Payment Details ❌ ❌ ✅ Required
Payout Details ❌ ❌ ✅ Required
Payouts List ❌ ❌ ✅ Required

Legend:

  • ✅ Native SDK supported - uses platform-native component by default
  • ❌ No native SDK - requires WebView mode on mobile
  • Optional: Component supports both native and WebView (use useWebView: true to force WebView)
  • Required: Component requires webViewConfig to work on mobile

See doc/WEBVIEW_INTEGRATION.md for WebView mode setup.

Installation

Add flutter_stripe_connect to your pubspec.yaml:

dependencies:
  flutter_stripe_connect: ^0.3.3

Platform Setup

Android Setup

Important: Your MainActivity must extend FlutterFragmentActivity (not FlutterActivity) for the Stripe Connect components to work properly.

Update your android/app/src/main/kotlin/.../MainActivity.kt:

package com.example.yourapp

import io.flutter.embedding.android.FlutterFragmentActivity

class MainActivity : FlutterFragmentActivity()

iOS Setup

No additional setup required. The plugin uses StripeConnect iOS SDK via CocoaPods.

Troubleshooting: If pod install fails on the first try, run:

cd ios/
pod install --repo-update

Web Setup

Add the Connect.js script to your web/index.html inside the <head> tag:

<script src="https://connect-js.stripe.com/v1.0/connect.js" async></script>

CSP Requirements: If you're using Content Security Policy headers, allow these Stripe domains:

  • https://connect-js.stripe.com
  • https://js.stripe.com

Usage

1. Initialize the SDK

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());
}

1b. Enable WebView Mode (Optional)

For full component access on mobile (including Tax, Capital, Issuing), use WebView mode:

await StripeConnect.instance.initialize(
  publishableKey: 'pk_test_...',
  clientSecretProvider: () async {
    final response = await http.post(
      Uri.parse('https://your-server.com/create-account-session'),
    );
    return jsonDecode(response.body)['client_secret'];
  },
  webViewConfig: WebViewConfig(
    baseUrl: 'https://connect.yourapp.com',  // Your hosted web app
    theme: 'light',
    primaryColor: '#635BFF',
    // Optional: Customize URL parameter names if your web app uses different names
    // publishableKeyParam: 'pk',      // defaults to 'publishableKey'
    // clientSecretParam: 'secret',    // defaults to 'clientSecret'
  ),
);

Note: WebView mode requires hosting your own Next.js app. See doc/WEBVIEW_INTEGRATION.md for setup guide.

2. Use the Embedded Components

Account Onboarding

Option A: Embed as Widget

StripeAccountOnboarding(
  onLoaded: () => print('Onboarding loaded'),
  onLoadError: (error) => print('Error: $error'),
  onExit: () => print('User exited onboarding'),
  // Uses native SDK by default on iOS/Android
  // Set useWebView: true to force WebView rendering
)

Option B: Present Programmatically (New in 0.3.0)

Trigger onboarding from your own UI without embedding the widget:

ElevatedButton(
  onPressed: () async {
    await StripeConnect.presentAccountOnboarding(
      onExit: () {
        print('User exited onboarding');
        // Navigate back or refresh state
      },
      onLoadError: (error) {
        print('Error: $error');
        // Show error dialog
      },
    );
  },
  child: Text('Start Onboarding'),
)

Note: presentAccountOnboarding() is only supported on iOS and Android. On Web, use the StripeAccountOnboarding widget.

Account Management

StripeAccountManagement(
  onLoaded: () => print('Account management loaded'),
  onLoadError: (error) => print('Error: $error'),
)

Payments

StripePayments(
  onLoaded: () => print('Payments loaded'),
  onLoadError: (error) => print('Error: $error'),
)

Payouts

StripePayouts(
  onLoaded: () => print('Payouts loaded'),
  onLoadError: (error) => print('Error: $error'),
)

Balances

StripeBalances(
  onLoaded: () => print('Balances loaded'),
  onLoadError: (error) => print('Error: $error'),
)

Tax Settings (Web Only)

StripeTaxSettings(
  onLoaded: () => print('Tax settings loaded'),
  onLoadError: (error) => print('Error: $error'),
)

Disputes List

StripeDisputesList(
  onLoaded: () => print('Disputes loaded'),
  onLoadError: (error) => print('Error: $error'),
)

3. Customize Appearance (Optional)

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

Server-Side Setup

To use Stripe Connect embedded components, you need to create an Account Session on your server. Here's an example using Node.js:

const stripe = require('stripe')('sk_test_...');

app.post('/create-account-session', async (req, res) => {
  const accountSession = await stripe.accountSessions.create({
    account: 'acct_...', // Connected account ID
    components: {
      account_onboarding: { enabled: true },
      account_management: { enabled: true },
      payments: { 
        enabled: true,
        features: {
          refund_management: true,
          dispute_management: true,
          capture_payments: true,
        }
      },
      payouts: { 
        enabled: true,
        features: {
          instant_payouts: true,
          standard_payouts: true,
        }
      },
      balances: { enabled: true },
      tax_settings: { enabled: true },
      tax_registrations: { enabled: true },
      documents: { enabled: true },
      notification_banner: { enabled: true },
    },
  });
  
  res.json({ client_secret: accountSession.client_secret });
});

Requirements

  • Flutter SDK >=3.10.0
  • Dart SDK >=3.0.0 <4.0.0
  • Android: minSdk 21
  • iOS: iOS 15.0+
  • Web: Modern browsers (Chrome, Firefox, Safari, Edge)

Documentation

License

MIT License - see LICENSE for details.

Libraries

flutter_stripe_connect
Flutter Stripe Connect - A Flutter plugin for Stripe Connect embedded components
flutter_stripe_connect_web
Web plugin registration for Flutter Stripe Connect