---
title: "Configuración del web paywall"
---

Una vez que hagas clic en **Create web paywall** en la página **Web paywall**, se te redirigirá a una página independiente para configurar el diseño del web paywall y el método de pago.

## Configura un método de pago \{#set-up-a-payment-method\}

Primero, necesitas conectar un proveedor de pagos que gestione las compras. Las opciones disponibles son:

- Stripe
- Paddle
- Paypal
- Solidgate

:::important
Para garantizar un seguimiento preciso de los análisis del web paywall en Adapty, necesitas [añadir tus productos](product) junto con los IDs de producto correspondientes de Stripe/Paddle/otro proveedor de pagos en Adapty.
:::

Para configurar un proveedor de pagos:
1. En la página de lista de web paywalls, haz clic en **Settings** y cambia a la pestaña **Integrations**.
2. Selecciona un proveedor de pagos y sigue las instrucciones de integración que aparecen en pantalla.

   
   <img src="/assets/shared/img/web-paywall-configuration-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. ⚠️ Si eliges Stripe, asegúrate de usar las claves del entorno **Test Mode** aunque la interfaz diga **Sandbox**. De lo contrario, tu web paywall no funcionará. Los **Sandboxes** de Stripe aún no son compatibles.

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

### Configura la verificación de dominio de Apple Pay \{#set-up-apple-pay-domain-verification\}

En **Settings > Domains**, selecciona tu proveedor de pagos principal para usarlo en la verificación de dominio. Luego, verifica los dominios de tu paywall con el proveedor correspondiente:

**Stripe**:
1. Ve a [Payment method domain settings](https://dashboard.stripe.com/settings/payment_method_domains) y haz clic en **Add a new domain**.
2. Añade `app.funnelfox.com` y tu subdominio personal del paywall (tendrá un aspecto similar a `paywalls-....fnlfx.com`). Para encontrar tu subdominio, ve a **Settings > Domains** y copia el valor de **Hosted subdomain**.

**Paddle**:
1. En la consola de Paddle, ve a **Checkout > Website approval** y haz clic en **Add a new domain**.
2. Añade `app.funnelfox.com` y tu subdominio personal del paywall (tendrá un aspecto similar a `paywalls-....fnlfx.com`). Para encontrar tu subdominio, ve a **Settings > Domains** y copia el valor de **Hosted subdomain**.

El proceso de aprobación en Paddle es manual, por lo que tendrás que esperar hasta que los dominios pasen de `Pending` a `Approved`.

**FunnelFox Billing**:

Sigue las [instrucciones de integración de FunnelFox Billing](https://funnelfox.com/docs/billing/integration-billing-funnelfox).

**SolidGate**:
1. En tu Solidgate Dashboard, ve a **Developers > Apple Pay Domains**.
2. Haz clic en **+ Add new domain** y pega el dominio de tu proyecto (desde **Settings > Domains** en FunnelFox). Añade también tu dominio personalizado, si corresponde.
3. Para usar Apple Pay en modo de vista previa, añade también `http://app.funnelfox.com/`.

## Crea y configura un web paywall \{#create-and-configure-a-web-paywall\}
1. En la página de lista de web paywalls, haz clic en **Create a paywall**.
2. Introduce un nombre para el paywall y haz clic en **Create**.

   
   <img src="/assets/shared/img/web-paywall-configuration-2.png"
   style={{
   border: '1px solid #727272', /* border width and color */
   width: '700px', /* image width */
   display: 'block', /* for alignment */
   margin: '0 auto' /* center alignment */
   }}
   />
   
3. Se te redirigirá a una plantilla básica con dos opciones de suscripción y el botón de compra de Apple Pay.

   La primera pantalla muestra los planes de suscripción. La segunda y la tercera son pantallas de pago. Cada pantalla corresponde a un plan que ofreces. Si solo tienes un plan, elimina la pantalla extra. Si tienes más, debes duplicar las pantallas de pago.

   La última pantalla que ven los usuarios tras una compra exitosa es donde debes indicar claramente que pueden volver a tu app.

   
   <img src="/assets/shared/img/web-paywall-configuration-10.gif"
   style={{
   border: '1px solid #727272', /* border width and color */
   width: '700px', /* image width */
   display: 'block', /* for alignment */
   margin: '0 auto' /* center alignment */
   }}
   />
   
4. Configura la lista de planes: añade o elimina planes y precios. Todos los precios y planes que ves en pantalla no se añaden de forma dinámica, por lo que debes configurarlos manualmente.
   
   <img src="/assets/shared/img/web-paywall-configuration-8.gif"
   style={{
   border: '1px solid #727272', /* border width and color */
   width: '700px', /* image width */
   display: 'block', /* for alignment */
   margin: '0 auto' /* center alignment */
   }}
   />
   
5. Añade o configura una pantalla de pago para cada plan que tengas. Te recomendamos añadir el importe total en cada pantalla de pago para que los usuarios sepan cuánto van a pagar antes de hacer clic en el botón de compra.
6. En las pantallas de pago, ya tienes el botón de Apple Pay. Para que funcione, configura en cada pantalla:
   1. **Product type**: Selecciona si quieres añadir un período de prueba o un descuento.
   2. **Trial period**: Introduce la duración del período de prueba.
   3. **Product**: Selecciona tu producto de tu proveedor de pagos.
      :::important
      Asegúrate de que el producto esté añadido en Adapty. De lo contrario, el resultado de la compra se establecerá por defecto.
      :::
   4. **Subscription discount**: Opcionalmente, selecciona un cupón de tu proveedor de pagos.
   
   <img src="/assets/shared/img/web-paywall-configuration-6.png"
   style={{
   border: '1px solid #727272', /* border width and color */
   width: '700px', /* image width */
   display: 'block', /* for alignment */
   margin: '0 auto' /* center alignment */
   }}
   />
   
7. Ahora necesitas asociar los planes con las pantallas de pago. En la pantalla de selección de plan, haz clic en el botón **Continue** y selecciona una pantalla de destino para cada plan.
   
   <img src="/assets/shared/img/web-paywall-configuration-9.png"
   style={{
   border: '1px solid #727272', /* border width and color */
   width: '700px', /* image width */
   display: 'block', /* for alignment */
   margin: '0 auto' /* center alignment */
   }}
   />
   

Cuando tengas el paywall listo, necesitas obtener su enlace para activarlo en Adapty. La forma de obtenerlo depende de si lo estás probando o lanzando en el entorno de producción:

1. **Para pruebas en sandbox**: Haz clic en **Preview** en la parte superior derecha y copia el enlace.
2. **Para producción**: Haz clic en **Publish** en la parte superior derecha. Haz clic en **Home** y copia el enlace de la columna **URL**.

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

¡Listo! Usa este enlace para [continuar con la configuración](web-paywall#step-2-trigger-the-paywall).