Flutter In-App Subscription Tutorial (iOS and Android)

hello my name is dave flisky and today i'm going to show you how to set up in-app subscriptions for a flutter app using revenue cat this tutorial is going to cover how to set up both monthly and yearly subscriptions for ios and android and we are going to be using the magic weather sample app that revenue cap provides so the first thing we're going to need to do is actually clone that repo locally and then run the sample app so you can find this repo on github and i'll have links to everything below there's also a written version of this tutorial that you can check out and all the links will be within that as well so we're going to clone this if you copy this right here then you can open up your terminal and i'll just do this on my desktop and we're going to be running git clone and then paste in that repo there you'll see i now have the purchases flutter folder here if you open this up it's just the same exact stuff that's in github if you go to the revenue cat examples you can see the magic weather app is right there this is the whole sample app that we're going to be actually using next we can open that up in our editor i'm going to be using android studio but you could also use vs code in android studio we're just going to open that file from the revenue cat examples there all right and now we can actually open the terminal down here and we can run a flutter pubget and this will simply get us all the packages that this app contains from here we can run the app i'm going to be using an ios simulator for this but everything we're covering here will work for android as well here's an error that you might see pop up about the cocoapods and this happens quite often simply all you have to do is run pod repo update so we're going to go ahead and do that and actually i believe we need to do this in the ios folder so run it over in there and then we can try running this again all right great so the app is running right now you'll see we have two tabs down here the weather and the user the user is really not saying much it just kind of has an anonymous user id here that you can read and you can see the subscription status is not active also we have the change the weather button down here if you click on this you'll see it just pops up with an error that's expected because we haven't fully configured the app to work so let's go ahead and do that now so the next thing we need to do is actually log into our revenue cat account and create our project there over in revenuecat i have this new account here which is completely blank there's nothing in it so i'm going to go over to projects and create a new project and i'm going to name this magic weather once we're in the dashboard here the first thing we want to do is actually create an entitlement entitlements and revenue cap allow us to give a user access to specific features in our app without needing to manage the actual product identifiers within our code base this is very valuable and one of the huge perks of revenue cap because once we set this up on the entitlement basis we can go into revenue cap later and change our products out and link them to that entitlement but everything will still work as you would expect without having to redeploy your code base creating the entitlement is simple we can just click on the entitlements tab and then we're going to add a new entitlement we're going to call our entitlement premium because it's going to give the user premium access to our app and for the description we're simply going to put premium access to all app features now we can click add and we will have our entitlement here so now we can go update our app to actually look for this entitlement back in android studio we're going to go into the lib folder src and then find the constant dart file this is the file that we need to get fully updated so that our button down here will actually work the first constant you can see is the entitlement id and it is already set to premium so as long as you set your entitlement id to premium all lower case then you actually don't need to update this one but if you made this identifier named anything else you just want to make sure that you update that entitlement id in the code as well next we have the footer text which you can go to the comment linked and read more about but for now we're just going to set that to a few sentences that say by purchasing this you're agreeing to actually pay for it and once the subscription ends you're not going to have access to it but you can cancel it typically when you have your privacy policy and your terms and conditions you would link those in there as well but for now we're just going to leave this as a simple paragraph next we need the apple api key which we can generate within revenue cap so we're going to go over to the apps and then click on the app store name the app magic weather and now we need to get the bundle identifier this you can get from xcode so if you go back into android studio here you can open your project in xcode by right-clicking ios and then going to flutter and open an xcode once xcode opens up you're going to click on the runner tab here and you'll see your bundle identifier is right here now if you're following along with the sample app as i am you will need to make this something unique so i'll add flutter to the end of it but typically what you want to do is actually change this beginning part and normally what this would look like would be com and then it would be your name so typically you would have not revenue cat here but your name or your company name there and then after that you can pretty much have anything if you're using your own app you probably already have a bundle identifier that will work let's copy this and we'll paste that bundle identifier there now we need to get the app store connect specific shared secret so this is assuming that your project is already set up in app store connect which i do have mine set up right here you can see magic weather flutter if you don't yet have your project set up in app store connect you can follow the link in the description to help you get that set up what you're going to do once you're in here is go to the subscriptions and you should already have your subscriptions set up as well i'll talk about this a little bit more in a bit but you're going to go down to the app specific shared secret and click manage and you'll see right here the app specific shared secret go ahead and copy that and then you're going to set this here within revenue cat here and click save changes so once you've done this it's actually going to generate an api key for you so if you go to api keys you'll see you now have an apple magic weather api key and if you click show key you can then copy that key and this is what we need to put in our app right here for the apple api key now we can get our google api key in a similar way we'll just go back to apps here and we're going to add a new app and then click on play store and then we'll name this also magic weather and now we need the google play package which you can also find within android studio if you go to android apps and then the build.gradle file you can find the package right down here in a similar way we're going to change this so that it is unique copy that over and place that in here you'll then need to create the service account credential json file which if you follow this link will give you a bit more details on how to do that that will happen in google play console so i already have an app also configured in here for this in google play console from within google play console you'll want to be on the highest level here and you're going to go to setup and then api access so you might already have some of this set up and you might not generally you're going to have to link a project i already have a project link so i don't need to do that if you don't already have a google cloud project linked you will need to link a google cloud project once you have that linked once you scroll down you'll see your list of service accounts within your service accounts you're going to create a new one so if you click this learn how to create service accounts it's going to actually kind of tell you but you need to do this within google cloud platform from here you're going to click create service account and now you'll name your service account so mine will be the magic weather revenue cap video uh but you can name this anything you want i would recommend making this kind of specific so that you can easily find it later then you'll get a service account id which is fine the way it is and here you can add a bit of a description if you'd like i'll just make the description and the title the same then we're going to create and continue these roles are important you want to select the pub sub admin and then you also want to add another role and this will be the monitoring viewer so this one doesn't need to be the admin it's just a monitoring viewer right here monitoring viewer so you want the pub sub admin and the monitoring viewer then you can click continue and then from here you'll just click done right down here at the bottom of our list you can see the new service account that we just generated which is that magic weather revenue cap video from here you're going to hit these three dots and then click manage keys now we need to add a new key so we're going to create a new key and this will be a json key and then we can click create and downloaded that json file which we're going to upload to revenue cap but there is one last step that we need to complete here and this is actually going to be back in the google play console so we can hit done on this and then we're going to refresh our service accounts here and then we're going to find our new service account which we just created which is going to be right here and then we're going to click manage console permissions and under the account permissions there are three things you're going to want to make sure are checked first that the view app information and download bulk reports read only is checked and then under the financial data you're going to want to check both of these and this is just going to allow cat to see some of the purchase data from within the app so that you can actually get some nice reports within revenue cap uh the rest of them you can just leave as they are and then you can click invite user and then send the invite what this basically does with this inviting of the user is is creating a user that's basically subscribed to these updates from your app and then when we take that json file that we generated and put it in revenue cat it's allowing revenue cat access through that new user that we created to see the information within your app which will be information related to the subscriptions information related to the downloads information related to the financial data but we have one last step in google play console here because we didn't actually connect our app to this new user that has this permission so at the highest level of google play console we're going to go to users and permissions and then we're going to find that new user that we just created and then we're going to go into here and now we need to add our app so under our app permissions you see currently right now we have nothing so we're going to add our app and then select the magic weather flutter app that we have and click apply the defaults here are what we're going to leave and then we're going to click apply here finally we need to save these changes and then it's going to prompt us but we'll hit yes so now that user is actually linked to our magic weather flutter app so the last step here is to go back into revenue cat and upload that file which it should be in our downloads folder and then we'll click save changes here and at this point we now have our android app configured within revenue cat so we should have another api key if you go to api keys you'll see we now have an android one so we could copy that key as well and back in android studio just like we did for the apple key we'll update the google key as well and now we can save that so now that we have all our constants set up if we go ahead and click the change the weather button again we get an error still but it's a different error this time and what this area is saying is that there are no available products in revenue cap for us to display to the user now let's go ahead and set up those products this video is not going to cover in detail how to add products to app store connect or google play but there are links in the description below which will give you step-by-step instructions on how to do this you can see an app store connect if we go to the subscriptions we have our premium subscription group if we click on that we will have two different subscriptions so we have the premium year and the premium month and take note of this product id here this is what we're going to be using within revenue cap we're also going to have a similar thing in our google play app so if you scroll down towards the bottom and go to subscriptions we have two that are in use you can't actually delete these this one is just one that needs to be deleted uh but we have our premium year and our premium month so back in revenue cat we're going to click on our products tab here and we're going to add all four of those products two for apple and two for ios so if we click new the identifier here will do apple first we have our rc premium year and make sure when you add this you're adding it to the app store and then secondly we have our rc premium month so we'll add that one as well and next we can add our google one so these are actually called the same thing so we have our rc premium year this time we want to choose the play store and add it and then lastly we'll get rrc premium month and also choose the play store there now that we have the four products in revenue cap we're going to add them to our entitlement so that entitlement is what we created earlier and if we go into the entitlements and click that entitlement we can associate products to it so we will associate all four of these products that looks good so again this entitlement is going to allow our app to communicate with revenue cat and then finds these specific products but we're never in our app going to hard code these product identifiers we're only going to have those configured in revenue cat so now our entitlement is configured with our products and the next thing we're going to do is create an offering the offering will be actually what is displayed to the user when they hit that pay wall and it will show them the products that are essentially offered to them at that point in time so this is simple to do we're going to click on offerings and we're going to create a new one which will be called the default and for the description we'll set it to the standard set of packages in the default offering we are going to add those products so we're going to add the monthly products under the monthly identifier and give it a description of unlimited access for a month and we'll click add right there and now within this package we're going to add our two monthly subscriptions so we're going to choose the rc premium month for the app store and the same rc premium month for the google play store so now this monthly this monthly package here has all the monthly available subscriptions we'll add one other one for the year lease this will be the annual identifier and it's going to be a similar description except it will be for unlimited access for a year and now under annual we will also add two products and although they will be the year products and attach that all right great so now we have our default offering here which is going to have both the monthly and the yearly packages within it you can create multiple offerings but you're only ever going to be able to have one offering that is current or active at a time so if you wanted to test around what products you're offering to a user for instance if you didn't want to always offer the yearly one you can create another offering here and then just make that the current one and that other offering could have just the monthly subscriptions within it but for now we're just going to keep it as the default and have both of the subscriptions at this point our code should already be set up to go ahead and pull this offering and display it to the user so we're going to rerun our app and now if we click the change the weather button you should see that you have the option to actually purchase either the premium month or the premium year so a few things to notice here all the information within these cards the premium month and the pricing is all coming from app store connect so if you did want to change any of that you would actually be changing it within app store connect itself this down here is the footer text that we configured so this is where you can put a link to your privacy policy or terms and conditions before we can actually make a purchase we will need to create a sandbox user account within ios so if you go ahead and click this it's going to ask you to sign in when testing these in-app purchases it's a great idea to actually use a physical device so from here on out we're going to actually switch over to our physical device so if you're not familiar with setting up a sandbox test user account you're going to go over to users and access and then go down to sandbox testers and within here you'll be able to create an account i already have one you will need to use a real email address because it is going to send you a confirmation email to confirm that you're a tester the other thing to note is you can change the subscription renewal right here within apple so that it renews every five minutes or every three minutes we'll keep it at every five minutes and then whatever sandbox apple id you're using you're going to want to log into your actual physical iphone as a sandbox tester so on the iphone within settings you're going to go to the app store and then you're going to scroll down and you can see there's going to be a sandbox account here this is where you can sign in as the user that you created your sandbox test account with and now you can run the app again on your physical device all right and once the app loads up on the physical device you can choose to change the weather and you'll be prompted with the same screen and now we can try the premium month and since i am already logged in with that test user account i can just go ahead and hit subscribe and then i'll have to put my password in which this password you would have set in the app store connect when you set up this user so then go ahead and hit sign in there the purchase will be made successfully and then once the purchase is successful you'll click that okay and at this point you should now be able to click the change the weather and instead of seeing the pay wall you actually will have access to the premium feature and in this test app the premium feature is just that the weather will change to a random temperature and all that is looking good and happening correctly so before testing on our android device let's go ahead and complete the ios test by checking out the revenue cap dashboard you're going to be able to choose sandbox data and if you click that you should see we have one active subscription now and our monthly recurring revenue is ten dollars so ignoring these purchases from 24 days ago which was past tests that i did on this test user account you're gonna notice that the purchase we just made which was made three minutes ago now and it expires in two minutes and that's because we set our expiration for our subscription to be five minutes so even though this is a monthly subscription it is going to expire in five minutes we don't have this fully configured yet to actually update revenue cap from app store connect with these purchases so if you wait the full five minutes you'll see that the purchase was five minutes ago but we didn't get an actual renewal so to update that you're gonna go back to the revenue cap project and find the magic weather app for ios and then you're gonna see this apple server notification url and go ahead and copy that and then back in app store connect you're going to go to the app information and you'll see there's this app store server notification and under the sandbox server url you're going to add that url that you just copied and then click save and what this is going to do is notify revenue cat of any server events that happen in app store connect so every time a subscription is auto renewed it's going to notify revenue cap if you go into the sandbox data now you can see we do have these two subscriptions here this one was uh the original and then this was the auto renewal in your original it shouldn't have a check box here but since i have already tested this it is coming up as a renewal for me the important thing is that your auto renewals are working and you're able to see that the auto renewal is being synced from app store connect to revenue cap one thing to note these test subscriptions are only going to auto renew i believe 10 times so if it has already renewed 10 times it's no longer going to auto renew if that's the case you just simply go ahead and do another test subscription and then it should actually update everything for you so now we can go test on our android device but before we do that we can actually set up the google play console to give us those notifications so that when we actually do our test purchase we'll already have it set up so that it will auto renew for android it's pretty simple if we go to our magic weather app for android there is going to be a button here that says google developer notifications and we can just click connect to google the last step is to copy this google developer notification topic id and then you're gonna go back into the google play console and find the monetization setup here and then you're going to paste that topic that you just copied right here and then you can go ahead and hit save changes in your app in google play console you need to make sure that your app is within a test track and that it has been approved so if you go to releases overviews you should be able to see your latest releases and currently i have this in an internal testing which is available to the internal testers which you need to also make sure that you have invited yourself to be an internal tester if you're not sure how to do any of this there is links below and also links in the written guide that will show you exactly how to set all this up so at this point we can rerun our app from android studio on our physical device and if we click the change the weather icon we'll be presented with the two options and for this one we'll try the yearly subscription and we'll go ahead and hit subscribe and now if we click change the weather you can see we do have access and if we go back into revenue cat here we should also see on the dashboard for our sandbox dashboard that we have one active subscription and it is that premium year which we just did on our android device now this is going to expire in 32 minutes but once this 32 minutes has elapsed we should see that the subscription was auto renewed for this android device as well all right great so at this point we have everything set up for our in-app purchase subscriptions through revenue cat for both ios and android and everything is working great using our magic weather flutter sample app but i want to cover a couple core concepts that this app already had set up for us so that if you are implementing this into your own app which i'm sure you're ultimately going to do you will know exactly what you need to bring over from the sample app so back in the sample app here the first thing you will definitely need to do is store those constant values somewhere so if you don't already have a file called constant or some way to store your constants you're going to want to create this this is a file that you can just directly copy over and i would recommend keeping the names of these the same next you're going to want to create a class to tell your app which store to use so basically if you're on ios you want to be using the app store and if you're on android you want to be using the google play store so this store config file you can pretty much just copy over you're not going to need the amazon block if you're not going to support amazon now where this is used is going to be in main.dart so in your main.dart file here you're going to want to have some sort of if else logic where you check to see if you're on ios so that's what this is doing right here and if you are on ios then this is going to configure the store to use the the app store and use that app store key if you're not on ios then it's going to basically configure it for android this right here is also adding an extra layer to check if you are using amazon and if you are using amazon to use that instead of the google play store if you're not going to support that at all you could just remove those lines and just simply have the play store similar to how we just have the app store next you're going to need some way to determine if your user is subscribed or not currently if you click the button over here you can see the user is not subscribed so the app itself knows that the user is not subscribed or that there's no active subscription and depending how your app is set up if you already have a user model and you're already tracking user information you can store this information whether or not the user is subscribed right in your database but if you want to do something a little bit simpler and just store it right within your app which is how this magic weather app does it you're going to need to create another class and if you go into the models here you can find the singleton data file which will contain the app data and this app data is basically just going to store a few variables so it's going to is going to check if the entitlement is active which it defaults to false if it is active that means the user has access to the premium entitlement and then it will also just have the app user id so this entitlement is active that is going to be used basically to tell if the subscription is active or not and now you can use this entitlement as active to either display the pay wall or not and if you haven't built a paywall you can look at the paywall here and kind of use this as a guide there's really three things that this paywall is doing that you would want to include in your paywall the first one is that it requires an offering and that offering is really just the information that's right here so in this example the offering is the premium features and it has those two premium products and this class is part of the purchases flutter package which is the revenue cat flutter package which obviously you would also need to install if you were doing this within your own project so yes the first thing is that an offering is required so whenever you create an instance of this paywall you have to pass an offering to it the second thing is that you're going to have some sort of list builder so right here you can see there's a list of two products that are offered and if we find our list builder here you're going to see that the list builder is looking at the offering itself and it's finding the available packages within the offering and basically it's going to build a tile for each one of those packages and you can just see that the products list is basically the same thing it's just the available packages so you will want to display all the available packages within the offering on your paywall there and the last thing is that you want to make sure you're including that footer text the footer text is right here and it's just displaying at the bottom so that is the simple paywall there so you have your paywall now and you know how to configure your app last thing that you would do is actually display the paywall conditionally depending on if that user has a subscription or not and in this app it's happening in this weather.dart so that's basically this screen the important thing is this button here so you can find where this button is the change the weather button and you can see it's kind of down towards the bottom here what the on press is doing here is calling this perform magic function so if we go and find that let's just higher up in this file you can see it's just kind of setting a loading state and what it's doing here is it's getting the customer information and this customer info is going to be looking at revenue cat and looking at the customer that is logged into the app currently revenue accounts automatically going to add customer ids it's going to see if the customer that's using the app right here if they have the entitlement of that entitlement id and again this entitlement id would be what we configured back in the constant of this entitlement id so it's in this case checking for premium and it's going to see if that entitlement id is not null so that means the user is entitled to this feature and then it's also going to check that it's active so that active is equal to true if that's the case it's going to give the premium feature so this right here is actually the premium feature and it's what you saw before where the weather is changing that's what this function right here is doing but if not so if the user does not have that entitlement then we're going to get the offers so we're going to make a call to revenue cut and get all of our offers that we have configured and you can see that that's happening right here within this try block it's getting the offers and this is just catching the exception if that doesn't work but once we have the offers here we're going to make sure that our variable actually has some data and as long as it has data we'll drop down to this else block here and we're going to show that the modal bottom sheet which is exactly what happens right here is that modal bottom sheet and you can see that this is actually just going to be returning that paywall so that paywall was that class that we just discussed and you can see it is passing an offering and notice that the offering is passing here is that current offering because as we said before in revenue cat you can have multiple different offerings and the current one is typically the one that you're going to want to be using and passing within your code so yeah that current offering gets passed in and then that populates the paywall itself right here and that is essentially it that's how you would create your own paywall and how you can use this code and modify it within your own app one last thing to note is when setting up in-app purchases you do need to configure a restore purchase button this is extremely simple with revenue cat if you look under our user where this is actually already set up you can see it's just a button so there is a button down here called restore purchases and the only thing it has is an on pressed which calls manage user restore this is this manage user is just a way to basically make all these buttons one function so if you go up here you can look at what the manage user is actually doing and it takes in a task in a new app user id so the task for this is going to be restore and all that it's going to do is await the purchases restore purchase if you did it like this and you have to make the button itself asynchronous that's why the manage user is kind of a nice way to extract that out but it's really just this one line is what you would be calling is the purchase restore purchase and then that will restore the users purchases hopefully you found this example useful also you can check out the revenue cat documentation which is a great resource and has a ton of great information on how to set up everything all right hopefully you've enjoyed this video bye for now

Channel: RevenueCat

Views: 39,137

Keywords: flutter, flutter iap, flutter subscriptions, flutter ios android, cross platform, in app purchases, revenuecat

Id: 31mM8ozGyE8

Length: 31min 30sec (1890 seconds)

Published: Tue Sep 13 2022