Hello guys, I know it’s been a while since I last released an article. The past few months have been filled with many new experiences for me, and I have been trying to navigate through all of them. However, I realised I had not written anything in a while and told myself I would work on writing at least two articles this month of November and be more consistent moving forward. This is me submitting to be held accountable by all my readers.
Today’s article is about handling payment in Flutter with Stripe. I was recently contracted by a company to work on several features on their mobile app within a very short timeline. One of those features was payment; of course, they wanted to use Stripe. I, on the other hand, have had no prior experience integrating Stripe into Flutter, but you would never catch me running away from a challenge, so I accepted the job and got to work doing my research. I had to gather this knowledge from various sources, but I will try my best to make this article as informational as possible so you don’t need to search anywhere else for answers regarding this topic. Enough of the long tales, let’s get into it.
Stripe:
First, a little about this awesome payment platform — Stripe. Stripe is a payment gateway used by millions of companies such as Shopify, and Instacart, including some of our big techs like Google, Amazon, and so on. They provide a simplified and convenient process to accept and send payments for businesses and their clients globally. They provide additional services such as issuing virtual and physical cards, handling recurrent payments, intelligent and diagrammatic analysis and reports on finances, generating invoices, and more.
One of the things that I found really interesting about Stripe as a developer is the ease of integration into a wide range of stacks, and the libraries to support it, and its support for native payment such as Apple and Google pay.
Getting started
To get started, we would need to generate an API key from Stripe. To do this, you would need to create a Stripe account. After this, login to your dashboard, activate Test mode for the purpose of integration and testing and go to Developers > API Keys to reveal your API keys (Publishable and Secret Keys).
Setting up our environment
Add the following packages to your dependencies:
flutter_stripe: ^5.0.0
flutter_dotenv: ^5.0.2
http: ^0.13.5We will be using the flutter_stripe package because it saves us the stress of creating our own payment modal by providing a beautiful one for us that contains all the fields and customization we need, plus it allows you to scan your card to fetch its details and comes with dark-mode ( *wink wink* ). The flutter_stripe package requires a few additional configurations for Android, so follow the steps on their documentation here to set that up.
We will be using http to interact with the Stripe API, you can use dio or any other package of your choice to handle your API requests.
Finally, the flutter_dotenv package is there to protect our Stripe Keys. I recommend placing your keys in a .env file in order to keep it safe and not expose you or your users to threats. Here’s how we’ll do that:
Create a .env file, I like to keep mine in my assets folder like this:
Place your Stripe secret key in your .env file like this:
STRIPE_SECRET = sk_test_39Aops3ZvLRexxxxxxxxxxxAdd your .env path to your assets in pubspec.yaml
assets:
- assets/.envAdd your .env to gitignore
#Dotenv
.envmain.dart
Our App contains a simple Home page with a button that reveals our payment modal.
This is our Make Payment function:
Let’s break this down into three simple steps.
STEP 1: Create Payment Intent — We Start by creating payment intent by defining a createPaymentIntent function that takes the amount we’re paying and the currency.
We send a post request to Stripe with a body containing the currency we’re paying in and the amount multiplied by 100 so it maintains its value when it is converted to a double by flutter_stripe. In response, Stripe sends back a payment intent. We will be using this in STEP 2 to initialize our payment sheet.
STEP 2: Initialize Payment Sheet
From line 7–15, in the makePayment function, we initialize a payment sheet. This will be used to create the payment sheet modal where we will fill in our card details and pay.
We pass in the client_secret obtained from the payment intent from the previous step. You have access to a range of parameters here including style which allows us to select the dark theme!
STEP 3: Display Payment Sheet
The final step is to display the modal sheet.
That’s all you need for the third and final step.
Tip: You can choose to add an additional response to users in form of an alert dialog when payment is successful or if there was an error processing payment like this.
C’est fini! You have completed Stripe integration into your Flutter application.
When you’re ready to launch your app, all you have to do is switch from Test mode to Live mode on your dashboard and follow the instructions from Stripe.
Let me know if you have any questions or comments 💬, and don’t forget to hit the claps 👏👏 if this article was useful to you.
Get the complete source code here.
It is recommended that you do not handle STEP 1 from the client side of your application for security reasons. Instead, you should set up your backend server to create the payment intent and return the client_secret used in STEP 2 to initialise your payment sheet. You can follow this link https://stripe.com/docs/payments/accept-a-payment?platform=react-native&ui=payment-sheet#react-native-add-server-endpoint on how to do that.
SO to Rémon Helmond, the creator of flutter_stripe package used in this application, for this contribution.