Stripe Integration with Flutter and Firebase Cloud Functions
For one of my recent projects in Flutter, I was required to integrate Stripe SDK for payments where I used Firebase for the backend side. It was a pretty challenging task for me as there are not many resources available online for a clean set-up of cloud functions for such frameworks. Thus, I would like to write and share about my experience on this.
Before we continue further into this topic, you should already possess some knowledge on Flutter and Firebase.
So, let’s dive into it, shall we? 😊
Let’s start by creating a sample Flutter project. You can name it as StripeFlutterProject and set up your main.dart file.
You will need to add these two packages into your pubspec.yml file:
stripe_payment: ^1.0.6
cloud_functions: ^0.7.2
Prior to this, you will have to create a Stripe SDK and Firebase account. I shall not go into details on that, but here are some links you can follow to create your accounts.
https://firebase.google.com/docs/projects/learn-more#setting_up_a_firebase_project_and_registering_appsFirstly, you need to set up a Firebase project and database at console. Then, you can add more packages (the versions provided below are the ones I used in my project. Alternatively, you can add the latest stable packages) into your Flutter project for the Firebase configuration as listed below;
firebase_core: ^0.5.3
firebase_messaging: ^6.0.16
firebase_database: ^4.4.0
The next step would be to download the GoogleService-info.plist file from your Firebase console and add in the Android and iOS folders.
Now, for the backend side (cloud functions), you will have to create a node project where we write all our stripe functions. Having your stripe keys and functions stored on the backend is more secured and it allows you to perform all the heavy tasks that are related to payment.
I am adding basic cloud functions for payment. I’ll explain them one by one. To set up cloud function create a node.is project. Alternatively, you can also add the cloud function in google cloud console. I will be creating a separate cloud function project, let’s name it stripe-cloud-functions.
Prior to that do install Firebase tools and login to your Firebase account using command line.
npm install -g firebase-tools
You can set up your cloud function project by following below link:
You can add below functions in your index.ts:
You need to deploy these cloud functions on your firebase console. Next step would be to call this cloud function from your flutter app, let’s add code in your flutter app to trigger above cloud functions from your app over http.
Note: Add cloud function package in your pubspec.yaml file:
cloud_functions: ^0.9.0Don’t forget to run flutter pub get once you add new package in the project, Now create a firebaseService.dart file in your flutter project, this dart file should basically handle your firebase calls and references. You can add your cloud function reference with below intents, one thing to note here is that you need to pass the cloud function name in your callable instance.
//Cloud functions referencestatic final HttpsCallable CREATE_INTENT = FirebaseFunctions.instance.httpsCallable('createPaymentIntent');static final HttpsCallable GET_PAYMENT_INTENT =
FirebaseFunctions.instance.httpsCallable('getUserPaymentIntent');static final HttpsCallable CONFIRM_PAYMENT_INTENT = FirebaseFunctions.instance.httpsCallable('confirmPaymentIntent');static final HttpsCallable CREATE_CUSTOMER_CHARGE = FirebaseFunctions.instance.httpsCallable('createCustomerCharge');
Call these Intents from your flutter app, It will basically trigger the respective cloud function, You should always handle the payment business logic on backend (cloud functions in this case) as it’s more secure and recommended by stripe.
To trigger these intents you need to call them from your relevant dart file (in my case it’s the page where I show my card details and ask user to pay) something like this:
FirebaseService.CREATE_INTENT.call(<String, dynamic>{ 'methodId':paymentMethod.id, 'amount': nAmount, 'currency': 'sgd', 'application_fee_amount':fee, 'stripeId': widget.cardModel.stripe_account}).then((response) { print("itent response: " + response.data.toString());
hideLoading(); confirmDialog(response.data["client_secret"],response.data["payment_method"], response.data["id"]); //function for confirmation for payment}).catchError((error) { print("intent error: " + error.toString());
hideLoading();});
Once you call this firebase service Intent, your logic on backend will run and on confirming payment intent, user’s payment method will be charged. In my case I used card payment method and charged user card on any specific service provided in my app.
That’s all for now, you guys can try this and let me know in comments if I missed something or do let me know if you guys have any better approach.
Hope you enjoyed reading this article 😊. Happy coding, Cheers! 🍻
