Flutter: Stripe, Apple & Google Pay
For the past few months, I have worked on a platform for restaurants to reach their customers through the app stores. For nearly every restaurant owner and operator, the point of friction lies in the payment processor. Even when offering my app for free, and not taking any money from customer transactions, it was difficult to find willing partners. There are so many payment processors with widely differing services, operators always have a favorite that they are unwilling change from. It was even difficult to convince restaurants to have multiple payment processors. I am hoping that a pivot to Stripe using Apple&Google Pay will eliminate the hesitation that restaurants feel with adding a new revenue source.
The main reason I chose Stripe was to eliminate the subscription cost (even when I ate this cost, restaurants were worried they’d have to pay in the future) that came with other processors. Stripe charges a flat fee per transaction, 2.9% and 30cents.
When I began looking around at Flutter for Stripe, I found a bunch of useful and well written plugins. My favorite was stripe_payment, there existed a simple implementation for iOS and Android to collect Stripe source tokens from a card input view. Since this is all open source, there were a number of inspirations that I was able to draw from this plugin by Jonas Bark. I wanted to use Apple & Google payment sheets to collect Stripe source tokens like Jonas did with card input.
In my restaurant platform I was able to delete my old payment processor, and add Stripe! I used my own plugin to display payment sheets and collect one-time chargeable source tokens. It did also require writing an endpoint that used the charge StripeAPI to complete the transaction.
If you’re looking to use the plugin, you’ll need to create a Stripe project and retrieve a publishable key.
Next will be connecting Stripe and Apple’s merchant identifier. This requires going to settings in the Stripe dashboard then Apple Pay. The popup attached to add application button will download a certificate, and walk one through signing a merchant key.
After that, open the iOS module of the Flutter project with Xcode. Here will be where we add the signed certificate and Apple pay capabilities.
Android does not require this step to use Google Pay, but it will remove a warning to users that the app uses an unidentified merchant. Lastly, add stripe_native to pubspec.yaml.
Before opening a payment sheet, be sure to set the publishable key and merchant identifier using the helper functions.
Now one is able to call the payment sheet without error, there are two ways to create a sheet. One is using an order helper, an object with a subtotal, tax, and tip amount. And the other is a receipt helper, a list of item with prices. Both of these options require a merchant name to display too.
Notice that both of these function return a Future<String>, this string is a source token associated with the payment method chosen by the user.
Use this token to query the Stripe charge API.
On iOS, the payment sheet has its own animation. Use confirmPayment to show the user whether the payment was successful or not.
I used Node.JS to write my endpoint, and found the Stripe API to be well documented. The source parameter takes the token generated by stripe_native. And the amount parameter is the whole-cent cost of the transaction. By default, the charge is captured and seen immediately on the Stripe dashboard!
