Guide to Implement in-App Purchases in React Native

July 22, 2021 Publish By : Expert App Devs 5 min read Viewed By : 637
In-App Purchases in React Native

In this article, we are going to learn something very new and interesting in react native, In-App Purchase means making money through app.

 

           How to Earn Money with Mobile Apps

Introduction of In-App-Purchase -

When we create any app and want to make some money using that app then payment is coming in the scenario.

When you implement any idea where you want to provide some functionality free to users and want money for some premium functionality, here the concept of In-App-Purchase functionality is coming. Earning money from apps is a major part of any app.

Types Of In-App Purchases -

Here we discuss the type of In App Purchases.

  • Consumable -

Users want these products every time, which means users buy these products repeatedly, Such as - health related, game currency etc.

  • Non-consumable -

These types of products you can purchase once and use on an ongoing  basis, these products are retainable on reinstalling or changing devices, such as pro version or removing ads.

  • Non-renewing subscriptions - 

       Users can use these items for fixed time, with purchase again and when the period ends.

  • Auto-renewable subscriptions -

Users buy these types of items for a specified period of time, they will automatically renew when the period has passed, such as - Subscribing to unlock an extra feature in an app for a month.

Requirement for In-App Purchase -

  • The developer should have an iTunes Connect account for iOS and a Google Play Store Console account for Android.
  • It is required to fill out the Paid Application contract.
  • Developers create one or more iTunes Connect for iOS and Google Play Store Console for Android.
  • Set up a sandbox tester.
  • Use the real device for testing.
  • Add In-App purchase capabilities in Xcode.
  • First, you should create a developer account on Google Play.
  • Now you need to activate and create a merchant account in your Google Play Console.

So let’s start implementing In App Purchase in our app, follow all the steps carefully.

  1. Configure In App Purchase in Play Store Console -

Please follow all the steps carefully for integrating it with google play store.

  • Goto the play store console
  • Open the Application dashboard by selecting your application.
  • You find the Store Presence section inside the menu of your dashboard.
  • Expand the Store Presence section.
  • Click on the InApp Products section.

For configuring In App purchase 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” />

Upload the apk and after uploading APK, you find an option for creating Managed Product and Subscription , and you have to create a product with unique product Id or you will be available to create a subscription and their price accordingly and make your products in Active State.

  1. Configure react-native-iap library -

We are going to use the third party npm library react-native-iap, by using this library we are implementing the In App Purchase in react native.

  • First we install the library - npm install — save react-native-iap
  • Now we link the library - react-native link react-native-iap
  • Now you need to import that library - import * as RNIap from 'react-native-iap';
  • Implement it into your componentDidMount function.

componentDidMount() {

RNIap.prepare();

RNIap.getProducts(items).then((products) => {

//handle success of fetch product list

}).catch((error) => {

 console.log(error.message);

})

}

Now you are ready to purchase your product by clicking the user interface, now we call the function buyProduct() to buy a Consumable or non-Consumable Product and you can buy a subscription as well by calling buySubscription().

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);

})

3. Configure In App Purchase in iTunes -

Please follow all the steps carefully for integrating it with iTunes.

  • First Goto My App 
  • Then Your App Dashboard
  • Click on Feature Section
  • Then In App Purchase
  • click on Add(+) button
  • Now you have four types of In App Products with their basic info
  • These info are choose any of them - Consumable, Non- Consumable, Auto, Renewal Subscription and Non — Renewing Subscription
  • Add the screenshot of size: 640*920 pixel
  • Make your products  Ready to Submit state
  • Open the ‘Agreement, Tax and Banking’ Section of iTunes
  • You need to configure the XCode, open the Xcode and select the project and then click on the Capabilities section and now enable the InApp Purchase button.

4. Complete code - 

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);

})

}

RNIap.buyProduct('com.example.productId').then(purchase => {

this.setState({

 receipt: purchase.transactionReceipt

});

// handle success of purchase product

}).catch((error) => {

console.log(error.message);

})

Test InApp Purchase - 

Now you are able to test the In-App-Purchase, you can purchase anything by any user.

So I think now you understand the In-App-Purchase concept if you have any query then please connect with us.

Happy Learning

Need a consultation?

Drop us a line! We are here to answer your questions 24/7.