flutter_stripe_connect 0.3.5 copy "flutter_stripe_connect: ^0.3.5" to clipboard
flutter_stripe_connect: ^0.3.5 copied to clipboard

Published 7 days ago • verified publishersheriax.com
SDKFlutter
PlatformAndroidiOSweb
→

Metadata

Flutter plugin for Stripe Connect embedded components. Embed account onboarding, account management, payouts, and payments UI in your Flutter app.

More...

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.

← Metadata

0
likes
160
points
646
downloads

Publisher

verified publishersheriax.com

Weekly Downloads

Metadata

Flutter plugin for Stripe Connect embedded components. Embed account onboarding, account management, payouts, and payments UI in your Flutter app.

Repository (GitHub)
View/report issues

Topics

#stripe #payments #connect #fintech

Documentation

API reference

License

MIT (license)

Dependencies

flutter, flutter_web_plugins, web, webview_flutter

More

Packages that depend on flutter_stripe_connect

Packages that implement flutter_stripe_connect

Back