Esta guía describe cómo integrar Adapty en tus paywalls personalizados. Mantén el control total sobre la implementación del paywall, mientras el SDK de Adapty obtiene los productos, gestiona las nuevas compras y restaura las anteriores.

Antes de empezar

Configurar productos

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 – configuraciones que definen qué productos ofrecer. En Adapty, los paywalls son la única forma de recuperar productos, pero este diseño te permite modificar productos, precios y ofertas sin tocar el código de tu app.
• Placements – dónde y cuándo mostrar los paywalls en tu app (por ejemplo, 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 distintos paywalls a distintos usuarios. Asegúrate de entender estos conceptos incluso si trabajas con tu propio paywall personalizado. Básicamente, son tu forma de gestionar los productos que vendes en tu app.

Para implementar tu paywall personalizado, tendrás que crear un paywall y añadirlo a un placement. Esta configuración te permite recuperar tus productos. Para entender qué debes hacer en el dashboard, sigue la guía de inicio rápido aquí.

Gestión de usuarios

Puedes trabajar con o sin autenticación de backend de tu parte.

Sin embargo, el SDK de Adapty gestiona los usuarios anónimos e identificados de forma diferente. Lee la guía de inicio rápido de identificación para entender los detalles y asegurarte de que estás trabajando con los usuarios correctamente.

Paso 1. Obtener productos

Para obtener los productos de tu paywall personalizado, necesitas:

1. Obtener el objeto flow pasando el ID del placement al método getFlow.
2. Obtener el array de productos de este flow usando el método getPaywallProducts.

async function loadPaywall() {
  try {
    const flow: AdaptyFlow = await adapty.getFlow('YOUR_PLACEMENT_ID');
    const products: AdaptyPaywallProduct[] = await adapty.getPaywallProducts(flow);
    
    // Use products to build your custom paywall UI
  } catch (error) {
    // Handle the error
  }
}

Paso 2. Aceptar compras

Cuando un usuario pulsa sobre un producto en tu paywall personalizado, llama al método makePurchase con el producto seleccionado. Esto gestionará el flow de compra y devolverá el perfil actualizado.

async function purchaseProduct(product: AdaptyPaywallProduct) {
  try {
    const purchaseResult: AdaptyPurchaseResult = await adapty.makePurchase(product);
    
    switch (purchaseResult.type) {
      case 'success':
        // Purchase successful, profile updated
        break;
      case 'user_cancelled':
        // User canceled the purchase
        break;
      case 'pending':
        // Purchase is pending (e.g., user will pay offline with cash)
        break;
    }
  } catch (error) {
    // Handle the error
  }
}

Paso 3. Restaurar compras

Los stores requieren que todas las aplicaciones con suscripciones ofrezcan una forma de que los usuarios puedan restaurar sus compras.

Llama al método restorePurchases cuando el usuario pulse el botón de restaurar. Esto sincronizará su historial de compras con Adapty y devolverá el perfil actualizado.

async function restorePurchases() {
  try {
    const profile: AdaptyProfile = await adapty.restorePurchases();
    // Restore successful, profile updated
  } catch (error) {
    // Handle the error
  }
}

Próximos pasos

Tu paywall está listo para mostrarse en la app. Prueba tus compras en el sandbox de App Store o en Google Play Store para asegurarte de que puedes completar una compra de prueba desde el paywall. Para ver cómo funciona esto en una implementación lista para producción, consulta CustomPurchaseScreen.tsx en nuestra app de ejemplo, donde se muestra el manejo de compras con gestión adecuada de errores, estados de carga y estado de la interfaz. A continuación, comprueba si los usuarios han completado su compra para determinar si mostrar el paywall o conceder acceso a las funciones de pago.