Paywall web

Antes de empezar, asegúrate de tener instalada la versión mínima del SDK de Adapty:

  • Paywall Builder o paywalls personalizados: 3.6.1 o posterior (iOS), 3.15 o posterior (Android y multiplataforma)
  • Flow Builder: 4.0 o posterior (todas las plataformas)

Con Adapty, puedes crear un paywall o un flow con un botón que redirige a tus usuarios al navegador para realizar el pago. Cuando vuelven a la app tras una compra exitosa, la suscripción se activa automáticamente. Esto te permite evitar las comisiones de la store y hacer seguimiento de los pagos de los usuarios.

Demo de paywall web

La App Store solo permite opciones de pago externas en EE. UU. y Japón. Para usar un paywall exclusivamente para estos mercados, duplica tu paywall actual y configura un web paywall. Así tendrás dos paywalls casi idénticos en uso: uno para EE. UU. y Japón, y otro para el resto de usuarios.

Cómo funciona

Un web paywall es una URL única generada para cada uno de tus paywalls in-app. Se abre en el navegador para realizar el pago y funciona con distintos proveedores de pago (Stripe, Paddle y otros), tanto para páginas sencillas con un botón de Apple Pay como para flows más complejos con ofertas adicionales.

Web paywall overview

Los paywalls web funcionan de la siguiente manera:

  1. Configura el aspecto y el comportamiento de la página del paywall web en el editor de paywalls web.
  2. Vincula el paywall web en la configuración del paywall.
  3. En el paywall de tu app, añade un botón que redirija a los usuarios al navegador.
  4. Cuando los usuarios pulsan el botón, el SDK de Adapty genera una URL única.
  5. Los usuarios acceden a la página del paywall web y pagan la suscripción mediante un método de pago externo.
  6. Al volver a la app, el SDK de Adapty consulta las actualizaciones del perfil para confirmar que la suscripción se ha activado.
  7. Adapty registra la compra y monitoriza la suscripción para detectar cambios de estado, como renovaciones o cancelaciones.

Paso 1. Crear un paywall web

  1. Consigue un paywall con el que trabajar:
    • Para habilitar pagos externos en un paywall existente, duplícalo. Así puedes mostrar el web paywall a tu segmento objetivo y el original al resto.
    • Para empezar desde cero, crea un nuevo paywall.
  2. En la página del paywall, cambia a la pestaña Web paywall y haz clic en Create web paywall. Se te redirigirá a una nueva página.
Pestaña Web paywall en la configuración del paywall
  1. Configura el web paywall y conecta un método de pago.

Si necesitas ayuda para configurar el editor externo y conectar un proveedor de pagos, consulta la guía de inicio rápido.

  1. Vuelve a la página Web paywall y pega el enlace del paywall.

Al lanzar tu paywall al entorno de producción, asegúrate de usar el enlace correcto generado tras publicar tu web paywall. El formato del enlace es paywalls-....fnlfx.com.

  1. Haz clic en Save.
Pegando el enlace del web paywall y guardando

Paso 2. Activa el paywall

Para usar tu paywall web, necesitas activarlo, y la forma de hacerlo depende de tu configuración:

  • Si usas el paywall creado en el Builder, solo tienes que añadir un nuevo botón que utilizará el enlace que has proporcionado para hacer seguimiento de las compras y enviar los datos de vuelta a Adapty.
  • Si usas el SDK, debes configurar el método openWebPaywall para gestionar los paywalls web.

Paso 2a. Añadir un botón de compra web

Si usas el Flow Builder, necesitas añadir un botón de paywall web. El botón utilizará el enlace que proporcionaste para rastrear las compras y enviar los datos de vuelta a Adapty.

  1. Abre el flow y añade un botón.

    Si usas una plantilla o un paywall existente, añade un botón de paywall web junto al botón de compra existente. Puedes configurarlo de la misma manera.

  2. En el panel Interactions de la derecha, haz clic en Add trigger. Luego, asigna la acción Purchase a este trigger.

    on-tap-purchase.webp

  3. En la configuración de la acción, cambia a la pestaña Web payment. Allí, selecciona un producto y, opcionalmente, una oferta para asociar al botón de compra web.

  4. Pega el enlace del paywall web en el campo Web paywall URL.

  5. Por defecto, los paywalls web se abren en un navegador integrado en la app para que los usuarios no tengan que salir de ella. Si prefieres abrirlos en un navegador externo, selecciona Open in external browser.

web-payment-action.webp

Paso 2b. Llama al método del SDK

Si trabajas con un paywall que has desarrollado tú mismo, necesitas gestionar los paywalls web usando el método del SDK. Consulta las guías específicas de cada plataforma:

Paso 3. Configura un placement

Dado que el App Store solo permite opciones de pago externas en EE. UU. y Japón, crea un segmento de usuarios específico para usuarios de iOS en esos mercados y configura un placement para mostrar distintos paywalls a distintos segmentos. Para usuarios de Android no hay restricción geográfica: crea un segmento de Android independiente sin filtro de país.

  1. Crea un nuevo segmento con los siguientes atributos:
    • Country from store account: United States, Japan
    • Platform: iOS and iPadOS
    • App version: La última versión que usa el SDK de Adapty.
Atributos de segmento para la segmentación del paywall web
  1. Crea un placement o edita uno existente. Añade una nueva audiencia con el paywall web y el segmento creado.
Placement con audiencia de paywall web