Displaying Products

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

Adapty allows you to 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 your Adapty Dashboard before fetching products.

To fetch products call adapty.paywalls.getPaywalls() method:

try {
  const { paywalls, products } = await adapty.paywalls.getPaywalls();
  // or 
    adapty.paywalls.getPaywalls({ forceUpdate: true })
} catch (error: AdaptyError) {}

Request parameters:

  • {forceUpdate}Force update. Optional. If you want to force SDK to fetch new data. Data from a local cache would be used otherwise. Default is false.

Response parameters:

  • paywalls — array of AdaptyPaywall. Each object contains the list of the products, paywall's identifier, custom payload, and several other properties. All you need to display the products in your app is to get a paywall by its identifier, retrieve the products, and display them
  • products — array of AdaptyProduct. Each object contains a product identifier, price, currency, title, and many other product options. Generally, you don't have to use this response parameter as all the products should be stored in the paywalls.

📘

Every time 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.

🚧

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.

Example component

import React, { useState, useEffect } from 'react';
import { View, Text } from 'react-native';
import { adapty, AdaptyPaywall } from 'react-native-adapty';

const Component: React.FC = () => {
  const [paywall, setPaywall] = useState<AdaptyPaywall | undefined>();
    
  useEffect(() => {
    async function fetchPaywall() {
      const { paywalls } = await adapty.paywalls.getPaywalls();
      const bestPaywall = paywalls.find(paywall => 
        paywall.developerId === 'myFavoritePaywall'
      );
    
      setPaywall(bestPaywall);
    }
    fetchPaywall();
    },[]);
    
    function renderProducts() {
      if (!paywall) {
        return null;
      }
        
      return paywall.products.map((product) =>
        <Text>{product.localizedTitle}</Text>
      );
    }

    return <View>{renderProducts()}</View>;
}

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 adapty.paywalls.logShow(paywall.variationId) to log the event, and it will be accumulated in the paywall metrics.

const Paywall: React.FC = () => {
  ...
  useEffect(() => {
    async function fetchPaywall() {
      const { paywalls } = await adapty.paywalls.getPaywalls();
      const bestPaywall = paywalls.find(paywall => 
        paywall.developerId === 'myFavoritePaywall'
      );
            
      setPaywall(bestPaywall);
            
      adapty.paywalls.logShow(bestPaywall.variationId);
    }
    fetchPaywall();
  },[]);
  ...
}

Did this page help you?