In-app purchases (IAP) have become a crucial revenue stream for mobile applications. For developers using Expo, integrating IAP can be streamlined using tools like RevenueCat. This guide provides a comprehensive overview of how to implement in-app purchases in your Expo app with RevenueCat, ensuring a smooth and efficient setup.

Understanding In-App Purchases

In-app purchases are additional features, content, or services that users can buy within a mobile app. These can range from unlocking premium features, accessing exclusive content, or subscribing to ongoing services. Implementing IAP effectively can significantly boost your app's monetization strategy.

Types of In-App Purchases

Before diving into the implementation, it's essential to understand the different types of in-app purchases available:

1. Consumable: These are items that can be purchased multiple times and are "used up" after each purchase. Examples include in-game currency or one-time power-ups.
2. Non-Consumable: These are items that users purchase once and retain permanently. Examples include unlocking premium features or removing ads.
3. Auto-Renewing Subscriptions: These provide users with ongoing access to content or services, with recurring billing at set intervals (e.g., monthly or annually). Examples include streaming services or magazine subscriptions.
4. Non-Renewing Subscriptions: These offer access to content or services for a fixed period without automatic renewal. Examples include temporary access passes.

Why Use RevenueCat?

RevenueCat simplifies the complexities of implementing and managing in-app purchases across different platforms (iOS and Android). It handles the intricacies of transaction management, subscription status, and receipt validation, allowing developers to focus on building their app's core features. RevenueCat provides a unified API, robust analytics, and seamless integration with various platforms, making it an ideal choice for Expo developers.

Setting Up RevenueCat

To get started with RevenueCat, you'll need to create an account and configure your app. Here’s a step-by-step guide:

1. Create a RevenueCat Account

First, sign up for a RevenueCat account at RevenueCat. Follow the registration process and set up your organization.

2. Create a New Project

Once logged in, create a new project in RevenueCat. This project will represent your Expo app and will house all the configuration and analytics related to your in-app purchases.

3. Configure Platforms (iOS and Android)

Next, configure the platforms you plan to support (iOS and Android). This involves linking your RevenueCat project with your app store accounts (App Store Connect for iOS and Google Play Console for Android).

iOS Setup

• App Store Connect:
  • Create your app in App Store Connect if you haven't already.
  • Create in-app purchase products (Consumable, Non-Consumable, Auto-Renewing Subscriptions, Non-Renewing Subscriptions) in App Store Connect.
  • Configure the necessary agreements, tax, and banking information in App Store Connect.
  • Retrieve your App-Specific Shared Secret from App Store Connect. This is crucial for RevenueCat to validate receipts and manage subscriptions securely. Navigate to App Store Connect > App > General > App Information > App-Specific Shared Secret.
• RevenueCat Configuration:
  • In your RevenueCat project, navigate to the iOS platform settings.
  • Enter your App-Specific Shared Secret.
  • Map your product identifiers from App Store Connect to RevenueCat.

Android Setup

• Google Play Console:
  • Create your app in Google Play Console if you haven't already.
  • Create in-app purchase products (Managed Products for Consumable and Non-Consumable, Subscriptions for Auto-Renewing and Non-Renewing Subscriptions) in Google Play Console.
  • Configure the necessary payment profile and tax information in Google Play Console.
  • Retrieve your Google Play Billing Service Account credentials. This involves creating a service account with the necessary permissions to access the Google Play Developer API.
• RevenueCat Configuration:
  • In your RevenueCat project, navigate to the Android platform settings.
  • Upload your Google Play Billing Service Account credentials (JSON key file).
  • Map your product identifiers from Google Play Console to RevenueCat.

4. Install the RevenueCat SDK in Your Expo App

To use RevenueCat in your Expo app, you need to install the RevenueCat React Native SDK. Open your Expo project and run:

npm install react-native-purchases
# or
yarn add react-native-purchases

For Expo SDK 49 and below, you will need to use the expo prebuild command as well as the config plugin. SDK 50+ is autolinked, making it easier to use without the need to prebuild.

npx expo prebuild

This command ejects your Expo project, creating native iOS and Android projects. This step is necessary because the RevenueCat SDK relies on native modules.

5. Configure the RevenueCat SDK

After installing the SDK, you need to configure it with your RevenueCat API key. You can find your API key in your RevenueCat project settings.

import Purchases from 'react-native-purchases';
import { useEffect } from 'react';

const App = () => {
  useEffect(() => {
    const configureRevenueCat = async () => {
      Purchases.configure({
        apiKey: 'YOUR_REVENUECAT_API_KEY',
      });
    };

    configureRevenueCat();
  }, []);

  return (
    // Your app content here
  );
};

export default App;

Replace 'YOUR_REVENUECAT_API_KEY' with your actual RevenueCat API key. It is important to initialize the RevenueCat SDK early in your app's lifecycle, ideally in your root component.

Implementing In-App Purchases

With RevenueCat set up and configured, you can now implement in-app purchases in your Expo app. Here’s how:

1. Fetching Products

To display available in-app purchases to your users, you need to fetch the product offerings from RevenueCat. This involves retrieving the product identifiers you configured in RevenueCat and fetching the corresponding product information (price, description, etc.).

import Purchases from 'react-native-purchases';

const fetchProducts = async () => {
  try {
    const offerings = await Purchases.getOfferings();

    if (offerings.current !== null) {
      const products = offerings.current.availablePackages;
      console.log('Available products:', products);
      return products;
    } else {
      console.log('No offerings available');
      return [];
    }
  } catch (error) {
    console.error('Error fetching products:', error);
    return [];
  }
};

This function retrieves the current offerings from RevenueCat and returns an array of available products. You can then display these products in your app's UI, allowing users to select and purchase them.

2. Making a Purchase

When a user selects a product to purchase, you can use the Purchases.purchasePackage method to initiate the purchase process. This method handles the complexities of interacting with the App Store or Google Play Store, including displaying the purchase sheet, processing the transaction, and validating the receipt.

import Purchases from 'react-native-purchases';

const purchaseProduct = async (product) => {
  try {
    const purchase = await Purchases.purchasePackage(product);
    console.log('Purchase successful:', purchase);
    // Grant entitlement to the user based on the purchased product
  } catch (error) {
    if (error.userCancelled) {
      console.log('User cancelled purchase');
    } else {
      console.error('Error purchasing product:', error);
    }
  }
};

This function initiates the purchase process for the selected product. If the purchase is successful, you should grant the user the appropriate entitlement based on the purchased product. If the purchase fails, you can handle the error appropriately, such as displaying an error message to the user.

3. Restoring Purchases

Users may need to restore their purchases if they switch devices or reinstall your app. The Purchases.restorePurchases method allows users to restore their previous purchases, ensuring they retain access to the content or features they have already paid for.

import Purchases from 'react-native-purchases';

const restorePurchases = async () => {
  try {
    const customerInfo = await Purchases.restorePurchases();
    console.log('Purchases restored:', customerInfo);
    // Grant entitlements to the user based on the restored purchases
  } catch (error) {
    console.error('Error restoring purchases:', error);
  }
};

This function restores the user's previous purchases and updates their entitlements accordingly. You should provide a way for users to initiate the restore process, such as a button in the app's settings screen.

4. Handling Subscriptions

Subscriptions require special handling to ensure users have continuous access to content or services as long as their subscription is active. RevenueCat provides tools for managing subscription status, handling renewals, and detecting cancellations.

Checking Subscription Status

You can use the Purchases.getCustomerInfo method to retrieve the user's current subscription status. This method returns a CustomerInfo object that contains information about the user's active subscriptions, entitlements, and expiration dates.

import Purchases from 'react-native-purchases';

const checkSubscriptionStatus = async () => {
  try {
    const customerInfo = await Purchases.getCustomerInfo();

    if (customerInfo.entitlements.premium.isActive) {
      console.log('User has an active premium subscription');
      // Grant access to premium content
    } else {
      console.log('User does not have an active premium subscription');
      // Restrict access to premium content
    }
  } catch (error) {
    console.error('Error checking subscription status:', error);
  }
};

This function checks if the user has an active premium subscription and grants or restricts access to premium content accordingly. You should call this function periodically to ensure the user's subscription status is up-to-date.

Monitoring Subscription Changes

RevenueCat provides webhooks that allow you to monitor subscription changes in real-time. You can configure these webhooks in your RevenueCat project settings to receive notifications when a user subscribes, renews, cancels, or experiences billing issues. This allows you to take appropriate actions, such as updating the user's entitlements or sending them a reminder to update their payment information.

Testing In-App Purchases

Before releasing your app to the public, it's crucial to thoroughly test your in-app purchase implementation. Here are some tips for testing in-app purchases with RevenueCat:

1. Use Test Accounts

Create test accounts in App Store Connect and Google Play Console to simulate different purchase scenarios without incurring actual charges. These test accounts allow you to test purchases, restores, and subscription renewals without using real payment information.

2. Test Different Purchase Scenarios

Test different purchase scenarios, such as successful purchases, failed purchases, cancelled purchases, and subscription renewals. This ensures that your app handles all possible outcomes correctly and provides a seamless user experience.

3. Use the RevenueCat Debug View

RevenueCat provides a debug view that allows you to inspect the state of your in-app purchases in real-time. This view shows you the user's current entitlements, subscription status, and transaction history, making it easier to troubleshoot any issues.

4. Test on Real Devices

While simulators and emulators can be useful for initial testing, it's important to test your in-app purchase implementation on real devices to ensure it works correctly in a production environment. Real devices may have different hardware configurations, network conditions, and app store versions, which can affect the behavior of your in-app purchases.

Conclusion

Implementing in-app purchases in your Expo app with RevenueCat can be a straightforward process with the right guidance. By following the steps outlined in this guide, you can set up RevenueCat, configure your products, implement the purchase flow, and test your implementation thoroughly. This will enable you to monetize your app effectively and provide a seamless user experience for your customers. RevenueCat simplifies the complexities of IAP, allowing you, guys, to focus on what you do best: building awesome apps. Remember to always prioritize testing and stay updated with the latest RevenueCat SDK versions and best practices to ensure a smooth and efficient in-app purchase experience.