Add Subscriptions To Your REACT NATIVE Apps Using REVENUE CAT

today we're learning how to easily add in-app subscriptions and purchases to our react native application using Revenue kit hey everyone what's up this is Simon from galaxies.dev and today I'm walking you through the steps of setting up in-app purchases and subscriptions for your native application using Revenue kit so this video is sponsored by Revenue kit and I think Revenue care was like one of the first services that I actually noticed for in-app subscriptions and purchases years ago which means they have a long tradition of setting up in-app purchases and managing this for tons of different languages and Frameworks like flutter react native and everything you can imagine in this video I will walk you through the steps of how you need to configure your Revenue CAD app with your actual native IOS and Android app how to add products to Google Play and the App Store connect store how we can then use them in Revenue CAD to create different offerings and product groups and then also write some code as a provider for our application to load all the data from revenue kit display it and actually purchase it and afterwards Grant the user access to features of our application if you want to check out the full code example link below this video also to a written tutorial on galaxies.dev where also the GitHub repository is linked so go check that out and of course check out revenuecat.com which is sponsoring this video alright so let's get started with revenue and our react native application so you can check it out we have a newkit.com in-app subscriptions Made Easy and it really is that easy and the pricing is also pretty easy to figure out because you can just get started for free up to 10 000 uh and what is MTR monthly track Revenue so not mrr MTR uh but anyway that's a lot of money so at I guess at 10K MTR uh you can afford at least eight dollar per month or 12 per month uh per thousand dollars to get Advanced functionalities but we're gonna just use the free functionality in this video and it's gonna be enough because um with Revenue kit we have the ability to use tons of different sdks um so even if you're a native developer with swift or kotlin you could use it but especially I think this shines for cross-platform applications where you can unify all the stuff for in-app purchases flutter react native Cordova unity all of them work great and the cool thing is that we have a back end that tracks all of our stuff that is like the the single source of Truth for all the transactions and the status of the users of our application many more functionalities but let's see how we can actually use this so within my Revenue kit account I created a new project so I've called this my cool app and within this app I need to first of all set up the actual elements that users can purchase and I also need to add the apps so adding the apps is really a straightforward process you just select your app you enter the name and the bundle ID and then you usually need something like an app specific shared secret so they have great guides on creating this for both for the Google Play Store you actually need some Play service credentials which in fact takes a bit longer so this is a but it's a great in-depth guide just follow along the steps it's pretty easy to do and for upload creating the app specific shared secret is actually just a few steps and then you get this so This sounds probably more intimidating than it actually is in reality so once you get your two applications set up you can also set up the items that users can purchase in your application this is always done at either App Store connect for uh Apple apps or at the play console for Android applications and this is pretty much all the time the same process you go into your applications let's make this a bit bigger for example here I got my test app on App Store connect which I configured with a few in-app purchases so we got five magic cookies which is a consumable which means you can consume this multiple times it's like purchasing games in your favorite game then we also have non-consumables like an epic 1 or magic boots these are things you purchase ones and then you just have them forever it was like probably I mean let's let's say you can't trade the Epic want or the magic boots you just keep them forever in that game um so I've set them up with some product IDs and we're gonna come back to these product IDs in a second I also did the same for subscriptions so I do have a cat premium subscription either a monthly price or an annual price uh using this like I call this uh Revenue CAD app so RCA then I followed this up with the pricing and the duration in here or for my in-app purchases I just had uh whether it's a consume or whatever kind of thing this actually is now I did the same thing for my Google Play console configuration of the app and you see I use just the same uh product IDs in here you can find this not under testing not here not there uh you can find this under products in-app products um so here here are the elements that are added to Google play again just basic configuration and adding these and also subscriptions work just the same so once you've set up all these things in app store connect and Google Play you can heat over to your app now it gets really interesting uh as in my application where are my things so here we go I need to set up product offerings entitlements and optionally experiments so what is this now a product is just the thing that I configured in Google Play or App Store connect now can we uh well probably let's do it like this so you see I added all of them in here I can just go to new then I can select the apps that I previously configured and then I can oh can actually import products from App Store connect this is new I think this is actually new this is like what people requested all the time so uh don't be like Simon don't set them up manually I just set them up manually which by the way also work great but it looks like I can also do this from here so that's pretty cool um looks like we just need a p8 key file from App Store connect but that should be pretty easy to set up so that is a very very nice addition I really like that one um nonetheless you in the end gonna have a list of products that you use as could purchase in the application don't worry about the entitlement yet uh we have all the identifiers and we have both the stuff for uh IOS and Android in here now a product is just a thing somebody could purchase the cool thing is that we can now Define entitlements and entitlements I don't actually know the translation for entitlement I should probably look this up but basically this gives you access to something so for example we have the pro features entitlement or we have the magic boots entitlement and you can get this entitlement in different ways you can have different products that Grant you this entitlement so here we have all the products that give me the pro XS here we do have the products associated with this entitlement that gives me the boots and also the Epic one so everything is now configured under these entitlements and revenue CAD manages all the entitlements for us which is pretty cool and to actually make this available to the users we're gonna have to Define offerings we can also just list out all the products if we wanted to but offerings are a great way to test the things in your application so here I have a default offering which includes um all the uh items we've set up before now you could also have like a marketing offering and then you can later say hey I want to send this offering to specific users of my application and you can even run experiments um which is a great feature here um to show different users like different pricing options or just trying to figure out what works best for your app so this is my configuration and under API keys I would find the important API keys and now let's take a look at some code um we're going to use the in-app purchase plugin and we're going to actually not use the Expo in-app purchases but what they recommend is the react native purchases from revenue kit here's also a great tutorial from Josh um Epic guide on getting started covering the basics he actually follows a little bit different setup but we're going to talk about that later nonetheless we're going to use that plugin and we're going to write some code so what I did is I prepared a little application here I call this the cat app and I made a few things to this so I created the app using the Expo typescript template and I installed the react native purchases plugin I installed a few packages for routing and navigation and then I made a pre-built so the latest part is important usually with Expo we would use the Expo go client but this is not possible uh with the in-app purchase plugin you're gonna either have to do what Josh did and that is to create uh pre-build using EAS or what's also called a development build so you can run EAS build with your development profile and a specific platform or for iOS and then later use your custom Dev client of the Expo Go app on a device to run that code which is a nice way however I preferred running an expo pre-build which then creates an Android and iOS folder in here from there I just launched xcode and connected it to my device I deployed this which will bring up the metro bundler and we're gonna see we have live reload of our application so let's just add a little text in here so if I hit save we see I still get live reload so Expo pre-build is just basically the same it's not really hard to run our application now what do we got in here we have a component we have a provider and we have a page nothing too fancy so let me explain what's going on and then let's write some code together so our app is wrapped in the revenue CAD provider and this is going to be important because I want to load all the products up front and only display the app uh when we actually got all the revenue cut stuff figured out on my home page um I got a little restore button up here and below I want to try and show all the packages um of the revenue kit API that are returned to me so right now I don't display anything because we haven't implemented that yet um and below that I do have a little user card which we already see here so the user card is simply there to display the currently purchased cookies and items and pro features but the user does not have anything right now so let's see how we can actually Implement that data from revenue kit first of all in my provider I'm going to supply the API keys so again I use them from the page down here so here are the API Keys then I Define a little interface so we can easily access purchase package restore permissions the user and the actual packages that a user could purchase and also a user state which will be managed here in our Revenue cat provider then I also created a hook like use Revenue kit to make this easily available in our pages and now the actual implementation of the revenue CAD provider is what's important so if you want to get started what you want to do is you first of all have to define a little initialize function so let's call this const init uh this is going to be an async function okay great great setup uh and we're going to call init right here so if the platform uh operating system is equal to iOS we're going to have to configure this with the iOS key and if it's equal to Android or let's just say else I don't want to Target the web here right now we're gonna have to configure it for Android and therefore we got started by using the actual purchases package and we call configure I configure with the API keys for Apple actually we need to supply this as an object and then say API key please use my API Keys dot Apple I don't want to supply anything else this is really the only thing we need and guess what for Android we're just gonna put it in and say use the uh what did I call them did I call them Android oh I called them Google of course yeah the Google key good so this is our initial configuration now um I'm using a very little State here is ready which is basically checked before this returns so if this is not already I would return an empty fragment which basically means my app is not yet displayed and otherwise I would return the actual contacts provider here so after configuring this I will already set is ready to true because the app is basically ready and actually I need to change this so I had this to true false now we do have the large to make this work correctly okay while debugging you could also say something like set debug locks enabled is this actually no you usually say set lock level now uh set lock level and you could set this to lock level uh dot debug and I would get a ton of debug messages in your uh console or wherever you debug the application good now the first thing we're going to do is we're gonna uh load the offerings and this function is not yet implemented but you're gonna see this is actually pretty easy oh copilot already gives me the code for this seems like all the people of the world are using this so here we go we get back an offerings object and from that offering object we can grab the current offerings now this comes back to different marketing experiments so if you want to have different offerings you could then select from one of the offerings maybe you have a specific uh promotion or something going on so in that case you would get those um this is interesting yeah because I have figured out yeah I've set up everything up front that is good news so if you're at this point you should see all the offerings coming in right here could we zoom in uh from revenue cat so uh here's the default offering I could have another one there's one uh there are the different packages here's actually the array with the available packages and that's what I'm setting here current offerings available packages so each of those packages is an item that a user could purchase and every item of our package is um maybe let's just lock one of them um let's just lock the first can I just cancel lock available packages the index 0 dot product let's see um go let's see where's my Metro yes Metro so here's the offering currency code Euro description get access to all discounts identifier so all the information about one specific product or as we now call it package is available am i setting this to my state here uh my home page has access to it and therefore it gets displayed in the scroll View and I could already check it out however I think I actually haven't implemented the purchase functionality so let's do this now to purchase something we get the purchase package so you can check out the typescript interfaces this is done really well so it's actually really really easy to set this up so try to purchase a package simply call purchases dot purchase package and pass in the peg boom that's actually it um I think the result here is not too interesting or uh let's see um so if the user cancels this we would get into a little catch block and then we could lock this out or say alert e something I actually don't know if there's a message but we're gonna try here so after the user has purchased a package and that means we're getting to this line we can update the user State uh with whatever he purchased so if the he or she of course if the user purchased a pack of consumable stuff so if pack so let's say if pack dot product dot identifier uh is equal to what is my consumable um let's see so we can just go back check the product and this was the uh RC whatever yeah this is the identifier I use if it's equal to this one uh we're gonna immediately set my user State and we're gonna set it to um everything that's previously in user and setting the cookies to user dot cookies plus let's say plus plus equals five okay so this immediately updates my state now this is of course just the state here in the app if you're really having a game where user can purchase gems or anything you would of course have to send that information off the user state to your server but this would be the point where you could do this so uh on top of that we of course have additional things like the wand the boots or the pro features and those Grant a specific entitlements the consumable actually does not give us any entitlement but those things do and to keep up with all the um consumables a user could have we can add a listener so let's add this to our use effect so we're going to add purchases dot uh add customer info update listener and this will give us customer info object so of the type customer information and we're going to pass this to my function that I already prepared update customer information with that info so let's put a lock in here um customer info updated and then we're gonna hopefully see this at some point at least when we buy something and in here this is the place where you grant your users access to the different uh entitlements that a user might have so co-pilot is recommending some code I'm actually not trusting it today I want to use my own code so in here you would basically just check um for the different entitlements so the customer info entitlements might have epic one active in that case I would push this to my current user State could also be the magic boots could also be the pro features and I would simply set them to my state here and again if you want to persist this you could also reflect this on your back end now um with all of that in place we should actually be ready for giving our application a test on my real device it's important that this stuff usually doesn't work in the simulators you have to try this on a real device now here are all the things uh why are you disconnected from Metro maybe you should just run this again oh probably because I disconnected can't do the refresh stuff here as well yeah let's give it a try loading retro I think we're connected again so let's try to access the premium features up here first which would give me access to all the pro features and keep in mind all of this is coming from actually from revenue kit and then from IOS app store connect uh platform so I'm gonna try to subscribe I actually never remember my uh sandbox password I hope it's this one so let's try to sign in yes done and now watch the pro feature Fleck here this should eventually turn to True once the success transaction is successful and also the customer object should most likely be updated uh yeah they're actually coming here so purchase was successful okay um Pro feature is true and here is my updated customer information now this happens because we've been subscribed to The Listener that up here so our ad customer info update listener and now we have this let's also try to purchase some cookies so those will only exist once they should still be added to my cookies of course uh let's put this up here yes I'm gonna purchase uh why do I have to do this once again I really don't want to uh anyway yep I purchased the cookies and guess this usually takes some time in the debugging State here but I've noticed in real applications those purchases also usually take time so here we go five cookies uh and I have magic boots I think I purchased them before and pro features are true and of course I could now also reload this application and because we have the entitlements in Revenue kit stored my application would have Pro features enabled and I could give the user access to whatever kind of pro features I would have set up so this is really a super easy way to implement cross-platform um transactions in-app purchases or subscriptions and we can actually now check out my projects I'm using sandbox data let's try if I refresh this and click sandbox data yes I see a customer a minute ago thanks for my device disappearing well gives us more space for this so here are the entitlements of this customer using the app using their version uh total amount spend Pro features magic boots and products uh three times actually that I got this here we got the current offerings that I could also now change so we got tons of more in information here in Revenue kit under charts I could also track my subscriptions growth so I don't want to upgrade right now I wanted to go here because this is how it could look like for your application and you could easily track your subscriptions movement the refund rate the unreal uh run rate the monthly recurring revenue and all these cool statistics for your app and again have a single place of truths where all your subscriptions are managed and people get the entitlements for your project so hope this was helpful um also definitely check out Josh tutorial uh if you want to run a different kind of build so my Expo pre-build was very easy for me to set up if you prefer an EAS build of course you can do that as well all the links are below this uh tutorial so go check it out all right and that's it for today's tutorial I hope you enjoyed this quick walkthrough of how you can integrate Revenue kit into your react native application and I think it's a great way to sugar mine IOS and Android into one single place of true because you're gonna have to run into this problem anyway if you're using in-app purchases and subscriptions on different platforms so using a service that unifies this and acts as one API for you to talk to with your react native application is just a great idea and with Revenue kit you get tons of additional features like the entitlements and the offerings that you can try the experiments and of course also all the metrics that you get from revenue kit so thanks again revenuecat for sponsoring this video I hope you enjoyed this if you got any questions about it please drop them in the comments I know the people in the developers from revenue cut are very active and will definitely answer all your questions and also if you want the code check out links below the video to galaxies.dev so I will catch you in the next video build some epic stuff while Revenue kit and react native hopefully we wouldn't come a millionaire but still stay subscribed and of course happy coding Simon

Channel: Simon Grimm

Views: 18,044

Keywords: cross platform, hybrid app, javascript, ionic academy, react native, reactjs, react native tutorial, react native for beginners, react native ui design, react tutorial, react native animations, ui design, react native ui, react native live coding, react native tutorial for beginners, react native app, react native app tutorial, react native project, react native expo, react native course, galaxies.dev, revenue cat, revenuecat, revenuecat tutorial, tutorial, coding tutorial

Id: noTeDJypcqY

Length: 24min 44sec (1484 seconds)

Published: Tue May 30 2023