Flutter In App Purchases & Subscriptions for iOS & Android [2022] RevenueCat

how to set up in-app purchases and in-app subscriptions for your flutter app i will show you exactly how you can monetize your flutter app by displaying some packages to the users that they can buy as a one-time payment or on a subscription basis which is an automatically renewed on a monthly or yearly basis and we will also use revenuecad for managing these subscriptions notice i have already created a video about in-app purchases for the android platform this video here is about setting up in-app purchases for the ios platform also in this tutorial we will not use the official flutter package in a purchase and this has one main reason for the validation of purchases you need to write a complete back-end server that communicates with the apple store server and the google play server instead we will use revenue cad a better variant if you want to save time because their server will handle this purchase validation for you automatically so you can focus on building your flutter app instead of taking days and weeks to implement also the backend server all in all we will use the official documentations of flutter and revenue cad for integrating in-app purchases and subscriptions by going through three simple steps firstly we will set up in a purchases and subscriptions for ios on top of it we will configure then revenue cad secondly we will integrate in-app purchases and subscriptions into the flutter app and lastly we will give the user access to special features in your flutter app in case they have the right subscription status before we follow these three steps we will quickly implement the purchases flutter package into our flutter app therefore i have created two buttons and we only need to call this method purchase product and then we need to specify the id of the product that we want to buy and the same thing we also do for the subscription and also specify the id of this subscription to make this work go to your popsback gamma file and under your dependencies at the purchases flutter package also inside of your ios folder go to the pod file and command this platform version out and set the version to at least 11. next right click on your ios folder and choose open an xcode inside the runner folder and run a target you need to make sure that you set the ios version to at least 11. also go to the signing and capabilities tab and click on plus and add the capability in a purchase and this should then appear here at the bottom this is basically the main functionality of your flutter app and now we only need to follow the official documentation of revenue cad for also doing the configuration inside the app store so we go to the fourth step of this documentation and in our case we want to set up the app store connect for ios and here as the prerequisite for this video is that you have already created one app inside of the app store if you have never uploaded an app to the app store then check out this video where you can learn how to do this after this go to your app and then go to the agreements by clicking on these three dots and choose agreements and here it is very important that the paid apps agreement status is active otherwise you cannot do any in-app purchases with your flutter app in case you have not yet set this up click on set up tax and banking then you add a bank account with all the information of your bank account so that you can also get the in-app purchases payments later tick the check box and then you add your bank account next you need to fill out the tax forms for your country in my case i also need to select then the us text forms and say that i have no business in us and then you go further you download maybe this form so that you can check it out what it says and lastly you enter some personal information of yourself and when you have filled out this whole form then you also need to give a signature and submit this form go back in the browser and now you also need to add all the contact information so i basically add my own contact information and then you add the same contact information to all the other positions also or you can also choose other contact information go again back in the browser refresh the browser and then it should say processing after apple has reviewed it the status should turn to active so that you can use in-app purchases in your flutter app next we want to configure these in-app purchases that we can later buy in our flutter app therefore go to your app in this menu scroll a bit down and choose in-app purchases now click on this great button or this plus icon at the top to configure your in-app purchase product this product can be consumable which means the product can be purchased multiple times such as coins or it can be non-consumable which means a product can be purchased only a single time such as a book in our case we choose consumable so that we can buy it multiple times next you can give your product an internal name which is not visible to other people also for this product we need to give a product id and this product id needs to be unique among all of your apps in your app store and therefore it is common to use here this notation so first of all the app name then the price of this product the duration and also some other information optionally so in my case i take this product id with the app name and the price and then i click on create now scroll on this page a bit down to the price schedule and then you can give your product any price that is then a one-time payment and you also can click on other currencies to see how this price will be then in other countries all right let's scroll further down you also need to add some app store localization so click on add localization here you need to define two things first of all the display name that is publicly visible and also some description for your product and this is also publicly visible and then click on create and finally scroll down to the screenshot section here you need to upload a screenshot of your product or of the purchase page or payroll page so that apple can see what product you are selling and if you just do it for testing purposes then you can just upload any image that has 640 by 920 pixels also you need to scroll all the way up again and then you need to make sure that you click on the save button and after this we can go back to our in-app purchases and now this product id that you have configured should have the status ready to submit also i have configured a second product that the user can buy inside the app in this case 100 coins and also make sure that then the product id is unique so here we have 100 instead of 10. next to the one-time payment of coins we can also have subscriptions and therefore we need to scroll down and create a new subscription group i call this subscription group movie subscription which is only an internal name and then i click on create inside the subscription group scroll all the way down to the app store localization and then click on create here you set the subscription group display name which is publicly visible when the user buys this subscription product and also this app name is publicly visible so if you want to change it from purchase flutter in this case then you can also use your own name and you can modify it so i call it netflix and then i click on create and secondly we can add to the subscription group some subscriptions therefore click here on create again give your subscription an internal name and a product id and the product id consists of the app name the price and the duration of the subscription in this case one month after this click on create here we scroll a bit down to the subscription duration we choose one month after each month there's a new payment circle also scroll a bit more down and here you can define the subscription price so i click on add subscription price then choose here any price and click on next here you see then how the prices are for all the other countries you need to scroll all the way down and at the end you click on next and also then on confirm for this subscription we also need to add some localization as before this name and description is publicly visible if the user purchased this product and when you are done click on add scroll all the way down go to the screenshot section and upload a screenshot of your product or of the purchase page and when you are done scroll all the way up and click on the save button and then you go back to the subscriptions and now if you scroll down then you should see your subscription and also that it is in the status of ready to submit let's also scroll up and click on this plus icon and this time we configure a yearly subscription and then click on create here the only difference is then that you choose for the subscription duration one year after you have completed the configuration for the yearly subscription as i have shown before with the monthly subscription then also the status of this yearly subscription should be ready to submit one thing to notice about our subscriptions is that we have added both subscriptions the monthly and also the yearly to the same subscription group inside of a subscription group users can only subscribe to one subscription to the monthly or the yearly but not to both in case you want to have multiple independent subscriptions then you need to add here a new subscription group and then inside of this new subscription group your new subscription would be independent from the other subscriptions that you have inside of your app now that we have completed the fourth step to set all the products up in the app store we can continue with the official documentation from the first step first you need to go to revenuecad.com and create a new free account fill in your information and click on sign up next you need to enter any project name such as your app name and then you click on create project inside revenue cad you can configure the app store for ios the play store for android and also other stores and the great thing is that whenever a purchase is made over the app store or the other stores then the revenue cad backend server will validate these purchases automatically for you so you don't need to write your own backend in our case we set up the app store for ios here inside you need to set your app name inside xcode you can copy the bundle id from your app and then you paste it here inside next we need to get the app specific shared secret from the app store therefore you can click here on this eye and then you need to follow here these steps so first of all you need to go to the app store connect page click on my apps and choose the app for which you have configured the in-app purchases inside the menu go to the subscriptions and scroll here all the way down to the app specific shared secret and click on manage then click on generate and here you need to copy then this shared secret after this go back to revenue cad click on the set secret button paste this value inside and click on set next click on the in-app purchase key configuration this file is needed so that revenuecad can validate the purchases on their backend server for us therefore back in appstore connect you scroll all the way up and click on users and access here at the top click on keys and then on the left side choose in-app purchases and click on generate in-app purchase key give it any name and click on generate now on the active you should see your generated key and you can then download this key a single time so click on download back on the revenue cad website drag then this downloaded key into this dropbox next go back to the app store connect and choose app store connect api and click on generate api key give it any name and for the access choose cells and reports and click on generate after the generation you find the issuer id that you basically need to copy so i click on this copy button back in revenuecad you scroll a bit down and here where the issue id is you need to paste this key inside and lastly and most importantly scroll all the way up and click on this button save changes and finally we need to connect revenue cad to our flutter app therefore click on api keys scroll all the way down until you find the app that you have created in revenue cad and here click on show key and copy this key then go to the main file of your flutter project and here inside you create this purchase configuration where you paste your api key inside also we need to make use of this configuration therefore inside the main method we use this configuration with this we have completed the steps one till the step three of the official documentation and now we can move on to the fifth step to configure our products in revenue cad this step is pretty easy go to revenue catch and then go to the product section and here inside you need to link all the products that the users can buy from the app store from the play store etc in our case we have only the app store therefore click here on new and here we only need to paste all the products id inside that we have created before inside of the app store so if you go back to the app store then you can go to the in-app purchases and here you find then this product id that you copy and then you paste it here inside and click on add in the same way as you have added this product with this product identifier you also need to add then all the other three products so back in the app store let's copy the product id of the 100 coins paste it here inside and click on add with this we have linked both in-app purchases from the app store let's also click on new and then inside of the app store let's go to the subscription tab scroll down to the subscription group and i go into the subscription group then scroll again down and here you find then the ids of your subscriptions and you basically copy also these product ids paste it inside and add them and lastly we copy the product id of the yearly subscription and also we add then in revenuecat this new identifier and with this we have added all four products that we have configured before inside the app store and the last step is to take the product ids that you want to buy inside of your flutter app so we take the 100 coins and also the monthly subscription and then go to your flutter app to the line where we buy our products and here you just need to paste in the right product id inside in this case 100 coins that we want to buy and also here the subscriptions so i exchange it by this real product id and now we can click on this buy coins button and then this pop-up will appear where you can buy these 100 coins and notice this is only a test purchase so if i click on purchase then this is not a real purchase and after you have signed in with your apple id then you click on sign in and you see that the payment was successful and the same works also for the buy subscription button here we can also subscribe to this product again it's only a test purchase so this is not a real purchase and then you see that the subscription was also successful notice to make these test purchases work on your ios device therefore you need to go to the app store connect website and here for your app go then to the users and access section and here at the bottom you find sandbox where you can add some testers so let's click on this plus icon you inside fill out all the information of your test account the most important part is email and also the password that you need to remember and after this click on the invite button and now you should see here your test account that you can now use for the in-app purchases therefore on your real ios device whenever you now click on this buy coins button or buy subscription button then you need to sign in with your apple id and password for the apple id using the email that you have used for creating this sandbox test account and also enter the password that you have created before for this test account and then click on ok and now you can see that your test account appears inside of this purchase dialog and now if you click on this purchase button then this is only a test purchase make sure to enter again your password of this test account and then click on sign in and now you see that the purchase was successful if you want to test out the in-app purchases on an ios simulator instead of a real device then you also need to follow here this documentation where you set then these configuration files and you need to follow here all the steps so that it also works on your ios simulator and finally inside of revenue cad you can go to this overview tab and then you can see here the overview of all of your purchases in this case we made some test purchases therefore click here on sandbox data and then you can scroll here a bit down and you see here in this case that we have made some purchases and you can click then on one of these users and here inside if you scroll down then you see the customer history with all the products that this user has bought next after a successful purchase we also want to give the user some benefits inside of our app therefore let's go here to the top inside of our state and let's create two fields first of all if the user is subscribed inside of our app and has purchased the subscription and also how many coins the user has both of these information we want to display then inside of the body of our app so first of all i display here this lock icon and the coins and in case the user has subscribed then we display simply another icon first of all let's start with the coins so each purchase can be successful or also it can fail so here it can fail if it goes into the catch block and the same thing also for the other one and after a successful purchase we simply add send some coins to our app with this if we click here on this buy coins button and then if the user buys some coins and after the purchase was successful then you should see that the coins are also added inside of our app of course for a real project you wouldn't add the coins directly after the purchase inside of the app itself instead you would add the coins inside of your backend and therefore you can also use revenue cad easily so you can go here down and then you can add some integrations and here you have some web hooks with which your server can listen to new purchases and after purchase then the server can add to your user account some coins another way of giving certain privileges to the user after he has bought a product are these entitlements that are handled by the revenue cad server so for each product that the user buys you can add some entitlements therefore let's go here to the left side to the entitlement section as you can see an entitlement represents a level of access so you give the user a specific access inside of your app therefore let's create here a new entitlement and here for the identifier we want to use then all movies which means we give the user access to all movies in our app when they get this entitlement also add here any description and then click on add and lastly we need to link this entitlement then to some products therefore click here on the zero products and then you can add some products to this entitlement so in our case the user should get all the movies as an access in our app in case they have bought the subscription of one month so i use here the product id of the one month subscription and click on add and also we do the same thing for the yearly subscription here in case they buy the yearly subscription then they also should get access to all the movies in our app and therefore i click here on add next inside the flutter app whenever the user bought one of these subscription the monthly or yearly subscription then he gets the entitlement all movies and inside our flutter app we can basically check if the customer has this entitlement and then we can give him some access to specific features so let's copy this entitlement in our flutter app inside the init state method we listen to customer changes and whenever the customer changes its information then we call this update customer status method and here we get then every time the new information of our customer and from this customer we can then access all the entitlements and we want to only get the active entitlements that are currently active for this user and here we want to check then if the entitlement is this all movies entitlement so this is basically this entitlement that we have created before for our subscription products and now we want to check if this entitlement that we create here is basically not null so if it is existing this means then that the user has subscribed and we can then update our field in our state and when this field is updated then we changed this icon from this lock icon to this paid icon let's also try it out when i click here on buy subscription and then if we click on subscribe you see that the subscription purchase was successful and now that the user is subscribed to our app you also see that this i can change to this paid icon and of course if this is subscribe boolean flag is true then you can give your user any specific features in your app to which he has an access while the others have not access to this and finally we want to preserve the entitlements of a user if he logs in logs out or switches the device for this you can use the app user id inside of your configuration or you can also use the login and log out methods and now whenever you log in this user that is maybe an id from your backend then if the user makes any purchases with this user id it will be saved on the server and now the user can log out again log in in another device and still have all the privileges of our entitlements and finally next to the entitlements we also have in revenue cad offerings and offerings are multiple products that are then displayed together on a paywall so let's create one payroll let's create one offering by clicking here on new as an identifier i choose subscriptions i want to have an offering where we display all the subscriptions also give a description and then click on add with this we have our subscription offering our subscription paywall and a subscription payroll also has multiple packages so let's click here on zero packages and then we can add a new package the package itself holds multiple products whereas we have for example created this gold monthly scoop product on the app store and the same product also exists on the google play store and therefore you combine both of these products that are the same inside of one package in our case we only have the app store therefore we add only one product to one package but usually if you have then multiple stores supported then you have for each store one product added to your package and lastly once you have then created multiple packages so we have for example the monthly subscription the annual subscription and also maybe the coins and each of them is then a package and you can then decide what you want to display on the paywall you can then display the monthly package and the annual package or you can also change it to different variants of what you want to display on the payroll widget so let's do it practically we can add a package and here we add a package for the monthly subscription and i also give it a description and then i click on add and now you see we have this monthly package and to a monthly package we can then link multiple products so let's click on zero products and attach our product in our case we have only one monthly subscription that we can link to this package so let's go here to this monthly subscription and attach it to this package in case you have the same product this monthly subscription next to the app store also on other stores then you would attach your multiple other products from other stores in our case we only have the app store so let's go here back and let's also add another package and this time the identifier is not monthly we want to create an annual package also give it a description and click on it and as before we have then here this annual package with the zero products let's click on the zero products and to this package we attached then a product and here we want to choose then the yearly subscription and we attach it to this package let's also go here at the top back so all in all we have created one offering that is called subscriptions inside of this offering we have two packages we have the monthly package and we also have the annual package and now we can use the subscriptions identifier of this offering to display it inside of our app first of all let's look at the result that we want to create so we have the see plans button if we click on it then we have a pop-up and here inside we have two different packages this is our payroll we have the monthly package and we also have the yearly package and these are exactly the two packages that we have defined before inside of our offering let's also look at the implementation first of all we use the purchases api to get all the offerings so the offerings are basically paywalls in our case we only have one single payroll that we want to display in our app inside revenuecad for all of your offerings you can choose one offering that is the current offering so i have added here one more offering just for test purposes and you can see that you can make this offering to the current offering however we want to keep it for the subscription that this is our current offering and now you can access the current offering and we want to make sure that it is not now so in our case it exists already so we will go into the else case and from this offering we get then all the packages in our case we have added two packages this monthly package and also the yearly package and lastly we display them these packages therefore i have created a bottom sheet and inside of this payroll widget we get then all of these packages and let's also look here at the implementation so if we go down we have a method where we displayed in all these packages and therefore i have created this build package method and here we take then out of the package the product and from this product we can then access the title which is then here displayed at the top from this product we can also access the price which is then displayed on the right side and also the description which is then displayed under this title and lastly if we click on any package then we call this on click package handler where we put the package inside on which we have clicked and this is basically what i have to find here at the top so let's look in the payroll widget also at the unclicked package implementation and here we call them the purchase api and in case of calling purchase product we call this time purchase package and here you put then the package inside what you want to buy let's also try it out i click here on one of the packages and now as you can see you can subscribe to this package [Music] you

Channel: HeyFlutter․com

Views: 54,860

Keywords: app monetization, app sales, app store, flutter, flutter iap, flutter in app purchase, flutter subscriptions, flutter tutorial, how to monetize your app, in app purchases, in app purchases flutter, ios in app purchase, ios payments, ios purchases, make money mobile, make money with an app, make money with app, monetization, payments, revenue cat

Id: TrkiSZ2mnlo

Length: 27min 10sec (1630 seconds)

Published: Mon Aug 15 2022