Add In-App Purchases (iOS/Android) in React Native

Tiempo de lectura: 2 minutos

Today I’m going to show you how to add in-app purchases (APPPurcharses) to your React Native application.

The first thing we’re going to do is install the dependency we’re going to use to add this feature: react-native-iap

npm install --save react-native-iap

Once installed, we’re going to set up a component for purchases:

import React, { useEffect, useState } from "react";
import { StyleSheet, Text, Platform, View } from "react-native";
import * as RNIap from 'react-native-iap';

We import the components and the RNIap library from react-native-iap.

const requestedProducts = Platform.select({
    ios: [
        'purchase.code',
        'purchase.code.2'
    ],
    android: [
        'purchase.code',
        'purchase.code.2'
    ]
});

We create an array that depends on the platform (iOS/Android), and inside it, we add the purchase codes that we configured in Google Play Console or iOS developer.

Now let’s go to the render function and create the connection with the purchase API:

const Purchases = (props) => {

    const [purchased, setPurchased] = useState(false);
    const [products, setProducts] = useState({});

    useEffect(() => {

        RNIap.initConnection().catch((error) => {
            console.log("Error connecting to IAP: " + error);
        }).then(() => {
            console.log("Connected to IAP");

            RNIap.getProducts({ skus: requestedProducts}).then((products) => {
                console.log("Products: " + JSON.stringify(products));
                setProducts(products);
            }).catch((error) => {
                console.log("Error retrieving products: " + error);
            });
        });

    }, []);

    return (
        
            Test purchases
        
    );
};

First, we have created two states:

const [purchased, setPurchased] = useState(false);
const [products, setProducts] = useState({});

In them, we will add what has been purchased and the products that come from the app store.

Inside the first method that is executed (useEffect), we’re going to add the connection with RNIap:

    RNIap.initConnection().catch((error) => {
        console.log("Error connecting to IAP: " + error);
    }).then(() => {
        console.log("Connected to IAP");

Then we add the code to retrieve the configured products:

        RNIap.getProducts({ skus: requestedProducts}).then((products) => {
            console.log("Products: " + JSON.stringify(products));
            setProducts(products);
        }).catch((error) => {
            console.log("Error retrieving products: " + error);
        }
        );

If we want to retrieve subscriptions, we need to add this code:

            RNIap.getSubscriptions({ skus: requestedProducts}).then((products) => {
                console.log("Products: " + JSON.stringify(products));
                setProducts(products);
            }).catch((error) => {
                console.log("Error retrieving products: " + error);
            }
            );

Before running the app, we need to go to the folder Android>app>src>main>manifest.xml and add this permission (if you don’t have the app folder generated, you can generate it by following this tutorial here).

Finally, we add the necessary code to display the purchased products and test the purchases:

return (
    <View>
        <Text>Test purchases</Text>
        <Text>Purchased: {purchased ? 'Yes' : 'No'}</Text>
        <Text>Products: {JSON.stringify(products)}</Text>
    </View>
);

With this code, we display the status of the purchase (purchased) and the list of products (products) retrieved from the app store.

That’s it! Now you have the basic setup to add in-app purchases to your React Native application using the react-native-iap library.

Remember to configure your products in the app store and handle the purchase flow according to your specific requirements.

For more information, you can refer to the react-native-iap documentation.

I hope you found this tutorial helpful! Happy coding!