Set Up Your React Native App to Offer In-App Purchases and Subscriptions

A detailed setup using JavaScript to execute your iOS and Android users’ transactions

Sultan Butt
May 3 · 9 min read
Image for post
Image for post
Photo by Michael Dziedzic on Unsplash

Many people regard their application primarily as a source of revenue. Any sensible developer who gets into mobile application development is looking at least at ROI (return of investment) when selecting their monetization strategy.

In-app purchase is one model that can help you make money, one we have mixed feelings about it. The secret’s out — it’s not easy to make money with apps. Having experimented with monetization on our own mobile products, we know how hard it is to choose the right source of revenue and sustain it.

What is In-App Purchase?

In-app purchasing refers to the buying of goods and services from an application on a mobile device. In-app purchases mean developers can provide their applications for free, but then advertise paid upgrades, feature unlocks, special items, or even ads other apps and services, to users. This allows the developer to profit despite giving the basic app itself away for free.

Types Of In-App Purchases

In-app purchases include:

  • Consumable: For example, game currency, health, and hints. Users need to buy these items repeatedly, every time they want to use them — they cannot be used in the future for free. On reinstalling or changing device the user may lose their consumable product.
  • Non-consumable: For example, upgrading the app to the pro version or removing ads. Users buy these items once and they can then be used on an ongoing basis, for free. On reinstalling or changing devices these products are retained — if the user loses their non-consumable item, they may be able to download it again for free by restore in-app purchases.
  • Non-renewing subscriptions: For example, a sport session pass for one, three, or six months. Users can use these items for a fixed period of time, with an option to purchase again when the period ends.
  • Auto-renewable subscriptions: Users can buy these items for a specified period of time, they’ll automatically renew when the period has passed. For example, ongoing services (Netflix, Hulu Plus, etc), or magazine subscriptions.

In-app purchase product creation

For in-app purchases you need products to offer to the user — a subscription, or some coins — which you present to the user in the app.

Think of products as different packages which you show to the user to purchase. So, you should create one or two or more products in iTunes Connect for iOS and Google Play Store Console for Android.

To enable in-app purchase for your app you should have iTunes Connect account for iOS and Google Play Store Console account for Android.

Let’s start implementing in-app Purchase in our application. Here are the steps we have to follow:

  • Configure in-app purchase on Google Play Store Console.
  • Configure the react-native-iap library in React native.

1. Configure in-app purchase on iTunes Connect (for iOS)

Important: Before you can create your In-App Purchases, you’re required by Apple to request and fill out their Paid Applications contract.

Log in to your App Store Connect account here

https://appstoreconnect.apple.com/

Go to the “Agreements, Tax, and Banking” section. You’ll see the link to request the paid applications contract towards the top of the page.

Image for post
Image for post

Request and fill out the paid applications contract.

This is very important. You need the paid applications contract in place before Apple will allow you to charge for in-app purchases. Make sure you fill out all of your Contact, Banking, and Tax information. If any of these are not filled out, the contract with Apple is not completed, so In-App Purchases will not work.

Now that you have your paid applications contract filled in, you need to add the products (the in-app purchases) to your app listing.

Go to the “My Apps” section of your “App Store Connect” account.

Image for post
Image for post

Click on your app to step into its listing.

Image for post
Image for post

Select “Features” from the menu towards the top.

Make sure that after clicking the “Features” tab you are in the “In-App Purchases” section on the left-hand menu.

Image for post
Image for post

Add an in-app purchase product by selecting the (+) button.

Image for post
Image for post

Select the “Non-Consumable” type and click “Create.”

Image for post
Image for post

Select according to your requirement — it depends on the type of product you want to create.

Enter a reference name and product ID. It’s a good idea to enter a reference name that clearly tells you what in-app section this specific purchase will unlock. Also, make note of the product ID you enter since you will also need to enter the product ID on your app control panel.

Image for post
Image for post

Select the price you want to charge for this specific purchase.

Image for post
Image for post

Enter the App Store information for this purchase. This is the information that will be visible on the App Store.

Image for post
Image for post

Enter the purchase’s review information. The screenshot (requires at least 640 x 920 pixels) and the information you provide will not be shown on the App Store — it is only for Apple’s review purposes.

Image for post
Image for post

Click “Save” in the upper-right hand corner.

Now that you have your In-App Purchase created, you need to add the Product ID to your app’s control panel.

In your app control panel, go to the “Commerce” section from the menu on the left.

Image for post
Image for post

Copy and paste the product ID from your App Store Connect account which you added to the iOS product ID field

Image for post
Image for post

Once you’ve entered your product IDs, click the “Add” button to save.

Image for post
Image for post

One final thing that you have to configure in XCode settings, open XCode and select project and go to Capabilities section and enable InApp Purchase button.

2. Configure In-App Purchase on Google Play Store Console

IMPORTANT: Before you can create your In-App Purchases in android, you are required to activate a Merchant account in your Google Developer account.

Log in to your Google Developer account here: https://play.google.com/apps/publish

Click the “Settings” tab from the menu on the left.

Image for post
Image for post

Scroll to the bottom of this page and you’ll see a link to activate your Merchant account.

When you’ve activated your Merchant account it will look like this:

Image for post
Image for post

Now that you’ve activated your Merchant account, you’re required to obtain your license/billing Key from your Google Developer account.

From the menu on the left, select “All Applications”, then click on the app that you’re going to apply the in-app purchases to:

Image for post
Image for post

From the menu on the left select “Services and APIs” found under “Development Tools.”

Image for post
Image for post

Copy the license key in the section titled “Your license key for this application.”

Image for post
Image for post

Upload your license/billing key to the Commerce section of your app’s control panel.

Image for post
Image for post

Now you have your Merchant account activated and your license/billing Key uploaded.

Click on your app listing.

Image for post
Image for post

Click the“In-App Products” tab from the menu on the left.

If your app was already live on the Play Store and you’re just now including In-App Purchases, the In-App Products section is found under the Store Presence tab of your app’s listing.

Image for post
Image for post

Make sure you have “Managed Products” selected, then click “Create Managed Products.”

Image for post
Image for post

Input your Product ID.

Image for post
Image for post

Input your title and description, then change the status to active.

Image for post
Image for post

Set a price, then click “Save” at the bottom of the page.

Image for post
Image for post

Now that you have your in-app purchase created, you need to add the product ID to your app control panel.

In the app control panel, go to the commerce section from the menu on the left.

Image for post
Image for post

Copy and paste the Product ID from your Google Developer account which you entered previously into the Google Play Product ID field.

Image for post
Image for post

Once you have entered your Product IDs, click the “Add” button to save.

Image for post
Image for post

One more thing that you must configure in Android: You have to submit an alpha or beta release with the following permission in Android Manifest.xml:

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

3. Configure the react-native-iap library in React native

react-native-iap is a react native module library for in-app purchases for both Android and iOS platforms.

The goal for this library is to get experience between the two platforms for in-app-purchase.

To install react-native-iap you just need to run one of the following commands in the project terminal:

npm i react-native-iap

or

yarn add react-native-iap

From React Native 0.60 and higher, linking is automatic. So you don’t need to run react-native link.

If you’re on a Mac and developing for iOS, you need to install the pods (via Cocoapods) to complete the linking:

npx pod-install ios

Now the setup for in-app purchases is done, we should see the code part in React native.

First, we should import RNIap from react-native-iap, like this:

import RNIap, {
Product,
ProductPurchase,
PurchaseError,
acknowledgePurchaseAndroid,
purchaseErrorListener,
purchaseUpdatedListener,
} from 'react-native-iap';

You have to define your products SKU’s for iOS and Android separately:

const itemSkus = Platform.select({
ios: [
'com.example.productId'
],
android: [
'com.example.productId'
]
});

You also have to define your products subscriptions for iOS and Android separately:

const itemSubs = Platform.select({
ios: [
'test.sub'
],
android: [
'test.sub'
]
});

Now you can proceed and fetch your in-app purchase products with itemsSkus and itemsSubs, as shown:


Testing

We check in-app purchase functionality in the app by making a sample purchase of a product by any user.

For iOS, we create a sandbox tester for that.

Go to “User & Roles Section” in iTunes, select the “Sandbox Tester” tab and add a new user as a tester with some basic details. With the credentials of that user you can purchase any product on iOS without paying any real money and test in app purchase functionality in the iOS app.

To add a tester account in Android, open play store console, go to the “Settings” section and then the “Account Detail” tab, scroll down toLicense Testing” and add the email of the user you want to add as a tester. You can test in-app purchase functionality in the Android app using these tester accounts credentials.

One more thing to add: To check in-app purchasea, your Android build must be in release mode — you can’t test in debug build.


That’s it — you can now make your app in-app purchase configured and test it.

Note: in-app purchases cannot be tested on an iOS simulator or Android emulator — please use a real device.

Thank you!

Better Programming

Advice for programmers.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store