If you want to accept payments using Stripe Checkout in your Flutter web application, this article is just for you!
Stripe Checkout in Flutter Web Application
Flutter Web is getting more mature every day. I believe it’s about the time we should start focusing on migrating all the Flutter mobile knowledge to the browser environment. In that spirit, after writing an article on using Stripe Checkout in mobile Flutter apps, I think I should also show you how to easily collect payments on the web and that’s what this article is about.
Why is it different from mobile?
You may be thinking “Why can’t I just use the code from the previous post and deploy it on the web? It should work, right?”
Well, there is one big reason and one minor reason for that: Checkout in Flutter
- The big one is that on mobile we were using WebView package for displaying the checkout page. This package doesn’t support Web so that is a party-stopper for us. Besides, why would we use WebView, when we are already on the web?
- The other reason is that we have been using a “server stub” to act a as fake server creating the session. If we run our flutter web app locally, we cannot do https request (as far as I know) and Stripe only accepts those kind requests for creating sessions. Because of that, we will modify our workflow to use client-only integration which is a way to collect payments without the backend server
You Might Also Like : How to restrict system textScaleFactor
Calling JS functions without webview
redirectToCheckout from the Stripe library. On mobile, we used
For me, this library works like magic, we can use
The easiest part is copying
<script src="https://js.stripe.com/v3/"></script> to
index.html. You can find it in the
web directory of your Flutter project. Just copy that line inside
Now we need to analyze what are the classes provided in the Stripe library. First, there is a
Stripe class that has a constructor accepting the key and the
redirectToCheckout method which contains some parameters. What we have to do is to create a Dart class that has the same contract.
Ok, but what are
CheckoutOptions and how will Stripe know how to process them?
It’s just another class that will represent data needed by Stripe library. We are using them to determine products we want to sell, what time of payment we will accept and where to redirect in cases of success or cancellation.
@JS annotation, we are also using
@anonymous because in JS example from the docs you can see, that there are no class names.
Alright, we have created a few weird-looking classes that don’t really do anything. How do we use them?
The same you use any Dart code! The Dart-JS mapping will happen without you doing anything more!
Technically, that’s all. This code when run on Flutter Web should redirect you to the Stripe Checkout page. After succeeding it will then redirect you to a specified URL. In our case it’s
Obviously, it’s better to not redirect to the localhost in the production app and point to a nice and fancy domain.
On button click, we will call
redirectToCheckout and that how it should look like:
. . .
One codebase for all platforms
In this post, I showed you how to do stripe checkout which will work only on the web. In the previous one, it worked only on mobile. I think it might be a good idea to show you how to make it work on both platforms at the same time.
The crucial problem to overcome is that we cannot use JS library on mobile. We can’t even import it! In order make it work, we need to create a file that will conditionally import mobile or web packages depending on the platform it’s run on. It can look like this:
What happens here is the first
redirectToCheckout method tries to import
stripe_checkout_stub.dart but if it’s run on mobile, it will use
stripe_checkout_mobile.dart instead and on the web, it will use
stripe_checkout_web.dart instead. Therefore the stub method should never be called. The mobile and web implementations are the ones created in this and previous post.
And that’s it!
Now we can accept payments on all platforms with the help of our Checkout in Flutter Web Application