Stripe Checkout in mobile Flutter app

Have you ever struggled to integrate card payments into your mobile Flutter app? If so, today is your lucky day! In this post, I present how to use Stripe Checkout in the Flutter app without any hassle!

. . .

What is Stripe Checkout?

Stripe Checkout is a feature from Stripe which handles collecting all the payment data for you. Normally, services like Stripe, Square or Braintree offer you storing all payments information your app collects but they leave the UI part to the developers. This means having to handle all those boring stuff like card validation, 3D authentication, etc. which is not something you as a developer want to do.

Stripe Checkout is a customizable website to which you can redirect your users and where all the data will be collected and send to the backend. It leaves very little for you to worry about, therefore it’s easier and safer than the traditional way.

. . .

Payment flow

The flow is relatively easy, user presses the button, we (as a mobile app) ask the server to create a session, server returns the session id, we redirect to checkout page with that id. That’s the beauty of Stripe Checkout, it leaves very little to do for us as mobile developers.

. . .

Server Stub

Since I want this post to be as understandable as possible, I decided to create a stub of a real server. We will create a Server class in our Flutter app which will call Stripe API. This reduces the complexity of this workflow as we only need one source code to get the payment, however, it also introduces HUGE SECURITY VULNERABILITY as in the example I will have a Secret Key obtained from Stripe in my mobile app. This is a big no-no. You can’t have your secret key installed somewhere in your users’ devices. I know it works but please, DON’T DO IT IN REAL APPS. This stuff should be done by the backend team. 😉

. . .

Getting the session id

Let’s start with simple button which will call our “server” and get the new session id for the checkout:

. . .

Preparing the webview

Stripe checkout works only in web technologies (HTML CSS). It means we have to use WebView package to display it. What’s more, we need to have control on our webview so that we can include stripe script in it to redirect to the checkout page later on.

Notice that our HTML page is stored in a normal string and then just encoded. It could also be loaded from the file if you prefer it that way. It also has the