React Native — Displaying Paywalls & Products

Learn how to fetch and display products from paywalls in your app using Adapty iOS SDK. With Adapty you can dynamically change the products visible to your users without new app releases

Adapty allows you remotely configure the products that will be displayed in your app. This way you don't have to hardcode the products and can dynamically change offers or run A/B tests without app releases.


Make sure you've added the products and paywalls in Adapty Dashboard before fetching the products.

In order to display the products, you first need to fetch the paywall that contains them:

try {
    const paywall = await adapty.getPaywall("YOUR_PAYWALL_ID")
    // use the requested paywall
} catch (error) {
    // handle the AdaptyError

Request parameters:

  • id (required): The identifier of the desired paywall. This is the value you specified when you created the paywall in the Adapty Dashboard.


  • Paywall: an AdaptyPaywall object. This model contains the list of the products ids, paywall's identifier, remote config, and several other properties.

Once you have the paywall, you can fetch the product array that corresponds to it:

try {
    const products = await adapty.getPaywallProducts(paywall); 
  // use the requested products array
} catch (error) {
    // handle the `AdaptyError`


Every time the data is fetched from a remote server, it will be stored in the local cache. This way, you can display the products even when the user is offline.

Next, build your paywall view using fetched products and show it to the user. Later on, when the user makes a purchase, simply call makePurchase method with the product from your paywall.

const product = products[0];

try {
    const profile = await adapty.makePurchase(product);
    // successful purchase
} catch (error) {
    // handle the `AdaptyError`

You can find more information on how to make purchases in the corresponding article.


Since the paywalls are configured remotely, the available products, the number of the products, and the special offers (eg free trials) can change over time. Make sure your code handles these scenarios. For example, if you get 2 products, the 2 products will be displayed, but when you get 3, all of them should be displayed without code changes.

Don't hard code product ids, you won't need them.

Products fetch policy and intro offer eligibility on iOS

A quite important aspect that we want to clarify is how to properly handle the availability of the intro offer. The point is that iOS StoreKit version 1 does not provide a simple and reliable way to determine this value. The only option is to calculate this value based on a receipt that must be on your user's device. However, in rare situations (and in Sandbox mode - always) the check is not present on the device at the first startup.

In order not to mislead the user by displaying an incorrect intro offer value, we have introduced a special value 'unknown' for such situations. Next you can see all the possible values of introductoryOfferEligibility

'unknown'We are not sure about the eligibility at this moment
'ineligible'User is not eligible to get any into offer, you should't present it in your UI
'eligble'User is eligible for intro offer, it is safe to reflect this info in you UI


We recommend working with 'unknown' in the same way as 'ineligible'

If for some reason you observe 'unknown' values in the introductoryOfferEligibility fields when loading products for the first time, you should re-call the getProductsForPaywall method in a special mode:

const products = await adapty.getPaywallProducts(paywall, {
    ios: { fetchPolicy: 'wait_for_receipt_validation' },
import { FetchPolicy } from 'react-native-adapty';

const products = await adapty.getPaywallProducts(paywall, {
    ios: { fetchPolicy: FetchPolicy.WAIT_FOR_RECEIPT_VALIDATION },

In this case, the function will wait for the receipt to be refreshed on the device, and only after validation will return the correctly configured products. If at this point the user has not yet started the purchase process, update your interface according to the latest values.

fetchPoilicy string is being validated by TypeScript. If you are using JavaScript, you can import FetchPolicy enum as shown in the JavaScript code snippet above.


We urge you to be very careful with this scenario, as Apple's reviewers can check it quite rigorously. However, based on our experience with them, we conclude that the behavior of the payment environment in which they perform their checks may be somewhat different from our usual sandbox and production.

Paywall analytics

Adapty helps you to measure the performance of the paywalls. We automatically collect all the metrics related to purchases except for paywall views. This is because only you know when the paywall was shown to a customer.
Whenever you show a paywall to your user, call logShowPaywall(paywall) to log the event, and it will be accumulated in the paywall metrics.


Request parameters:

Fallback paywalls

Adapty allows you to provide fallback paywalls that will be used when a user opens the app and there's no connection with Adapty backend (e.g. no internet connection or in the rare case when backend is down) and there's no cache on the device.

Keep in mind that if your application is offline during the first run, the getPaywall function will necessarily wait for the user's profile to be created and only after that it will be able to make a paywall request.

To set fallback paywalls, use setFallbackPaywalls method. You should pass exactly the same payload you're getting from Adapty backend. You can copy it from Adapty Dashboard.
Here's an example of getting fallback paywall data from the locally stored JSON file named fallback_paywalls.

const fallbackPaywalls = require('./fallback_paywalls.json');
// React Native automatically parses JSON, but we do not need that
const fallbackString = JSON.stringify(fallbackPaywalls);

await adapty.setFallbackPaywalls(fallbackString);

Request parameters:

  • Paywalls (required): a JSON string representation of your paywalls/products list in the exact same format as provided by Adapty backend.


You can also hardcode fallback paywall data or receive it from your remote server.

Paywall remote config

There is a remote config available with Adapty which can be built right through the dashboard and then used inside your app. To get such config, just access remoteConfig property and extract needed values.

const paywall = await adapty.getPaywall('YOUR_PAYWALL_ID');
const headerText = paywall.remoteConfig['header_text'] as String;