How To Add In App Purchases (IAP) in React Native

In app purchases (IAP) are a great way to monetize your React Native applications. With IAP, users can purchase digital or physical products from within your app. In this tutorial, we’ll be walking through how to add IAP to a React Native project. We’ll cover setting up the project, installing the react-native-iap library, building the UI, adding IAP to the project, handling different purchase types, consuming IAP in React Native, and restoring IAP.

Setting up the React Native Project

Before we can get started, we need to set up a React Native project. To do this, we’ll need to install the React Native CLI and then use it to create a new project.

First, let’s install the React Native CLI:

npm install -g react-native-cli

Once the CLI is installed, we can create a new project:

react-native init MyIAPProject

This will create a new React Native project in the MyIAPProject directory.

Installing react-native-iap

The next step is to install the react-native-iap library. This library provides an easy way to add IAP to a React Native project. To install it, we’ll use npm:

cd MyIAPProject
npm install --save react-native-iap

This will install the library and add it to our project’s package.json file.

Building the In App Purchases UI

Now that we have the library installed, we can start working on the UI. We’ll need to create a screen that displays all of the available products and allows users to purchase them.

We’ll start by creating a ProductList component. This component will display a list of products that we can purchase. We’ll use the FlatList component to render the list of products:

import React from 'react';
import { FlatList, Text } from 'react-native';

export default class ProductList extends React.Component {
  render() {
    return (
      <FlatList
        data={this.props.products}
        renderItem={({ item }) => <Text>{item.title}</Text>}
        keyExtractor={item => item.id}
      />
    );
  }
}

Next, we’ll need to create a PurchaseButton component. This component will be responsible for handling the purchase process. It will display a button that the user can press to initiate the purchase. We’ll use the TouchableOpacity component to create the button:

import React from 'react';
import { TouchableOpacity, Text } from 'react-native';

export default class PurchaseButton extends React.Component {
  render() {
    return (
      <TouchableOpacity onPress={this.props.onPress}>
        <Text>Purchase</Text>
      </TouchableOpacity>
    );
  }
}

Adding In App Purchases to the React Native Project

Now that we have our UI components set up, we can start adding IAP to our project. We’ll start by creating a Product object. This object will hold all of the information about a product that we want to offer for sale. We’ll use the react-native-iap library to create the Product object:

import { 
  Product, 
  Subscription 
} from 'react-native-iap';

const products = [
  new Product('product_id_1', 'Product 1', 'My first product'),
  new Subscription('subscription_id_1', 'Subscription 1', 'My first subscription')
];

Next, we’ll need to create a function that will handle the purchase process. This function will be responsible for initiating the purchase, handling any errors, and updating the UI when the purchase is successful. We’ll use the requestPurchase method from the react-native-iap library to initiate the purchase:

import { 
  Product, 
  Subscription,
  requestPurchase 
} from 'react-native-iap';

const purchaseProduct = async (productId) => {
  try {
    const purchase = await requestPurchase(productId);
    // Update UI
  } catch (err) {
    // Handle error
  }
};

Finally, we’ll need to pass the purchaseProduct function to our PurchaseButton component. This will allow us to initiate a purchase when the user presses the button.

import React from 'react';
import { TouchableOpacity, Text } from 'react-native';
import { requestPurchase } from 'react-native-iap';

export default class PurchaseButton extends React.Component {
  render() {
    return (
      <TouchableOpacity onPress={() => this.props.onPress(this.props.productId)}>
        <Text>Purchase</Text>
      </TouchableOpacity>
    );
  }
}

Handling Different Purchase Types in React Native

Now that we have the purchase process set up, we need to handle different types of purchases. We’ll need to handle one-time purchases and subscription purchases differently.

For one-time purchases, we’ll need to check the purchase.transactionReceipt to make sure the purchase is valid. We’ll also need to update our database to reflect the purchase.

For subscription purchases, we’ll need to store the purchase.transactionReceipt so we can check for a valid subscription each time the user launches the app. We’ll also need to update our database to reflect the subscription.

Consuming In App Purchases in React Native

Once a user has purchased an item, we need to make sure that item is consumed. This means that the user can’t purchase it again. We’ll use the consumePurchase method from the react-native-iap library to consume the purchase:

import { 
  Product, 
  Subscription,
  requestPurchase,
  consumePurchase 
} from 'react-native-iap';

const consumeProduct = async (productId) => {
  try {
    const purchase = await consumePurchase(productId);
    // Update UI
  } catch (err) {
    // Handle error
  }
};

Restoring In App Purchases in React Native

Finally, we need to make sure our users can restore their purchases if they uninstall the app or switch devices. We’ll use the getPurchaseHistory method from the react-native-iap library to restore the purchases:

import { 
  Product, 
  Subscription,
  requestPurchase,
  consumePurchase,
  getPurchaseHistory 
} from 'react-native-iap';

const restorePurchases = async () => {
  try {
    const purchases = await getPurchaseHistory();
    // Update UI
  } catch (err) {
    // Handle error
  }
};

Running the React Native Project

Now that we have everything set up, we can run our project and test out the IAP functionality. To run the project, we’ll need to use the React Native CLI:

cd MyIAPProject
react-native run-ios

This will launch the app in the iOS Simulator. We can then test out the IAP functionality and make sure it works as expected.

Conclusion

In this tutorial, we’ve walked through how to add in app purchases (IAP) to a React Native project. We’ve covered setting up the project, installing the react-native-iap library, building the UI, adding IAP to the project, handling different purchase types, consuming IAP in React Native, and restoring IAP. With this knowledge, you should now be able to add IAP to your own React Native projects.