Updated 4 July 2023
Hey! Folks 👨🏻💻 today we’ll integrate the Stripe Payment Gateway in Flutter.
Before we get started I urge you to go and check out our Flutter App Development Company.
Let’s start the party.
This integration combines all of the steps required to pay—collecting payment details and confirming the payment—into a single sheet that displays on top of your app.
Create a fresh project to integrate the Stripe Payment Gateway in Flutter.
Add flutter_stripe in pubspec.yaml file.
1 2 |
dependencies: flutter_stripe: ^9.2.0 |
Now run the command in the terminal – flutter pub get
Minimum Version Requirement
Theme.AppCompat
for your activity: example, example night themeFlutterFragmentActivity
instead of FlutterActivity
in MainActivity.kt
: exampleThis integration uses three Stripe API objects:
If you never save cards to a Customer and don’t allow returning Customers to reuse saved cards, you can omit the Customer and Customer Ephemeral Key objects from your integration.
For security reasons, your app can’t create these objects. Instead, add an endpoint on your server that:
Check examples of implementations for your server here
Add this code in MainActivity File in android.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
import io.flutter.embedding.android.FlutterFragmentActivity class MainActivity: FlutterFragmentActivity() {} <strong>change this style.xml file.</strong> <?xml version="1.0" encoding="utf-8"?> <resources> <style name="LaunchTheme" parent="Theme.AppCompat.Light.NoActionBar"> <item name="android:windowBackground">@drawable/launch_background</item> </style> <style name="NormalTheme" parent="Theme.AppCompat.Light.NoActionBar"> <item name="android:windowBackground">?android:colorBackground</item> </style> </resources> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 |
import 'package:flutter/material.dart'; import 'package:flutter_stripe/flutter_stripe.dart' as stripe; class StripePaymentScreen extends StatefulWidget { const StripePaymentScreen({Key? key}) : super(key: key); @override State<StripePaymentScreen> createState() => _StripePaymentScreenState(); } class _StripePaymentScreenState extends State<StripePaymentScreen> { @override void initState() { // TODO: implement initState super.initState(); initPaymentSheet(); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: const Text("Stripe In Flutter"), ), body: Center( child: Card( child: ElevatedButton( onPressed: _displayPaymentSheet, child: const Text("Open Payment Sheet")), ), ), ); } Future<void> initPaymentSheet() async { try { await stripe.Stripe.instance.initPaymentSheet( paymentSheetParameters: const stripe.SetupPaymentSheetParameters( customFlow: true, merchantDisplayName: 'Flutter Stripe Demo', paymentIntentClientSecret: "", customerEphemeralKeySecret: "", customerId: "", setupIntentClientSecret: "", style: ThemeMode.light, ), ); } catch (e) { ScaffoldMessenger.of(context).showSnackBar( SnackBar(content: Text('Error: $e')), ); rethrow; } } Future<void> _displayPaymentSheet() async { try { await stripe.Stripe.instance.presentPaymentSheet( options: const stripe.PaymentSheetPresentOptions(timeout: 1200000)); ScaffoldMessenger.of(context).showSnackBar( const SnackBar( content: Text('Payment successfully completed'), ), ); } catch (e) { ScaffoldMessenger.of(context).showSnackBar( SnackBar( content: Text('$e'), ), ); } } } |
That’s all for this Article 🎊 .
Stripe Payment Gateway in Flutter In this blog we’ve learned how to integrate the Stripe into Flutter app.
Visit the link for Stripe’s official documents.
Thanks for reading this blog. You can also check other blogs from here for more knowledge.
If you have more details or questions, you can reply to the received confirmation email.
Back to Home
2 comments
flutter_stripe package for the web is in the experimental stage right now and the flutter_stripe_web package is in so early stage.
So we don’t suggest using these packages in production right now.
If you want to use this in development mode then you can follow the https://pub.dev/packages/flutter_stripe package readme file.
As a workaround you can implement the stripe via webview in your flutter web project.