React Native In-App Purchases (iOS) - incl Backend and Sandbox testers from scratch
ฝัง
- เผยแพร่เมื่อ 1 ส.ค. 2024
- In this video I will go in depth and show the entire process of adding in-app purchases to your React Native app for iOS.
Android video: • React Native In-App Pu...
NOTE: at 52:08 where I write renewalHistory[renewalHistory - 1], this works fine in the test environment. HOWEVER, it seems that when the app is published, this doesn't work and you should instead do renewalHistory[0].
I fixed this in my app by first trying to validate using the production URL, using renewalHistory[0].
If you receive a 21007 status code after trying to validate with the production URL, you validate using the test URL using renewalHistory[renewalHistory.length - 1]
pastebin.com/GmQFnJBu
here is some code to help you out :)
Extra information:
In case of confusion with receipt validation, what we're doing is sending the purchase to apple and they respond with a status code and more detailed information about the purchase. If the purchase is valid then a status code of 0 is returned. In this video, I don't check for status codes. However if you wanted to then it's very easy to implement.
For example, if you're using the react native iap validation function
When you do
receipt = IAP.validateReceiptIOS(...)
You have access to receipt.status, based on the status code you could do different things.
Here is the list of status codes: developer.apple.com/documenta...
00:00 Introduction
01:15 App Store connect setup
16:02 React Native code setup
19:47 Fetching and displaying our products
34:11 Coding the purchase functionality
39:17 Setting up a sandbox test user
43:06 Getting previous purchases
46:44 Validating receipts without a backend
52:42 Improvements to app
56:54 Handling errors
59:00 Firebase setup
01:02:27 Firebase serverless functions introduction
01:06:52 Validating receipts in the backend using Firebase
![[#SHORTS CLIP] ครูอึ้ง กรรมการอึ้ง ฮ่าๆ l ซานิเบาได้เบา l One Playground](http://i.ytimg.com/vi/qeBTuMJs4t0/mqdefault.jpg)
NOTE: at 52:08 where I write renewalHistory[renewalHistory.length - 1], this works fine in the test environment. HOWEVER, it seems that when the app is published, this doesn't work and you should instead do renewalHistory[0].
I fixed this in my app by first trying to validate using the production URL, using renewalHistory[0].
If you receive a 21007 status code after trying to validate with the production URL, you validate using the test URL using renewalHistory[renewalHistory.length - 1]
pastebin.com/GmQFnJBu
here is some code to help you out :)
Hello Euan pastebin.com/GmQFnJBu
can't be reached. Could you check the link and share the codes to us ? thank you :)
Have a problem with multiple update purchase listener on ios, did you face with this issue?
Awesome video! Shouldn't renewalHistory[0] be used for both sandbox and production modes to get the most recent receipt?
i know im randomly asking but does someone know a way to get back into an instagram account?
I was dumb forgot my password. I would love any tricks you can offer me
Thanks so much for posting this. I'm implementing IAPs in an app I'm working on right now and this is really timely. Much appreciated!
Really EXCELLENT tutorial. Indeed same as you I could not found a concrete "all-of-the-way" tutorial for react-native-iap integration. I still have to get the job done now but feel much more confident... It took me a while to realize I need to use a real iphone (not simulator) but anyway I'm sure you already saved me quite a long searching process !! Many THANKS
Hey man, thx for your tutorial ! It was really well explained and was reallyyyyy helpful haha ! Cheers from France !
That really helped me in actual app, thank you sir.
Thank you so much for your great content. You're the hero!
To all those eagerly awaiting it: I HAVE FINALLY FOUND THE TIME TO FINISH RECORDING THE ANDROID TUTORIAL!
Just need to finish up the edit now (50% through), so should be up this week! 🤞
My apologies for the delay, I've been extremely busy with my final project for my degree... also IAPs are possibly the most boring programming I have ever encountered 🤣
Yay 🙌🏻
Its so boring, good luck with your project, you show great skills to be so knowledgeable whilst still at university
So boring and SOOO necessary at the same time. Thank you very much for both tutorials. Good wishes to you in your final project! 💪
Really useful explanation Euan! Thanks!
Really high quality content..push more for React Nativr
Thanks a lot. There is only one tutorial in my language about that but it’s not covering not even 50% of your video! Waiting for the android part 🤙🏻
Amazing guideline! Thank you a lot!
Huge Respect bro Thanks for the info
This is so cool. thanks man
Very useful video. Thanks very much for sharing the knowledge.
best tuto ! very great explanation ! work in 2023
Thanks man, really helpful 🙏
Hey Euan, thanks for the video! Extremely helpful. ONE BUG that had me hung up for a while is that you are passing “receipt” as the response from validateReceiptIos when the only possible responses are false, and completion codes. I think the hang up is because later on you are comparing the expiration date for the response of “false or completed code 27101” and it is always popping up false on the test triggering the Alert “Expired please subscribe again”. The expiration validation needs to happen with the actual receipt object, not with the response from validatereceiptios. There were a couple other people on here that were having the issue of that alert popping up a lot, and that’s the reason for it. Thanks again!
A great video! Thanks :D
thank you, this was awesome
great video!
Nice video, well done, thanks :)
perfect, thank you bro !
Thank you so much! this helped me so much! It kind of amazes me that you explain the concept so much better and simpler than any other persona and you only got 100 views. I was wondering if you would be releasing an android video anytime soon? I would really appreciate it!
Thank you for the kind feedback :) yeah I am planning to get an android video out as soon as I can find the time in between Uni work, should be soon hopefully
@@euanmorgann yes pls release the android tutorial as well. it will be really helpful for is.
thank you so much. superb
Hello Euan Morgan, thanks for great tutorial
I have question, in mobile app when we get the reciept token, is purchases is done and payment is detected from user bank card etc. or we have send this token to backend and then the paymnet will be deducted. if so what are the endpoints we need to call on backend to create a charge on it.
looking forward to your response
Hi Euan, and again thank for your very helpful video, I have just one quick question concerning this tutorial. I'm still developing in a sandbox environment so I have actually 2 questions :
1- Is there something to care about when we want to push the app in production ?
2- If I understood well at 49:27 in the validate receipt, we have to pass false I. second argument ?
Was just wondering, there is no need to call RNiap.finishTransaction, and endConnection once done?
Is validation of receipts required even for non-consumables that never expire? For example - lifetime deal to upgrading to the premium feature
i need urgent help, when i open my payment screen the listener execute many times my functions without the user process a payment
thank you so much
what if a user logs out, and log in on a new device. would we need to save the latest receipt in to a database for the user?
hi, i was trying to verifyreceipt of the ios IAP in sandbox env, but i always getting 21002 status code.. even tho i'm following the exact same code as you do here.. do you have any idea to solve this? a little help would be high appreciated
Very nice Thanx i made iap functionality
Hi, in my case, not see the option to add a sandbox account under iOS settings, and Apple not show a popup to enter login details.
Help!! Please.
My purchase update listener gets called continuously for the previous purchases also.
I made a auto renewable purchase. I reopened the app after some time. Then 10 new callbacks I received, which is expected since the expiry time in sandbox is 5 minutes.
But then each time I open the app I receive callbacks for every transactions I made from the beginning. If I open the app right now, I will get more than 500 callbacks and my app crash.
Any idea about this issue? Am I missing something
Hey man thank you for the video, I am having some difficulties, when I press the button to purchase, it asks me to log in with my apple Id, once I log in, i got an error in the console that says "an unknown error occurred"
This is what i need thank you for the tutorial. Now, i Implementing RN IAP in my app. But in the step for fetching product my product didn't show, in the app store connect my app is free app not the paid app. Should my app must be a paid app for showing listing product from app store connect?
will the sign in with apple id window appear in production too? can I do this test in the emulator?
Hello i am using product id same in code & app store connect but getting empty response
In the none backend solution, putting the password in the client seems like a bad idea?
Hi there is no "sandbox" option in my simulator. I can't test. I do the same steps as you, but when I click the button I get an error... How can I use Sandbox?
Thank you very much for this amazing tutorial ! I was just wandering if you could show us how to cancel a subscription (for instance if a user doesn't want to pay anymore) please ?
which version of react native iap you are using?
What is the difference between requestPurchase and requestSubscription?
Thanks for the great tutorial. I am also trying to implement it in my app. I can subscribed successfully. But, like you are showing it got expired automatically. Then i tried to subscribe again but I get message "You are currently subscribed" and i have two option manage and Ok, I clicked OK and i got E_UNKNOWN error. Any idea. BTW i have auto-renewable subscription.
Currently I am unable to get product list when I upload build to testflight but locally its working fine + consumable product IAP react-native 0.70.3
Hi my subscription array show empty array can you please tell why
Hi, when I try with test renewalHistory worked with 0
IAP.getSubscriptions returns error finding purchases, i have setup just like you did
Thanks for great work you have done it is really helpful, Can you please provide complete code? Thanks
Thank you euan this helped alot and in app purchases were my last step to publish my project. There only left getting built for ios. I also dont have mac, so if you have a reliable source to install virtual mac to windows please dm me. A lot of thanks again.
How to cancel the subscription within the app?
Hey, Euan Morgan, How is Expo-in-app-purchases? Did you try using this after ejecting to bare workflow ?
Hello, I originally tried using this but switched over to react-native-iap because it was more often used :)
Hi, Great content! Will you be releasing your tutorial for android soon? Would be very helpful :)
Thanks for the kind feedback! I'm in the process of recording the android tutorial now so should hopefully be up soon :)
Error: E_IAP_NOT_AVAILABLE getting this error!
Hi, I hope you can help me with this. I created a non-renewal subscription product, but when I get the products or subscription it returns an empty array.
I have the product with the status "Ready for Submit" but it doesn't appears on the array. Idk if I have to wait a little time in order to be displayed on the app.
Also, I have checked the bundle id and it's the same and also added the "In-App purchase" capability on the app.
One possibility is to ensure you have finalised everything in the 'agreements, tax and banking' section of app store connect. Also ensure you're testing on a real device and not an emulator. Hopefully that helps :)
Yo dude im stuck there did u solve it ? I hope u did
Thanks for the very useful video. One question I had is how to deal with users disabling auto-renewals. From what I understand, it seems like the code you have checks to make sure they are still subscribed when the app loads but how do you deal with their expiration ending at a specific time, let's say 11am. If they open the app at 10:50am, their subscription is still active when the app checks purchase history but how do you know to cut them off at 11am when it expires? Is there a callback or something at 11am to let you know their subscription has now expired? If not, they'd basically keep having access to premium until they closed and reopened the app. Thanks in advance for the help!
when validating only I receive this answer: {environment: 'Sandbox', status: 21003} :( any idea?
I believe this will be because you are trying to validate a sandbox test purchase using the production URL or vice versa.
My pinned comment might help you out, it talks about a different issue but changing from production to sandbox based on error message should fix it is my guess
Hi Euan, thanks for this!
i'm just curios, currently, when you're validating receipt on ios, it will ask user to login, now what is the behavior when the app is in production? will there be also login pop-up?
Hi June, when in production it should always just bring the normal purchase pop up (assuming the user is already logged in to their Apple ID)
Thanks Euan, is it possible to test the IAP and make it as Production mode even it still on testflight? or it needs to be live/released?
@@junedomingo Yeah the only way to see exactly what it will be like in production is to have it fully released unfortunately
@@euanmorgann Got it. Thanks
Hi I hope you can help me please I uploaded an app natively in Swift. but I already made one in React-native. I use the same Builder, I think there is no problem because when I compile it no errors appear. I already installed the packages for the connection. to make payments the problem is that it does not return the list of "products" console.log ('Error finding purchases') does NOT return the list of items
Hello, this could be a number of things but I would suggest first checking that you have set the app and in app purchases correctly on App Store connect. Then make sure that the bundle ID on App Store connect matches the bundle ID in xCode. Also make sure the product ID matches as well.
If none of these work then trying removing the error handler which prints out ‘error finding purchases’ so you can actually see the error message
@@euanmorgann
I already solved that, in fact I already got the message that I have made purchases, but I was doing more tests with the purchases, but now I no longer get any purchase messages. if you enter
purchaseUpdateLister actually shows no error.
but I don't get the buy message.
when i call setPurchase(true) in the else statement at 1:19:13 i get this react error [Error: Text strings must be rendered within a component.]
Hello, I’ve encountered this myself a couple of times, there’s probably something in one of your return statements that shouldn’t be there, are you able to post a code snippet so I could see what’s going on?
@@euanmorgann thank you we were able to figure it out!
where is the code?
Hey,
Which Mac virtual machine do you use ??
Was it safe ??
And a link in description to download would be beneficial
Please help 🙏🏻
Hello, I can’t remember exactly how I did it but I followed a bunch of articles online and sort of combined some of the steps to make it work.
However, it did require me to borrow someone's mac in order to make a .ISO file to install Mac OS from.
But yes it was safe and worked well, I’ll see if I can recall how I did it and have a go at making a tutorial
codewithchris.com/xcode-for-windows/
I do remember reading the above article, and I tried one of the rented cloud based macs, it wasn’t ideal though because you couldn’t always install all the right software unless you contacted the support and asked them to do it
hey Euan loving the tutorial so far you are doing some amazing work! at 34:54 i am running in to this error of [Error: Cannot connect to iTunes Store] when i press the purchase button i tried googling a resolution but to no avail do you know why this is happening?
Is this a real device or a simulator you’re using when this happens? Also perhaps is there some other error message/code which is being returned with this message?
I saw some people online saying that it started working once they submitted a build of their app to App Store connect TestFlight so maybe that could help?
@@euanmorgann its the simulator that its only happening on i push my app to testflight to test on a physical device and it works but not in the simulator
@@tristansacotte6937 Ah unfortunately testing in app purchases in the simulator doesn’t really work you should only test them on a real device
@@euanmorgann ah ok thank you ill just keep testing it that way thanks for the swift responses and keep up the good work you def gained a subscriber!
Hello, it's so useful for me to make iap in my RN app. I have a question, can I also use this code in android RN iap except reciept part? I tried to run my android simulator, but I couldn't solve my problem during 3 weeks...TT So I ask you if it is possible.
react-native-iap doesn't work in Simulator and emulator. You should only test it in physical device.
Thank you for this valuable tutorial. I have implemented code the way you have described here though I am facing some problem with ios 14.2. 'Purchase Expired' pops up like unlimited times except this issue the purchase works fine. Any suggestions please?
Hello, one basic solution could be simply be having a global boolean initialised to false. You set it to true when you alert and only alert if it's false. Rough pseudocode would be
isAlerted = false
if !isAlerted then
isAlerted = true
Alert.alert('expired')
@@euanmorgann Thank you for quick response. The pop up resolved but now if I press subscription button it doesn't work at all. What to do?
@@gobindasaha7652 I had the exact same problem when developing my app, in the test environment the purchase screen pop up would sometimes take ages to appear, but when I actually published it to the App Store this was no longer an issue. I can’t see any issues in the code that caused this so I think it is just the test environment causing it.
See if it does appear after waiting a long time after pressing, or when in doubt spam the button
@@euanmorgann Yeah it takes times to show the login popup. Sometimes didn't work. Is this behaviour caused by sandbox testing?
@@gobindasaha7652 Through my research the only reason I found was the testing environment is just slow.
stackoverflow.com/questions/19863889/in-app-purchase-takes-too-long-time-to-show-confirmation-alert-view
I think this is the only reason as, like I mentioned, once I released the app in the stores the purchase pop up would always appear immediately
I can get the apple popup up to finish buying successfully but the receipt does not return to me, can someone help me, please?
did you add the listener
@@kingsleyakpan6616 Yes I did, and for android working good.
Good stuff, thanks. You should have kept the password in the server and not have sent it from the client side.
Hello,
Problem: stackoverflow.com/questions/39603667/failed-to-create-provisioning-profile
I am facing this problem. I don't have a real device. I'm trying to save it with the simulator's id but it doesn't accept it. I've been struggling for hours but couldn't find a solution. What should I do?
Hello, unfortunately I think the only way to get around this is to have a real device :(
@@euanmorgann Very bad :( Can't I test if I ignore the warnings and continue?
How a user can cancel subscription ?
They have it cancel it through Apple/google
Are you running on an actual physical device? Or on iOS Simulator?
On a physical device, IAPs don’t work on simulators unfortunately
@@euanmorgann Oh I see, how did you set it up to actually see the physical device screen in your mac?
@@andrzejciereszko4085 I actually just screen recorded my phone and overlayed it into the video. But with Macs you can use airplay, or on windows you can use programs like lonely screen to do the same thing
do you have one for android?
Hello, not yet unfortunately but I plan to make one as soon as I can find the time. Should be within the coming weeks :)
bro i have to add in app purchase in an already published app. Do i need to create another profile for it to enable in app purchase?
no, I think you can add the subscription in the "in app purchases" and call it. it should work
It would be nice if you could show how we can do like say 1. free 7 day trial after that 20USD weekly , 2. or subscription 30USD if paid monthly or 40 if paid yearly.
There’s no extra programming you’d need to do for that, all can be done on App Store connect. You would set up weekly monthly and yearly subscriptions all in the same group, and then in offers select free 7 day trial and everything should work
@@euanmorgann Okay , thanks :) . Waiting for the IAP integration in Android. And one more doubt, so if the merchant changed the price of a specific subscription in App store, will it automatically reflect it in the subscription UI screen ?
@@vinayn1788 Yes it should update because we are grabbing the data from Apple, so when it changes the app should retrieve the new data
@@euanmorgann Thank you. Really appreciate the effort you took to made this video, it's very helpful.
Hi, and thank you so much for your tutorial. Have you ever face to this issue ? E_IAP_NOT_AVAILABLE when I do try to getSubscriptions at 25:00 so I can't have access to my product.
Hello, unfortunately I haven't had the issue myself so I am unsure of the cause. I did find this online perhaps it may help? github.com/dooboolab/react-native-iap/issues/757
Hope it works out :)
knowing that I'm still waiting for apple to confirm my bank information (at least 24h) and it still processing, I will see
@@euanmorgann I clean build and now it returning an empty array... I will wait for apple to confirm my bank information, thanks for your awnser
@@zouletterider4797 Yeah the all the banking information and such needs to be accepted first so that’s probably it :)
@@euanmorgann It worked ! ;)
Anyone hate programming as much as I do?
no, I love
I definitely have a love/hate relationship with it. Thanks for this video man. It's always great when someone is able to translate all the convoluted technical documentation and procedures into "english" for you.
Android Validation Receipt make me hate it haha, actually struggling xD
@@Ptit.clement same here! 😂 been trying to make the tutorial since January but it actually bores me to tears. I spent weeks adding it to my app and I have never hated anything more in my life 🤣
@@euanmorgann i hate it sometimes but i love the money always lol
bg music is just too annoying. bye bye.
👋🏻👋🏻
wtf is that screen ratio so amateur
It’s a Virtual machine because I didn’t own a Mac at the time of this recording, it goes to show you don’t need to spend money you can just make do with what you have
Hi, thank you a lot. It's helped me a lot. But I have an issue. getPurchaseHistory give me an empty array always for Non-Auto-Renewable Subscriptions. Any solution for this?
Hi, nice done video, Gj. Maybe you can tell me something that is not working for me and cannot find a solution for this.
So... using IAP.initConnection the response is `true` so I guess something worked there but when I try to fetch the subscription with
IAP.getSubscriptions(items), items being an array of string(id's), I get in return nothing.... and when i say nothing mean not even a console.log() with 0/undefiend or an error .... like nothing is happening and I cannot understand why...
If someone knows the issue let me know please. :)
Did you find a solution to this. I'm experiencing the same as you did