---
title: "Implementar paywalls web"
description: "Aprende a implementar paywalls web en tu app de Capacitor con el SDK de Adapty."
---

:::important
Antes de comenzar, asegúrate de haber [configurado tu paywall web en el dashboard](web-paywall) y de tener instalada la versión 3.6.1 o posterior del SDK de Adapty.
:::

## Paywalls web abiertos \{#open-web-paywalls\}

Si trabajas con un paywall que desarrollaste tú mismo, necesitas gestionar los paywalls web mediante el método del SDK. El método `.openWebPaywall`:
1. Genera una URL única que permite a Adapty vincular un paywall concreto mostrado a un usuario específico con la página web a la que es redirigido.
2. Rastrea cuándo tus usuarios regresan a la app y luego solicita `.getProfile` a intervalos cortos para determinar si los derechos de acceso del perfil se han actualizado.
De este modo, si el pago se ha completado con éxito y los derechos de acceso se han actualizado, la suscripción se activa en la app casi de inmediato.

```typescript showLineNumbers

try {
  await adapty.openWebPaywall({ paywallOrProduct: product });
} catch (error) {
  console.error('Failed to open web paywall:', error);
}
```
:::note
Hay dos versiones del método `openWebPaywall`:
1. `openWebPaywall({ paywallOrProduct: product })` que genera URLs por paywall y también añade los datos del producto a las URLs.
2. `openWebPaywall({ paywallOrProduct: paywall })` que genera URLs por paywall sin añadir los datos del producto a las URLs. Úsalo cuando los productos de tu paywall de Adapty sean diferentes de los del paywall web.
En el SDK v4, la parte del paywall de `paywallOrProduct` toma un `AdaptyFlowPaywall` — una variante del paywall del flow obtenido. Comprueba que `flow.paywalls` no esté vacío antes de acceder por índice, por ejemplo `flow.paywalls[0]`.
:::

#### Gestión de errores \{#handle-errors\}
| Error                                   | Descripción                                                          | Acción recomendada                                                                  |
|-----------------------------------------|----------------------------------------------------------------------|-------------------------------------------------------------------------------------|
| AdaptyError.paywallWithoutPurchaseUrl   | El paywall no tiene configurada una URL de compra web                | Comprueba si el paywall está correctamente configurado en el Adapty Dashboard       |
| AdaptyError.productWithoutPurchaseUrl   | El producto no tiene una URL de compra web                           | Verifica la configuración del producto en el Adapty Dashboard                       |
| AdaptyError.failedOpeningWebPaywallUrl  | No se pudo abrir la URL en el navegador                              | Revisa la configuración del dispositivo o proporciona un método de compra alternativo |
| AdaptyError.failedDecodingWebPaywallUrl | No se pudieron codificar correctamente los parámetros en la URL      | Verifica que los parámetros de la URL sean válidos y estén correctamente formateados |
## Obtén la URL del paywall web sin abrirlo \{#get-the-web-paywall-url-without-opening-it\}

Si quieres mostrar la página de compra web tú mismo en lugar de dejar que el SDK la abra, usa `createWebPaywallUrl`. Devuelve la misma URL única que abriría `openWebPaywall`, así que puedes renderizarla en tu propio web view o gestionar la redirección como prefieras. Acepta el mismo argumento `paywallOrProduct`: una variante de paywall del flow obtenido (`AdaptyFlowPaywall`) o un `AdaptyPaywallProduct`.
```typescript showLineNumbers

try {
  const url = await adapty.createWebPaywallUrl({ paywallOrProduct: product });
  // open `url` in your own web view, or handle the redirect yourself
} catch (error) {
  console.error('Failed to create web paywall URL:', error);
}
```

:::note
Para abrir una URL arbitraria (no un paywall web) a través del navegador nativo — por ejemplo, desde el botón de un flow — usa [`adapty.openWebUrl`](capacitor-handle-paywall-actions#open-urls-from-flows-and-paywalls) en su lugar.
:::
## Abrir web paywalls en un navegador in-app \{#open-web-paywalls-in-an-in-app-browser\}

:::important
Abrir web paywalls en un navegador in-app está disponible a partir de la versión 3.15 del SDK de Adapty.
:::

Por defecto, los web paywalls se abren en el navegador externo.

Para ofrecer una experiencia de usuario fluida, puedes abrir los web paywalls en un navegador in-app. Esto muestra la página de compra web dentro de tu aplicación, permitiendo a los usuarios completar las transacciones sin cambiar de app.

Para activarlo, establece `openIn` como `WebPresentation.BrowserInApp` en `openWebPaywall`:
```typescript showLineNumbers

try {
    await adapty.openWebPaywall({
        paywallOrProduct: product,
        openIn: WebPresentation.BrowserInApp, // default – WebPresentation.BrowserOutApp
    });
} catch (error) {
    console.error('Failed to open web paywall:', error);
}
```