---
title: "Paywall web"
description: "Configura un paywall web para recibir pagos sin las comisiones ni auditorías de la App Store."
---

:::important
Antes de empezar, asegúrate de tener instalado Adapty SDK versión 3.6.1 o posterior para iOS, o Adapty SDK versión 3.15 o posterior para Android.
:::

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

   
   <img src="/assets/shared/img/web_paywall.gif"
   style={{
   border: '1px solid #727272', /* border width and color */
   width: '700px', /* image width */
   display: 'block', /* for alignment */
   margin: '0 auto' /* center alignment */
   }}
   />
   

:::tip
La App Store solo permite opciones de pago externas en EE.UU.

Para usar un paywall exclusivamente para el mercado estadounidense, duplica tu paywall actual y configura un paywall web. Así tendrás dos paywalls casi idénticos en uso: uno para EE.UU./Japón y otro para el resto del mundo.
:::

## Cómo funciona \{#how-it-works\}

El paywall web es una URL única para cada uno de tus paywalls in-app. Permite a los usuarios ir al navegador y pagar allí. Funciona con distintos proveedores de pago (Stripe, Paddle y otros) y te permite tener desde una página sencilla con un botón de Apple Pay hasta flujos más complejos con upsells.

   
   <img src="/assets/shared/img/web-paywall-promo.png"
   style={{
   border: '1px solid #727272', /* border width and color */
   width: '700px', /* image width */
   display: 'block', /* for alignment */
   margin: '0 auto' /* center alignment */
   }}
   />
   

Los paywalls web funcionan de la siguiente manera:
1. **Configuras el aspecto y el comportamiento de la página del paywall web** en el editor.
2. **Vinculas el paywall web** en la configuración del paywall.
3. En el paywall de tu app, **añades un botón** que redirige a los usuarios al navegador.
4. Cuando los usuarios pulsan el botón, el SDK de Adapty **genera una URL única**.
5. Los usuarios **van a la página del paywall web** y **pagan** la suscripción usando un método de pago externo.
6. Al volver a la app, el SDK de Adapty empieza a **hacer seguimiento de si el perfil se ha actualizado** como resultado de las compras realizadas.
7. Adapty recibe la información sobre el evento de compra, lo registra como un evento de analítica y lo monitoriza para detectar cualquier actualización.

## Paso 1. Crea un paywall web \{#step-1-create-a-web-paywall\}

1. Si quieres habilitar pagos externos para un paywall existente, necesitas [duplicarlo](duplicate-paywalls) para poder mostrárselo solo a tu segmento de usuarios de EE.UU. y seguir mostrando el anterior al resto. Si quieres empezar desde cero, [crea](create-paywall) un paywall nuevo.
2. En el paywall, cambia a la pestaña **Web paywall** y haz clic en **Create web paywall**. Se te redirigirá a una nueva página.
   
   <img src="/assets/shared/img/web-paywall-1.png"
   style={{
   border: '1px solid #727272', /* border width and color */
   width: '700px', /* image width */
   display: 'block', /* for alignment */
   margin: '0 auto' /* center alignment */
   }}
   />
   
3. Configura el paywall web y conecta un método de pago.
:::tip
Usa nuestra [guía de inicio rápido](web-paywall-configuration) que te ayudará a lanzar un paywall web funcional.
:::
4. Vuelve a la página **Web paywall** y pega el enlace del paywall.
:::important
Al lanzar tu paywall en el entorno de producción, es **fundamental** asegurarte de usar el enlace correcto generado tras publicar tu paywall web. El formato del enlace es `paywalls-....fnlfx.com`.
:::
5. Haz clic en **Save**.
   
   <img src="/assets/shared/img/web-paywall-4.png"
   style={{
   border: '1px solid #727272', /* border width and color */
   width: '700px', /* image width */
   display: 'block', /* for alignment */
   margin: '0 auto' /* center alignment */
   }}
   />
   

## 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ñade un botón de compra web \{#step-2a-add-a-web-purchase-button\}

Si usas el **paywall del Builder**, necesitas añadir un botón de paywall web. El botón utilizará el enlace que has proporcionado para hacer seguimiento de las compras y enviar los datos de vuelta a Adapty.

1. Abre el paywall y cambia a la pestaña **Builder & Generator**.
2. Haz clic en **Add element** y selecciona **Web paywall button**.

   Si usas una plantilla o un paywall existente/duplicado, añade el botón de paywall web que acabas de agregar al botón de compra anterior.
   Puedes configurar el botón de paywall web igual que el botón de compra.

3. Selecciona cómo quieres abrir el paywall web en el desplegable **Open paywall in**:
    - **External browser**: Abre el paywall en la app de navegador predeterminada.
    - **In-app browser**: Abre el paywall en el navegador integrado de la app, sin tener que salir de ella.

   <img src="/assets/shared/img/web-paywall-5.png"
   style={{
   border: '1px solid #727272', /* border width and color */
   width: '700px', /* image width */
   display: 'block', /* for alignment */
   margin: '0 auto' /* center alignment */
   }}
   />
   

### 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\}

Como los paywalls web solo están permitidos para apps iOS en EE.UU., añade un segmento de usuarios separado para EE.UU./Japón y configura un placement para dirigir distintos paywalls a diferentes segmentos:

1. [Crea un nuevo segmento](segments) con los siguientes atributos:
   - **Country from store account**: United States
   - **Platform**: iOS and iPadOS
   - **App version**: La versión más reciente que use nuestro SDK versión 3.6.0 o posterior.
     
     <img src="/assets/shared/img/web-paywall-6.png"
     style={{
     border: '1px solid #727272', /* border width and color */
     width: '700px', /* image width */
     display: 'block', /* for alignment */
     margin: '0 auto' /* center alignment */
     }}
     />
     
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.
   
   <img src="/assets/shared/img/web-paywall-7.png"
   style={{
   border: '1px solid #727272', /* border width and color */
   width: '700px', /* image width */
   display: 'block', /* for alignment */
   margin: '0 auto' /* center alignment */
   }}
   />