Stripe Payment Gateway in Flutter

Parveen Baghel

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.

Prerequisites

Create a Stripe Account.
This integration requires endpoints on your server that talk to the Stripe API. Use one official library for access to the Stripe API from your server. Follow the steps here
Know more about Stripe Integration in Flutter

Step 1.

Add flutter_stripe in pubspec.yaml file.

  dependencies:
    flutter_stripe: ^9.2.0

1 2	dependencies: flutter_stripe: ^9.2.0

Step 2.

Now run the command in the terminal – flutter pub get

Minimum Version Requirement

For Android,
Use Android 5.0 (API level 21) and above
Use Kotlin version 1.5.0 and above: [example](https://github.com/flutter-stripe/flutter_stripe/blob/79b201a2e9b827196d6a97bb41e1d0e526632a5a/example/android/ .gradle#L2)
Using a descendant of Theme.AppCompat for your activity: example, example night theme
Using an up-to-date Android gradle build tools version: example and an up-to-date gradle version accordingly: example
Using FlutterFragmentActivity instead of FlutterActivity in MainActivity.kt: example
Rebuild the app, as the above changes don’t update with hot reload
For iOS, ensure that the minimum deployment target for your app is iOS 13.0 or higher.

Step 3.

Server-side

This integration uses three Stripe API objects:

A PaymentIntent. Stripe uses this to represent your intent to collect payment from a customer, tracking your charge attempts and payment state changes throughout the process.
A Customer (optional). To set up a card for future payments, it must be attached to a Customer. Create a Customer object when your customer creates an account with your business. If your customer is making a payment as a guest, you can create a Customer object before payment and associate it with your own internal representation of the customer’s account later.
A Customer Ephemeral Key (optional). Information on the Customer object is sensitive, and can’t be retrieved directly from an app. An Ephemeral Key grants the SDK temporary access to the Customer.

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:

Retrieves the Customer, or creates a new one.
Creates an Ephemeral Key for the Customer.
Creates a PaymentIntent, passing the Customer id.
Returns the Payment Intent’s client secret, the Ephemeral Key’s secret, and the Customer’s id to your app.

Check examples of implementations for your server here

Step 4.

Add this code in MainActivity File in android.

import io.flutter.embedding.android.FlutterFragmentActivity
class MainActivity: FlutterFragmentActivity() {}

<strong>change this style.xml file.</strong>

&lt;?xml version="1.0" encoding="utf-8"?&gt;
&lt;resources&gt;
    &lt;style name="LaunchTheme" parent="Theme.AppCompat.Light.NoActionBar"&gt;
        &lt;item name="android:windowBackground"&gt;@drawable/launch_background&lt;/item&gt;
    &lt;/style&gt;
    &lt;style name="NormalTheme" parent="Theme.AppCompat.Light.NoActionBar"&gt;
        &lt;item name="android:windowBackground"&gt;?android:colorBackground&lt;/item&gt;
    &lt;/style&gt;
&lt;/resources&gt;

import io.flutter.embedding.android.FlutterFragmentActivity

class MainActivity: FlutterFragmentActivity() {}

<strong>change this style.xml file.</strong>

<?xml version="1.0" encoding="utf-8"?>

<item name="android:windowBackground">@drawable/launch_background</item>

</style>

<item name="android:windowBackground">?android:colorBackground</item>

</style>

</resources>

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&lt;StripePaymentScreen&gt; createState() =&gt; _StripePaymentScreenState();
}

class _StripePaymentScreenState extends State&lt;StripePaymentScreen&gt; {
  @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&lt;void&gt; 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&lt;void&gt; _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'),
        ),
      );
    }
  }
}

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 🎊 .

Conclusion

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.