In-app Subscriptions in React Native with Adapty (tutorial)

one two three i think we're live what's up nudges developers welcome back to a new live stream and in today's video we are going to learn how to monetize our rack native applications using in-app subscriptions with the help of adoptee so um this is actually the fifth week of our nodja startup challenge and that means that it is time to start working on the monetization strategy during this challenge i'm trying to build a startup myself and uh in order to validate the idea it is very important to see if there is a business uh business of opportunity behind our applications so uh yeah that's what we're gonna do exactly today we're going to implement monetization strategy in our application and we're gonna do that with in-app subscription for that um we will follow a couple of steps and this video is only going to be around monetization and in-app subscriptions so this is a good opportunity for you to also learn how to do this and to take this as a guide to implement everything in your application so today we're gonna start by setting up an app subscription on both app store and google play also we're gonna uh sign up and set up our adapter account that will connect with app store and google play on our behalf and then we're gonna build a paywall in our application where we will redirect all the users before they will try to access a pro feature and from where we will they will be able to buy a subscription after that we are going to integrate our application with the adapter sdk for react native and um yes this is the short plan for today we actually have quite a bit of work to do but it's very exciting to uh to do it here live with you guys because when it comes to in-app purchases and in-app subscriptions uh there is the traditional path of integrating uh them directly with google play and app store but this process is quite uh complicated because especially when you're building a cross-platform application for both ios and android you have to write twice as much code to integrate first with app store than with google play and after that you have to implement like a back-end infrastructure to validate all the transactions to manage the accounts so as you can see like this process becomes very quite complicated i would say and very time consuming because we will have to maintain it however there are solutions that are here to help us and to make our lives easier as a developer and here i'm talking about adapti which is the sponsor of today's video so with adapt you can do all of everything that i told before in under an hour the only thing that we have to do as developers is integrate with their sdk then call a function like purchase a product and then everything behind the scenes is taken care for us things like communication with apple store google play managing that transactions and validating them keeping track of everything in a secure way one second what i really like about adopting is actually all the added benefits that you get by integrating with um uh here i'm talking about analytics uh all the integrations with other applications that you can set up easily from the platform and uh they offer a central place where to track all of the important metrics for your applications such as revenue monthly recurring revenue uh what is your churn rate for the for for the users and other important metrics that you can track uh on the platform so adoptee is completely free if your application is doing less than 10 000 monthly recurring revenue and you can sign up for free following the link in the description below and this is actually what we're gonna use today to integrate uh in our application and with that being said i think we can roll the intro and get started [Music] [Applause] [Music] alright so hi everyone in the live chat how are you doing guys uh so as prerequisites for uh to follow this tutorial you have to have a rack native application it doesn't matter if you have started it with rack native cli or with expo because it works with both and actually adapting in the documentation says that uh it doesn't support expo but i tried and everything is working as expected so um following in this tutorial i am personally going to use expo and i'm going to have to take a couple of extra steps to set up expo to work with in-app subscriptions but everything else i'm gonna mention like what you don't have to do if you are working with a react native cli application uh you'll also need your application to be published on google play or app store it doesn't have to be public it has just to be uploaded there and set it up because we will need to create the subscription products on the platforms on google play and or app store at least one of them also you will need an adapt account that you can get following this url but we're gonna get that in a second and uh i will prepare for you a step-by-step guide that you can get uh by downloading the link in the description below we're going at assets.nodejust.dev slash adoptee i will um i'll upload that right after i finish the live stream so um yeah follow get it because it will contain all the steps that we have to take and it's going to be a very easy guide for you to follow along and implement the same in your application uh so i think it's coding time uh someone is asking me why i'm not using uh rec native cli but expo is because it's much easier to set everything up to get up and running they're offering a lot of tools that mix it a lot easier to develop and distribute applications especially like with ease the services that help you build and submit your application to the store like it's really nice all right so let me grab my let me grab my task list and we can get started here is our application that we have built in the previous live stream my idea with monetization for specifically for this application is to provide premium resources in the topics for people who want to buy the premium subscription so there will be default like free resources uh here some practice exercises but i'm gonna add more uh resources for pro members this is my idea i want to give it a try and for that like we need to integrate this in-app subscriptions let me grab my here yes wait why do i have it here opened all right here we have our task list for today uh all right so uh first task for us is to sign up for an adopt account for that let's go ahead and open access the link in the description below or we can go to adoptee dot io and from here we can press login actually i already have an account but i'm gonna go through the process with you together so let's create an account my name is vadim email i'm gonna provide my mail okay search engine or actually i know let's say podcast at the moment our application is doing zero in monthly recording revenue so i'm gonna say zero here and what makes you interested in adapting yeah like a lot of things subscription analytics integrating subscriptions so let's create the the account all right so uh the next app is all ready to set up adaptive for our application all right so the name of our application is going to be actually i decided with a name for the application that i'm building and it's going to be called guaco from guacamole and code i don't know it's going to be education at this moment i'm not going to select anything but i can um change them later in the settings and now we are here at the app store configuration so for the app store configuration we need to provide the bundle id and the app store shared secret how do how do we get that we get that by uh going to app store connect let me just go there and i'm gonna show you in a moment all right so we go to appstoreconnect.apple.com you should have is if you uploaded your application on app store and let's go to our application here and we will need to provide here the bundle identifier of the application uh let me see where we can find it here uh for example app information it's here bundle id in my case that's dev not just guaca for the um this is the url for app store server notification and we will need it to set it on app store dashboard and we need to do that okay we will copy it and then we will go to the app information we will scroll down a bit until we see this app store server notification so here in the production server url click on the setup url and paste that url there paste the url and it's important to select the version 1 notifications i already have set it up but yeah this is a simple process that you have to do click there setup url paste the url that you got from here and set them version version one after that the last step is here app store shared secret and how do we get it we get it by going to the subscriptions we go to up specific shared secret here we press manage and probably i'm gonna have to regenerate it because i already showed it here in the live stream but yeah like click generate copy this secret and paste it here in app store share secret let me do that behind the camera i have it and i will put it here okay now we can continue and it tells us that we already can install our adapter in uh in our application uh i don't know why we didn't set up the google config here yet but yeah let's follow the guide and install the adapter sdk in our application so the package name is called react native adaptive if you are working with a react native cli application just follow this guide install their wreck native adapter using yarn add react native adapter the next step is to install the pods by going to ios folder and running pod install and this is only if you are working on a mac os and developing for ios devices and after that make sure to update the android app build.gradle file to add this multi dax enable that's everything from the installation on rec native cli quite easy like three steps uh and now let me show you what we will have to do to install and set it up for expo we will have to go through a little bit of a couple of steps in order to do that but first of course is to add the react native adaptee sdk to our um tower application so let's open a terminal and do expo add rack native adapter i hope you can see it all right so we have signed up for the account uh let me actually add another status where is it here yes then we have generated this app specific share secret and we have set it up for um for ios now we are installing the adapti sdk to do that yes as i said expo address native adapter uh all right all right give me just a second because the next step for us because the next step for us because we are using expo we will need to create a development build and why do we need to do that well um whenever we are using custom native modules and in this case adapt is using native modules in that case we need to uh to set up these native modules in our application so before uh like a couple of years ago the only solution that you had when you got into this situation was to eject from expo and continue working like a normal react native cli application however now with uh development builds and with the config plugins from expo we can install and set up native modules in our expo managed application without having to eject actually in fact eject is uh already was deprecated and you cannot do it anymore uh and yeah like what we have to do it now is to set up um where is it is to set up a development build for our application so before we set up the development build i also want to install and configure a couple of things like flipper because this is gonna help us debug our application so uh to do that here is a blog post that explains how to to install flipper but i'm going to copy this command expo ad react native flipper react native devtools core and expo community flipper that's for the native config plugin and let's install flipper here in our application uh again i'm gonna provide all of these commands and everything that you have to do in the pdf that you can download following the link in the description below at assets.nodejs.dev slash adoptee and you'll be able to follow like this step by step and again setting up flipper here is only for expo projects if you have react native projects as i said before the only thing that you have to do is to install the library install the pods change one configuration for android and then you are ready to configure adapti after we have installed a flipper dependency we will need to connect to it and to connect it in our app.esx we will import connect devtools from react native devtools core and we will connect it if we are running in development so let's copy this snippet let's go in our app.esx and here on the top let's paste it like this so if we are running in development connect to devtools and to the localhost with this port all right now the last step is to because flipper depends on some uh native modules we installed if you remember correctly the last one was xbox community flipper and this is actually the plugin that will help us uh install and set up native modules in expo project and to do that what we have to do is to go in app.json in the under the expo somewhere here at the end let's say plugins and this is going to be an array of plugins and the plugin that we want to set is the expo community flipper that we installed recently this will make sure to set up expo community flipper in our development build that's it with setting up flipper now uh let's move to the development build and for the development development build as i said whenever we start adding native modules to our expo application then we will not be able to use xpogo anymore at the moment we are using the xpogo application but because we have added custom native modules expogo doesn't have that native modules that we need so we need to basically build a custom version of this expo go application uh and this is called the dev client the development client that we are gonna use and this is actually done much easier than it sounds i'm just trying to explain you what's happening behind the scenes and why do we need these these things but all we have to do is to install the export dev client in our project to do that we simply write expo actually not install but add expo dev client let me edit it here as well i will also provide some documentation below um and now after it it has been added we don't have to do anything with it now in order to get the development build we're going to use eas to build our application yeah stands for ex publication services actually here that's not correct yes it stands for expo application services and it's a cloud tools for uh building our application and for submitting it to um to the stores so uh let me check i think it's not re um we can do it locally as well so export dev client let me just double check if that's the only way to do it so yeah we need to install the dev client uh yes expo is actually recommending to uh to to actually build it using yeah yes uh but as i'm not mistaken like you can do that for uh from locally as well but in my case i already have eas setup but the only thing that you have to do is to install the eis command then call eis configure to configure your eas application to build your rack native expo application and after that eis vcies configure will generate in your application the no actually i don't have it yet yes so i'm gonna have to go through eas together with you configure uh not like this yeah yes help build no build it should be configured come on all right let's uh open the documentation for eas so here here is the guide for the eas install we can install it using npm then login in your account and yes build configure yes build configure to configure our builds which platform would you like to configure for eas build i'm gonna go for both ios and android and it generated for us yeah yes dot json all right let's have a look in the eis.json here we see our profiles for the build we can build a development version which will actually include the development client because we set here development client true and the distribution is going to be internal for the preview its distribution internal and the production will simply distribute it to production all right all right so for the build development client true for android i think we can also specify that we want to build an apk to be able to install it on our device um and what else what else all right so um i think that we are done most probably we will uh still have to update some some of the settings here but let's um let's go ahead and start the development process so uh i'm gonna go ahead and run eas build for the platform i'm gonna start with android at this moment uh and the profile is going to be development i want to build a development client missing build profile in yeah yes diva oh okay development would you like your application uh to be this one in your case it might ask you to give android application id so provide uh an application id no in my case it should be dev dot not just dot guaca uh in my case yes i'm gonna press no there because i want to continue and it actually started the build process i can click on that url that it showed and it will open this build here in browser and we see that it's an android internal distribution build invented for that development profile with a version zero point one point zero point zero uh look i'm not going to wait because it's going to take around uh 10 to 15 minutes to build this android application i'm gonna show you like uh after 15 minutes you will uh you should see the application finished building and i'm gonna check like in the meantime to see if everything is going okay but i'm gonna consider that uh it finished for you successfully and i'm gonna go to another android actually let me select android here and android play store build no this is a production production this is development so i'm gonna uh go here and this is what you're going to see after around 10 minutes on that page if everything worked successfully what we can do is to press on the options here and click download build this will download this apk that i was talking about and with this apk we simply drag and drop it on our phone let's drag and drop it here on our emulator and we have already our guaco application as you can see we are going to open it directly from the guaca application not from the expo go because this is that development client that we have set up for uh for replication uh one last thing is the way we are starting the server because usually we are starting it with expo dot expo start but in this case we have to start it with expo uh start van dash dev client there's their dev client client expo start yes dev client and this will start the development server for web development client here and we can press a here to open it on android and we see our application loading it's loading from here as we can see and yes got it yes as you can see there is this menu like this is coming from the development client for our application and it is specifically for our application with all the native modules that we need here so i can go ahead and sign up here come on yes we are here perfect all right so as you can see this is already not from the expo go application is from dev client and we also can run flipper this is actually optional if you don't have flipper installed and set up it's probably not a problem but if you want to debug this application you would need a flipper i tried debugging it with uh the chrome tools but in that case it's not working because there is a dependency in expo react ready meet it that prevents us to be able to debug with chrome so yes here we have our application guaco and we can go to the rack native logs no logs yet but if in the app.tsx i'm gonna say console.log hi i'm gonna see it here awesome so that's gonna be useful for us later on in the video to debug uh our application and i'm sorry that it's so small like i don't think i can uh zoom in oh i can but it's javascript recording the main process okay i cannot zoom in sorry um what does that mean that means that we have setup flipper because it connected correctly we have did the development build and one last thing to test if we actually installed correctly adapted because we ran the export direct native adaptee is to set it up and see if we don't have any errors let's go back to vr documentation and actually let's monitor this build because if it will fail i will have to show you how to fix it but hopefully it will not so let's go back to our adopt account here and we see how to do the configuration the only thing that we have to do is import activate adaptive in our app.tsx let's import activate adoptee we will also need use effect from react and in our application somewhere here on the top let's do use effect using a use effect because we want to activate adapter when the application mounts and for that we need vcu's effect with empty dependency array we will call uh adoptee dot activate right that's how it's called activate adaptive and the sdk key the key from our account here it is automatically populated with our key so i can press continue but if you lost it like you can go to up settings uh scroll down and here is the public sdk key all right uh here we have it let's save and let's see if everything is okay i don't see any issues at this moment but what we can do is to no yes let let's just see if we don't have any errors by activating adoptee and for that like i'm gonna clear all the logs here i'm gonna clear all the even the device logs and i'm gonna reload the application for the logs here i don't see any errors with adoptee and for the native logs i don't think this any of these errors is related to adaptive so uh that means that we have configured adaptive sdk and activated it in our application correctly okay so that means that installing adapter sdk is also finished all right let me check them we build but yeah it's going to take a bit more time thank you very much musa thank you for being here and for your support hello world hi mike infinity bot mike db how are you doing guys okay so um let's think what are the next steps the next steps we have here play store configuration we have uh we will need to upload a new version of our application on the stores because uh without doing that we will not be able to set up um the subscription modules on play store so now that we have added this adapte sdk to our application what we will have to do is to build a new version of application and to upload it to app store and play store let me actually go ahead and open them hello premiere okay and over give me one second to sign in too uh all right so as i was saying uh before we uh set up or before we install the subscription models in our application if we would go to the google play console if we scroll down to the in-app subscriptions then we will see a message saying that first you need to upload a new version of application including that subscription and after that you will be able to set up the subscription products so uh to do that what we have to do is to actually go ahead and do another build for our application and for us we're going to do that with eas so we will do a a production version of our build where is it yes here is going to be upload new version of the application on the store but make sure because whenever we create a new build for the stores we need to increase the version code of application so to do that in expo we're going to have to go in up.json and increase the version here to 1.0.1 or in my case i can do even 0.2 then we need to increase the version for ios as well so it's version code or how is it called ah one second come on build number for ios is called build number build number and for the build number again increase it with one in this case you can send to build number two i think i already have build number two so i'm gonna set build number three and for android for android is going to be called version version code and let's say version code for android is also free free like an integer alright so now what we have to do is to trigger another aes build but this time for production and uh we're gonna do that with eas yeah yes uh build let me double check the version called build number three so in my case for app store here uh if i look at the builds it's version 1.0 we already have it and it's going to be 1.0.2 build number three and for android version code free for android let's open it here is version doi 1.0 point yes everything should be okay uh for us so yeah yes build uh for the platform for all the platforms and um the profile is going to be production but in case you don't specify the profile it's going to be by default production what i want to do is to say auto submit in order to automatically submit this application to the stores after it finished building no in my case no uh for ios bundle identifier no dev not just that guaca yes that's good do you want to log in yes yes oh i have to provide a password let me okay i logged in with my account if you are using rack native cli we actually have uh by the way we have tutorials on how to build and how to publish and deploy your application to app store and play store we have videos how to do it in expo with yeah yes and we have videos how to do it in react native and all these videos are already on the channel so you can go press on the channel and look to for a video on how to deploy a rack native application to the store and you will be able to do that if you already if you don't have the application there yet okay it's schedule of android submission it's scheduled by ios submission so if we look at the year yes here in the builds uh we should see the internal distribution you see it finished successfully so everything is okay on that and with the internal distribution uh and now we have scheduled to build for production with a version called 1.0.2 for ios and for android and after that is done they will be submitted to the store all right so let's go to the settings we see for ios sdk we have set it up correctly but for android we haven't set set it yet for the package name i'm gonna use the package name of my application uh like this now we need to provide here a service account key file wait a second i think we have a new member right i just see it here hey divi thank you very much for becoming a channel member and for supporting it financially i appreciate very much hi i'm from uh india i recently discovered your channel i love this uh series so much i watched all the live session in two days loved it i'm very excited to join the live today that's awesome oh my god uh welcome on board we are doing a lot of events like this on this channel make the trophy is golden when uh yes completed it will look good that's uh that's a good suggestion but today we're focused on the monetization so yeah uh so let's see how to get the service account key file and to upload it here so for that we need to go to our play console go to api access create account wave owner get the key all right all right we are ready to configure google play so play store configuration while we are waiting for the new version of our application to be built and deployed to the stores to be able to add the products let's go ahead and configure our play store so for that we're going to go to all our application here invest setup let's go to the api access now let's scroll down a bit here where we see service accounts and let's press on here learn how to create a service account from here we will press on the google cloud platform it will open a new tab here with our project selected from here and from here we can press create a new account and i'm going to call it guaco adapti and let's create and continue from the role let's select basic i hope you can see it here let's select basic and owner continue and done now while we are still here we see this account here where is it um this one guaca adaptee let's go ahead we see that key we we see the newly created service account but it has no keys let's press on these three dots and press on the manage keys in this uh on this page let's press on the add key create a new key and let's select the json format let's create it it will automatically download this json key file on our computer and we can close it from here now uh we can close the no not yet close because i think we need to double check one more step uh okay okay okay okay okay we did that we did that we did that yes we need to double check if our google play android developer api is enabled in my case it's enabled but um i'm going to show you how to check it let's search google play developer account how yes google play android developer api google play android developer api here is the api let's check it and make sure that it is enabled in my case it's enabled now we can close this tab and back to our google play console let's press done press on the refresh here for the service account list and where we see that i'm gonna have to zoom out a bit where we see our account and i think this is that account for me where is it i think it's this one it should have had like them after we return back we it should have had like this grand access button so press on the grant access and it will redirect us to this page from here what we will have to select is from the app access we need to give it information about the application information for financial data we need to check both of them here we don't need anything for releases we don't need anything store presence we need it selected and user feedback no so in total we should have four ticks as per the documentation one two three and many store presence after that we click on the invite user yes we have one two three and the fourth one here invite user send invitation and we are done with to set up it here now the last step is to upload the file that we just downloaded the json file and upload it to adapti so let's go to adapt here let's click check with our downloads here and let's upload the json file with a key that we just generated there file uploaded and we can say save all right with android sdk i think we are done and if we check to the store configuration yes we are done with both of them now we need to make our first purchase well there is still a couple of things to do before that so let's i'm gonna what did i want you to do oh to check our tasks so play store configuration is done upload a new version of application on the stores we are still waiting for that if i look here at the bills yes both of them are still in progress carlos thank you very much um all right while we are still waiting for things to set up here let's go ahead uh and in the update setting here for android sdk very easy with google play rtdn topic name copy and paste this into the topic name field found at up dashboard monetization setup page of google play developer console let's check the documentation real-time developer notification uh learn how to configure okay real time notification allow receiving updates the moment bigquery in play store tracking refunds and more we strongly recommend setting them up for accuracy actually this is an optional step but it is recommended in order for adopted to get these updates in real time uh so we need to make sure that cloud pub sub api is enabled and the service account fee has owner permission yes our service account key has owner permission now let's double check if our cloud pub sub api is enabled to do that let's go back to our google play here also from the api access we can click here google cloud platform and from here let's check pub sub i think it's this one no how is it called cloud pub sub api let's make sure it's enabled in my case it is enabled uh after uploading a service account key file to adopt it will automatically create all needed resources in our google cloud project and the topic name will appear in google play topic name field on android's sdk page in my case it has in our case it didn't generate the url yet but why let's refresh the page yes now actually it did so all we have to do is to copy this and provide it copy and paste it into the topic name file field found in app dashboard monetization setup page of google play console click send test notification to make sure everything works and save changes so monetization setup and then the topic name all right we can do that let's go in our check our application in the monetization setup topic name let's provide it here and let's press send notification test notification send all right let's press save changes and now we are uh sure let me double check if that's everything that we have to do i think so yes that's everything that we have to do for uh google real time notifications about subscriptions for app store we have the same thing for android let me add it here to make sure to add it also in your pdf that you can download below and for the ios app store notification so let's read the guide all right we have to copy this url from app store server notification and we will put it in the oh yeah but i already told you about that yes we need to do that in app information and here in the production server url and make sure that you selected version one notification this is important and yes now we are set with both of these notifications uh let's check our builds how we are doing for android it failed and i think i know why it failed it's because of different gradle versions oh it's because of aws config so um i know okay the problem is that uh our application depends on the aws exports file that is the configuration file of how our application should connect to our aws backend so whenever we are uploading it to eas to get to build our application uh it will upload all the files except the files from the git ignore basically the ignored files and because we have our aws exports file here in the git ignore it will not get it will not be pushed to the eas servers and it will not be included in the build and this way our application will not be able to be built so what we have to do is to create a new file called yeah yes ignore and if we provide a eis ignore file then it's going to take priority in comparison with git ignore so let's copy everything from git ignore in yeah yes ignore and only delete the aws exports from our eas ignore meaning that our awc exports will still be ignored in git but it will not be ignored in yeah yes because we need this file and after we do that we can resubmit the build for android actually for both of them because it needs to be there for ios as well no yes okay so we submitted a new build we should appear here in our yeah yes builds yeah for app store i think we can cancel it cancel build because we submitted a new one yes here is our ios and android build perfect and we will move on with the next steps actually in your case you should wait until your application is built and is submitted uh to play store and app store because we need that in order to follow the next steps i'm gonna go ahead and continue with steps because i already have uploaded this application before so i have access to set up the subscriptions here in play store in app store in your case just wait 10 to 15 minutes until it is built and submitted and after that you will be able to set up these subscriptions uh here i hope that's clear and now let's start by setting up ios products okay let's go ahead in our app store page where is it app store connect let's open our application and let's scroll down a bit until we see features subscriptions here we is where we will set up our subscription products on app store the first thing that we need is we need a subscription group so let's create a subscription group let's create the reference name is going to be pro world premium a subscription group is a set of products that you can offer which should be logically grouped together and a user can have only one product from a group so imagine if you are giving premium access to your application you can have different products a user can have a premium account by signing up on the monthly subscription or on the yearly subscription or on the lifetime deal but all of them should be in the same group because if you have one of them you don't need valver1 in case your application needs two types of access to the application for example one is premium and one is gold and one is platinum in that case you might be interested in creating different subscription groups for your for your application before we get started with subscription we need to do one more thing is to set up the app store localization for this group and this will provide the name so in our case it's premium app name displayed options let's provide a custom up name like this okay let's create it and we already have one localization that's good now that we have our subscription group we can create uh the subscription products inside this group that we want to offer in our case i want to offer two types of products two types of subscriptions one of them will be monthly and for that there will be no free trial and our subscription will be yearly and that one will have a one week free trial so this is a very common structure for them subscriptions if you have something else like it's pretty easy to adjust based on the needs of your application all right so let's go ahead and create our first subscription group so for the reference name i'm gonna say premium monthly and for the product id let's say dev i'm gonna start by by using the bundle identifier of our application in order to have them as unique across our account so the bundle identifier is dev not just the guaca and then i'm gonna do dot and provide some um something like premium uh monthly yeah premium monthly and also i can say i can provide information about the trial were no trials so in this case no trial trial let's let me copy this product id because we will need it a bit later and i'm gonna save it somewhere on my computer to not forget it and i recommend you do the same okay let's wait until it creates now we have our premium monthly what we should do is uh set up the subscription duration so this is gonna be one month uh and the subscription prices let's add the subscription price and i'm gonna choose i don't know 4.99 or let's it's okay um i will i will adjust i'm not gonna double think the price right now because i can always run a b tests and with adopt him and see which price is going to be the best for this application okay here we have uh subscription prices and the last thing is the app store localization so let's uh localization for the display name it's going to be premium monthly and for the description i don't know get premium access to guaco what are premium users able to do in my application i'm going to provide additional resources for premium users maybe additional quizzes i'm going to think but as a minimum it's going to be additional resources and additional practice exercises that's just for the beginning so we added the everything that we needed so we can click save we're still missing metadata yes because uh our first subscription must be submitted with a new app version and we need to create our subscription that's selected from the app purchases yes all right so we are done with this premium monthly let's go back and set up our yearly subscription i hope that i didn't forget to add once he's saying great job thank you very much i think this is the first time i saw someone building an actual application on live stream this is yeah this is quite a challenge to do and to build everything in the live stream uh but this is the fun part about the challenges and doing and building things in public all right so the next app is let's go for the yearly subscription so premium yearly product id i'm gonna do yearly one week trial again i'm gonna copy this id because we will need them in the next step let me note it down okay again let's select the duration one year in this case for the subscription prices if that's 4.99 the yearly can be i don't know 24.99 or 27.99 something like that let's add the app store localization and the display name premium yearly premium access tool pro tool i have written wrong spelling in premium in product id yeah that's my bad but i'm gonna go with this for now yes i see thank you very much for letting me know uh yes so i think that's it let's save and we are done with setting up our products on uh ios setup ios products now it's time to to do the same uh on android and set up our android products so for that let's come on let's go here and uh on the google play console let's select our application and from web menu page of our application let's scroll down until we see subscriptions under the products and i already have a couple of them but i'm going to create new one so let's create a subscription for the product id i'm gonna do the same product id as i uh selected for ios so that's this one dev okay i cannot do it so long and it's only like one character okay i'm gonna update it a bit let's do pro for android but i need to make sure to not forget it i'm gonna note it down here the name is going to be pro monthly and uh we have like these tasks that we should follow to finish setting up so let's add subscription um the benefits and actually this is optional so i will skip it add a base plan uh base plan id can be base a renewal type out or renewing the billing period monthly grace period uh none because we don't need the grace period here and that's it now we should set the prices i'm gonna select all of them set prices and i'm gonna do 4.99 euro save and after that we can press activate all right this is done now we need to do that for our pro yearly product id okay it's pro on android oh no this is gonna be for android and the name pro yearly create all right let's add the base plan for this one base auto renewing yearly and the grace period is going to be seven days for the seven day free trial after that let's set the prices for all the countries and it's going to be 24.99 i think save and activate all right our plan is active here on android which we want and back actually let me double check if we have added in the premium yearly if we had added that one week free trial um that's interesting where can i do it so view all subscription and prices yes there is if we press on them view all subscription and pricing under the premium yearly we will be able to add an introductory offer by pressing here introductory offers and we will set up for all of these countries and the uh the start date we will select uh today's date because we will start this offer from today and there will be no end date select no end date here for the end date because we want to run this offer forever now uh type of introductory offer free duration is going to be for one week one week for free you can sign up more yeah like free for the first week let's confirm and yes we have the introductory offers okay so we have finished setting up ios product we have finished setting up android products now the last step to put everything together is to actually set up adaptive products so for that uh vstab is actually the easiest one we are done with configuring everything with stores which takes a bit more time before i'm doing that let me double check the builds if we yes for android everything is okay and i'm gonna check my submissions as well it didn't start yet but it's going to start shortly this is just to make sure i want to make sure that the bills that we're doing will work for everyone else but if you are following at this moment like probably it's already working for you uh alright so as i said the next step is to set everything up on adoptee that's quite easy and we will go to our adopted dashboard here and we can start with the products and paywalls here under the products and paywalls the first thing that we will have to create is the access level um why do i have it here am i logged in with another account products no actually it was did they create this uh premium access level maybe maybe but if you don't have this premium access id just create an excel level here called premium uh again this access level will specify um the name of a gate so if you are offering multiple types of access level to your application for example a pro membership a gold membership and a platinum membership and all of them have different um benefits in that case you will have to create different access levels here in my case i'm going to have only one type of access level to the application i mean two types one is the free access level where you will get all the free resources and three practice exercises and valve access level will be premium which you will get both the free resources and the pro resources that i'm gonna add here that's why here in the access levels i need only one and this is called premium all right in the products now it's time to create our products and here when we are creating products we are actually linking uh an adaptive product with its product on the google play store and app store so we are creating this mapping here and for the product name let's start with a monthly uh period is going to be monthly access level it's the one that we have and now we need to provide the app store product id i'm gonna grab it from here for the app store it's this one and for web play store i think it's this one oh i really hope that i'm not making any mistakes but yeah like this is our id of a products from app store and play store that correspond to the monthly subscription okay that's it we can press save now we can create the yearly one yearly period annual app store product id it's this one no no no no no wait i did a mistake i did a mistake here i have this yearly for app store this one is for android and i can play our save and in the previous one in the month i think i made a mistake here i set the yearly when it should have been this one no trial save okay so now we can see them here two products our yearly and our monthly now what we can do with these products is to put them in paywalls and this paywalls is a group of multiple products and with paywalls we can run a lot of types of experiments we can a b test them and this is the power of the paywalls because we can create a lot of different products here with different pricing with different structure with free trial and without free trial and then put them together in a paywall and from this dashboard we will be able to uh move from the active to inactive put paywalls and this will reflect right away in our application without us having to do any updates to our code so let's go ahead and create a paywall here payroll name i'm gonna go with the default one and default let's add the product so for example i'm gonna add the yearly and the monthly come on the monthly product and here we also have like some config that we can send uh from here as we can say header text header image button color like these are all the data that we will send um actually let's give it a try to to play with this for example we will have a title uh become a pro member and we will have a sub title and get access to premium and get access to premium content then we can have like yeah like button color and a lot of other things where maybe i can have an array of benefits or features that we can um but we can change from here so for example features is going to be an array with different features for example premium resources then premium exer sizes um premium quizzes all right so let's save and publish this paywall here we have it it also gives us a lot of information about the revenue and our crucial information about how is this paywall performing in comparison with other paywalls that we can set up here okay okay okay um so as we said like if i'm gonna go here as i said we have set up ios products we have set up our android products we have set up our adaptive products with all of our like paywalls and we should start working on the actual paywall to display it so this is uh this is fun and i'm gonna do git add everything git commit set up yes and dev client and [Music] adoptee sdk and now we can start working on our paywall i haven't worked on the design only of our paywall uh but what i'm interested first is if we can query uh the paywalls and the products from there if we do there's going to be a win that's going to be a success and we can actually start working on the design of our paywall so in the screens i'm going to add a new folder for our paywall let's create a new file pay wall dot ts actually tsx and let's do react native functional export to generate the paywall component let's quickly add the index.js file that will export easier our paywall and let's put it into the navigation navigation index where should we put it hmm as another is it another tab here or i'm gonna put it in our root navigator as a stack screen paywall pay well here pay well and without any title i'm going to actually put it on top of this not found all right let's go ahead in the root stack program list because on the we need to add a new type for the paywall screen it can be undefined for now because we don't need to send any data there and one more thing is that i'm going to comment out this alert that is always telling me that i need to use a physical device for push notifications so alert alert this one please okay uh when when should we go uh where actually i'm not gonna bother and i'm at this moment i'm going to simply uh say that our um how is it called the property screen default no default screen option active screen [Music] come on um navigator come on types for the navigator initial right initial screen initial route name is going to be pay well save and if i refresh and if i wait and if i wait it's i saw it there come on view thank you very much all right so here we have our paywall right uh i don't think we will but yeah i will work on the design a bit later what i'm interested right now is to create a paywall so let's read the docs not no no no receive paywall in the application let's check the guide so what we need to do is to call get paywalls i don't know why it's only for swift here but yeah like displaying products let's go to react native adapter has a very good documentation so yes let's copy this adapti get paywalls method and we are gonna call it in a use effect here use effect because when we go to the paywall screen we need to query the paywalls from adoptee this is going to be inside a fetch bay wall because we need it to be a sink and i'm gonna put it inside this i need to call this fetch paywall right away no no no no actually why don't we have any music yet this is much better all right so in the fetch pay wall we need to import adoptee for that adoptee from rec native adapti uh we will not need to set up the error or we can say yes it's okay we don't need this one and we can say actually force update true in order to get them right away from the server not to take them locally now uh let's go ahead and console log our products and console log our paywalls i'm really interested in that so i'm gonna open our flipper and we see here our logs we can refresh our page and hopefully we will see our paywall information from adoptee oh i didn't call the fresh paywall should be called like this and yes we have something there we have something there what we are interested in is in the paywall products actually paywalls the second one is an array that contains only one paywall so i'm gonna save that paywall at position zero because we only have one at this moment um i'm gonna save it in state so for that we need a use state let's define this state here pay wall and set paywall use state initially it's nothing uh and it's of type adapt to paywall and i can actually say adapti paywall but i need to import it or or null initially it's gonna be null okay um here let's check if paywalls dot length is more than zero let's set the first paywall in our state all right now uh now now what we can console log our paywall and let's look at the data structure initially it's null but after that we see that it has it's an object with a b test name with custom payload string with that title subtitle features it has a developer id it has also products and this is what we are interested in in web products okay we are interested in the products that means that um i don't know if paywall was not loading we can return an activity indicator just to say that it's loading otherwise we can say for every product in our paywall pay well dot products pay well what is possibly known all right let's do it it's okay like this i want to map for all the products and for every product i will render initially a simple text just to see and what can we render from that product we can render product dot localized title okay we see it so if i comment out this text with paywall we see two localized title one is pro yearly and valve one is pro monthly everything that is coming after that uh with dev not just guaca unreviewed this is uh coming from play store and as um until your application is going to be reviewed by google it will have this unreviewed um name temporary app name and the temporary ids for our subscription products i have to return yes i think i just yes return thank you very much and in this case i don't need to check that yes all right so what does that mean that means that we have uh successfully queried our paywalls and products from adoptee it's i think it's great it's amazing so far uh let me double check the build and to make sure that you are also able to follow along everything we have successfully built for ios and for android um submission i'm not sure what's happening there app store submission was successful and now if i'm gonna look at the test flight for example i see that i have a version 1.0.2 which is still processing uh that's good in our ios up here for when we prepare for submission i can go ahead and delete this build and add a new one the latest one um i cannot do that because it's still processing the one 1.0.2 but after that is done i will be able to do it and i'm not sure why for android it didn't submit this is play store submission play store submission all right all right uh i know why because in order to upload our application to um to play store using yeah yes we need to do one extra step so let's go in yes docs and i'm gonna show you what we have to do in order to uh enable submission to google play store in yeah yes submit actually i need yeah yes submit let's go introduction submitting to app submitting to the google play store uh google service account and download it json after that you will have to create an app on google and upload your email so here is the documentation for creating a google service account but we already went for this process let me just double check what what permission this account needs expo okay service account service account user yes this needs a bit different permissions and here all right so this is optional if you're not using expo uh yeah services in my case i'm using so what i have to do is to create another service account for uh in order for export to have access to submit new builds for our application for that let's go in our api access and let's go to the google cloud platform the same way as we did before and let's press create service account and here is guaco uh expo that's it welcome expo let's create and continue for the account i'm gonna have to scroll down until i see users uh service accounts actually and a service account user here service account and the role should be service account user all right let's click continue uh let's click done and we need to find this newly created account that has no keys guaca expo and generate a new key by pressing manage keys and adding a new key creating the key json file create uh and now what we're going to do with this key is we're going to actually one second with this key just remember where you downloaded it we will need it in a moment uh because now we need to go back to our google play account click click done and in here we need to find the guaco expo is this one manage play console permission let's press on this one and for the permission what permission it needs it needs the view up information it doesn't need financial data it needs play game services actually everything that is selected by default let's just press invite user send invitation and that's it that's it here as i said now the file that we downloaded just now for the newly created service account let's drag and drop it in our project here in the root folder of our project now what do we have to do with this one i will rename it to rename to google service account and i'm gonna copy this name because we need to add it correctly in a couple of places in the first place i want to add it to the git ignore file because we don't want this file to be tracked in our git and to do that also double check it's if i write git status is not there yes we don't want to share with uh this file the second step is invas.json yes.json we in the submit if i'm not mistaken let me double check with the docs alright come on where do we set it up creating a google service account okay we created it [Music] submitting to the google play store wait a second [Music] [Music] configuration weave yes yes service account keep off under android submit production so under the submit in the production we need to add some configuration for android and specifically we want the service account keep off and the service account keep off is going to be this directory and yes i already showed everything so i'm gonna have to delete it after the stream but copy the name and provide it here so in this directory that we have yes then google service account.json okay so let's go ahead and do uh an eas submit platform only for android and i can provide the latest flag to submit the latest version daniel hello thank you very much for your support daniel ling saying i love this kind of content seeing another colleague fighting with a code and configuration nobody is perfect i feel a lot of empathy i'm seeing this at the moment i work thank you very much yes this is the real process of developing applications and yes where not everyone is perfect don't believe all the tutors that are doing everything perfectly we are all developers have to go through the documentation multiple times reading a lot sometimes failing and debugging and this is this is actually the process of being a developer so um yes with a newly created service account expo will be able to submit a new version to android and if i check submissions here if i refresh play store submission is actually finished because it's being done very very fast and if i will check it here we will see it on yes all right how many weeks to the end of a startup challenge uh that's a very good question we are now in week five so next week i am gonna still work on the application and what that's what uh i will you will do as well but in the week seven which is two weeks from now on twelfth of august that's when we will have a demo day and you will have opportunity to pitch your idea at the demo day show your startup that you have managed to build it doesn't have to be finished it doesn't have to be perfect it has to have a goal it has to have like some learnings behind it and if you did something during this um seven weeks i encourage you highly to come to that demo day and pitch your idea and actually i'm gonna provide more details about how you can sign up to pitch your uh project at the demo day and we have actually three prizes for that first uh the first startup will get one thousand dollars the second one five hundred dollars and the third one two hundred fifty dollars uh and that's not a lot but i'm pretty sure it can cover some costs like servers or domain names for a couple of months so very excited about this one and we have a new donation daniel thank you very much for your kind donation this 20 000 cop i don't know how much is that but thank you thank you very much it sounds a lot 20 000. [Music] uh okay is the application live in google play store no not yet like i'm just uh this week i have uploaded it beers at the top in order to prepare for today's video to be able to set up all the subscription products but i still haven't submitted it for review because i still have to work on the content of application uh i still have to polish a couple of features finish this uh subscriptions and then uh submit it for review and really hope that i'm gonna manage to do it until the demo day otherwise i'm gonna be able to to share the build like through expo because even now i can do that with everyone emmanuel i'm so glad that you are uh going to come to the demo day it's nice daniel it's still a lot thank you very much for your uh for sharing your hard earned money with us uh so let's go get back to our application we managed to um query our paywall we managed to query our pr subscription products and i think the next the next step is to work on the design of a paywall shall we do that uh and just have like a very simple design but with simple with style actually um yes upload a new version to the stores i think that's still no actually that's already done because we solve it we have uploaded it and now it's time for building the paywall whoo that's interesting let's do it add everything um i need some designs because i haven't thought about it where should i just go let me keep it simple uh let me keep it simple and on the paywall in the pay wall i first of all don't need them how much time do you give me guys i had to work on the design for the paywall because if i'm gonna start like i'm gonna be too perfectionist and i'm gonna work too much on it um let's as i said keep it simple uh first of all hide the top bar header shown false okay because we close ours uh header shown false now if i go to the screens paywall paywall here let's define the styles cost styles equal stylesheet create we need to import the stylesheet from react native and yes i'm gonna start with style instead of this view let's import a safe area view from react native safe area view just to make sure that the text is displayed in the safe area of the screen and style is going to be styles.con root or container bag i want a background color of colors dot light dot white and to make it full screen i'm gonna do flex one yes all right now um our paywall our paywall uh it had some information where for example in the custom payload scr string custom payload string paywall look we have there in the pale [Music] wall data we have pay wall dot custom payload string and because this is string i think we need to do json dot parse this one uh yes word like this okay let's go ahead and do console log paywall data paywall data has title subtitle and features so we're going to start with title and i'm going to provide the paywall data dot title but if it doesn't have i'm going to provide a default title of um become a pro member but that's coming from our paywall there right here i'm going to say become a pro but we see that the data is coming actually from the title which is saying become a pro member uh for west style i'm gonna provide styles dot title and i'm gonna do the same for the sub title paywall data subtitle and i'm going to provide a default value in case our paywall doesn't have this information and get access to premium content okay we have that um the benefits how should i display the benefits let me just double check um pay wall design we need some inspiration pay well uh all right then i'm gonna add probably the benefits and after that like two plans that we have yes i'm gonna again keep it simple uh i'm gonna add the benefits so for the benefits that's going to be payable data not description but features that's how we call them there right features yes features dot map and for every feature we are going to provide to render a view with a text inside that will render the feature but if it's not there let me take it out from here and say const features equal to paywall data come on payrolldata.features or an empty array features dot map feature and this is going to be an array of strings okay we have data on the screen now it's time to start styling it for example let's go ahead and start with title here and sub title uh first of all i want to align everything in the middle so align items center all right for the root i'm gonna also add some padding like 10. and maybe padding top even more like a 20 or 25 for the title font size i'm going to increase it to 30. okay for the subtitle i'm going to increase the font size to 24 but subtitle i missed the name but for the color i'm gonna give it a slightly less black color 22 or even 20 is gonna be enough uh the gray do i have gray bear font weight i want to give 500. okay uh for the title i'm gonna add some margin uh vertical 10 to add some spacing okay that's okay uh and all right now uh regarding the features let me take it out because i'm not sure if i need a container for that text but i'm gonna need a container for all the features so style styles dot feature container and here for the text i'm also gonna give styles dot feature text and for the feature for the feature container i don't want i want it to be um to align self stretch because i want it to be full width of the screen like this then i want for them probably i'm going to add some icons so expo icons check mark let's try to use this one and i'm gonna use it here with a text so let's add them i can before the text and let's make sure to import the icon from okay we will need a view here with style styles dot feature the first one is features container and the second one is feature container one will contain all of them one will contain only one so i'm gonna move here features and i'm gonna add one more for the feature for the feature itself what i want to do is to do the flex direction row because i want the text and the icon to be in the same row and the align item center to center them horizontally that's good for the color maybe i can do colors lie dot primary okay now feature container let's play around with the margins so margin vertical okay feature text margin on the left margin left 10 that's good i want to increase the font size to 16 is okay margin left maybe only five yep i think that's already better and features container margin vertical all right all right we can work with this and the good thing about everything but i'm gonna show you a bit later now let's style our paywall products here we have a view wave style paywall pro style that products container here we're probably gonna have a view with with this text text inside and the style of this view it's going to be style.product container okay let's go ahead in the products container here and we have product container there for the products container i want to say margin top 10 big not 10 pixels i want to be auto in order for it to flow on the bottom here perfect now product container product container uh align cell stretch as well for a product container i'm gonna start with uh border border color i don't know not primary actually but i don't know something like that and border with one okay we see the border there that's good and now we need to play around with some margin padding and so on [Music] but again how we what information do we need to display we will need to display the localized title uh we will also need to to display what i don't know let's check what data do we have about it um for example pay wall not payable data i want to do paywall dot products to render them to console.log to see the data so we have here i'm gonna try to do json formatter and i'm gonna try to process this what this so i need this message this message here we have it currency symbol we have so this is our array of products we have two products here let's check the first one the first one has some information about the android product that we don't need it has localized subscription period that's interesting we need to render it on the screen so let's actually start rendering everything that we will need for example localized title then localized subscription period uh we have localized price localized price and very well paywall and it has an introductory offer a subscription period one year but about the introductory offer how do i understand how long is the introductory offer uh let me check here with the products is there offer no all right so this is the information that we have and that we will work with the name duration and the price how we're gonna structure it uh i don't know yet okay i know so it's going to be the localized priced and this one will be in the same part saying like how much you're paying per which period okay now uh let's give style to styles dot product title and here styles product price what's happening here i don't know okay let's go ahead and style the product title and the product price for the product title we're gonna have font size 16 font weight 500 that's good for the product price we're going to have font size let's try 20 okay product container margin vertical 10 padding 10 border radius 10 everything with 10 is better i know kinda like it this is enough info yes i agree all right so i like how it turned out so i think we can consider this finished done in a way uh i don't know for the yearly i can also do like save and i don't know how much but that's optional and that to add background color to product container i don't really want to add background color i i would like to keep it as simple as this because i'm going to start messing up everything all right so i'm going to leave it like this but we could think about everything that we are doing now with adapti is that every time we're gonna go to the paywalls here in the adaptive panel without having to update our application we can say that the title should be become a pro learner i can save and publish and then the next time you will load the application without having to edit any uh changes in the code we will see that the title of our paywall is updated automatically and with these changes we can track and see which paywall is performing the best as you can see here become a pro learner so we are done with building the paywall and the same thing like we can do with features we can add one more feature no more odds i don't display any ads for the free version so error with json yeah because i don't need the last one here so as i said with that being said i think i can do get status get add git commit minus m paywall design and we can move on with the next features because we are of course not done yet paywall design here all right the next one the next one i think i think that the next one is going to be related to buying the products we're identifying users let's cover identifying users first because we will need to to see it later when we buy products so for example at this moment everything is going to be working like if we implement buying products but the problem will be that it's going to be harder for you to in the event feed here to track and see what user uh has actually subscribed like you will be like adapting on the back end will assign a random id to every user and it will manage like all the access for yourself however if you want to uh kind of map your adopted user with your user that is authenticated in your application we can do that by identifying the user when we are when we are here activating adaptive because besides uh the sdk key here another option that we can provide is the customer user id and by providing the customer user id here after we activate adoptee all the purchases and all the events that this user will do will be linked to this customer user id and it's going to be much easier for us to track and understand what's happening in our application codebot thank you very much for appreciating my tutorial but uh where do we get this customer uh user id we're gonna get it from um from our off module dot get current authenticated user because in my case i'm using amplify uh in your case if you're using a custom backend like you could get the user id and send it here but i also have like a context for the user context and here i can get the user context let me add them this sub set sub it's gonna be a string set sub with the user that data attribute sub and i'm gonna export this here in the value sub and in our update esx i can do const sub equal use user context we need to import it of course and this sub is it clear but these values never use and i can send it here and actually i can call this use effect only when the sub changes and i'm gonna check if there is no sub that means that the user is not logged in yet and i don't need to initialize adapt if there is no sub otherwise console log sub let's check so come on what's going on here why you're not loading come on what's going on foreign what's up i don't know why it's taking so much time hmm maybe it's actually getting to them pay yeah i think it's getting to the paywall but the uh sub is not yet there is that true sub use [Laughter] i'm gonna short circuit the application here if the sub is not defined and the problem is that the sub is not being defined let me go ahead here and say console.log user data what's up here hey come on welcome why you're stuck here so do oh come on come on i know you can [Music] the warning from with native emitter most probably is coming from uh from a library that we are using is it because of a newly included things that i did here let me delete it okay that's weird and oh all right all right all right i understand i understand our user context is here and i don't have access to it uh at this moment that's why i wasn't able to get it so actually then in this case i'm gonna do it a bit differently the activation itself so like this uh i'm gonna have to put it inside in a sync function so const setup adapter equal a sync function like this and after that i will call this setup adaptive function right away but to get this sub we are going to need to get user data equal a weight of current authenticated user now we need to get this off from aws amplify and for the sub is going to be user data attributes dot sub and i can actually console log it here console log to c to see it in action yes this is the sub and our adapter will be initialized with a customer id that references by id of our authenticated user in this way we are identifying the users with adaptive based on the ids that we are tracking them with so that means that identifying users is finished and we can go ahead and do get add get commit identify users all right so going to the next one the next one is buying products buying products buying products is quite easy in fact and the only thing that we have to do is to call the purchase product on the adoptee and send the product that we want to to purchase so for example for that we will have to be able to register click events on these plans so instead of a view here i'm going to move to a pressable that will allow us to assign a on press event and what should we do there we should create a function and call it here purchase product and then we will send this specific product that we want to purchase now let's go ahead and implement this function and it's going to be here const purchase product is going to be a sync function and we will receive here a product that is of type adoptee product and we can console worn product dot localized title just to see if we are uh handling presses correctly so if i press on this one i see here pro early if i press on this one i see here pro monthly that's good that means that we are um tracking like press events correctly and we are receiving the product that we want to buy here now let's have a look in the documentation in the documentation making purchase with react native this uh is a function that we have to call make purchase so we will put it into a try catch because there might be some errors that we can catch here i don't know alert alert let's do couldn't couldn't process that transaction and for the error message i'm gonna do error.message we need this alert from react native but uh inside here we are going to call adapti dot make adapted dot purchases dot make purchase and here we need to send the product that we want to buy that's it uh adapter will give us back free free things received purchaser info and product so receipt that's good but i need to change here from product to buy product and i'm gonna call it with buy product because back we will retrieve the product here so let's go ahead and console log receipt let's console.log purchaser info and let's console.log the product okay yes let's give it a try i'm going to press on the prior yearly and this will show me an error the error is saying that the item you request is not available for purchase and this is because my application on google play is still unreviewed it's still waiting for it to be reviewed i haven't submitted it yet to be reviewed but once uh it is reviewed then you're gonna be able to see the products here from uh from the google play and you'll be able to finish the transaction using google billing um on my phone however on ios you can receive them without having the application reviewed by app store so uh let me just check if it's gonna work on my phone here is my phone one second ios bundling yes and um [Music] wait a second wait a second hmm uh i'm not sure if i have to update the application because i see them here but let me just double check our subscription and i think we created them uh for the premium and they are called premium monthly premium yearly and the yearly what price does it have view all prices starting price yes it's this one why in my case it's a bit different let me think in the bills the question um is is google or apple require a fee for the transactions yes google and apple actually uh keep 30 of your transactions where if you um up until a limit they will get only 15 percent [Music] ios ios ios so um it's a bit it's a bit weird because i'm getting data previous data not up to date adoptee well what do you need to do to update the application to play store uh [Music] we have a video for that we have a video that explains how to build and publish your application on play store tsx here [Music] [Music] um subscription group identifier so here on ios premium apple subscriptions and i think it's getting them from our pro but i don't know why for one all right all right all right uh what do we need to do here i think i will need to create another build uh but wait a second let me try one more thing expo start clear is it clear so did waiting for the application to build again for ios come on it still takes them from a different place which is super weird so from here up settings this is the key you know if you don't set it it should does it still work why does it still work if we don't set the sdk key okay the bundling process is taking a bit of time but if i don't provide the sdk it's supposed not to work and let me check if on my ios well it will work or not i think on ios it doesn't work [Music] it's a blank screen [Music] no experience id or project you found in one or two to two yes so if i put here the sdk key on android it works on ios it's getting me the previous data paywall paywall get paywall for its update true maybe that's how i set up my uh well i can easily fix this issue with unique key in them um for example in our features uh we can specify the key is going to be feature and for the products here the key can be product dot id or something variation id is a variation idea the same i can give a index if it doesn't like that index okay let's go let's go let's go whatever console logs do i have there i don't need it here i'm still reloading the application on ios all right um so let's continue with this one because an ios like for me i think it's the cache that is initializing it with a previous application but it still works so as we can see come on focus we have uh the two packages one is yearly and one is monthly so let's go ahead and press on one of these for example the the monthly and we are greeted with apple pay uh and because i have already set up a sandbox account uh i'm not going to be charged as you can see here on the top there is the sandbox so i can press subscribe just to test the purchases so no just and the everything is complete and we are returned back you are all set everything is purchased and will we see anything here [Music] and we can go ahead and check and check in adapting if our subscription was registered and most probably it's not going to be here but if we go to the event feed refresh table we're not going to have it here but we're going to have it in my other account of adoptee because my ios is connected to to that one so just give me one second come on i don't know what's going on my internet is weak or what um look i think that we will have to create a new uh apple development build where i will have to install it again so let me start by trying to install it again to to try to clear this cache that i'm um with i cannot get rid of so from the expo builds i'm gonna go into the ios internal distribution and i'm gonna press install here scan vs qr code and it will install my application what is the tattoo you have on your hand uh here it's a clock with some flowers here is astronomer wood with some planets and here is something else alright so my application is installed let's try to run it again okay all right bundling let's see let's see let's see hopefully it's gonna work bundling complete couple of more seconds okay now we need to sign in sign in let's go okay it works it works i'm so happy i'm so happy so i just had to reinstall in order to clear the cash and now we see all the features that we have set with a premium yearly and premium monthly and i'm gonna try to get the premium monthly come on so subscribe i'm gonna provide my password here [Music] and our application is bought that's good and if we go to our adapter here event feed in our adopt account come on refresh please work divi thank you very much for being here the stream is going to be published on the channel so you can follow along at your own pace no data why not data because environment is sandbox i think oh i think i need to call a weight here where else do we have console logs console log i don't need paywall products reload let's give it a try one more time [Music] okay let's try to buy one more time you ow you are currently subscribed to this i will try to subscribe to the monthly foreign [Music] [Music] come on why are not oh oh oh oh here we have it here we have it so we are um console logging the received processor info and the product after we buy uh buy it so the first one is the receipt which is this one this is the the base64 encoding of our receipt then we have a purchaser info right purchaser info access level it has premium access level and is active true so we know that he bought the premium access level and we can already start giving him access to the premium features in our application uh also like there are other information like customer id it has like subscriptions and so one and as you can see uh the next one is the object that was purchased um here um 4.99 the monthly without subscription how to work with ads into the application um yeah there is another way to integrate i mean uh we don't cover yet like advertisement like how to integrate them in react native but this is something that i'm very interested about and probably i'm gonna create a tutorial around like integrating ads in your application but uh with that being said like we already have this information here it's not yet visible here most probably because it's in the sandbox environment uh not sure if even here it's going to be visible so um yes while this is still refreshing and we cannot see it here at this moment based on the console.log that we received we can see that the user has already purchased the access level premium and based on this we can take the next actions so what's going to happen here well i think we just simply will return back we'll return home for for for now for example navigation i'm gonna say navigation dot navigate home but the next task that is interesting is to check the subscription status when we are trying to do something so for example now we are always displaying this paywall screen but what we will have to do is to display it only when the user is trying to access some premium content that he does not have access to for that we will have to check the subscription status and see if there is no active subscription on users account then we need to redirect here and show him like the paywall so uh when will we do that well let's think about it i know when as i said whenever we will press on one of the topic that is that is a pro topic in that situation we should check if a user has access to it so we will mark these pro topics in our back end with a flag if it's a pro or not but for now where do we have a screen topic screen topic screen here look what i'm going to do resources [Music] let me treat all these resources as pro resources and later on we're gonna add it in the backend database so inval constants contexts not components where we have this resource list item this resource or exercise will have a boolean whether it is pro or not um at this moment i'm gonna have like simply is pro equal true and let's design how what's going to change here for for us i'm going to put it on top here um what's gonna change well we're gonna have i don't know another icon besides this url if i'm gonna put another icon how will it look oh bad then we need to put it into a view and give some styles to this view margin left auto and flex direction row okay so we need to find an icon i don't know pro what icon should we add it uh maybe lock i don't know lock lock lock lock like this i'm gonna try this one and actually uh i'm gonna go ahead and do it a bit differently not here but instead before the title so before the title i have here the icon okay okay something like this maybe outside here and we will have to put them no it's okay i don't know okay uh 22 maybe yes and this lock is going to appear only if this resource is pro but because in our case all of them are pro it's going to appear for all of them but if they will come with very sore is pro false they will be displayed without that okay now on press we need to check if the member has access to it okay and if it doesn't um for checking if a member has access to it probably we're gonna have another function const is pro is user pro equal to async function and let for now say that the user is not pro just simply returning false now we are going to check if there is source is pro but the user is not pro then we will do using navigation construct navigation we want to uh redirect him to the paywall use navigation let's do navigation dot navigate to paywall so now if i'm gonna go here and press on this one i'm gonna be redirected no i'm not gonna be redirected anywhere because i need to return here and if i open it is user pro and if the user is not pro then do navigation navigate okay let's give it a try i'm gonna go here so variable if i'm going to check this one i'm still going there what um if i do cons so log is and this one web application is disconnected shouldn't be true and false you saw true and false true and false oh because i think i need to wait first const user pro equal is user pro but we need to await and i can do it like this user pro true and true and it redirects us to become a pro learner on this page and become a pro learner yes we can go back here uh however if the user will be pro then he is going to be able to access it and in that case i don't think that we need to to even display the lock so i'm gonna user i'm gonna put everything here user has access to pro to pro and that's it now let's let's not confuse it anymore that's good now uh instead of uh returning true or false here what we have to do is to check the membership of the user if he is subscribed or not with adaptive ads also quite easy to do so in subscription status rack native let's have a look we will get the info from the purchases.getinfo and in that info we will have the information about the user so let's grab it here let's add it here uh and it actually let's do it like with this one because we need force update true just to make sure that we get the latest version of that import adoptee from racknativeadapty we don't need this error we can [Music] console log let's console.log info [Music] web application is offline okay i'm gonna check it from here if i press here we see the information about the user so what is interesting for us is the access level and we should check if access level has premium layer and if it's active because here i see that it's not active because on android we didn't buy it so what will will return is object dot access levels premium than is active so return info dot access levels dot premium dot is active and yes like this and like this or false because if it doesn't have this premium active and it means that it doesn't have pro access all right uh here on under one um on android it works because we don't we didn't buy the subscription yet uh but on ios let's check on ios if it works so i'm going to refresh the application and we can go here and let's try to press on one of these items come on so if i'm gonna press on one of them we are not redirected no we are redirected there what's going on first of all what i want to do is to add a back button on our um on our paywall and for the back button i'm gonna use um cross not cross x close this one in the screens paywall paywall let's do material community icons i'm gonna give a style to this one go back and for the style it's gonna be styles dot close okay we need this function go back and it's going to simply say navigation dot go back but we need this navigation so let's grab it here const navigation oh but we have it yes okay there it is uh i will only position this close button as position absolute uh top 25 and right 25 there maybe 50 no 25 was okay so if i press on this one yes i can go back and on ios i will also be able to do that actually no all right why is on ios let's debug the issue on ios because it says that we don't have access for that in the resource list item here we have a info so let's go back to console log the info and see it here in action if i press here this is the info access levels premium is active is false maybe it uh reset so i'm gonna buy them monthly okay let me try to subscribe [Music] foreign all right so after subscribing successfully if i go back to the topics here please come on i can easily access pro topics come on one of them yes and it redirects me to the url of that topic without redirecting me to the paywall so that means that we know how to successfully check the subscription status of a user um as you can see here you can put this gateway on different parts of your application and if you have multiple access levels the only thing that you will change between these if statements is the name of that gateway in our case that we have only one access level premium but if you're gonna have multiple of them like you're gonna say here premium or gold or i don't know platinum or any other name that you can provide for an access level and you will put these uh checks whenever the user would try to access some parts of your application which he's not supposed to access yet and in that case you're going to redirect him to the paywall as we are doing here if we are not pro we are redirected to the paywall and from here we can uh become a pro member and then go back and continue uh using web application as a pro member so with that being said we are done with we are done with checking subscription status [Music] and yes by products we are finished checking subscription status we are done and actually we are have only one task left to do is to log the event about the paywall when we display the payroll and as you can see if i go back to the event feed we already have the events uh that i was trying in my sandbox account for apple so as you can see this is how many times i already bought it and you should also see that in your case it's from app store environment sandbox the price the country where it's coming from and so on awesome so as i said the last step is to is to do two where is it give me a second react native events integration events [Music] nope [Music] uh to track pay wall pay wall uh it's paywall views right pay wall views yes it's called log show whenever we are querying the get paywalls we can go ahead and log the event log the paywall show event and by doing this adapter will be able to give you analytics regarding the conversion rates the conversion rate is how many users got to see the paywall and how many of them actually converted to a paying user because this is the most crucial metric that you need uh to track in order to improve your paywall conversions and this metric is directly responsible for the revenue of the application because the more people you convert on the paywall the more revenue you will have for your application so in order to properly track this information whenever we in the where is it in our paywall screen navigation screen paywall screen after we are getting the paywall no not making purchase fetching the paywall we should uh call we should call adapti paywall log show and which one we pay walls at zero variation id and actually i'm gonna do it here and uh yes variation id this is the idea of the paywall and adapt you will know uh to to track it and actually i will do a wait here as well and by doing this uh you will start getting this um this events tracked and whenever you will check for example products and paywalls whenever you'll check paywalls here you will see how many users are converting for example you can go on with here or better in the analytics actually metrics alright so here yeah here is the views are number of views of a paywall if the user vis the paywall two time this will be considered as two visits so after some time like you will start seeing uh views recorded here uh guys give me one second and i'm gonna be back real quick alright alright alright so now we implementing tracking paywall events as well and that means that we have implemented everything that we have planned to implement today so it was a very long task of list but one by one we implemented all of them and the good part about it is that now we have implemented in-app subscription uh in our application using adoptee so we have started by setting up all our [Music] subscription products on app store connect and also on google play store after that we have created and mapped all the products on adoptee and from here we now can track everything about our application monetization in one single place because at this moment we will not have to go to app store and to place to work to check the analytics and then to somehow merge together in order to get a general overview of how is your application doing you can come here and you can go ahead and check the analytics right away here and you see the revenue across all the platforms that you are using adapti is also providing a lot of other metrics like monthly recurring avenue annual recording revenue active subscription and a lot more that you can see here use them and uh make decisions based on uh data from from the users and this is the power of using adoptee because you can track everything in one place you can integrate it with a lot of other tools for attribution for analytics that can track all of these events and improve your application based on them all right so uh that was it for today um once again thank you very much adaptive for making this video possible and for sponsoring this uh tutorial this is very valuable for me personally because i got to learn a new tool and it seems to be very user-friendly to implement in the application the documentation is quite good and from the feature set that we see here it's going to be very useful for me whenever i will publish the application on the store i'm going to come with more uh updates about the adapti experience uh my personal adapter experience after i will release the application which is going to happen in the next weeks but yeah i'm pretty excited about that and yeah we'll see what else we can get out of this and i also think that it's valuable for you as well to learn and implement monetization enough subscription in your personal application so once again um thank you very much adopt you for sponsoring and thank you very much for everyone who has been here with me till the end uh we are doing we are in the fifth week of our not just startup challenge it's a very interesting challenge it's a seven week challenge where i encourage all of our community to build their own startups and at the end on 12th of august we're gonna have a demo day a demo day where uh you'll have a opportunity to pitch your idea and to show everyone what you managed to build during the seven weeks again it doesn't have to be finished it doesn't have to be perfect it doesn't have to be deployed the most important part is that you have an idea you do some progress on it as small as it as you can show us an mvp a minimum viable product as crappy as it can be uh test it with a couple of users and yeah come pitch it uh during the demo day and our community will vote for the best startups yes all the details in the description below all the links are there you can also download the asset bundle and follow along this tutorial easily i hope you managed to implement everything if you have any questions make sure to join the discord and ping me there on discord uh if you have any issues with integration of adoptee and so on and me or my team will try our best to help you have a very easy experience without any issues that's it for today guys thank you very much have a nice day have a nice week

Channel: notJust․dev

Views: 48,723

Keywords: vadim savin, not just development, notjust.dev, live coding, full stack mobile development, notJust Startup, react native tutorial, notjustdev, react native ui design, react native project, react native for beginners, react native tutorial for beginners, app monetization, mobile app monetization, in app purchase ios, in app subscription, react native in app subscription, how to implement in app purchase in react native, adapty, react native adapty tutorial, react native paywall

Id: YWZNMOAaaC4

Length: 217min 23sec (13043 seconds)

Published: Fri Jul 29 2022