Implementing In App Purchase in React Native Application

So here we are with our next story, In App Purchase. We are talking about making money with our App on Google Play Store and Apple App Store.

When we are implementing any idea in form of Mobile App then making money using that is always coming in major thing. In many cases we make that application live with a paid version but when we are trying to provide basic functionality of app with a free version to its user and then if they like the concept and showing their interest in that then they make purchase of some advance functionality and become premium users of the application and here In App Purchase functionality comes in scenario.

So lets start implementing in app Purchase in Our application. We are considering an app on React Native here. So there are following steps which we have to follow one by one:

1. Configure In App Products on iTunes (for iOS).
2. Configure In App Products on Google Play Store Console.
3. Configure react-native-iap library for js Implementation.
4. Finally configure sandbox account on iTunes and test account on playstore for testing inApp purchase functionality.

To configure In App Purchase on iTunes, follow these steps:

First Goto My App → Your App Dashboard → Feature Section → ‘In App Purchase ’. This is a place where you have to have add and configure your In App Products. When you click on Add(+) button then you have four types of In App Products with their basic info( Consumable, Non- Consumable, Auto, Renewal Subscription and Non — Renewing Subscription). Chose any one of them according to your requirement and fill some Information required with a unique product Id. This productId is work as same for any purchase available product as bundle id for app.

Adding a screenshot of size: 640*920 pixel is compulsory in Review Information section to make your products from ‘Missing meta data’ state to ‘Ready to Submit’ State. You can list down number and types of products which you want. One more thing is pending which you have to configure on Dashboard, Goto ‘Agreement, Tax and Banking’ Section of iTunes and here paid Application Contract type should be accepted by owner (Role: agent) of account. One more thing that you have to configure in XCode settings, open Xcode and select project and goto Capabilities section and enable InApp Purchase button.

To configure In App Purchase on Play Store Console, follow these steps:

First Goto the play store console and open your Application dashboard by selecting your application. Find Store Presence section in side menu of Dashboard and after expanding that by click, go to the InApp Products section. To configure In App products in android you must have to submit an alpha or beta release with following permission in Android Manifest.xml:

<uses-permission android:name=”com.android.vending.BILLING” />

after uploading an apk , there is option available to create Managed Product and create Subscription same as iOS , here you have to create a product with unique product Id or you can create a subscription and configure their price accordingly and make your products in Active State.

To Configure react-native-iap library for JS Implementation:

We are using react-native-iap library for implementing in app purchase in react native application, first install react-native-iap using,

npm install — save react-native-iap

then link library using react-native-link command,

react-native link react-native-iap

you can also manually link your library by following the steps in react-native-iap ReadMe file and then start to implement.

First you have to define your product for iOS and android separately:

import * as RNIap from 'react-native-iap';
const items = Platform.select({
 ios: [
  'com.example.productId'
 ],
 android: [
  'com.example.productId'
 ]
});

then you have to call prepare() function to make your InApp products ready to purchase, you can do this in componentDidMount() and after calling that you have to call getProducts() function which will return list of products available for purchase in appropriate platform as follows:

import * as RNIap from 'react-native-iap';
componentDidMount() {
RNIap.prepare();
RNIap.getProducts(items).then((products) => {
 //handle success of fetch product list
}).catch((error) => {
  console.log(error.message);
})
}

Now doing these thing you are ready to purchase your product on click on user interface by user. You have to call buyProduct() to buy a Consumable or non-Consumable Product and you have to call buySubscription() to buy a subscription as follows:

import * as RNIap from 'react-native-iap';
RNIap.buyProduct('com.example.productId').then(purchase => {
 this.setState({
  receipt: purchase.transactionReceipt
 });
// handle success of purchase product
}).catch((error) => {
 console.log(error.message);
})

You can also handle error coming in any step of buying process using error object because, react-native-iap handling it very properly and providing an generalised error message in error.message key.

Test InApp Purchase in iOS and Android:

Last step to check this In App Purchase functionality in app by making a sample purchase of product by any user. For iOS , you have to create a Sandbox tester for that. Goto User & Roles Section in iTunes, here select Sandbox Tester tab and add a new user as tester with some basic detail. With credential of that user you can purchase any product on iOS with paying any real money and test In App Purchase functionality in iOS app.

For adding a tester account in android Open play store console and goto Setting section and then Account Detail Tab of setting, scroll down to License Testing and add email of user you want to add as tester. You can test In App Purchase functionality in android app using these tester accounts credential. One more thing to add, to check In App Purchase , your android build must be in release mode you can’t test in debug build.

That’s It. Now you can make your app In App Purchase configured and Test.

Please write up issues, if you have any..

Thank You!