A Guide to Implementing In-App Subscription Purchases with React Native react-native-iap

Unlock the full earning potential of your mobile application with this comprehensive guide on integrating in-app subscription purchases (IASP) using React Native IAP. Whether you’re a seasoned developer or just starting out, this resource will provide you with step-by-step instructions and invaluable insights to effectively monetize your app’s features, content, and digital products. Learn how to seamlessly implement in-app purchases to not only generate revenue but also enhance user experience and value. Dive into the world of in-app subscriptions and elevate your app monetization strategy to new heights. In this article, we will implement IAP through react-native-iap, not a third-party platform.

Follow the following steps to add iap in React Native app. Step 1: Install library

yarn add react-native-iap

**iOS**

cd ios; pod install; cd -

Android

With Android Support​

Go to android/build.gradle and modify the following lines:

buildscript {
 ext {
 …
+ supportLibVersion = "28.0.0"
 }
}

buildscript {
  ext {
    ...
+    androidXAnnotation = "1.1.0"
+    androidXBrowser = "1.0.0"
+    minSdkVersion = 24
+    kotlinVersion = "1.8.0"
  }
  dependencies {
    ...
+   classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlinVersion"
  }
}

Configure the payment provider​

You can support either Play Store, Amazon or both.

• To only support Play Store, go to android/app/build.gradle:

defaultConfig {
  ...
+ missingDimensionStrategy "store", "play"
}

To support both:

android {
  ...
+ flavorDimensions "appstore"
+
+ productFlavors {
+   googlePlay {
+     dimension "appstore"
+     missingDimensionStrategy "store", "play"
+   }
+
+   amazon {
+     dimension "appstore"
+     missingDimensionStrategy "store", "amazon"
+   }
+ }
}

Set the Products in Store.

Step 2: Configuring Products for Apple and Android Stores

• IOS Product setup
• Android Product setup

Step 3. Create handler file InAppPurchase.js

import {
  getProducts,
  initConnection,
  requestSubscription,
  getSubscriptions,
} from 'react-native-iap';

export const InAppPurchasePayments = async productId => {
  await makeConnection(productId);
  let paymentMethodCall = await handlePayment(productId);
  return paymentMethodCall;
};

const makeConnection = async myProductId => {
  await initConnection();
  await getProducts({skus: [myProductId]});
  await getSubscriptions({skus: [myProductId]});
};

const handlePayment = async myProductId => {
  const subscriptions = await getSubscriptions({skus: [myProductId]});
  let desiredOfferToken;

  if (
    subscriptions &&
    subscriptions.length > 0 &&
    subscriptions[0]?.subscriptionOfferDetails &&
    subscriptions[0].subscriptionOfferDetails.length > 0
  ) {
    desiredOfferToken =
      subscriptions[0].subscriptionOfferDetails[0]?.offerToken || 'offerToken';
  } else {
    desiredOfferToken = 'offerToken';
  }
  let payment = await requestSubscription({
    sku: myProductId,
    ...(desiredOfferToken && {
      subscriptionOffers: [
        {
          sku: myProductId,
          offerToken: desiredOfferToken,
        },
      ],
    }),
  })
    .then(async requestSubscriptionIAP => {
      if (
        requestSubscriptionIAP &&
        (requestSubscriptionIAP[0]?.transactionReceipt ||
          requestSubscriptionIAP?.transactionReceipt)
      ) {
        return {
          detail: requestSubscriptionIAP,
          success: true,
        };
      } else {
        return {
          detail: requestSubscriptionIAP,
          success: false,
        };
      }
    })
    .catch(error => {
      return error;
    });

  return payment;
};

Step 4: Call the Configure the code.

Call the functions in the required file.

import {InAppPurchasePayments} from '../Utils/Functions/InAppPurchase';
import {
  getAvailablePurchases,
  getSubscriptions,
  initConnection,
} from 'react-native-iap';

call the checkPurchaseInfo function in useEffect to check the purchase status.

const SKU_IDs = 'mysubscription.year.removeads';
 React.useEffect(() => {
    checkPurchaseInfo();

  }, []);
  const checkPurchaseInfo = async () => {
    try {
      await initConnection();
      await getSubscriptions({skus: [SKU_IDs]});
      const availablePurchases = await getAvailablePurchases();
      // Check if there are any active subscriptions
      const hasActiveSubscription = availablePurchases.some(
        purchase => purchase.productId === SKU_IDs,
      );
      setShowAds(!hasActiveSubscription);
    } catch (error) {
      Alert.alert(error);
      console.log('Error checking subscription status:', error);
      setLoader(false);
    }
  };

Make the purchase

 const makingPurchase = async () => {
    setLoader(true);
    try {
      const paymentResult = await InAppPurchasePayments(SKU_IDs);
      if (paymentResult.success) {
//Success call your required functions here.
        setLoader(false);
      } else {
        Alert.alert(t('PaymentFailed'));
        setLoader(false);
      }
    } catch (error) {
      setLoader(false);
      Alert.alert(error);
      console.log('Payment error:', error);
    }
  };

Reference: react-native-iap