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. 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.
Modo Observer	🔴 Difícil	Implementas el flujo de compra completamente por tu cuenta. Consulta la guía.

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

Antes de empezar, completa estos pasos:

1. Conecta tu app al App Store y/o Google Play en el Adapty Dashboard.
2. Crea tus productos en Adapty.
3. Crea un paywall y añade productos.
4. Crea un placement y añade tu paywall.
5. Instala y activa el SDK de Adapty en el código de tu app.

1. Obtener el 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.

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

1. Obtener el objeto paywall por el ID del placement 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.

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

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.

try {
  await view.present();
} catch (error) {
  // handle the error
}

3. Gestionar las acciones de los botones

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.

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

Siguientes pasos

Tu paywall está listo para mostrarse en la app. Prueba tus compras en el sandbox del App Store o en Google Play Store 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 para asegurarte de mostrar un paywall o dar acceso a las funciones de pago a los usuarios correctos.

Ejemplo completo

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

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>
  );
}