How to implement Expo in app purchases: A complete guide

Modern software development is a never-ending iterative process. Constant updates to mobile SDKs and operating systems require developers to always be ready for change, while evolving hardware demands support for larger screens, better cameras, and new sensors.

This ongoing evolution has pushed the industry to search for universal cross-platform development solutions. Expo, founded in 2015 by Charlie Cheever and James Ide, delivers on the promise of streamlined cross-platform app development.

With features like Expo in app purchases integration, developers can build monetized applications across multiple platforms without the complexity of managing separate codebases for each platform.

What is Expo and why use it for in-app purchases?

The Expo SDK contains several instruments and shortcuts created around React Native. These tools help teams to develop, ship, and update apps on iOS, Android, and the web from the same JavaScript/TypeScript codebase. The key feature of Expo is its ability to streamline the development process across different platforms, allowing for a single codebase. This enables developers to spend less time and resources working on and updating their apps.

What are Expo’s standout features?

Pre-built components and APIs

One of Expo’s standout features is its numerous pre-built components and APIs. They simplify the development process by eliminating the need to build certain features from scratch. This shortens the “feature-to-user” timeline and reduces possible bugs.

Real-time testing

The Expo client app allows for real-time testing and iteration on physical devices and simulators/emulators, which is crucial for delivering a consistent user experience across all platforms.

Automated build process

The Expo SDK automates many tedious and error-prone steps in the build process. Its service can compile apps in the cloud, freeing developers from maintaining native build tooling.

Over-the-air updates

Another not-so-obvious benefit of this SDK is the “Over-The-Air” updates feature, which enables developers to publish updates to their apps without going through the app store review process. It provides a time-saving advantage in maintaining and improving apps post-release.

How do you integrate Expo in app purchases with Adapty?

Integrating in-app purchases (IAPs) and subscriptions can be complex, but Adapty and Expo together streamline this process. Here’s a step-by-step integration guide:

• Install Expo and Adapty SDKs in your project

These SDKs provide the necessary tools and APIs for integrating IAPs. Here’s the instruction for Adapty, and here’s one for Expo.

• Define the in-app products

Before implementing in your code, define your in-app products and subscriptions in App Store Connect and Google Play Console.

• Initialize Adapty in your app

For a React Native project, call the activate method, passing your public SDK key as an argument:

import { adapty } from 'react-native-adapty';
adapty.activate('PUBLIC_SDK_KEY');

For an Android project, override the onCreate method and then call the activate method on the Adapty SDK, passing your public SDK key as an argument:

@Override
public void onCreate() {
  super.onCreate();
  Adapty.activate(getApplicationContext(), "PUBLIC_SDK_KEY");
}

• Сreate purchase flow with Adapty

Develop a user-friendly purchase flow showing available products, handling purchases, and managing subscriptions. Adapty’s Paywall Builder and Subscription Analytics tools let you create and test multiple paywall designs for data-driven optimization.

• Test your Expo IAP implementation

Thoroughly test it in sandbox environments provided by Apple and Google. This step is important to ensure that the purchase flow works as expected before going live.

• Once tested, deploy your app updates

Continuous monitoring and analysis of Expo in app purchases and subscription data with Adapty will help you optimize the user experience and your revenue, and Expo will make it easier to push the necessary updates as soon as possible.

Now let’s look at the key steps in more detail. 

Creating projects, installing dependencies, and configuring offers

First, create a new project at the command line using Expo:

expo init YourProjectName

Then navigate to your project directory: cd YourProjectName

Install the Expo in app purchases module which provides the necessary APIs:

expo install expo-in-app-purchases

Install the Adapty SDK with npm or yarn:

npm install @adapty/react-native
// or use yarn
yarn add @adapty/react-native

The next step after installing the Adapty and Expo SDKs is introducing the offerings. You can set up and configure products by logging into the relevant developer consoles and creating in-app products or subscriptions.

For example, in the Google Play Console, navigate to the “Subscriptions” or “In-app products” page, click on the “Create” button, and provide the required product details such as the product ID and name​. Check our docs for help on configuring App Store products or Google Play products.

How do you implement ‘react-native-purchases’ in your Expo app

The react-native-purchases library serves as a client for the purchase tracking system, providing a framework around StoreKit and Google Play Billing to simplify IAP implementation in React Native apps. Here’s how you implement it:

• Create a new Bare project:

expo init --template bare-minimum

• Install the expo-in-app-purchases library:

npm install --save expo-in-app-purchases
react-native-restart react-native-simple-toast react-native-paper axios

• Install React Navigation prerequisites and React Navigation along with a couple of its navigators: stack and drawer navigation.

• Install expo-secure-store for storing sensitive information in the app and expo-device for determining the user’s device name:

expo install expo-secure-store
expo install expo-device

• Install other dependencies:

expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view

npm install --save @react-navigation/native @react-navigation/stack @react-navigation/drawer

• Install iOS dependencies:

npx pod-install

• Utilize expo-in-app-purchases for implementing IAP within your app.

Integrating react-native-purchases facilitates the management of IAPs by providing a convenient API to perform purchases/restores. It supports features like promo prices to “pay upfront”, which are essential for monetization, better user engagement, and personalized offers.

The library supports both Android and iOS, unifying the complexities of each platform’s in-app purchase implementation, ensuring consistent implementation of IAPs across devices, and providing a unified API for simplified integration of IAPs in React Native applications.

How do you build your React Native app with Expo?

Despite Expo’s efforts to make multi-platform development simple and straightforward, there are still some specific things to keep in mind for iOS and Android respectively when implementing Expo in app purchases.

iOS build requirements

• Install CocoaPods. Run the following command to install CocoaPods, a dependency manager for Swift and Objective-C projects:

sudo gem install cocoapods

• Install iOS dependencies. Install iOS dependencies using CocoaPods with:

cd ios && pod install && cd ..

Additional iOS configuration:

• Ensure you have the correct provisioning profiles set up in Xcode for code signing.

• Configure your app icons and launch images through the Images.xcassets directory or via Xcode.

• If your project requires native code, you may need to set up bridging headers for communication between Objective-C and Swift and the React Native code.

• Update the Info.plist file in the iOS folder of your project to include any necessary permissions, configurations, and other metadata for Expo in app purchases.
• Adjust the App Transport Security (ATS) settings in your Info.plist if your app requires network configurations outside the default settings

Android build requirements

• Generate a signing key using a keystore to sign your app before release.
• Install the JDK which is required for developing Android applications by running:

brew install --cask adoptopenjdk

• Update the AndroidManifest.xml file in the android/app/src/main directory to include any necessary permissions, configurations, and other metadata for Expo in app purchases.
• Optionally enable ProGuard in your build.gradle file for code obfuscation and optimization.
• Generate a release APK (Android Package) or AAB (Android App Bundle) using the command:

cd android && ./gradlew bundleRelease

If your app requires network configurations outside the default settings, create a network security configuration file and reference it in yourAndroidManifest.xml.

Important note: All iOS and Android apps are better tested in their native environment, employing Xcode and Android Studio, respectively.

How should you test your React Native app with Expo IAPs?

It’s important to test a React Native app on both iOS and Android platforms as there are too many differences between these platforms in terms of user interfaces, behaviors, and system components. Here are some key points you should pay attention to when testing Expo in app purchases:

UI and design testing

The UI may render differently on iOS and Android due to differences in screen sizes, resolutions, and platform-specific design guidelines. With new device formats, like phones with foldable screens, keeping the designs uniform is even more difficult. That’s why it’s crucial to double-check that your Expo in app purchases interface always looks correct.

Security and permissions testing

Each platform has its own set of permissions and security features. Test on both platforms to ensure your app adheres to these, particularly when it comes to transactions and data security surrounding Expo IAP.

Performance testing

Test performance is particularly important on Android. There are many more models of Android hardware running around the world, and they have a wider range of processors, especially worse-performing ones. Usually, apps are limited to certain versions of Android, which in turn are available only on potent enough hardware, but it never hurts to check.

Payment processing testing

Ensure that the Expo IAP processing systems work flawlessly on both platforms. This includes testing the entire flow of IAPs and subscriptions from item selection and payment processing to the delivery of purchased items. Try out several test purchases and subscriptions, especially features like trial periods and recurring payments, and make sure everything works smoothly, and all payments are registered accordingly.

Receipt validation and restoration testing

Test the receipt validation and purchase restoration processes to ensure that Expo IAP transactions are correctly validated, recorded, and can be restored on both platforms.

Regional and currency testing

If your app is available in multiple regions, ensure that currency conversions, regional pricing, and localized content are handled correctly. Some currencies have longer names (or prices with more zeros), which can quickly break an otherwise perfect paywall.

Analytics implementation

Implement and test analytics tools like Adapty to monitor the performance of IAPs on both platforms, which will provide insights into user behavior and transaction success rates.

Testing is a meticulous process but is indispensable for ensuring a seamless, secure, and user-friendly IAP experience across all platforms. By addressing the platform-specific nuances, you significantly enhance the reliability and success of your app’s monetization strategy.

Conclusion: Is Expo right for your IAP implementation?

All tools are designed with the idea to simplify a difficult process, but few do it effectively. Expo SDK and Adapty provide a robust framework and insightful analytics respectively, making the process of integrating and managing IAPs significantly more manageable and effective. Both instruments enjoy a high level of user trust and ease of installation, so using them together should be a breeze. But even here, there are some rules to adhere to.

We encourage you to invest some time into reading this article and Adapty and Expo’s documentation. Spending a couple of hours on this today will save you countless days trying to decipher what went wrong in your app. Together, Expo SDK’s simplification of cross-platform development and Adapty’s adept handling of IAPs form a potent duo that makes sure your apps are easy to keep updated and monetize.