--- title: "Paywall web" description: "Configura un paywall web para recibir pagos sin las tarifas ni las revisiones del App Store." --- :::important 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](adapty-paywall-builder) 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. :::tip 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 \{#how-it-works\} 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 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 \{#step-1-create-a-web-paywall\} 1. Consigue un paywall con el que trabajar: - Para habilitar pagos externos en un paywall existente, [duplícalo](duplicate-paywalls). Así puedes mostrar el web paywall a tu segmento objetivo y el original al resto. - Para empezar desde cero, [crea](create-paywall) 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. 3. Configura el web paywall y conecta un método de pago. :::tip Si necesitas ayuda para configurar el editor externo y conectar un proveedor de pagos, consulta la [guía de inicio rápido](web-paywall-configuration). ::: 4. Vuelve a la página **Web paywall** y pega el enlace del paywall. :::important 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`. ::: 5. Haz clic en **Save**. ## Paso 2. Activa el paywall \{#step-2-trigger-the-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](#step-2a-add-a-web-purchase-button) 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`](#step-2b-set-up-the-sdk-method) para gestionar los paywalls web. ### Paso 2a. Añadir un botón de compra web \{#step-2a-add-a-web-purchase-button\} 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. 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 \{#step-2b-call-the-sdk-method\} 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](ios-web-paywall) - [Android](android-web-paywall) - [React Native](react-native-web-paywall) - [Flutter](flutter-web-paywall) - [Unity](unity-web-paywalls) ## Paso 3. Configura un placement \{#step-3-set-up-a-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](segments) 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. 2. [Crea](create-placement) un placement o [edita](edit-placement) uno existente. [Añade una nueva audiencia](add-audience-paywall-ab-test) con el paywall web y el segmento creado.