Accept Payments Using Google Pay Through Stripe in Flutter
Easily Integrate Google Pay Through Stripe Payment Gateway In Your Android Apps.
Google’s Flutter is an excellent platform and I like its capability to build robust hybrid apps the most. Flutter app development services can help entrepreneurs come up with feature-rich apps in a short time. As a Flutter app developer, I keep on exploring the possibilities of integrating innovative features and functionality in Flutter apps.
Recently I was searching How to integrate Google Pay using Stripe Payment Gateway in Flutter. I have also checked Stripe Official Documentation For Google Pay. But documentation is not for the Flutter Platform. So I decided to publish an article to integrate Google Pay using Stripe in Flutter.
Stripe is the software platform for running an internet bussiness. It’s a suite of payment APIs that powers commerce for online businesses of all sizes.
Use of these platforms in this integration.
Lets first make a note of the tasks we are going to do :
- Use Android Studio and Visual Studio Code as an Editor.
- Create a new Flutter Project named as per your choice.
- Use a stripe_native plugin.
- Create an Account on Stripe. Just Sign up and Sign in, not required other details as we will be using the test API keys.
- Create Flutter Project on Firebase Console and Upgrade your Firebase plan to Blaze Plan(Paid Plan). A paid account is the most important one.
- Setup the Node.js environment in your system.
- Setup Firebase CLI to deploy Firebase Cloud Functions.
Create a Flutter Project in your Android Studio or VS Code.
Use stripe_native Plugin
Add this plugin into pubspec.yaml file.
Please run the following command
flutter pub get
Create Account on Stripe
Go to Stripe Website then perform Sign up and Sign In.
After Creating Stripe Account Go to Dashboard.
Click on Get your test API keys. It gives you two API keys (Publishable Key, Secret key).
Note : I have followed coding standards into this so when there is requirement to show details of particular word then its written below gist.
Lets set this Publishable API key in your project file.
publishableKey : ‘ Your Stripe Account Publishable Key which mentioned on Dashboard ’
merchantIdentifier : ‘ Test ’ (As we are in test mode)
Note : Please use the latest version of all plugins at the time of your development.
Also, add below plugins (Ignore if already added).
We have two APIs for Charging the customers.
Limitation of Charges API and Benefit of Payment Intent API :
Charges API does not support scaling businesses or customers outside of the U.S. and Canada.
Payment Intent API for more robust and global payments.
So After referring to the documentation of both APIs I have come up with this.
It indicates to try new payments APIs and Integrations instead of old ones. So I am preferring you to use Payment Intent API instead of Charges API for charging the customers.
So Let's do back-end part first using Node.js, Cloud Function, and Visual Studio (Only for Server Side Development).
Create Project On Firebase Console And Get Blaze plan
After Upgrade your plan to Blaze Plan
Setup Firebase CLI To implement Cloud Function
Run the following commands in terminal :
npm install -g firebase-toolsfirebase init
After running the last command you will get this window in the terminal.
Choose Functions: Configure and Deploy Cloud Functions.
After that please choose your project according to your project name and finish all the steps.Please install all the npm dependencies which it’s asking for. It generates some files into your functions folder.
Let's focus on the index.js file.
First seven lines from the top used for getting access to platforms.
Please replace<Your Secret Key> into your secret key provided on Stripe Dashboard.
exports.createPayment , exports.confirmPayment and exports.cancelPayment indicate our Cloud functions for Stripe Payment.
You can see these three lines in the above code. It's written from API documentation of Stripe to complete our payment integration from creating Payment Method to Confirm Payment and Cancel Payment.
To deploy firebase cloud functions run the following command :
firebase deploy --only functions
You can see cloud functions in your firebase console.
Now Let’s Call this cloud functions from our Front-end side. So open your Flutter Project in Android Studio.
Please note the below lines if you get any error when running.
Ensure to be on a minSdkVersion 19 in build.gradle(app-level) file.
make sure to have multiDexEnabled true also.
First, make StripePaymentManager class to separate out code for calling API.
europeRegion : ‘ europe-west3 ’
createPaymentMethod : ‘ createPayment ’
confirmPaymentMethod : ‘ confirmPayment ’
cancelPaymentMethod : ‘cancelPayment’
amountKey : ‘ amount ’
currencyKey : ‘ currency ’
tokenKey : ‘ token ’
paymentIntentIdKey : ‘ paymentIntentId ’
paymentMethodIdKey : ‘ paymentMethodId ’
paymentStatusKey : ‘ paymentStatus ’
cancelStatusKey : ‘cancelStatus’
Three model classes : PaymentIntentInfo , ConfirmPaymentInfo and CancelPaymentInfo.
Okay, now you are done with the API calling part. So you have passed half of the implementation and will complete it soon.
Now let's go to GooglePayment Screen, declare these below variables which we will use in the future.
Let’s build the Button Widget.
nativeTextStyle : You can define your prefer Textstyle.
spacingSmall : Any Size According to requirement.
Now we want click event of this native button so let's go with the below code.
Final Result After the click of Native Button.
You will see this error Unrecognized app. Please make sure you trust this app before proceeding, please don’t bother about it. This error indicates that the app uses ENVIRONMENT_TEST and doesn't receive real payment credentials. When you will change your environment from test mode to live mode error will be resolved.
According to me, we have to ask the user again that if he/she really wants to do further payment process. So I have added one AlertDialog to get confirmation from User. Please check the below gist for the Dialog feature.
Please define your TextStyle in every Textstyle which mentioned in above gist
When the user will go with the Continue button, there is some create payment process starting in the background and after this popup will be shown.
Let’s implement the Confirm and Cancel Payment scenario.
paymentSuccessStatus : ‘ succeeded ’
cancelStatus : ‘ canceled ’
successPaymentStatus : ‘ Payment Successful ’
cancelPaymentStatus : ‘ Payment Canceled ’
Okay, finally you have done a great job so far. Please run the following command in the terminal.
flutter run
When a user taps on the Confirm button, the final result is…
Yeah, we did it. You can see this in your Stripe Dashboard also.
When a user taps on the Cancel button, the final result is…
Yeah, we did it. You can see this in your Stripe Dashboard also.
Conclusion
We have done all the Implementation and Google Pay Payments using the Stripe testing section. If you want to do implement for Production purpose then you have to Activate your account by filling your business details. So After that, you can get access to Live API keys and go ahead.
So, that’s it for Google Pay using Stripe in Flutter.
You can find the whole project with clean architecture on Git Repository :
