Flutter Packages: In App Purchase 1.0.8

what's up everybody welcome back to another episode of trade codes as always my name is trey hope and i'm very happy to see you here for another video today i'll be going over a package that's pretty popular today and you probably can't really make an app without hearing something related to it what i'm talking about is in-app purchases so the name of the package itself is in-app purchase and it deals directly with how to charge your customers in the app for digital content that you provide i've done a video in the past on a third-party api related to something similar and it was called a revenue cap so i just wanted to throw it out there that i highly suggest you check out that video first because it deals directly with in-app purchases as well just think of revenue cat as a more robust way to deal with purchases while this package is a little bit more um a little more simplistic so basically i'll just be going over the functionality that it provides and how you can actually start charging your customers today in your app so let's go ahead and get started [Music] all right so the first thing you want to do is go to the app store and select the app you're working on so i'll go ahead and select trace demo app right here and then on the side menu there's an option for manage under in that subscriptions so this is where world this is where we will add our subscription so you see where it says in-app purchases we want to click this plus symbol and then we want to go ahead and select the purchase we want to create so since it's a subscription we want to select one of the bottom two um the top two are for products so this is for like candy crush if you're buying uh extra um extra items or something in the game that you that you can only use once and that you have to keep buying or if it's like a permanent release of like a a secret map on candy crush that you just paid for once and you have it for a lifetime but that's beside the point the bottom two are subscription items so we'll select auto renewable subscription which means that this subscription automatically renews every month versus not renewing where the customer would have to resubscribe to keep using the subscription so uh select auto renewable create and then we want to give it a reference name so we'll just call it my demo plan and then the product id is how we identified in the app so i usually just go all caps with the reference name again and then we'll add it to the demo group which is just a group of plans that i made earlier previously but it'll essentially be any plant that you have so if you have like gold silver and bronze plans you will put them into a group so we'll add this to the demo group hit create all right so now we are in my demo plan it just needs a little bit more information that way it can um do everything that it needs to once we actually use it in the code so we need to select the duration we'll just say one month um then we want to add a price let's save on that this is where we'll select the price so we'll just say nine dollars to use this plan 9.99 all right so now it's 9.99 and well you know not 9.99 everywhere but i guess it's the equivalent of 9.99 everywhere something like that so yeah hit create uh says that the price has been created so we got our starting price right here you can see that all right so now go back to my demo plan hit save all right now we need to add a localization this is to provide a display name and description for your in-app purchase and they show that in the app store so i'm just going to go ahead and go with english subscription display name um we're gonna say my demo plan and with this plan uh you get special benefits i don't know [Music] you get some cool tickets yeah with this plan we get tickets all right so now we have to come down here and finish it off we need one screenshot that this is only viewed when they're reviewing it so it's not even a screenshot that they'll see in the app this is just when they go to review your plan they need to see an image of it for this demo i'll just use a gold background terrible screenshot but just for demo purposes and then we'll have some information in here that says like um i never really know what to say for this this plan is awesome yeah don't try this but for democracy it will make it work so now that we got all the information we had saved [Music] all right and so now everything's there but we just have to submit it with the next um app version so that actually takes like time to review so for this example i'm going to go ahead and switch to another app that already has approved purchases in them so this is essentially how you set it up and then in the next video i'll go ahead and show you how you use it in an app that already has and that purchases enabled on it you also need to add a sandbox tester this will allow us to use a fake account when dealing with purchases in the app so to create one all you need to do is come here uh you need to select user and access from the main menu of app store connect and select the plus sign and then just enter in some information right here real simple and then you can use this account um to use fake purchases so i'll drop a link with more information on how to access that but just know that you need to provide one by the time you get to the app now for ios we need to enable in-app purchases in the settings for the actual app itself so um here i opened up xcode this is when i want to deal directly with ios aspect of the app you will use android studio or another intellij framework possibly to open up android but this is xcode for ios so you need to go to runner select runner and then i believe [Music] uh yes signing and capabilities so here is where you'll you could add things like push notifications or in-app purchases you would just click the plus button above which is oh yeah here we go so they've got a bunch of different things maps network extensions personal vpn wallet um and i'm not too sure about all these other ones but the main the main ones that i usually use in my apps is push notifications and in-app purchases all right so now we're ready to actually um get into the flutter coding part so the first thing you want to do is make sure that you have the in-app purchase package inside your pubspec.yaml file and as always you can run the command flutter add in that purchase to go and get that most recent version so then once we have that we want to come over to our demo page i have everything mapped out pretty much but i'll just go over each function and then each ui component that we'll be using um for better explanations so first um we want to import some packages uh we need the async package because we have some await functions in here uh the cupertino material packages are for the ui aspect um we also need the in-app purchase package and then intl package which allows us to um utilize daytime objects so down here we have our actual class variables we have an instance to the in-app purchase object which is right here then we also have a product id which is the product id we specified when creating a subscription on the app store so previously it was called my demo plan but um with plans it takes time to approve and i don't think it would have got done in time for this video that i'm recording so i'm using another project where the plan was already approved and that plan was called premium plan i know that was a lot if we keep going we have a available boolean value that'll just let us know if this app can actually use the store um for the app store or the google play store then we have a list of products which are product details and then a list of purchases which are a list of purchases purchase details um related to the purchases we made so far in the app then we also have a stream subscription of type list purchase details which essentially says that we'll be listening for uh any updates related to purchases so whenever we get a new event like an error or a successful purchase or a pending purchase this stream will listen for a new list of details related to those purchases so down here in the init state function we want to um actually create a uh we want to get that stream of list purchase details so we'll create a variable called purchase updated um which is essentially just going to be assigned from this purchase stream object on the in-app purchase then we want to assign our subscription object to that purchase updated object when it listens for those updates so the subscription now becomes all of this so whenever we get new purchase details we want to rebuild the widget so we'll call set state and then we want to add all those purchases to our purchase object as well as call a function called listen to purchase updated um that i'll explain in a little bit but it's going to take in all those purchase details and then there's an on done and on error clause when using the listen function and in both of those we'll just close the subscription for now you always want to close the subscription because it's bad practice to keep a subscription open once you're done using it and it can cause to it can cause some errors in your app later on if you don't do that so then we'll call this initialize function after we set up that subscription and i'll explain what the initialize function does here shortly um down here in our dispose we want to make sure we get rid of that subscription as well so we'll call subscription cancel and then down here we have the initialize function uh the first thing we're going to do is call the is available function on the in-app purchase object to let us know if the uh if the store is available and we'll just update that variable right here then we want to also get the products that we have provided on the app store right now there's only one subscription so it'll only be one product which is this product id i'm passing in right here and as you can remember the product id was premium plan so we are going to get the premium plan as our product and we just want to rebuild the widget again so we'll call set state and assign that product to our uh class variable of products then we go down to the listen to purchase updated function um this is going to be called whenever we have an update of purchase details so what we want to do is we want to loop through all of those purchase details and then based on their status we want to do different things so if we have like a list of purchases that we made in the past we would go through this switch statement and based on their status for example if it's pending then we would probably show some pending ui maybe like a spinner or something like that um if the status was purchased or restored then we would probably want to do something like verify the purchase based on the details and then if it's valid go ahead and display the information for that purchase but if it's not valid um handle the invalid purchase some other way and then we also have an error clause right here so if the purchase has an error we can print that error log that error send it to crashlytics or something as well as handle the error on the ui side of things once we loop through all those purchase details well actually while we're in each one we want to check and see if the payment complete purchase is true or not um if it's pending then we want to go ahead and complete it that way um it can actually display the most accurate um status that it's staying in so it'll be complete once it comes back through here or uh purchased or restored i'm sorry so then we have our get products function and what it takes is a set of string which is the product ids um and it's going to query the product details um on the in-app purchase object so based on the ids we pass it it's going to return some product uh some products and we only have one product as mentioned before so the response.product details is going to be our one subscription then we have a ui function that's going to display what we see when we display our products so since we have one product it's just going to be a list tile that has the title as the product title premium plan and then the product price which is that 9.99 we specified uh and then the product description will be under it for the subtitle and then we'll have a button that will allow us to subscribe to that product then we also have a ui function for when we want to display a purchase that we made now if the purchase has an error then if it uh if it does have an error if it's not null then we we want to display the title of that error in the text and then um the status will say error as a subtitle um if it doesn't have an error then that means that uh we could possibly have a transaction date on that purchase so from here we'll create a nullable string called transaction date and if the purchase status is purchased we'll go ahead and fetch that transaction date uh value off that purchase and then create a a date string formatted for that transaction date so as you can see here is nullable so it'll remain nullable unless the item was purchased so when we get down here we can run this operator to say uh first the purchase product id and then if this value is not nullable specified by these two question marks then we'll display this transaction date if it is null then we'll just display empty string and then under that we'll have the status which will say purchased um yes it'll say purchased or um pending next we have our subscribe function this is where we pass in the product details uh which is the product and then we create a purchase param object based on that product then we call in-app purchase to buy a non-consumable and we pass in that purchase param so as mentioned earlier non-consumables are subscriptions consumables are products all right now we can actually get into the build function of our demo page so as you can see here it's just a scaffold with an add bar that says in-app purchase 1.08 then we have our body and we're going to call that available variable to determine if if it is available we'll display a column that's going to have two parts to it it's going to have one section which is the first half and it's going to have uh an expanded object expanded object that's going to display the current products as well as how many products we have uh calling that build product function the second widget is going to be the second half below it that's going to be displaying past purchases uh as well as how many purchases we purchases we have um so as i said if it's not available it's not going to display the column but instead it's going to display a center with the text that says the store is not available so this is essentially all the code that's needed for the demo page let's see what it looks like in the app [Music] do [Music] so with that we conclude today's video i hope you learned something in regards to in-app purchasing for your app as i mentioned earlier um this was really just a simplistic version of using third-party api like revenue cat so i suggest looking at both of these videos well you've already seen this video but see the previous video that i'll attach at the end of this one and if this video was helpful to you please like comment subscribe and share as much as possible again thank you so much for tuning in and i'll see you next time on trade codes [Music] you

Channel: Trey Codes

Views: 2,417

Keywords: flutter, flutterdeveloper, inapppurchase, ios, android, developer, coding, softwareengineer, development, programmer, codepen, javascript, webdeveloper

Id: VzIdn0rPLUw

Length: 18min 18sec (1098 seconds)

Published: Wed Sep 15 2021