Implementar paywalls web

Antes de comenzar, asegúrate de haber configurado tu paywall web en el dashboard y de tener instalada la versión 3.6.1 o posterior del SDK de Adapty.

Paywalls web abiertos

Si trabajas con un paywall que desarrollaste tú mismo, necesitas gestionar los paywalls web mediante el método del SDK. El método .openWebPaywall:

  1. Genera una URL única que permite a Adapty vincular un paywall concreto mostrado a un usuario específico con la página web a la que es redirigido.
  2. Rastrea cuándo tus usuarios regresan a la app y luego solicita .getProfile a intervalos cortos para determinar si los derechos de acceso del perfil se han actualizado. De este modo, si el pago se ha completado con éxito y los derechos de acceso se han actualizado, la suscripción se activa en la app casi de inmediato.

try {
  await adapty.openWebPaywall({ paywallOrProduct: product });
} catch (error) {
  console.error('Failed to open web paywall:', error);
}

Hay dos versiones del método openWebPaywall:

  1. openWebPaywall({ paywallOrProduct: product }) que genera URLs por paywall y también añade los datos del producto a las URLs.
  2. openWebPaywall({ paywallOrProduct: paywall }) que genera URLs por paywall sin añadir los datos del producto a las URLs. Úsalo cuando los productos de tu paywall de Adapty sean diferentes de los del paywall web. En el SDK v4, la parte del paywall de paywallOrProduct toma un AdaptyFlowPaywall — una variante del paywall del flow obtenido. Comprueba que flow.paywalls no esté vacío antes de acceder por índice, por ejemplo flow.paywalls[0].

Gestión de errores

ErrorDescripciónAcción recomendada
AdaptyError.paywallWithoutPurchaseUrlEl paywall no tiene configurada una URL de compra webComprueba si el paywall está correctamente configurado en el Adapty Dashboard
AdaptyError.productWithoutPurchaseUrlEl producto no tiene una URL de compra webVerifica la configuración del producto en el Adapty Dashboard
AdaptyError.failedOpeningWebPaywallUrlNo se pudo abrir la URL en el navegadorRevisa la configuración del dispositivo o proporciona un método de compra alternativo
AdaptyError.failedDecodingWebPaywallUrlNo se pudieron codificar correctamente los parámetros en la URLVerifica que los parámetros de la URL sean válidos y estén correctamente formateados

Obtén la URL del paywall web sin abrirlo

Si quieres mostrar la página de compra web tú mismo en lugar de dejar que el SDK la abra, usa createWebPaywallUrl. Devuelve la misma URL única que abriría openWebPaywall, así que puedes renderizarla en tu propio web view o gestionar la redirección como prefieras. Acepta el mismo argumento paywallOrProduct: una variante de paywall del flow obtenido (AdaptyFlowPaywall) o un AdaptyPaywallProduct.


try {
  const url = await adapty.createWebPaywallUrl({ paywallOrProduct: product });
  // open `url` in your own web view, or handle the redirect yourself
} catch (error) {
  console.error('Failed to create web paywall URL:', error);
}

Para abrir una URL arbitraria (no un paywall web) a través del navegador nativo — por ejemplo, desde el botón de un flow — usa adapty.openWebUrl en su lugar.

Abrir web paywalls en un navegador in-app

Abrir web paywalls en un navegador in-app está disponible a partir de la versión 3.15 del SDK de Adapty.

Por defecto, los web paywalls se abren en el navegador externo.

Para ofrecer una experiencia de usuario fluida, puedes abrir los web paywalls en un navegador in-app. Esto muestra la página de compra web dentro de tu aplicación, permitiendo a los usuarios completar las transacciones sin cambiar de app.

Para activarlo, establece openIn como WebPresentation.BrowserInApp en openWebPaywall:


try {
    await adapty.openWebPaywall({
        paywallOrProduct: product,
        openIn: WebPresentation.BrowserInApp, // default – WebPresentation.BrowserOutApp
    });
} catch (error) {
    console.error('Failed to open web paywall:', error);
}