Stripe Payments in Flutter

Introduction:

A few days ago I was searching How to integrate Stripe Payment Gateway with flutter to integrate it with my client’s app. And I found an article on medium and a video on YouTube but both were outdated. As both came out in 2018 and till now (it’s 2020) both stripe API and Stripe package have changed a lot but after 2 days of reading the documentation I was able to integrate it with the flutter.

BUT documentation is not for all people especially if they are new to the programming world. So, I decided to publish an article to integrate the Stripe Payment with Flutter.

Begin..

1 — Create a new Flutter Project

2 — Add firebase authentication to your flutter app also I will be using Firestore to store user’s data(You can find a lot of articles on how do that just google it).

3 — Upgrade your firebase plan to Blaze. You cannot proceed without the Blaze account. or find any other alternative.

4 — Set up Node.js and Firebase CLI to deploy Firebase Cloud Functions. You can view the following link to get started with Firebase cloud Functions

https://firebase.google.com/docs/functions/get-started?authuser=0

I will be using JavaScript for cloud function.

5 — Create a stripe account. For this article, You don’t need to activate it by providing the business details as we will be using the test API keys and cards.

6 — Add the following package to your flutter Project

stripe_payment (I am using 1.0.6 version.)

Note: You need minSdkVersion 19 (for Android)and TargetPlatform.ios 11 (for iOS)

Now the app works like this

Note Pay Via Stripe Does nothing till now. But Soon it will start working :).

And my Firebase Cloud Firestore Looks like this till now

Now going to do some real things to integrate stripe

How does it work?

First I will tell you how does it work. Basically following is the flow.

1. Ask the user’s card details
2. Calling function to create Intent(created in Cloud Function).
3. Calling function to create intent (of Stripe API) from Cloud Function. We need to call this function from Server Side because it requires our Stripe Secret API key and we don’t want our Secret Key to be at client Side.
4. Stripe Return a response that is a HashMap. For now, we only need Client Secret but you can read more what this response contains here.
5. Then after receiving the response, we will ask the client for Payment confirmation.
6. After the client’s confirmation, we will call confirmPaymentIntent function of Stripe API. So Stripe will charge his account

Cloud Function Code

First retrieve the Secret and Publishable Keys from Stripe Dashboard > API keys

Then Install Stripe to your functions folder by running following command

npm install stripe --save

Write following code In functions/index.js. The function createPaymentIntent will create the payment Intent for the customer. We will call this function from our mobile.

Then deploy function by running following command

firebase deploy --only functions

Flutter Code

First add following Package

cloud_functions (I am using 0.4.1+8 version)

Import Following Packages

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

Following code will set your Stripe Publishable key

StripePayment.setOptions(StripeOptions(publishableKey: "YOUR_PUBLISHABLE_STRIPE_KEY"));

Note: Add your SECRET Stripe key to the server code only.

Cloud Function Instance

Following code will create the instance to Cloud Function

final HttpsCallable INTENT = CloudFunctions.instance
.getHttpsCallable(functionName: 'createPaymentIntent');

Converting amount to Cents

Stripe process payments as Cents. Means if you want to charge $1 you will have to pass 100. So we will be multiplying the amount (in $) with 100.

Asking Card Details and Processing Payments

Following code is to ask the user for card details and call cloud function to create payment intent when user clicks Pay Via Strip.

Card Input and authentication will be handled by stripe sdk. You Just have to call the function

StripePayment.paymentRequestWithCardForm(CardFormPaymentRequest())

Following function (confirmDialog) is to ask client for confirmation of Payment

Following Function will send the confirmation to Stripe

Following Function to add payment details to firestore (addPaymentDetailsttoFirestore())

Final Output

You can view the payments in the Stripe Dashboard > Payments

Conclusion

Till this point you have charged a customer using Stripe Payments. But there are a lot of other scenarios of Payments, Like

• Saving the customer’s cards details.
• Charge Customer monthly.
• Charge from Customer and then Payout to sellers/service provider like Lyft, Uber.

We may be exploring the different Payment scenarios in future because My main motive to write this article was to introduce the flutter developers with flutter + Stripe as all the other articles till now are out dated. But anyone can explore more things at Stripe Docs.

Thanks for reading my article so far, please give me your feedback. You can find the full code here. If you liked my article please do Clap For me. Thanks.