Paywall web

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 regresan a tu app tras una compra exitosa, la suscripción se activa. Esto te permite evitar las comisiones del store y seguir rastreando los pagos de los 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.

Los paywalls web funcionan de la siguiente manera:

1. Configura el aspecto y el funcionamiento de la página del paywall web en el editor de paywall 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 que incluye el ID de perfil de Adapty del usuario.
5. Los usuarios van a la página del paywall web y pagan la suscripción mediante un método de pago externo.
6. Cuando vuelven 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 supervisa la suscripción para detectar cambios de estado, como renovaciones o cancelaciones.

El ID de perfil en la URL vincula la compra web con el usuario de la aplicación. La compra llega al perfil que tu app ya utiliza, por lo que no necesitas llamar a Adapty.identify() para un comprador web.

Paso 1. Crear un paywall web

1. Consigue un paywall con el que trabajar:
   • Para habilitar los pagos externos en un paywall existente, duplícalo. Así podrás 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. Serás redirigido a una nueva página.

3. Configura el web paywall y conecta un método de pago.

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

5. Haz clic en Save.

Paso 2. Activar el paywall

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

• Si estás usando el Flow & Paywall Builder, solo necesitas añadir un nuevo botón que usará el enlace que has proporcionado para rastrear las compras y enviar los datos de vuelta a Adapty.
• Si estás usando 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 & Paywall Builder, necesitas añadir un botón de paywall web. El botón utilizará el enlace que has proporcionado 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.

   

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.

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:

• iOS
• Android
• React Native
• Flutter
• Unity

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 versión más reciente que utiliza el SDK de Adapty.

2. Crea un placement o edita uno existente. Añade una nueva audiencia con el web paywall y el segmento creado.

Añade un embudo de cancelación

Un embudo de cancelación es una página web que un suscriptor abre para cancelar su suscripción. Antes de que la cancelación se complete, el embudo puede ofrecer una pausa, un plan con descuento o un período gratuito. Lo construyes en el mismo editor que tu paywall web, y tu app lo abre mediante una URL. El embudo cancela la suscripción con tu proveedor de pagos, por lo que tu app no necesita hacer ninguna llamada a la API de cancelación.

Para crear un embudo de cancelación, en el editor de paywall web, abre la pestaña Cancellation. Las acciones de retención solo están disponibles en los embudos de cancelación, por lo que no puedes añadirlas al embudo que sirve tu paywall web. Para más información sobre el embudo en sí, consulta la guía de FunnelFox sobre embudos de cancelación.

Obtén el ID de perfil de FunnelFox del suscriptor

Un funnel de cancelación identifica al suscriptor mediante su ID de perfil de FunnelFox. Tras una compra de suscripción web, FunnelFox escribe ese ID en el perfil de Adapty como el atributo personalizado fnlfx_profile_id, junto con fnlfx_funnel_id, fnlfx_session_id, vendor_profile_id y vendor.

FunnelFox escribe estos atributos una sola vez, en la primera compra de suscripción web. Las compras posteriores los dejan tal como están. En el caso de una compra consumible, FunnelFox solo los escribe cuando el elemento de checkout tiene un nivel de acceso personalizado.

Tu app lee fnlfx_profile_id de customAttributes en el perfil del usuario. Para ver el mismo valor en Adapty, abre Profiles y busca el perfil del usuario.

Abre el funnel desde tu app

Tu app construye la URL de cancelación por sí misma. No va en el campo Web paywall URL — ese campo pertenece a un paywall que vende un producto, y Adapty añade adapty_profile_id, no fpid.

Combina la URL publicada de tu funnel de cancelación con el fnlfx_profile_id del suscriptor:

https://<your-project>.fnlfx.com/cancel?fpid=<fnlfx_profile_id>

Pasa el valor del atributo tal como está almacenado, sin ningún prefijo. Abre la URL cuando el usuario pulse tu botón de cancelar.

Los usuarios pueden cerrar la página en cualquier momento, incluso después de que el flujo cancele la suscripción. No trates su regreso a la app como una confirmación. Recupera el perfil para obtener el estado actual. Una suscripción cancelada mantiene su nivel de acceso hasta que finalice el período pagado.