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

• Products – todo lo que los usuarios pueden comprar (suscripciones, consumibles, acceso de por vida)
• Flows y paywalls – pantallas que presentan productos a los usuarios, creadas con el Flow & Paywall Builder sin código. El SDK los obtiene mediante getFlow. Si prefieres construir la interfaz en tu propio código, consulta Implementar paywalls personalizados.
• Placements – dónde y cuándo muestras flows y paywalls en tu app (como main, onboarding, settings). Los vinculas a placements en el dashboard y luego los solicitas por ID de placement en tu código. Esto facilita ejecutar pruebas A/B y mostrar versiones distintas a diferentes usuarios.

Adapty te ofrece tres formas de habilitar compras en tu aplicación. Selecciona la que mejor se adapte a tus requisitos:

Implementación	Complejidad	Cuándo usarlo
Adapty Flow & Paywall Builder	✅ Fácil	Creas un flow completo o un paywall listo para comprar en el builder sin código. Adapty lo renderiza automáticamente y gestiona toda la lógica de compra, validación de recibos y gestión de suscripciones.
Paywalls personalizados	🟡 Media	Implementas la UI del paywall en el código de tu app, pero sigues obteniendo el objeto flow desde Adapty para mantener flexibilidad en la oferta de productos. Consulta la guía.
Modo observador	🔴 Difícil	Ya tienes tu propia infraestructura de gestión de compras y quieres seguir usándola. Ten en cuenta que el modo observador tiene sus limitaciones en Adapty. Consulta el artículo.

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

1. Obtén el flow o paywall: Obtenlo desde Adapty.
2. Muéstralo y Adapty gestionará las compras por ti: Muestra la vista en tu app.
3. Gestiona las acciones de los botones: Asocia las interacciones del usuario con la respuesta de tu app. Por ejemplo, abre enlaces o cierra el paywall cuando el usuario pulse los 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 flow o paywall y añade productos.
4. Crea un placement y añade tu flow o paywall.
5. Instala y activa el SDK de Adapty en el código de tu app. Esta guía usa las APIs del SDK de Adapty para Capacitor v4.

1. Obtén el flow o el paywall

Tus flows y paywalls están asociados con placements configurados en el dashboard. Los placements te permiten mostrar distintos flows o paywalls a diferentes audiencias o ejecutar pruebas A/B.

Para obtener un flow o paywall creado en el Adapty Flow & Paywall Builder, obtén el objeto flow a partir del ID del placement utilizando el método getFlow. El flow contiene los elementos de UI y el estilo necesarios para mostrarlo.

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

2. Mostrar el flow o el paywall

Ahora que tienes el flow, basta con añadir unas pocas líneas para mostrarlo.

Crea una view con el método createFlowView, configura sus manejadores de eventos y llama a view.present(). Cada view solo puede usarse una vez. Si necesitas mostrar el flow de nuevo, llama a createFlowView otra vez para crear una nueva instancia de view.

try {
  const view = await createFlowView(flow);

  await view.setEventHandlers({
    onPurchaseCompleted(purchaseResult, product) {
      return purchaseResult.type === 'success'; // close the flow on a successful purchase, keep it open for cancelled or pending purchases
    },
  });

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

3. Gestionar las acciones de los botones

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

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

Por ejemplo, aquí puedes ver el comportamiento predeterminado del botón de cierre. No necesitas añadirlo en el código, pero aquí puedes ver cómo se hace si fuera necesario.

const unsubscribe = await view.setEventHandlers({
  onCloseButtonPress() {
    return true; // allow the flow to close
  },
});

Próximos pasos

Tu flow o paywall está listo para mostrarse en la aplicación. Prueba tus compras para asegurarte de que puedes completar una compra de prueba desde el flow.

Ahora necesitas comprobar el nivel de acceso de los usuarios para asegurarte de que muestras un paywall o das acceso a las funciones de pago a los usuarios correctos.

Ejemplo completo

Aquí tienes cómo integrar todos los pasos de esta guía en tu aplicación.

export async function showFlow() {
  try {
    const flow = await adapty.getFlow({
      placementId: 'YOUR_PLACEMENT_ID',
    });

    const view = await createFlowView(flow);

    await view.setEventHandlers({
      onCloseButtonPress() {
        return true;
      },
      onPurchaseCompleted(purchaseResult, product) {
        return purchaseResult.type === 'success'; // close the flow on a successful purchase, keep it open for cancelled or pending purchases
      },
    });

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