After installing and configuring the Adapty SDK, you can start using paywalls in your app. This guide explains how to fetch the Paywall Builder paywalls. Note that paywalls designed with the Paywall Builder don’t require manual rendering—they handle their own presentation. Learn how to present them.

Tras instalar y configurar el SDK de Adapty, puedes empezar a usar paywalls en tu app. Esta guía explica cómo obtener los paywalls del Paywall Builder. Ten en cuenta que los paywalls diseñados con el Paywall Builder no requieren renderizado manual: gestionan su propia presentación. Aprende a presentarlos.

To use paywalls, follow these steps:

Para usar paywalls, sigue estos pasos:

1. Fetch the paywall to get the paywall object and its configuration.

2. Present the paywall to display it to the user.

3. Obtén el paywall para conseguir el objeto paywall y su configuración.

4. Presenta el paywall para mostrárselo al usuario.

Fetch Paywall Builder paywall

Obtener el paywall del Paywall Builder

If you’ve customized a paywall using the Paywall Builder, you don’t need to worry about rendering it in your mobile app code to display it to the user. Instead, follow these steps:

Si has personalizado un paywall con el Paywall Builder, no necesitas preocuparte por renderizarlo en el código de tu app para mostrárselo al usuario. En su lugar, sigue estos pasos:

1. Fetch the paywall by its placement ID.

2. Render the paywall with createPaywallView.

3. Present the paywall with view.present().

4. Obtén el paywall por su ID de placement.

5. Renderiza el paywall con createPaywallView.

6. Presenta el paywall con view.present().

Adapty identifies which paywall to show using placements—named locations in your app (like “onboarding” or “settings”). Paywalls are assigned to these placements in the Adapty Dashboard.

Adapty identifica qué paywall mostrar usando placements: ubicaciones con nombre en tu app (como “onboarding” o “settings”). Los paywalls se asignan a estos placements en el Adapty Dashboard.

To fetch a paywall, use the getPaywall method:

Para obtener un paywall, usa el método getPaywall:

const placementId = 'YOUR_PLACEMENT_ID';
const locale = 'en';

const paywall = await adapty.getPaywall(placementId, locale);

Parametrs:

Parámetros:

Parameter	Presence	Description
placementId	required	The identifier of the desired Placement. This is the value you specified when creating a placement in the Adapty Dashboard.
locale	optional	The identifier of the paywall localization. This can be a language code (e.g., en, pt, fr, etc.) or a language and country code together (pt-BR, fr-FR). If omitted, the default locale will be used.
fetchPolicy	optional	By default, SDK loads data from server. For details, read about Paywall fetch policy.

Parámetro	Presencia	Descripción
placementId	obligatorio	El identificador del Placement deseado. Es el valor que especificaste al crear un placement en el Adapty Dashboard.
locale	opcional	El identificador de la localización del paywall. Puede ser un código de idioma (por ejemplo, en, pt, fr, etc.) o un código de idioma y país juntos (pt-BR, fr-FR). Si se omite, se usará la localización predeterminada.
fetchPolicy	opcional	Por defecto, el SDK carga los datos del servidor. Para más detalles, consulta Política de obtención de paywalls.

Once you have the paywall object, you can create a view and present it in the user interface.

Una vez que tengas el objeto paywall, puedes crear una view y presentarla en la interfaz de usuario.

Speed up paywall fetching with default audience paywall

Acelera la obtención del paywall con el paywall de audiencia predeterminada

Typically, paywalls are fetched almost instantly, so you don’t need to worry about this. However, if you want to optimize the paywall fetch (e.g., to avoid showing a loading indicator), you can use the getPaywallForDefaultAudience method.

Normalmente, los paywalls se obtienen casi al instante, por lo que no necesitas preocuparte por esto. Sin embargo, si quieres optimizar la obtención del paywall (por ejemplo, para evitar mostrar un indicador de carga), puedes usar el método getPaywallForDefaultAudience.

const placementId = 'YOUR_PLACEMENT_ID';
const locale = 'en';

const paywall = await adapty.getPaywallForDefaultAudience(placementId, locale);

Parameters:

Parámetros:

Parameter	Presence	Description
placementId	required	The identifier of the desired Placement. This is the value you specified when creating a placement in the Adapty Dashboard.
locale	optional	The identifier of the paywall localization. This can be a language code (e.g., en, pt, fr, etc.) or a language and country code together (pt-BR, fr-FR). If omitted, the default locale will be used.
fetchPolicy	optional	By default, SDK loads data from server. For details, read about Paywall fetch policy.

Parámetro	Presencia	Descripción
placementId	obligatorio	El identificador del Placement deseado. Es el valor que especificaste al crear un placement en el Adapty Dashboard.
locale	opcional	El identificador de la localización del paywall. Puede ser un código de idioma (por ejemplo, en, pt, fr, etc.) o un código de idioma y país juntos (pt-BR, fr-FR). Si se omite, se usará la localización predeterminada.
fetchPolicy	opcional	Por defecto, el SDK carga los datos del servidor. Para más detalles, consulta Política de obtención de paywalls.

Después de diseñar la parte visual de tu paywall con el nuevo Paywall Builder en el Adapty Dashboard, puedes mostrarlo en tu aplicación móvil. El primer paso es obtener el paywall asociado al placement y su configuración de vista, tal como se describe a continuación.

Por favor, ten en cuenta que este tema hace referencia a paywalls personalizados con Paywall Builder. Si estás implementando tus paywalls manualmente, consulta el tema Obtener paywalls y productos para paywalls con Remote Config en tu app móvil.

Antes de empezar a mostrar paywalls en tu app móvil (haz clic para expandir)

1. Crea tus productos en el Adapty Dashboard.
2. Crea un paywall e incorpora los productos en él en el Adapty Dashboard.
3. Crea placements e incorpora tu paywall en ellos en el Adapty Dashboard.
4. Instala el SDK de Adapty en tu aplicación móvil.

Obtener el paywall diseñado con Paywall Builder

Si has diseñado un paywall con el Paywall Builder, no tienes que preocuparte por renderizarlo en el código de tu app para mostrárselo al usuario. Este tipo de paywall incluye tanto el contenido como la forma en que debe mostrarse. Aun así, necesitas obtener su ID a través del placement, su configuración de vista y, después, presentarlo en tu app. Para garantizar un rendimiento óptimo, es fundamental obtener el paywall y su configuración de vista lo antes posible, dejando tiempo suficiente para que las imágenes se descarguen antes de mostrárselas al usuario.

Para obtener un paywall, usa el método getPaywall:

try {
    const placementId = 'YOUR_PLACEMENT_ID';
    const locale = 'en';

    const paywall = await adapty.getPaywall(placementId, locale);
  // el paywall solicitado
} catch (error) {
    // manejar el error
}

Parámetros:

Parámetro	Presencia	Descripción
placementId	obligatorio	El identificador del Placement deseado. Es el valor que especificaste al crear un placement en el Adapty Dashboard.
locale	opcional por defecto: en	El identificador de la localización del paywall. Se espera que este parámetro sea un código de idioma compuesto de uno o dos subetiquetas separadas por el carácter menos (-). La primera subetiqueta corresponde al idioma y la segunda a la región. Ejemplo: en significa inglés, pt-br representa el portugués de Brasil. Consulta Localizaciones y códigos de idioma para obtener más información sobre los códigos de idioma y cómo recomendamos usarlos.
fetchPolicy	por defecto: .reloadRevalidatingCacheData	Por defecto, el SDK intentará cargar los datos desde el servidor y devolverá los datos en caché en caso de fallo. Recomendamos esta opción porque garantiza que tus usuarios siempre reciban los datos más actualizados. Sin embargo, si consideras que tus usuarios tienen conexiones inestables, puedes usar .returnCacheDataElseLoad para devolver los datos en caché cuando existan. En este caso, es posible que los usuarios no reciban los datos más recientes, pero experimentarán tiempos de carga más rápidos independientemente de la calidad de su conexión. La caché se actualiza con regularidad, por lo que es seguro usarla durante la sesión para evitar peticiones de red. Ten en cuenta que la caché permanece intacta al reiniciar la aplicación y solo se borra cuando se reinstala o mediante una limpieza manual. El SDK de Adapty almacena los paywalls localmente en dos capas: la caché de actualización periódica descrita anteriormente y los paywalls de respaldo. También utilizamos CDN para obtener los paywalls más rápido y un servidor de respaldo independiente en caso de que el CDN no sea accesible. Este sistema está diseñado para garantizar que siempre obtengas la versión más reciente de tus paywalls, asegurando la fiabilidad incluso cuando la conexión a internet es limitada.
loadTimeoutMs	por defecto: 5 seg	Este valor limita el tiempo de espera de este método. Si se alcanza el tiempo límite, se devolverán los datos en caché o el fallback local. Ten en cuenta que en casos excepcionales este método puede agotar el tiempo de espera ligeramente después de lo indicado en loadTimeout, ya que la operación puede implicar diferentes peticiones internamente. Para Android: puedes crear un TimeInterval con funciones de extensión (como 5.seconds, donde .seconds proviene de import com.adapty.utils.seconds), o bien TimeInterval.seconds(5). Para no establecer ningún límite, usa TimeInterval.INFINITE.
Parámetros de respuesta:
Parámetro	Descripción
:--------	:---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Paywall	Un objeto AdaptyPaywall con una lista de IDs de productos, el identificador del paywall, el Remote Config y varias otras propiedades.

Obtener la configuración de vista de un paywall diseñado con Paywall Builder

Después de obtener el paywall, comprueba si incluye una ViewConfiguration, lo que indica que fue creado con el Paywall Builder. Esto te guiará sobre cómo mostrar el paywall. Si la ViewConfiguration está presente, trátalo como un paywall del Paywall Builder; si no, gestíonalo como un paywall de Remote Config.

En el SDK de React Native, llama directamente al método createPaywallView sin necesidad de obtener la view configuration manualmente primero.

// for the Adapty SDK < 3.14 – import {createPaywallView} from 'react-native-adapty/dist/ui';

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

Parámetros:

Parámetro	Presencia	Descripción
paywall	requerido	Un objeto AdaptyPaywall para obtener un controlador para el paywall deseado.
customTags	opcional	Define un diccionario de etiquetas personalizadas y sus valores resueltos. Las etiquetas personalizadas actúan como marcadores de posición en el contenido del paywall y se reemplazan dinámicamente con cadenas específicas para personalizar el contenido. Consulta el tema sobre etiquetas personalizadas en el Paywall Builder para más detalles.
prefetchProducts	opcional	Actívalo para optimizar el momento de visualización de los productos en pantalla. Cuando es true, AdaptyUI obtendrá automáticamente los productos necesarios. Por defecto: false.

Una vez que tengas la vista, muestra el paywall.

Obtén un paywall para la audiencia predeterminada y cárgalo más rápido

Normalmente, los paywalls se cargan casi al instante, así que no necesitas preocuparte por acelerar este proceso. Sin embargo, si tienes muchas audiencias y paywalls, y tus usuarios tienen una conexión a internet lenta, la carga puede tardar más de lo deseable. En esos casos, puede ser buena idea mostrar un paywall predeterminado para garantizar una experiencia fluida en lugar de no mostrar ninguno. Para abordar esto, puedes usar el método getPaywallForDefaultAudience, que obtiene el paywall del placement especificado para la audiencia All Users. Sin embargo, es fundamental entender que el enfoque recomendado es obtener el paywall con el método getPaywall, tal como se detalla en la sección Obtener información del paywall anterior.

try {
    const id = 'YOUR_PLACEMENT_ID';
    const locale = 'en';

    const paywall = await adapty.getPaywallForDefaultAudience(id, locale);
  // the requested paywall
} catch (error) {
    // handle the error
}

Parámetro	Presencia	Descripción
placementId	obligatorio	El identificador del Placement. Es el valor que especificaste al crear un placement en tu Adapty Dashboard.
locale	opcional valor por defecto: en	El identificador de la localización del paywall. Se espera que este parámetro sea un código de idioma compuesto por una o más subetiquetas separadas por el carácter menos (-). La primera subetiqueta corresponde al idioma y la segunda, a la región. Ejemplo: en significa inglés, pt-br representa el portugués de Brasil. Consulta Localizaciones y códigos de idioma para más información sobre los códigos de idioma y cómo recomendamos usarlos.
fetchPolicy	valor por defecto: .reloadRevalidatingCacheData	Por defecto, el SDK intentará cargar los datos desde el servidor y devolverá los datos en caché en caso de fallo. Recomendamos esta opción porque garantiza que tus usuarios siempre reciban los datos más actualizados. Sin embargo, si crees que tus usuarios tienen una conexión a internet inestable, considera usar .returnCacheDataElseLoad para devolver los datos en caché si existen. En ese caso, puede que los usuarios no obtengan los datos absolutamente más recientes, pero disfrutarán de tiempos de carga más rápidos independientemente de lo irregular que sea su conexión. La caché se actualiza con regularidad, por lo que es seguro usarla durante la sesión para evitar peticiones de red. Ten en cuenta que la caché permanece intacta al reiniciar la app y solo se borra cuando se reinstala la app o mediante una limpieza manual.

Personalizar assets

Para personalizar imágenes y vídeos en tu paywall, implementa los assets personalizados.

Las imágenes hero y los vídeos hero tienen IDs predefinidos: hero_image y hero_video. En un bundle de assets personalizados, seleccionas estos elementos por sus IDs y personalizas su comportamiento.

Para otras imágenes y vídeos, necesitas establecer un ID personalizado en el Adapty Dashboard.

Por ejemplo, puedes:

• Mostrar una imagen o vídeo diferente a algunos usuarios.
• Mostrar una imagen de previsualización local mientras se carga la imagen principal remota.
• Mostrar una imagen de previsualización antes de reproducir un vídeo.

Aquí tienes un ejemplo de cómo proporcionar recursos personalizados mediante un diccionario simple:

const customAssets: Record<string, AdaptyCustomAsset> = {
  'custom_image': { type: 'image', relativeAssetPath: 'custom_image.png' },
  'hero_video': {
    type: 'video',
    fileLocation: {
      ios: { fileName: 'custom_video.mp4' },
      android: { relativeAssetPath: 'videos/custom_video.mp4' }
    }
  }
};

view = await createPaywallView(paywall, { customAssets })