Obtener paywalls y productos para paywalls con Remote Config en el SDK de Capacitor

Antes de mostrar el Remote Config y los paywalls personalizados, necesitas obtener la información sobre ellos. Ten en cuenta que este tema hace referencia al Remote Config y a los paywalls personalizados. Para obtener orientación sobre cómo recuperar flows o paywalls personalizados en el Flow Builder o en el Paywall Builder, consulta Obtener flows de Flow Builder y paywalls de Paywall Builder y su configuración.

Antes de empezar a obtener flows y productos en tu app (haz clic para expandir)

1. Crea tus productos en el Adapty Dashboard.

2. Crea un flow o paywall e incorpora los productos en él en el Adapty Dashboard.

3. Crea placements e incorpora tu flow o paywall en el placement en el Adapty Dashboard.

4. Instala el SDK de Adapty en tu aplicación móvil.

Obtener información del flow

En Adapty, un producto es una combinación de productos tanto de App Store como de Google Play. Estos productos multiplataforma se integran en flows y paywalls, lo que te permite mostrarlos en placements concretos de tu app móvil.

Para mostrar los productos, necesitas obtener un AdaptyFlow de uno de tus placements con el método getFlow.

try {
  const flow = await adapty.getFlow({ 
    placementId: 'YOUR_PLACEMENT_ID', 
    params: {
      fetchPolicy: 'reload_revalidating_cache_data', // Load from server, fallback to cache
      loadTimeoutMs: 5000 // 5 second timeout
    }
  });
  // the requested flow
} catch (error) {
  console.error('Failed to fetch flow:', error);
}

Parámetro	Presencia	Descripción
placementId	requerido	El identificador del Placement. Es el valor que especificaste al crear un placement en tu Adapty Dashboard.
params.fetchPolicy	opcional predeterminado: 'reload_revalidating_cache_data'	Por defecto, el SDK intentará cargar datos desde el servidor y devolverá los datos en caché en caso de fallo. Recomendamos esta opción porque garantiza que tus usuarios siempre obtengan los datos más actualizados. Sin embargo, si crees que tus usuarios tienen una conexión a internet inestable, considera usar 'return_cache_data_else_load' para devolver los datos en caché si existen. En este caso, puede que los usuarios no obtengan los datos más recientes, pero experimentarán tiempos de carga más rápidos, independientemente de lo inestable que sea su conexión. La caché se actualiza regularmente, por lo que es seguro usarla durante la sesión para evitar solicitudes de red. Ten en cuenta que la caché permanece intacta al reiniciar la app y solo se borra cuando la app se reinstala o mediante una limpieza manual. El SDK de Adapty almacena flows y paywalls en dos capas: la caché de actualización regular descrita anteriormente y los paywalls de respaldo. También usamos CDN para obtener flows y paywalls más rápido, y un servidor de respaldo independiente en caso de que el CDN no esté disponible. Este sistema está diseñado para garantizar que siempre obtengas la versión más reciente de tus flows, asegurando la fiabilidad incluso cuando la conexión a internet es escasa.
params.loadTimeoutMs	opcional predeterminado: 5000 ms	Este valor limita el tiempo de espera (en milisegundos) para este método. Si se alcanza el tiempo de espera, se devolverán los datos en caché o el fallback local. Ten en cuenta que en casos excepcionales este método puede superar ligeramente el tiempo de espera especificado en loadTimeoutMs, ya que la operación puede estar compuesta de diferentes solicitudes internamente.

¡No pongas IDs de productos en el código! Como los flows se configuran de forma remota, los productos disponibles, el número de productos y las ofertas especiales (como períodos de prueba gratuitos) pueden cambiar con el tiempo. Asegúrate de que tu código gestione estos escenarios. Por ejemplo, si inicialmente obtienes 2 productos, tu app debería mostrar esos 2 productos. Sin embargo, si más adelante obtienes 3 productos, tu app debería mostrar los 3 sin necesidad de ningún cambio en el código. Lo único que tienes que poner en el código es el ID del placement.

Parámetros de respuesta:

Parámetro	Descripción
Flow	Un objeto AdaptyFlow que contiene el placement, los identificadores (id, variationId), el nombre, sus variaciones de paywall (paywalls) y un array remoteConfigs (una entrada por cada idioma configurado). Para obtener los productos del flow, llama a getPaywallProducts({ flow }).

Obtener productos

Una vez que tienes el flow, puedes consultar el array de productos que le corresponde:

try {
  const products = await adapty.getPaywallProducts({ flow });
  // the requested products list
} catch (error) {
  console.error('Failed to fetch products:', error);
}

Parámetros de respuesta:

Parámetro	Descripción
Products	Lista de objetos AdaptyPaywallProduct con: identificador del producto, nombre del producto, precio, moneda, duración de la suscripción y otras propiedades adicionales.
Al implementar tu propio diseño de paywall, probablemente necesitarás acceder a estas propiedades del objeto AdaptyPaywallProduct. A continuación se ilustran las propiedades más utilizadas, pero consulta el documento enlazado para ver todos los detalles sobre las propiedades disponibles.
Propiedad	Descripción
-------------------------	----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Title	Para mostrar el título del producto, usa product.localizedTitle. Ten en cuenta que la localización se basa en el país de la store seleccionado por el usuario, no en el idioma del dispositivo.
Price	Para mostrar el precio localizado, usa product.price?.localizedString. Esta localización se basa en la configuración regional del dispositivo. También puedes acceder al precio como número con product.price?.amount. El valor se devuelve en la moneda local. Para obtener el símbolo de moneda correspondiente, usa product.price?.currencySymbol.
Subscription Period	Para mostrar el período (p. ej., semana, mes, año, etc.), usa product.subscription?.localizedSubscriptionPeriod. Esta localización se basa en el idioma del dispositivo. Para obtener el período de suscripción de forma programática, usa product.subscription?.subscriptionPeriod. Desde ahí puedes acceder a la propiedad unit para conocer la unidad (es decir, 'day', 'week', 'month', 'year' o 'unknown'). El valor numberOfUnits indica el número de unidades del período. Por ejemplo, en una suscripción trimestral verás 'month' en la propiedad unit y 3 en numberOfUnits.
Introductory Offer	Para mostrar un badge u otro indicador de que una suscripción incluye una oferta introductoria, consulta la propiedad product.subscription?.offer?.phases. Es una lista que puede contener hasta dos fases de descuento: la fase de prueba gratuita y la fase de precio introductorio. Dentro de cada objeto de fase encontrarás las siguientes propiedades útiles: • paymentMode: una cadena con los valores 'free_trial', 'pay_as_you_go', 'pay_up_front' y 'unknown'. Las pruebas gratuitas serán del tipo 'free_trial'. • price: el precio con descuento como número. En las pruebas gratuitas, busca 0 aquí. • localizedNumberOfPeriods: una cadena localizada según el idioma del dispositivo que describe la duración de la oferta. Por ejemplo, una oferta de prueba de tres días muestra '3 days' en este campo. • subscriptionPeriod: alternativamente, puedes obtener los detalles individuales del período de la oferta con esta propiedad. Funciona de la misma manera que se describe en la sección anterior. • localizedSubscriptionPeriod: el período de suscripción con descuento formateado según el idioma del usuario.

Acelera la obtención de flows con el flow de audiencia predeterminada

Normalmente, los flows se obtienen casi de forma instantánea, por lo que no es necesario preocuparse por acelerar este proceso. Sin embargo, cuando tienes numerosas audiencias y placements, y tus usuarios tienen una conexión a internet lenta, la obtención de un flow puede tardar más de lo deseable. En esas situaciones, puede que quieras mostrar un flow predeterminado para garantizar una experiencia de usuario fluida en lugar de no mostrar nada. Para solucionar esto, puedes usar el método getFlowForDefaultAudience, que obtiene el flow del placement especificado para la audiencia All Users. Sin embargo, es fundamental entender que el enfoque recomendado es obtener el flow con el método getFlow, tal como se describe en la sección Obtener información del flow anterior.

try {
  const flow = await adapty.getFlowForDefaultAudience({ 
    placementId: 'YOUR_PLACEMENT_ID', 
    params: {
      fetchPolicy: 'reload_revalidating_cache_data' // Load from server, fallback to cache
    }
  });
  // the requested flow
} catch (error) {
  console.error('Failed to fetch default audience flow:', 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.
params.fetchPolicy	opcional por defecto: 'reload_revalidating_cache_data'	Por defecto, el SDK intentará cargar los datos desde el servidor y devolverá los datos en caché en caso de error. 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 'return_cache_data_else_load' para devolver los datos en caché si existen. En este caso, puede que los usuarios no obtengan los datos más recientes, pero experimentarán tiempos de carga más rápidos, independientemente de lo intermitente 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.

Antes de mostrar el Remote Config y los paywalls personalizados, necesitas obtener la información sobre ellos. Ten en cuenta que este tema hace referencia al Remote Config y a los paywalls personalizados. Para obtener orientación sobre cómo obtener paywalls personalizados con el Paywall Builder, consulta Obtener paywalls del Paywall Builder y su configuración.

Antes de empezar a obtener paywalls y productos en tu aplicación móvil (haz clic para expandir)

1. Crea tus productos en el Adapty Dashboard.

2. Crea un paywall e incorpora los productos en tu paywall en el Adapty Dashboard.

3. Crea placements e incorpora tu paywall en el placement en el Adapty Dashboard.

4. Instala el SDK de Adapty en tu aplicación móvil.

Obtener información del paywall

En Adapty, un producto es una combinación de productos del App Store y Google Play. Estos productos multiplataforma se integran en paywalls, lo que te permite mostrarlos en placements específicos de tu app móvil.

Para mostrar los productos, necesitas obtener un Paywall de uno de tus placements con el método getPaywall.

try {
  const paywall = await adapty.getPaywall({ 
    placementId: 'YOUR_PLACEMENT_ID', 
    locale: 'en',
    params: {
      fetchPolicy: 'reload_revalidating_cache_data', // Load from server, fallback to cache
      loadTimeoutMs: 5000 // 5 second timeout
    }
  });
  // the requested paywall
} catch (error) {
  console.error('Failed to fetch paywall:', 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 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.
params.fetchPolicy	opcional por defecto: 'reload_revalidating_cache_data'	Por defecto, el SDK intentará cargar los datos desde el servidor y devolverá los datos en caché en caso de error. 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 'return_cache_data_else_load' para devolver los datos en caché si existen. En este caso, es posible que los usuarios no obtengan los datos más recientes, pero experimentarán 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 aplicación y solo se borra cuando se reinstala la app o mediante una limpieza manual.
params.loadTimeoutMs	opcional por defecto: 5000 ms	Este valor limita el tiempo de espera (en milisegundos) 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 superar ligeramente el tiempo especificado en loadTimeoutMs, ya que la operación puede estar compuesta por distintas peticiones internamente.
No incluyas product IDs en el código. El único ID que debes incluir en el código es el del placement. Los paywalls se configuran de forma remota, por lo que el número de productos y las ofertas disponibles pueden cambiar en cualquier momento. Tu app debe gestionar estos cambios de forma dinámica: si un paywall devuelve dos productos hoy y tres mañana, muéstralos todos sin necesidad de cambiar el código.

Parámetros de respuesta:

Parámetro	Descripción
Paywall	Un objeto AdaptyPaywall con: una lista de IDs de productos, el identificador del paywall, Remote Config y otras propiedades.

Obtener productos

Una vez que tienes el paywall, puedes consultar el array de productos que le corresponde:

try {
  const products = await adapty.getPaywallProducts({ paywall });
  // the requested products list
} catch (error) {
  console.error('Failed to fetch products:', error);
}

Parámetros de respuesta:

Parámetro	Descripción
Products	Lista de objetos AdaptyPaywallProduct con: identificador de producto, nombre del producto, precio, moneda, duración de la suscripción y otras propiedades.
Al implementar tu propio diseño de paywall, probablemente necesitarás acceder a estas propiedades del objeto AdaptyPaywallProduct. A continuación se muestran las propiedades más utilizadas, pero consulta el documento enlazado para obtener detalles completos sobre todas las propiedades disponibles.
Propiedad	Descripción
-------------------------	----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Title	Para mostrar el título del producto, usa product.localizedTitle. Ten en cuenta que la localización se basa en el país del store seleccionado por el usuario, no en el idioma del dispositivo.
Price	Para mostrar el precio localizado, usa product.price?.localizedString. Esta localización se basa en la información de idioma del dispositivo. También puedes acceder al precio como número mediante product.price?.amount. El valor se expresará en la moneda local. Para obtener el símbolo de moneda correspondiente, usa product.price?.currencySymbol.
Subscription Period	Para mostrar el período (p. ej., semana, mes, año, etc.), usa product.subscription?.localizedSubscriptionPeriod. Esta localización se basa en el idioma del dispositivo. Para obtener el período de suscripción de forma programática, usa product.subscription?.subscriptionPeriod. Desde ahí puedes acceder a la propiedad unit para conocer la unidad (es decir, 'day', 'week', 'month', 'year' o 'unknown'). El valor numberOfUnits te dará el número de unidades del período. Por ejemplo, en una suscripción trimestral verás 'month' en la propiedad unit y 3 en la propiedad numberOfUnits.
Introductory Offer	Para mostrar un badge u otro indicador de que una suscripción incluye una oferta introductoria, consulta la propiedad product.subscription?.offer?.phases. Es una lista que puede contener hasta dos fases de descuento: la fase de prueba gratuita y la fase de precio introductorio. Dentro de cada objeto de fase encontrarás las siguientes propiedades útiles: • paymentMode: cadena de texto con los valores 'free_trial', 'pay_as_you_go', 'pay_up_front' y 'unknown'. Las pruebas gratuitas corresponden al tipo 'free_trial'. • price: el precio con descuento como número. En las pruebas gratuitas, este valor será 0. • localizedNumberOfPeriods: cadena localizada según el idioma del dispositivo que describe la duración de la oferta. Por ejemplo, una oferta de prueba de tres días muestra '3 days' en este campo. • subscriptionPeriod: alternativamente, puedes obtener los detalles individuales del período de la oferta con esta propiedad. Funciona de la misma manera para las ofertas que en la sección anterior. • localizedSubscriptionPeriod: período de suscripción del descuento formateado según el idioma del usuario.

Acelera la carga del paywall con el paywall de la audiencia predeterminada

Normalmente, los paywalls se cargan casi al instante, por lo que no tienes que preocuparte por optimizar este proceso. Sin embargo, cuando tienes muchas audiencias y paywalls, y tus usuarios tienen una conexión a internet débil, cargar un paywall puede tardar más de lo deseable. En esas situaciones, puede que quieras mostrar un paywall predeterminado para garantizar una buena experiencia de usuario en lugar de no mostrar ninguno. Para solucionar esto, puedes usar el método getPaywallForDefaultAudience, que obtiene el paywall del placement indicado para la audiencia All Users. Sin embargo, es fundamental entender que el enfoque recomendado es obtener el paywall mediante el método getPaywall, tal como se detalla en la sección Obtener información del paywall anterior.

try {
  const paywall = await adapty.getPaywallForDefaultAudience({ 
    placementId: 'YOUR_PLACEMENT_ID', 
    locale: 'en',
    params: {
      fetchPolicy: 'reload_revalidating_cache_data' // Load from server, fallback to cache
    }
  });
  // the requested paywall
} catch (error) {
  console.error('Failed to fetch default audience paywall:', 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 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 representa el 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.
params.fetchPolicy	opcional por defecto: 'reload_revalidating_cache_data'	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 los usuarios siempre reciban los datos más actualizados. Sin embargo, si crees que tus usuarios tienen una conexión a internet inestable, considera usar 'return_cache_data_else_load' para devolver los datos en caché si existen. En este caso, es posible que los usuarios no obtengan 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é se mantiene intacta al reiniciar la aplicación y solo se borra al desinstalarla o mediante una limpieza manual.