The Android and iOS platforms have In-app purchase abilities. This blog is for helping our readers understand the In-app purchase capabilities of Android/iOS phones. In-app React Native can give the basic features needed. However it alone cannot support your mobile app development process. This is why you need implementation of In-app purchase. While implementing In-app purchases in the mobile app, there are two sides involved namely client side and server side. What are the processes involved in In-app React Native? Here is how…
A Summary of The In-app React Native Process:
- Product is created in Play Store/ App console using unique product ID
- Using product ID, product subscription details are created
- Subscription details (like plan amount, subscription period etc.) will be displayed on app side using react-native-iap package
- Plan chosen by user is updated in App and Play Stores’ using react-native-iap package
- Subscription flow is completed as a functionality in App/Play stores
- After payment, app is confirmed and user is authenticated
- The user should make the necessary updates in the server
- The user should update the generated subscription ID from the receipt in the server
- After making the updates in the server, the corresponding updates are made in the app side too
- After completing the subscription flow, user can make use of the subscribed functionalities in the app
- On completing subscription, App/Play Store cancellation is done if required and a notification is sent to the server. If the subscription is cancelled, it needs to be updated in the app side as well.
- The subscription gets automatically re-subscribed after the subscription period in auto renewal. NOTE: iOS has previous purchase receipts stored in the system and hence renewal is hassle- free unlike Android.
In-app Purchase Product Creation
Your in-app purchases need to have products like subscriptions that can be presented to the app users. So it is important that you create one or more products through your accounts in App Store Connect for iOS and Google Play Store console for Android.
The implementation of in-app purchase in your application are done using the following steps:
- Configure in-app purchase in Google Play console/App Store Connect
- Set up the in-app React Native library in React Native
Configuring in-app purchase for iOS:
- Log in to the iOS account
- Fill out paid applications contract from the link available in ‘Agreements, Tax and Banking’
- Click on ‘Apps’ in ‘My Apps’ section of App Store account to list your app
- Click on ‘Features’ and you will then land on ‘In-app Purchases’ section
- Select the in-app purchase product using the ‘+’ button
- Select ‘Non-Consumable’ type and select Create
- Select the price corresponding to the specific purchase by entering App Store information
- Enter the purchase’s review information and click ‘Save’
- In App control panel, go to ‘Commerce’ section
- Copy paste your product ID from App Store Connect to the iOS Product ID field and click ‘Add’ button to save
Configure in-app purchase for Android:
- Log in to your Google account
- Select ‘Settings’ from left menu
- Activate your merchant account from this page
- Obtain license/ billing key from your Google developer account
- Select ‘All Applications’ and select the app for which you are going to apply the in-app purchase to
- Select ‘Services and APIs’ under ‘Development Tools’
- Copy license key to the section titled ‘Your license key for this application’
- Upload license key to the ‘Commerce’ section of your app’s control panel and click on ‘App Listing’
- Select ‘In-app Products’ from the menu under the ‘Store Presence’ tab
- Ensure ‘Managed Products’ is selected and click ‘Create Managed Products’
- Enter Product ID, title and description and then set status as ‘Active’
- Set ‘Price’ and click ‘Save’
- To add product ID to your app control panel, click ‘Commerce’ from the left menu
- Copy paste your product ID from the Google Developer account into the Google Play Product ID field and click ‘Add’
Configure the In-app React Native Library in React Native:
In-app purchases for both Android and iOS platforms, there is a React Native module library. This is done for gaining experience between the two platforms. By running appropriate commands in the project terminal for installing In-app React Native.
In iOS, developers install pods to complete the linking. Once the purchase for In-app is finished, the code part in React Native should be checked. For this, first we should import React Native In-app and define the product’s Stock Keeping Unit (SKU) separately for Android and iOS. Then the products subscriptions also need to be defined separately for Android and iOS. After this you can proceed and fetch your In-app purchase products using appropriate commands.
Testing In-app Purchases
The functionality of the In-app purchase in the app must be tested. This is done by sample purchase of the product by any user.
In iOS, sandbox tester is used for testing. Select ‘Sandbox Tester’ under ‘User & Roles’ section in iTunes. Add a new user with some basic details as the tester. With the entered details, any product can be purchased without paying money on iOS. Now the tester can test the functionality of the In-app purchase in the iOS app.
In Android, tester is added in the following way: In the Play Store console, open ‘Settings’ and click the ‘Account Detail’ tab. Under it select ‘License Testing’ and enter the email ID of the user to be added as the tester. This tester account created can be now used to test In-app purchase. To test In-app purchase, make sure that the Android build must be in release mode because it cannot be tested in debug build.
What are the Benefits of React Native for Mobile App Development?
- Money and time saved because of its Android and iOS compatibility
- Improved performance in cross-platform hybrid technologies
- Greater flexibility to update and upgrade
- Moveable to other frameworks
- Code changes can be viewed immediately
- Faster update publishing for Apps
- Existing app can be augmented without rewriting the app
Conclusion:
Webdura has always had a positive experience in React Native. We believe it is the best framework for mobile app development. Lyringo, the language learning app that Webdura developed is done with React Native framework. We guarantee this framework is a very cost-effective way and helps in slashing the mobile development expenses by half. This rapid application framework has made our mobile apps reliable, swift and scalable. React Native has supported various other mobile app development projects in Webdura.
Our clients have also shared positive feedback with us for React Native based main ole apps developed. As far as our support team is concerned, the support required for maintaining the apps developed in React Native framework is much less. So what we are implying here is that there is every reason to say yes to React Native mobile development!
