For your information, I found the RevenueCat SDK integration in React Native app very easy once I learned some terms, how “In App Purchase” works, and the steps I needed to follow in sequence. If you don’t know the steps in sequence for both Android and iOS, it will be a mess for you, and you will feel like you are in a sea without a boat and obviously there is a deadline for you in your project.
In RevenueCat’s official documentation and videos, I found that the steps were not shown in sequence and that’s why it took me almost 3 weeks to complete the full process for both Android and iOS. The major flaw I found in RevenueCat’s official documentation is that there are more than 100 pages, but the steps are not in sequence, and it will confuse you too.
But the good news is that each page of RevenueCat clearly describes a particular step. The only thing missing is the sequence of steps. I will cover
-
All the missing parts from the documentation and
-
Also guide you in a sequential and organized way with proper links from the documentation so that you can integrate it easily within 2 to 4 days.
Certainly, we will learn these stuffs from this article in details.
This was not the first time I implemented a payment gateway. In fact, I implemented 5 payment gateways in several projects. Those concepts really helped me to implement the full flow of In App Purchase in App Store Connect and in Google Play Store.
So, I have listed some basics that will surely help you if you have not implemented any payment gateway before.
Payment gateways require high security in the protocol and in the transactions. To ensure the security, the steps become complex to make a flawless integration.
First of all, in all payment gateways, you have to initialize a token for the transaction of your user who wants to buy a product. Then, after calling the token creation API, the payment gateway will send you a response with a one-time usable token with an expiration time.
Then, you will use that token to complete the transaction on behalf of your user to the specific payment gateway. Then, when your user completes, cancels, or fails the transaction due to an insufficient balance in their account, an API will be called from the payment gateway with the created token. This API will be a public API from your server. This API is called a callback URL API by the payment gateways. Inside that callback URL API, you must check some things for sure in your backend server.
-
Parse the parameter that came from the payment gateway and find the transaction ID from the token.
-
Now, call another API of the payment gateway by which you can easily check if that transaction ID is valid or invalid. If valid, you will get the details of the transaction like paid amount, transaction timestamp, etc.
-
When you verify that the transaction was valid, you have to check in your database if that transaction was already used for a previous order for a product or if this is a fresh new transaction ID. This should be checked as there are tons of scammers around you who want to buy products for free.
-
Then, save the transaction ID in your database for future check.
So, these 4 steps are essential for a payment gateway integration in your app for seamless transactions. Also, I suggest you use DB transaction in your app so that it maintains ACID transactions in your database and if any anomaly occurs, you can safely exit from the occurrence.
So far, I have implemented 6 payment gateways including In App Purchase in Android and iOS, and what I found is that all the payment gateways have a sandbox mode for testing while integrating the payment gateway. Each payment gateway has a different way of enabling the sandbox mode. These are like:
-
Sometimes, the payment gateway changes the sandbox APIs from the main transaction APIs.
-
Sometimes, there is an option in the payment gateway dashboard to make all the transactions as sandbox transactions until it is turned off.
-
Sometimes, a test card number will be provided for sandbox testing.
-
Sometimes, a specific platform staging/testflight will have only sandbox mode even with real card information provided while testing.
It is very important to be familiar with the word sandbox and how sandbox works in the payment gateway you are going to work with.
We have learned the basics of how payment gateways work in general. So now, let’s understand how Google Pay and Apple Pay work. If you understand the flow of how they work, you will be able to start the integration easily. Let’s see the flow below.
I’m showing you some screenshots below (from another app as I only have iPhone in the office) in order so that you can understand the flow easily.
Step 1: Paywall screen for the product.
Step 2: After clicking on a particular product, you will be asked to enter your Apple ID and password like below. Remember, you don’t need to enter any test (sandbox) account here. If you are in development mode (meaning you ran your app from Xcode or by npx command or downloaded the app from TestFlight) then you will never pay the real money.
Step 3: After successfully logging in, you will see a bottom sheet pop up like below to confirm your payment. Notice that it shows already that you are in sandbox mode. If you are using a real card payment, you will not see the words sandbox or sandbox environment like below.
Step 4: Again, give your password for final confirmation to pay.
Step 5: Payment success screen
Below, I’m sharing some screenshots from my own React Native app in order after successfully integrating In App Purchase.
Step 1: This is called Paywall screen from where the price of products will be shown.
Step 2: Confirm Payment
Step 3: Payment successfully done.
There are 4 types of In App Purchase products according to the Apple developer documentation. These are below 👇
-
Consumable: A product that is used once, after which it becomes depleted and must be purchased again. Example: order fish food in a fish app, coin/ gem using in a gaming app to enhance the strength of the player avatar, etc.
-
Non-Consumable: A product that is purchased once and does not expire or decrease with use. Example: Race track for a game app, purchase something for life time, etc.
-
Auto-Renewable Subscription: A product that allows users to purchase dynamic content for a set period. This type of Subscription renews automatically unless cancelled by the user. Example: Monthly subscriptions for an app offering streaming services.
-
Non-Renewing Subscription: A product that allows users to purchase a service with a limited duration. The content of this in-app purchase can be static. This type of Subscription does not renew automatically. Example: One year subscription to a catalog of archived articles.
Mainly there are 2 sections from where you will be able to create 2 different type products. These are
-
In App Products: In app products are usually one-time purchases that can be consumed or restored within the app. For example, you can buy a pack of stickers in a messaging app and use them as many times as you want, or you can buy a level unlock in a game and play it again later.
-
Subscription Products: Subscription products are recurring payments that give users access to dynamic or updated content for a certain period of time. For example, you can subscribe to a music or video streaming service and enjoy unlimited access to their catalog for a month or a year.
You can adjust the pricing and availability of your in app products and subscription products in the Google Play Console or the App Store Connect, depending on which platform you are developing for. You can also promote and offer in app purchases directly on the App Store.
So, to do the integration for In App Purchase, I suggest using RevenueCat for the simplicity of work. It will really help you to reduce development time. Though its official documentation is kind of unorganized, it really reduced the development time as it already handled all the security stuff that should be maintained by your server.
In the price plan, I saw that for each $1000, it will cost only $8, but the thing is the charge will be applicable after successfully doing $10,000 transactions. So, it will really help to start with.
Remember that you don’t need to know too much about these terms to achieve your first success in “In App Purchase”. So just learn some basics about these terms and it will help you to decide later.
Let’s understand some terms about In App Purchase here.
-
Entitlements are the features or content that users are entitled to access after they purchase a subscription or product. For example, you can have an entitlement called “Premium” that unlocks ad-free experience and extra content for your users.
-
Offerings are a group of products or packages that you can offer to your users at different price points or durations. For example, you can have an offering called “Monthly” that contains a monthly subscription product and a package that bundles a monthly subscription with a free trial.
-
Products are the individual items that users can purchase from the app stores. They have a unique identifier, a price, and a duration (if they are subscriptions). For example, you can have a product called “com.myapp.monthly” that costs $9.99 per month.
-
Packages are a way to offer the same product with different introductory pricing or trials. They have the same identifier as the product they contain, but with different billing parameters. For example, you can have a package called “com.myapp.monthly.trial” that offers a 7-day free trial before charging $9.99 per month.
I would like to suggest this video from RevenueCat for a better understanding these terms https://youtu.be/QxHeZiW4KCA?si=J9rv5dyvO1H5k0LE
I previously said that the RevenueCat documentation is not really organized in a way that will help developers. But RevenueCat is a good library. So please follow this below sequence for iOS and Android.
Sequence for iOS In App Purchase configuration and just follow the steps mentioned in each link.
-
App Store Connect Product Configuration: iOS Product Setup (revenuecat.com)
-
Configure project & app in Revenuecat: SDK Quickstart (revenuecat.com)
-
Generate “App-Specific Shared Secret” in App Store Connect & then store in Revenuecat: Apple App Store (revenuecat.com)
-
Generate “In App Purchase key” from App Store Connect & then store in RevenueCat: In-App Purchase Key Configuration (revenuecat.com)
-
Configure product in RevenueCat: Configuring Products (revenuecat.com)
-
Configure the SDK in your React Native app: Configuring the SDK (revenuecat.com)
-
Show Apple Store product in your App paywall: Displaying Products (revenuecat.com)
-
After payment completion do your server operation: Making Purchases (revenuecat.com)
-
App Store Connect In App Purchase SANDBOX testing: Apple App Store & TestFlight (revenuecat.com)
Please follow this below sequence for ANDROID In App Purchase configuration and just follow the steps mentioned in each link.
-
Google Play Product Configuration: Google Play Product Setup (revenuecat.com)
-
Configure project & app in Revenuecat: SDK Quickstart (revenuecat.com)
-
Generate “Google Play Service credentials” in Google play console & then store in Revenuecat: Google Play Store (revenuecat.com)
-
Configure product in RevenueCat: Configuring Products (revenuecat.com)
-
Configure the SDK in your React Native app: Configuring the SDK (revenuecat.com)
-
Show Google Store product in your App paywall: Displaying Products (revenuecat.com)
-
After payment completion do your server operation: Making Purchases (revenuecat.com)
-
Google play Store In App Purchase SANDBOX testing: Google Play Store (revenuecat.com)
Once again, please read the above links in sequence I gave. If you try to follow the documentation serial, then your brain will be stuck for sure for 3 weeks & it happened with me 🤞.
Before you start debugging with In App Purchase, please make sure to check these 6 things below.
-
To test In-App Purchase in both Android and iOS, you have to use a real phone. A simulator will not work here. It is true that you can fetch the products, offerings, or packages from a particular store via Revenuecat SDK in your simulator, but you will not be able to complete the purchase from your simulator. You will need a Real device at the end of the day.
-
You must check that all your Terms & Policy were agreed upon in Apple Store Connect. If you do not agree with the latest changes to the policy and agreement, then you will not be able to test your In App Purchase. You will not be able to test locally from your iPhone either. So, you must agree to the new and all policies.
-
You must fill up all Tax and Payment Card info in Apple Store Connect. If you don’t do that, then you will not be able to test In App Purchase.
-
You must check that your “In App Purchase” in Apple Store Connect is in “Ready to submit” status. See here all the statuses: In-app purchase statuses — Reference — App Store Connect — Help — Apple Developer.
-
In Android, you will be able to test without submitting Tax Info and payment method in Google Play Console even. But those are important for production IAP.
-
If you find this error below, then you must recheck the whole process again as maybe you missed some configuration from the above links I gave. Also, wait 36 hours for Android approval of “Service Credentials”.
Here is Apple Store Connect “In App Purchase” statuses.
🚩 If you use Consumable “In App Products” from Apple Store Connect, then maybe you will not be able to get the correct PRODUCT_TYPE (Consumable) by calling the products/offering API provided by RevenueCat. This ISSUE occurs due to not using StoreKit framework version 2 in your RevenueCat SDK. When I faced this issue, I solved it in this way 👇
🚩 If you are controlling both Android and iOS paywall screen from a single screen, then initialize RevenueCat STORE like below just before calling product purchase API instead of calling the initialize SDK inside useEffect().
🚩 I don’t want to purchase an offering, but I want to purchase only a single product. How I did that?
Use this purchaseStoreProduct API provided by Revenuecat SDK.
It is very important to read carefully each step in the sequence I gave you above and follow all my important knowledge about in app purchase for both Android and iOS.
If you follow my sequence and the knowledge I shared with you carefully, then it is possible that you will be able to implement a basic In App Purchase in both Android and iOS React native app within 2–4 days.
Thank you for reading this article. I enjoy sharing my 5 years of experience in React-native, JavaScript, React & Node.js with you every day. If you enjoyed reading this article, I would appreciate it if you could follow me on Twitter & Medium.
If you find any ISSUE in this Guide BOOK, please create a PR to help the community 🔥