In App Purchases in Flutter

Key Takeaways

in 2018 the game candy crush made an estimated four million dollars from in-app purchases and microtransactions per day and like most of the top grossing mobile apps they sell useless digital products to casual gamers in today's video you'll learn how to implement consumable in-app purchases and flutter allowing you to sell your own digital products on iOS or Android via microtransactions not just doing this for money if you're new you're like and subscribe and you can find these source code on fire ship io and congrats to andrei hava you won the t-shirt from last week sweater video let's start by talking about how in-app purchases work from a high level and how to use them successfully in your app the first thing you should know is that there are three main types of in-app purchases consumables are products that are depleted that can be purchased multiple times like coins in a game in Summa bowls are what we're focused on in this video and we'll build a feature that allows the user to buy some gems consume them and then buy some more the second type is a non consumable which is something the user purchases once like an upgrade and then should never have to purchase it again in the future and the third type is a subscription which gives the user access to the purchase for a limited amount of time now these concepts apply to both iOS and Android but there are some subtle yet important differences that we'll look at when we get into the code in a few minutes and another thing you should know about in-app purchases is that they're almost always required if you're selling digital content that means API is like stripe and PayPal are out of the question but luckily flutter just recently released an officially supported plugin for in-app purchases that provides a unified interface across iOS and Android that's what we'll be using in this video but it is currently in beta so things may change in the future now when it comes to making millions of dollars per day you need to build an app that's both highly addictive and that targets a wide audience you should design your interface around dopamine hits and compulsion loops in other words reward the user on a regular basis but always keep them chasing the dragon so now that you know how to design your app let's go ahead and get into the technical details the first thing we'll take care of is the initial setup for both iOS and Android for iOS you'll need to have an Apple Developer account and making the assumption that you have a release of your iOS app on App Store connect it doesn't need to be on the public App Store just App Store connect for use with things like test flight there are a lot of small but easy steps involved with that that are beyond the scope of this video but the flutter documentation has a detailed guide for preparing an iOS release and I also have a video that covers it in my full flutter course in App Store connect we'll go to the features tab add a new in-app purchase making sure that it's a consumable type then we'll give it a name and a Product ID and we want to keep a note of this Product ID because we want that to be the same on the Google Play Store and everything else is just the pricing and display details for your actual product so now that we have our product will go into Xcode and enable the in-app purchases capability select the build target go to the capabilities tab and then flip the in-app purchases switch to on so that takes care of the Apple App Store now let's switch gears to Android and the Google Play Store at this point I'm assuming that you have a Google Play Developer account and you'll also need to go through the steps to create a signed release that can be uploaded to Google Play and once again there are a lot of easy steps involved beyond the scope of this video so refer to the flutter documentation or the full flutter course once you create the actual signed apk you'll need to create at least an alpha release for your app and that will allow you to test the Google Play billing API locally on your device that Google billing API simply won't work if you don't have a release created for your app and you'll also want to add your email address as a tester on that track from there we'll go to the store presence tab then to in-app products and then go to manage products now on Google Play you don't actually select a distinction between consumable and non consumable instead you handle that directly in the app and we'll see how that works in the source code in just a minute for now we'll go ahead and create a new product with the same product ID that we used on iOS now make sure to set your product to active and then everything else should be pretty self-explanatory now that we have the initial set up out of the way we can start developing our flutter app now I want to start by saying that the code I'm about to show you focuses on the API of the in-app purchases plugin I want to keep the implementation details as unup enya nated as possible so I'm only using the tools that are built into flutter but this is a type of feature that could benefit from things like provider block or firebase to manage the state of your purchases across multiple devices and screens but I'll leave those decisions up to you I just want to show you how to build a Minimum Viable Product using nothing but a stateful widget the first thing we'll do is add the plug to our pups Becky Amal then we'll go ahead and import it in our dart file along with IO so we can do platform checking I'm calling this the market screen and let's start by looking at the different properties or state available on the switch --it first we'll make a reference to the in-app purchase connection instance which gives us access to all of the API methods in the plug-in that will just keep our code nice and concise the first part of the initialization process is to check if the API is actually available on this device then we'll set up a list that keeps the product details that we query from the Google Play Store or the Apple App Store and then also a set of purchase details that gives us the users past purchases then we'll also set up a subscription that listens to a stream of updates to the purchase details so this stream will emit a new value when the user buys a product in the app or if they buy a product from a different client and lastly I have a placeholder for credits which is just used to represent the consumable product in this demo now moving on to the lifecycle hooks during an it state we're going to fetch the products and purchases from the corresponding marketplace and that stuff is all asynchronous so we'll move it into its own method and we also have a stream on this widget so we'll want to make sure to cancel it now the next thing we'll look at is the actual UI itself which is very simple in this case we have a scaffold with an app bar that will either display open for business or not available depending on whether or not the in-app purchases API is available from there we'll loop over the products that we fetch from the marketplace and then for each product we'll need to determine if the user has a past purchase for it if they have purchased a product then we'll create some custom logic to allow them to consume it otherwise we'll just go ahead and display a button that allows them to make a new purchase this is just a bare minimum UI example so you'll definitely want to customize it to fit within your own app now the next major hurdle that we'll tackle is initializing all the data in this widget we'll do that with an async method called initialize that we call during the net state lifecycle hook first we'll check to see if the API is available and then if so we'll go ahead and retrieve the products and the users past purchases and I've moved that logic into individual private methods just so we get a clear picture of all the steps involved and I'm sure someone will call me out on this so instead of awaiting products and then awaiting purchases you can do it concurrently by using future wait and add both of them together in a list and that will run them concurrently for a better performance now just because you have retrieved a purchase does not necessarily mean that it's valid so we'll also need to implement some business logic to verify a purchase and then throughout the lifecycle of the app the user will hopefully purchase additional products so we'll want to set up a subscription to the purchase updated stream this stream will emit a list of newly created purchase details so when the stream emits a new value we can take those new purchases and then append them to the existing list on this widget what you don't want to do is override the existing list because the stream only emits new purchases so that's just something to keep in mind so now let's look at the implementation details for this data retrieval first we get products which is no different than making an API call or reading from a firestore document we just create a set of the product IDs that we want to retrieve from either the App Store or the Google Play Store and then we run in app purchases query product details that's going to give us a response and then we can check that response for errors or to see if any of the product IDs are missing but for the sake of simplicity we'll call set state and set the products equal to the response product details so that gives us our products for sale now we need to get the users past purchases this is a very similar process but instead we call query past purchases but there's one major caveat and this method does not return consumed products because they consumed product can be purchased multiple times it's not going to be returned by this method that means you need to save the state of a consumed product in your database that's the only way the user will be able to retrieve it after this widget has been destroyed so getting past purchases from the actual marketplace itself is really only relevant for non consumable products but one of the caveat that you should know about is if you retrieve past purchases you'll also want to mark them as complete on iOS now if you do have a consumable product it will be 100% your own business logic to retrieve it if this were my app I would be using firebase so I would most likely retrieve it from the firestore database in any case the final step here is to call set state and set the purchases list on this widget now the next thing we need to do is figure out if a user has purchased a specific product in this case I'm just going to create a helper method that takes a Product ID as its argument and then that loops through the purchases list to see if we have any matching IDs if we have a match then we'll go ahead and return the purchase details otherwise we'll return null now the next method is also going to be 100% your own business logic that will take a purchase and then actually deliver it in the app itself in this demo we only have a single product so we're going to see if that user has purchased the product and we'll also go ahead and make sure that that purchase is valid these status can also be error or pending so we wouldn't want to deliver the credits or the gems to the app if the user hasn't fully paid you'll want to verify purchases both when the app is initialized and then also when a new purchase is emitted through that purchase updated stream and you may even want to do that server-side so at this point we have all of the necessary data loaded into our widget and now we need to give the user away to purchase a product as well as consume a product inside of our products loop we'll have access to individual product details which we can then pass to this by-product method to create a purchase per Ram that will send the necessary data over to the corresponding marketplace and then because Android doesn't make the distinction between consumable and non consumable you need to do that when you purchase the product so for one-time purchases you'll use by non consumable but in our case we want the user to buy this multiple times so we'll say buy consumable now by default it will be marked as consumed automatically which means it's up to your own business logic to control the state of that purchase however I would like to point out that you can set Auto consume to false which only applies to Android and that will prevent the user from purchasing that product again until you actually mark it as consumed and we can actually demonstrate how that works with our next method here called spend credits it takes the purchase details as its argument and then it will decrement the credits on this widget every time the user taps a button when the user runs out of credits or when they equals zero we'll go ahead and tell the Google Play Store that that purchase has been consumed and that will allow the user to purchase another instance of this product otherwise they'll get an error that they already own this product and that's all there is to it we now have all the pieces in place to sell our users an infinite number of useless gems and we just need to refine our dopamine hits and compulsion loops to start making millions of dollars per day if this video helped you please like and subscribe and consider becoming a pro member on fire ship IO to get access to the full flora chorus and a bunch of other exclusive content thanks for watching and I will talk to you soon [Music]