Enable purchases by using paywalls in React Native SDK

To enable in-app purchases, you need to understand three key concepts:

• Products – anything users can buy (subscriptions, consumables, lifetime access)
• Paywalls are configurations that define which products to offer. In Adapty, paywalls are the only way to retrieve products, but this design lets you modify offerings, pricing, and product combinations without touching your app code.
• Placements – where and when you show paywalls in your app (like main, onboarding, settings). You set up paywalls for placements in the dashboard, then request them by placement ID in your code. This makes it easy to run A/B tests and show different paywalls to different users.

Adapty offers you three ways to enable purchases in your app. Select one of them depending on your app requirements:

Implementation	Complexity	When to use
Adapty Paywall Builder	✅ Easy	You create a complete, purchase-ready paywall in the no-code builder. Adapty automatically renders it and handles all the complex purchase flow, receipt validation, and subscription management behind the scenes.
Manually created paywalls	🟡 Medium	You implement your paywall UI in your app code, but still get the paywall object from Adapty to maintain flexibility in product offerings. See the guide.
Observer mode	🔴 Hard	You already have your own purchase handling infrastructure and want to keep using it. Note that the observer mode has its limitations in Adapty. See the article.

important

The steps below show how to implement a paywall created in the Adapty paywall builder.

If you don't want to use the paywall builder, see the guide for handling purchases in manually created paywalls.

To display a paywall created in the Adapty paywall builder, in your app code, you only need to:

1. Get the paywall: Get the paywall from Adapty.
2. Display the paywall and Adapty will handle purchases for you: Show the paywall container you've got in your app.
3. Handle button actions: Associate user interactions with the paywall with your app's response to them. For example, open links or close the paywall when users click buttons.

1. Get the paywall

Your paywalls are associated with placements configured in the dashboard. Placements allow you to run different paywalls for different audiences or to run A/B tests.

To get a paywall created in the Adapty paywall builder, you need to:

1. Get the paywall object by the placement ID using the getPaywall method and check whether it is a paywall created in the builder using the hasViewConfiguration property.

2. Create the paywall view using the createPaywallView method. The view contains the UI elements and styling needed to display the paywall.

important

To get the view configuration, you must switch on the Show on device toggle in the Paywall Builder. Otherwise, you will get an empty view configuration, and the paywall won't be displayed.

React Native

import {createPaywallView} from '@adapty/react-native-ui';

try {
    const placementId = 'YOUR_PLACEMENT_ID';

    const paywall = await adapty.getPaywall(placementId);
  // the requested paywall
} catch (error) {
    // handle the error
}

if (paywall.hasViewConfiguration) {
    try {
        const view = await createPaywallView(paywall);
    } catch (error) {
        // handle the error
    }
} else {
    //use your custom logic
}

2. Display the paywall

Now, when you have the paywall configuration, it's enough to add a few lines to display your paywall.

To display the paywall, use the view.present() method on the view created by the createPaywallView method. Each view can only be used once. If you need to display the paywall again, call createPaywallView one more to create a new view instance.

React Native

try {
  await view.present();
} catch (error) {
  // handle the error
}

tip

For more details on how to display a paywall, see our guide.

3. Handle button actions

When users click buttons in the paywall, the React Native SDK automatically handles purchases, restoration, closing the paywall, and opening URLs.

However, other buttons have custom or pre-defined IDs and require handling actions in your code. Or, you may want to override their default behavior.

For example, here is the default behavior for the close button. You don't need to add it in the code, but here, you can see how it is done if needed.

tip

Read our guides on how to handle button actions and events.

React Native

const unsubscribe = view.registerEventHandlers({
    onCloseButtonPress() {
        return true; // allow paywall closing
    }
});

Next steps

Your paywall is ready to be displayed in the app.

Now, you need to check the users' access level to ensure you display a paywall or give access to paid features to right users.

Full example

Here is how all those steps can be integrated in your app together.

React Native

import React, { useEffect } from 'react';
import { Button, View } from 'react-native';
import { adapty, createPaywallView } from '@adapty/react-native-ui';

export default function PaywallScreen() {
  const showPaywall = async () => {
    try {
      const paywall = await adapty.getPaywall('YOUR_PLACEMENT_ID');

      if (!paywall.hasViewConfiguration) {
        // use your custom logic
        return;
      }

      const view = await createPaywallView(paywall);

      view.registerEventHandlers({
          onCloseButtonPress() {
              return true;
        },
      });

      await view.present();
    } catch (error) {
      // handle any error that may occur during the process
      console.warn('Error showing paywall:', error);
    }
  };

  // you can add a button to manually trigger the paywall for testing purposes
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Button title="Show Paywall" onPress={showPaywall} />
    </View>
  );
}