Firebase Stripe Extension with Flutter web

Introduction

As you know, Flutter web is becoming more mature now. Developers are using Flutter web not only for creating portfolios but also for creating more complex apps. Integrating a payment gateway into the web app is the most important feature of any E-commerce App. This article will show how easily one could integrate Stripe payments with Flutter web using Firebase Extensions.

What is Stripe?

Stripe is a third-party payment service that manages one-time payments, prebuilt checkouts, subscriptions, invoices, billings, and many other features. it’s the one-stop solution for payment gateway.

What is Firebase Stripe Extension?

Firebase Extensions are pre-packaged solutions that help you deploy functionality to your Firebase application. It is the fastest way of integrating Stripe payment into the app with Firebase. It works as the backend for your stripe payment, so don’t need to think about the backend now!! You are good to go by integrating the Stripe extension and adding client-side code to your Flutter app. You can read more about this here

What you’ll need:

A Stripe account
Firebase project with setup of Cloud Firestore database
Firebase Authentication to enable different sign-up options for your users.

Integrating Stripe extension, you will need to authenticate the user first. So once the user is authenticated, then it triggers a Cloud function to create a Stripe customer.

Upgrade Firebase with Blaze plan

To install this extension, your Firebase project must be on the Blaze (pay-as-you-go) plan. You will only be charged for the resources you use. Most Firebase services offer a free tier for low-volume use. Learn more about Firebase billing.

Create a Cloud Firestore Database

Set Cloud Firestore security rules

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /customers/{uid} {
      allow read: if request.auth.uid == uid;

      match /checkout_sessions/{id} {
        allow read, write: if request.auth.uid == uid;
      }
      match /subscriptions/{id} {
        allow read: if request.auth.uid == uid;
      }
      match /payments/{id} {
        allow read: if request.auth.uid == uid;
      }
    }

    match /products/{id} {
      allow read: if true;

      match /prices/{id} {
        allow read: if true;
      }

      match /tax_rates/{id} {
        allow read: if true;
      }
    }
  }
}

Install the extension (either of them)

Option 1: Using the Firebase CLI

To install and manage extensions, you can also use the Firebase CLI:

Set up a new project directory or navigate to an existing one

Run the below command in your command line:

firebase ext:install stripe/firestore-stripe-payments --project=projectId_or_alias

Option 2: Using the Firebase Console

To add an extension, please click on the extension tab on the Firebase console and select the extension from the marketplace.

Select Stripe Extension

Install the extension

Select the Firebase project

To install the extension, you must first select the project where you want to add Stripe payment.

Review API enabled and resources created.

While using Run Payments with Stripe extension, you don’t need to research, code or debug the code on your own. Firebase extension works for you behind the scenes, and it uses Storage, Eventarc API, and Cloud Functions

Review access granted to Stripe extension

In the Stripe extension, Stripe needs to access the following Firebase services for it to work together with Cloud Firestore.

Configure Extension

To configure an extension, you will need to specify the following:

Firestore collection to store customer data.

First, select the location for the deployment. Tip: You usually want a location closer to your database. For help selecting a location, refer to the location selection guide

Firestore collection to store customer data.

Do you want to delete customer objects in Stripe automatically? When a user is deleted in Firebase, then select accordingly.

Setup Stripe API restricted key to giving access only to the “Customers”, “Checkout Sessions”, and “Customer portal” resources.

This is your signing secret for a Stripe-registered webhook. This webhook can only be registered after installation. Leave this value untouched during installation, then follow the post-install instructions for registering your webhook and configuring this value.

Enable events. To make things easy, we can choose to select all.

Finally, click the Install extension button and wait for the setup to finish. It will take 3 to 5 minutes.

Setting up Stripe Dashboard

Generate Stripe Restricted API key

An important note to remember is you shouldn’t share your secret key with anyone.

Setup Restricted Webhook key

You need to set up a webhook that synchronises relevant details from Stripe with your Cloud Firestore. This includes product and pricing data from the Stripe Dashboard and customer’s subscription details. Create a webhook with the endpoint that the extension docs give you. Please add the event as per the documentation.

Creating Products

After adding a webhook key, it’s time to create a list of products. On the Stripe dashboard, it’s very easy to create product listings.

You can specify the title, description, and all the price (including currency) information.

You need to select a recurring payment option. The example further down in the article is all about how to use Stripe payment to subscribe to a membership. In that case, we need to select Payment mode:'subscription'for this product.

Once you have created products in the Stripe dashboard, the products will also be mirrored in Cloud Firestore.

Customise your Stripe Page

Stripe allows you to customize your product page with your branding. This branding design will be used later in the app when completing a payment.

Flutter Integration

Now, Let’s start building the Flutter project. We have done all of the setup, and now it’s time to learn how to implement the extension in Flutter web. Here is the project we want to build:

Setting up the environment

New Flutter web Project.
Integrate Firebase with Flutter web.
Authenticate user with Firebase Auth.
Add all of the required dependencies.
Adding Go_Router for Navigation.

In this project, we need to create:

login_Page.dart – Authenticate the user.
dashboard**.dart -** Retrieving the product for subscription.
success.dart – Landing page: once the transaction is done successfully, it will redirect to the Success page.
cancel.dart – Re-routes to the landing page if a transaction has an error.

Start The Coding

Start with main.dart adding the code for Firebase integration and Routing.

main.dart

import 'package:firebase_core/firebase_core.dart';
import 'package:flutter/material.dart';
import 'package:flutter_stripe_web_payment/loginPage.dart';
import 'package:flutter_stripe_web_payment/success.dart';

import 'package:flutter_web_plugins/url_strategy.dart';
import 'package:go_router/go_router.dart';

import 'cancel.dart';
import 'constant.dart';
import 'dashboard.dart';

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();

  await Firebase.initializeApp(
      options: const FirebaseOptions(
          apiKey: Constants.apiKey,
          authDomain: Constants.authDomain,
          projectId: Constants.projectId,
          storageBucket: Constants.storageBucket,
          messagingSenderId: Constants.messagingSenderId,
          appId: Constants.appId,
          measurementId: Constants.measurementId));
  usePathUrlStrategy();
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  MyApp({super.key});
  final GoRouter _router = GoRouter(
    routes: <RouteBase>[
      GoRoute(
        path: '/',
        builder: (BuildContext context, GoRouterState state) {
          return LoginPage();
        },
      ),
      GoRoute(
        path: '/dashboard',
        builder: (BuildContext context, GoRouterState state) {
          return const DashboardPage();
        },
      ),
      GoRoute(
        path: '/success',
        builder: (BuildContext context, GoRouterState state) {
          return const SuccessPage();
        },
      ),
      GoRoute(
        path: '/cancel',
        builder: (BuildContext context, GoRouterState state) {
          return CancelPage();
        },
      ),
    ],
  );

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp.router(
      debugShowCheckedModeBanner: false,
      routerConfig: _router,
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
    );
  }
}

login_page.dart

An application that requires user authentication typically has a login page. We can authenticate users with email and password, but you can use any option like Google or Facebook etc. Once you finish the user authentication, it will trigger the cloud function and add a custom collection into Firestore. For the demo purpose below, we have created the Signing Page and manually created a user in Firebase, but if you want, you can code a separate one.

login_page.dart

import 'package:firebase_auth/firebase_auth.dart';
import 'package:firebase_core/firebase_core.dart';

import 'package:flutter/material.dart';

import 'package:flutter_stripe_web_payment/utils/firebase_auth.dart';
import 'package:go_router/go_router.dart';

class LoginPage extends StatefulWidget {
  const LoginPage({super.key});

  @override
  State<LoginPage> createState() => _LoginPageState();
}

class _LoginPageState extends State<LoginPage> {
  final _formKey = GlobalKey<FormState>();

  bool _obscureText = true;

  final TextEditingController _emailTextController = TextEditingController();

  final TextEditingController _passwordTextController = TextEditingController();

  Future<FirebaseApp> _initializeFirebase() async {
    FirebaseApp firebaseApp = await Firebase.initializeApp();
    return firebaseApp;
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
      backgroundColor: Colors.white,
      body: FutureBuilder(
        future: _initializeFirebase(),
        builder: (context, snapshot) {
          if (snapshot.connectionState == ConnectionState.done) {
            return Row(
              children: [
                Expanded(
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      const SizedBox(
                        height: 20,
                      ),
                      const Center(
                        child: Text(
                          textAlign: TextAlign.center,
                          "Firebase Stripe Extension with \n Flutter Web",
                          style: TextStyle(
                            fontSize: 30,
                            fontWeight: FontWeight.bold,
                            color: Colors.blue,
                          ),
                        ),
                      ),
                      const SizedBox(
                        height: 50,
                      ),
                      Image.asset("assets/images/payment.png"),
                    ],
                  ),
                ),
                Expanded(
                  child: Form(
                    key: _formKey,
                    child: Center(
                      child: Container(
                        color: Colors.orangeAccent,
                        child: Padding(
                          padding: const EdgeInsets.all(8.0),
                          child: Column(
                            mainAxisAlignment: MainAxisAlignment.center,
                            children: <Widget>[
                              const Text(
                                "Login Form",
                                style: TextStyle(
                                    fontSize: 30,
                                    fontWeight: FontWeight.bold,
                                    color: Colors.white),
                              ),
                              const SizedBox(height: 30),
                              Padding(
                                padding: const EdgeInsets.symmetric(
                                    horizontal: 20, vertical: 10),
                                child: TextFormField(
                                  keyboardType: TextInputType.emailAddress,
                                  controller: _emailTextController,
                                  decoration: InputDecoration(
                                    fillColor: Colors.white,
                                    filled: true,
                                    hintText: 'Email',
                                    enabledBorder: OutlineInputBorder(
                                      borderSide: const BorderSide(
                                        color: Colors.white,
                                      ),
                                      borderRadius: BorderRadius.circular(15),
                                    ),
                                    focusedBorder: OutlineInputBorder(
                                      borderSide: const BorderSide(
                                        color: Colors.white,
                                        width: 2,
                                      ),
                                      borderRadius: BorderRadius.circular(15),
                                    ),
                                  ),
                                ),
                              ),
                              const SizedBox(height: 15),
                              Padding(
                                padding: const EdgeInsets.symmetric(
                                    horizontal: 20, vertical: 10),
                                child: TextFormField(
                                  keyboardType: TextInputType.text,
                                  controller: _passwordTextController,
                                  obscureText: _obscureText,
                                  decoration: InputDecoration(
                                    hintText: 'Password',
                                    fillColor: Colors.white,
                                    filled: true,
                                    enabledBorder: OutlineInputBorder(
                                      borderSide: const BorderSide(
                                        color: Colors.white,
                                      ),
                                      borderRadius: BorderRadius.circular(15),
                                    ),
                                    focusedBorder: OutlineInputBorder(
                                      borderSide: const BorderSide(
                                        color: Colors.white,
                                        width: 2,
                                      ),
                                      borderRadius: BorderRadius.circular(15),
                                    ),
                                    suffixIconColor: Colors.orangeAccent,
                                    suffixIcon: GestureDetector(
                                      onTap: () {
                                        setState(() {
                                          _obscureText = !_obscureText;
                                        });
                                      },
                                      child: Icon(
                                        _obscureText
                                            ? Icons.visibility
                                            : Icons.visibility_off,
                                        color: Colors.orangeAccent,
                                      ),
                                    ),
                                  ),
                                ),
                              ),
                              const SizedBox(height: 20),
                              ElevatedButton(
                                style: ElevatedButton.styleFrom(
                                  primary: Colors.white, // background
                                ),
                                onPressed: () async {
                                  User? user =
                                      await FireAuth.signInUsingEmailPassword(
                                    email: _emailTextController.text,
                                  );
                                  if (user != null) {
                                    context.go('/dashBoard');
                                  }
                                },
                                child: const Text(
                                  'Sign In',
                                  style: TextStyle(color: Colors.black),
                                ),
                              )
                            ],
                          ),
                        ),
                      ),
                    ),
                  ),
                ),
              ],
            );
          }
          return const Center(
            child: CircularProgressIndicator(),
          );
        },
      ),
    ));
  }
}

Dashboard.dart

dashboard.dart

import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:firebase_auth/firebase_auth.dart';
import 'package:flutter/material.dart';
import 'package:flutter_stripe_web_payment/subscription.dart';

class DashboardPage extends StatefulWidget {
  const DashboardPage({Key? key}) : super(key: key);

  @override
  State<DashboardPage> createState() => _DashboardPage();
}

class _DashboardPage extends State<DashboardPage> {
  var _productId = '';

  var _checkoutSessionId = '';

  void _onSelectProduct(String? id) {
    setState(() => _productId = id ?? '');
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Row(
          children: [
            Expanded(
              flex: 3,
              child: Padding(
                padding: const EdgeInsets.symmetric(horizontal: 16.0),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    const SizedBox(height: 32),
                    Center(
                      child: Text(
                        'You can buy any of our memberships as a gift for you or someone else',
                        style: Theme.of(context).textTheme.headline4,
                      ),
                    ),
                    const SizedBox(height: 32),
                    // displaying products which is active
                    StreamBuilder<QuerySnapshot>(
                      stream: FirebaseFirestore.instance
                          .collection('products')
                          .where('active', isEqualTo: true)
                          .snapshots(),
                      builder: (BuildContext context, snapshot) {
                        if (snapshot.hasError) {
                          return Center(child: Text('$snapshot.error'));
                        } else if (!snapshot.hasData) {
                          return const Center(
                            child: SizedBox(
                              width: 50,
                              height: 50,
                              child: CircularProgressIndicator(),
                            ),
                          );
                        }
                        var docs = snapshot.data!.docs;
                        return ListView.builder(
                          shrinkWrap: true,
                          itemCount: docs.length,
                          itemBuilder: (BuildContext context, int index) {
                            final doc = docs[index];
                            return RadioListTile(
                              groupValue: _productId,
                              value: doc.id,
                              onChanged: _onSelectProduct,
                              title: Text('${doc['name']}'),
                            );
                          },
                        );
                      },
                    ),
                    const SizedBox(
                      height: 30,
                    ),
                    Column(
                      // mainAxisSize: MainAxisSize.c,
                      children: <Widget>[
                        if (_checkoutSessionId.isEmpty) //

                          Padding(
                            padding:
                                const EdgeInsets.symmetric(horizontal: 16.0),
                            child: ElevatedButton(
                              style: ElevatedButton.styleFrom(
                                  textStyle: const TextStyle(fontSize: 20)),
                              onPressed: () async {
                                final price = await FirebaseFirestore.instance
                                    .collection('products')
                                    .doc(_productId)
                                    .collection('prices')
                                    .where('active', isEqualTo: true)
                                    .limit(1)
                                    .get();
                                final docRef = await FirebaseFirestore.instance
                                    .collection('customers')
                                    .doc(FirebaseAuth.instance.currentUser?.uid)
                                    .collection("checkout_sessions")
                                    .add({
                                  "client": "web",
                                  "mode": "subscription",
                                  "price": price.docs[0].id,
                                  "success_url":
                                      'http://localhost:5600/success',
                                  "cancel_url": 'http://localhost:5600/cancel'
                                });
                                setState(() => _checkoutSessionId = docRef.id);
                                print(_checkoutSessionId.toString());
                              },
                              child: const Text('Subscribe'),
                            ),
                          )
                        else
                          Subscription(
                            checkoutSessionId: _checkoutSessionId,
                          )
                      ],
                    ),
                  ],
                ),
              ),
            ),
            Expanded(
                flex: 2,
                child: Container(
                  color: Colors.orangeAccent,
                  height: MediaQuery.of(context).size.height,
                  child: Image.network(
                    'https://cdn-icons-png.flaticon.com/512/5230/5230935.png',
                  ),
                )),
          ],
        ),
      ),
    );
  }
}

On the Dashboard page, we are retrieving the data from the product collection. Here, you will get the product ID. Using that product ID, we can fetch the product price from the prices collection. See Below:

StreamBuilder<QuerySnapshot>(
                      stream: FirebaseFirestore.instance
                          .collection('products')
                          .where('active', isEqualTo: true)
                          .snapshots(),

Creating Checkout session

To subscribe to Products, you need to have a Checkout Session ID. In order to get this ID, you can create a Checkout Session document in the Customer collection with the help of the recurring price ID.

To create a Checkout Session ID for the recurring payment, pass mode:'subscription'to the Checkout Session doc creation. For example:

final price = await FirebaseFirestore.instance
                                    .collection('products')
                                    .doc(_productId)
                                    .collection('prices')
                                    .where('active', isEqualTo: true)
                                    .limit(1)
                                    .get();
                                final docRef = await FirebaseFirestore.instance
                                    .collection('customers')
                                    .doc(FirebaseAuth.instance.currentUser?.uid)
                                    .collection("checkout_sessions")
                                    .add({
                                  "client": "web",
                                  "mode": "subscription",
                                  "price": price.docs[0].id,
                                  "success_url":
                                      'http://localhost:5600/success',
                                  "cancel_url": 'http://localhost:5600/cancel'

In the below code, we have created a Subscription stateful widget, and here we are passing the Checkout Session ID, which we have retrieved from the Checkout session. Please wait for the Checkout Session to get attached by the extension. The extension will update the doc with a Stripe Checkout session ID and generate the URL, and this can then be used to redirect the user to the checkout page.

subscription. dart

subscription.dart

import 'dart:async';
import 'dart:html' as html;

import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:firebase_auth/firebase_auth.dart';

import 'package:flutter/material.dart';

typedef _CheckoutSessionSnapshot = DocumentSnapshot<Map<String, dynamic>>;

class Subscription extends StatefulWidget {
  const Subscription({
    super.key,
    required this.checkoutSessionId,
  });

  final String checkoutSessionId;

  @override
  State<Subscription> createState() => _SubscriptionState();
}

class _SubscriptionState extends State<Subscription> {
  late Stream<_CheckoutSessionSnapshot> _sessionStream;

  @override
  void initState() {
    super.initState();
    _sessionStream = FirebaseFirestore.instance
        .collection('customers')
        .doc(FirebaseAuth.instance.currentUser!.uid)
        .collection("checkout_sessions")
        .doc(widget.checkoutSessionId)
        .snapshots();
  }

  @override
  Widget build(BuildContext context) {
    return StreamBuilder<_CheckoutSessionSnapshot>(
      stream: _sessionStream,
      builder: (BuildContext context,
          AsyncSnapshot<_CheckoutSessionSnapshot> snapshot) {
        if (snapshot.connectionState != ConnectionState.active) {
          return const Center(child: CircularProgressIndicator());
        } else if (snapshot.hasError || snapshot.hasData == false) {
          return const Text('Something went wrong');
        }
        final data = snapshot.requireData.data()!;
        if (data.containsKey('sessionId') && data.containsKey('url')) {
          html.window.location.href = data['url'] as String; // open the new window with Stripe Checkout Page URL
          return const SizedBox();
        } else if (data.containsKey('error')) {
          return Text(
            data['error']['message'] as String? ?? 'Error processing payment.',
            style: TextStyle(
              color: Theme.of(context).errorColor,
            ),
          );
        } else {
          return const Center(child: CircularProgressIndicator());
        }
      },
    );
  }
}

Finally

You can check the final output. We are first authenticating a user with a username and password. Once logged in, the application will navigate to the Dashboard page, where you can select the products you want to subscribe to. Once you click the subscribe button, it will redirect you to the Stripe Checkout page. You can then fill in all the required details and hit the subscribe button. Following a successful transaction, it will take you back to your app.

You can view the full code here:

Stay tuned for more updates and exciting news that we will share in the future. Follow us on Invertase Twitter, Linkedin, and Youtube, and subscribe to our monthly newsletter to stay up-to-date. You may also join our Discord to have an instant conversation with us.

main.dart

login_page.dart

Dashboard.dart

subscription. dart

Related posts