---
title: "Habilitar compras usando paywalls en el SDK de Capacitor"
description: "Aprende cómo mostrar paywalls en tu app de Capacitor con el SDK de Adapty."
---

Para habilitar las compras in-app, necesitas entender tres conceptos clave:

- **Productos** – todo lo que los usuarios pueden comprar (suscripciones, consumibles, acceso de por vida)
- **Paywalls**: son configuraciones que definen qué productos ofrecer. En Adapty, los paywalls son la única manera de obtener productos, pero este diseño te permite modificar las ofertas, los precios y las combinaciones de productos sin tocar el código de tu app.
- **Placements** – dónde y cuándo muestras los paywalls en tu app (como `main`, `onboarding`, `settings`). Configuras los paywalls para los placements en el dashboard y luego los solicitas por ID de placement en tu código. Esto facilita ejecutar pruebas A/B y mostrar paywalls distintos a diferentes usuarios.

Adapty te ofrece tres formas de habilitar compras en tu app. Elige la que mejor se adapte a los requisitos de tu app:

| Implementación             | Complejidad | Cuándo usarla                                                                                                                                                                                                                                  |
|----------------------------|-------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| **Adapty Paywall Builder** | ✅ Fácil     | [Creas un paywall completo y listo para compras en el editor sin código](quickstart-paywalls). Adapty lo renderiza automáticamente y gestiona todo el flujo de compra, la validación de recibos y la administración de suscripciones. |
| `makePurchase`             | 🟡 Media    | Implementas la UI del paywall en el código de tu app, pero igual obtienes el objeto paywall desde Adapty para mantener flexibilidad en las ofertas de productos. Consulta la [guía](capacitor-quickstart-manual).                              |
| Modo Observer              | 🔴 Difícil  | Implementas el flujo de compra completamente por tu cuenta. Consulta la [guía](implement-observer-mode-capacitor).                                                                                                                             |

:::important
**Los pasos a continuación muestran cómo implementar un paywall creado en el Paywall Builder de Adapty.**

Si no quieres usar el Paywall Builder, consulta la [guía para gestionar compras en paywalls creados manualmente](capacitor-making-purchases).
:::

Para mostrar un paywall creado en el Paywall Builder de Adapty, en el código de tu app solo necesitas:

1. **Obtener el paywall**: Obtén el paywall desde Adapty.
2. **Mostrar el paywall y Adapty gestionará las compras por ti**: Muestra el contenedor del paywall que obtuviste en tu app.
3. **Gestionar las acciones de los botones**: Asocia las interacciones de los usuarios con el paywall a las respuestas de tu app. Por ejemplo, abrir enlaces o cerrar el paywall cuando los usuarios pulsan botones.

## Antes de empezar \{#before-you-start\}

Antes de empezar, completa estos pasos:

1. Conecta tu app al [App Store](initial_ios) y/o [Google Play](initial-android) en el Adapty Dashboard.
2. [Crea tus productos](create-product) en Adapty.
3. [Crea un paywall y añade productos](create-paywall).
4. [Crea un placement y añade tu paywall](create-placement).
5. [Instala y activa el SDK de Adapty](sdk-installation-capacitor) en el código de tu app.

:::tip
La forma más rápida de completar estos pasos es seguir la [guía de inicio rápido](quickstart) o crear paywalls y placements usando el [CLI para desarrolladores](developer-cli-quickstart).
:::

## 1. Obtener el paywall \{#1-get-the-paywall\}

Tus paywalls están asociados a placements configurados en el dashboard. Los placements te permiten mostrar paywalls diferentes a distintas audiencias o ejecutar [pruebas A/B](ab-tests).

Para obtener un paywall creado en el Paywall Builder de Adapty, necesitas:

1. Obtener el objeto `paywall` por el ID del [placement](placements) usando el método `getPaywall` y comprobar si es un paywall creado en el builder usando la propiedad `hasViewConfiguration`.

2. Crear la vista del paywall con el método `createPaywallView`. La vista contiene los elementos de UI y los estilos necesarios para mostrar el paywall.

:::important
Para obtener la configuración de la vista, debes activar el toggle **Show on device** en el Paywall Builder. De lo contrario, obtendrás una configuración de vista vacía y el paywall no se mostrará.
:::

```typescript showLineNumbers title="Capacitor"

try {
  const paywall = await adapty.getPaywall({
    placementId: 'YOUR_PLACEMENT_ID',
  });
  // the requested paywall
} catch (error) {
  // handle the error
}

if (paywall.hasViewConfiguration) {
  try {
    const view = await createPaywallView(paywall);
  } catch (error) {
    // handle the error
  }
} else {
  // use your custom logic
}
```

## 2. Mostrar el paywall \{#2-display-the-paywall\}

Ahora que tienes la configuración del paywall, basta con añadir unas pocas líneas para mostrarlo.

Para mostrar el paywall, usa el método `view.present()` sobre el `view` creado por `createPaywallView`. Cada `view` solo se puede usar una vez. Si necesitas mostrar el paywall de nuevo, llama a `createPaywallView` otra vez para crear una nueva instancia de `view`.

```typescript showLineNumbers title="Capacitor"
try {
  await view.present();
} catch (error) {
  // handle the error
}
```

:::tip
Para más detalles sobre cómo mostrar un paywall, consulta nuestra [guía](capacitor-present-paywalls).
:::

## 3. Gestionar las acciones de los botones \{#3-handle-button-actions\}

Cuando los usuarios pulsan botones en el paywall, el SDK de Capacitor gestiona automáticamente las compras, la restauración y el cierre del paywall.

Sin embargo, otros botones tienen IDs personalizados o predefinidos y requieren que gestiones sus acciones en tu código. O puede que quieras anular su comportamiento predeterminado.

Por ejemplo, puede que quieras mantener el paywall abierto cuando los usuarios abran un enlace web. Veamos cómo puedes gestionarlo en tu implementación.

:::tip
Lee nuestras guías sobre cómo gestionar [acciones](capacitor-handle-paywall-actions) y [eventos](capacitor-handling-events) de botones.
:::

```typescript showLineNumbers title="Capacitor"
const unsubscribe = view.setEventHandlers({
  onUrlPress(url) {
    window.open(url, '_blank');
    return false;
  },
});
```

## Siguientes pasos \{#next-steps\}

---
no_index: true
---
import Callout from '../../../components/Callout.astro';

<Callout type="tip">
¿Tienes preguntas o estás teniendo algún problema? Consulta nuestro [foro de soporte](https://adapty.featurebase.app/) donde encontrarás respuestas a preguntas frecuentes o podrás plantear las tuyas. ¡Nuestro equipo y la comunidad están aquí para ayudarte!
</Callout>

Tu paywall está listo para mostrarse en la app. Prueba tus compras en el [sandbox del App Store](test-purchases-in-sandbox) o en [Google Play Store](testing-on-android) para asegurarte de que puedes completar una compra de prueba desde el paywall.

A continuación, necesitas [comprobar el nivel de acceso de los usuarios](capacitor-check-subscription-status) para asegurarte de mostrar un paywall o dar acceso a las funciones de pago a los usuarios correctos.

## Ejemplo completo \{#full-example\}

Aquí tienes cómo integrar todos estos pasos en tu app.

```typescript showLineNumbers title="Capacitor"

export default function PaywallScreen() {
  const showPaywall = async () => {
    try {
      const paywall = await adapty.getPaywall({
        placementId: 'YOUR_PLACEMENT_ID',
      });

      if (!paywall.hasViewConfiguration) {
        // use your custom logic
        return;
      }

      const view = await createPaywallView(paywall);

      view.setEventHandlers({
        onUrlPress(url) {
          window.open(url, '_blank');
          return false;
        },
      });

      await view.present();
    } catch (error) {
      // handle any error that may occur during the process
      console.warn('Error showing paywall:', error);
    }
  };

  return (
    <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100vh' }}>
      <button onClick={showPaywall}>Show Paywall</button>
    </div>
  );
}
```