Integrating Stripe Payments in Flutter Using the Latest Payment Sheet

Introduction

Integrating Stripe into your Flutter app empowers you to accept payments with a polished, secure UI. The latest Stripe Payment Sheet streamlines checkout by handling all PCI compliance concerns and UI complexity. This tutorial walks you through setup, configuration, implementation, error handling, and deployment steps in a code-focused approach.

Setting Up Stripe SDK

First, add the official Stripe Flutter SDK to your pubspec.yaml:

dependencies:
  flutter:
    sdk: flutter
  flutter_stripe

Run flutter pub get. Next, configure native platforms. On iOS, open Runner/Info.plist and add your Stripe publishable key:

<key>StripePublishableKey</key>
<string>pk_test_…</string>

On Android, update android/app/src/main/AndroidManifest.xml:

<meta-data
    android:name="stripe_publishable_key"
    android:value="pk_test_…" />

Initialize Stripe in your Dart code (e.g., main.dart):

import 'package:flutter_stripe/flutter_stripe.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  Stripe.publishableKey = 'pk_test_…';
  await Stripe.instance.applySettings();
  runApp(MyApp());
}

This registers your key and readies the SDK for payments.

Configuring the Payment Sheet

Server-side logic must create a PaymentIntent and return its clientSecret. A simple endpoint might use Node.js or any backend:

const paymentIntent = await stripe.paymentIntents.create({
  amount: 5000,
  currency: 'usd',
});
res.json({ clientSecret: paymentIntent.client_secret });

In your Flutter app, fetch the clientSecret before presenting the sheet. Use http or dio to call your endpoint:

final response = await http.post(Uri.parse('https://api.example.com/create-payment-intent'));
final clientSecret = jsonDecode(response.body)['clientSecret'];

Now you’re ready to configure the Payment Sheet UI.

Implementing Payment Flow

Leverage the Stripe SDK's initPaymentSheet and presentPaymentSheet methods. In your checkout widget:

await Stripe.instance.initPaymentSheet(
  paymentSheetParameters: SetupPaymentSheetParameters(
    paymentIntentClientSecret: clientSecret,
    merchantDisplayName: 'My Store',
  ),
);

Then trigger the sheet:

try {
  await Stripe.instance.presentPaymentSheet();
  print('Payment successful!');
} catch (e) {
  print('Error: $e');
}

Wrap these calls in UI buttons, updating state to reflect loading and completion.

Testing & Deployment

Use Stripe’s test cards (e.g., 4242 4242 4242 4242) to simulate transactions. Check your dashboard for PaymentIntent statuses: succeeded, requires_action, canceled.

For production, switch to your live publishable key and server-side secret key. Ensure your backend validates webhooks to update order statuses reliably.

Review your manifest files, and test on both iOS and Android devices. Confirm network security settings allow HTTPS calls to your endpoints.

Handling Errors and Edge Cases

Network issues, declined cards, or user cancellations must be handled gracefully. Listen for exceptions:

try {
  await Stripe.instance.presentPaymentSheet();
} on StripeException catch (e) {
  print('Stripe error: ${e.error.localizedMessage}');
} catch (e) {
  print('Unexpected error: $e');
}

Show informative messages if payment fails and offer retry. Validate inputs like amount and currency on the server to avoid invalid PaymentIntents.

Vibe Studio

Vibe Studio, powered by Steve’s advanced AI agents, is a revolutionary no-code, conversational platform that empowers users to quickly and efficiently create full-stack Flutter applications integrated seamlessly with Firebase backend services. Ideal for solo founders, startups, and agile engineering teams, Vibe Studio allows users to visually manage and deploy Flutter apps, greatly accelerating the development process. The intuitive conversational interface simplifies complex development tasks, making app creation accessible even for non-coders.

Conclusion

The Stripe Payment Sheet offers a secure, customizable payment UI that integrates smoothly with Flutter. By following these setup, configuration, implementation, and testing steps, you can launch a robust in-app checkout flow with minimal overhead. Take advantage of Stripe’s continuous updates to keep your app secure and performant.