In-App Purchase con RevenueCat en Swift - Nuevo Paywall en SwiftUI

Marcelo Laprea

01 noviembre, 20234min de lectura

A partir de la versión 4.26.0 de RevenueCat, ahora puedes crear Paywalls configurables directamente desde el panel de control de RevenueCat. A continuación, te mostramos cómo hacerlo paso a paso:

1. Instalación de RevenueCat: Puedes consultar este artículo para obtener instrucciones detalladas sobre cómo instalar RevenueCat en tu proyecto. Asegúrate de agregar RevenueCatUI a tu objetivo (target).

2. Configuración del Paywall directamente en el panel de control de RevenueCat.

Actualmente, tienes tres plantillas (templates) para elegir y personalizar tu Paywall. Selecciona la que mejor se adapte a tus necesidades y procede a la configuración. Ten en cuenta que debes tener productos ya configurados para crear un Paywall. Puedes consultar cómo hacerlo en este artículo.

3. Presentación del Paywall en tu vista. Tienes tres opciones disponibles:

• Presentación del Paywall a través del Entitlement
• Presentación del Paywall mediante lógica personalizada
• Presentación manual del Paywall

Presentación del Paywall a través del Entitlement

Presenta el Paywall utilizando el modificador presentPaywallIfNeeded y pasa el parámetro requiredEntitlementIdentifier: "entitlement-identifier". Si el usuario no tiene este entitlement activo, se mostrará el Paywall. Además, puedes utilizar los completion handlers purchaseCompleted y restoreCompleted para gestionar la compra y la restauración, respectivamente. En ambos casos, recibirás la información del cliente (customerInfo) para validar su suscripción.

Aquí tienes un ejemplo:

import SwiftUI
import RevenueCat
import RevenueCatUI

struct ContentView: View {
  var body: some View {
    Text("AsyncLearn Paywall")
      .presentPaywallIfNeeded(
        requiredEntitlementIdentifier: "entitlement-identifier",
        purchaseCompleted: { customerInfo in
          // Gestiona la compra
        },
        restoreCompleted: { customerInfo in
          // Gestiona la restauración
        }
      )
  }
}

Presentación del Paywall mediante lógica personalizada

Al igual que en el caso anterior, puedes mostrar el Paywall utilizando el modificador presentPaywallIfNeeded, pero esta vez no necesitas pasar requiredEntitlementIdentifier como parámetro. En su lugar, utiliza un completion handler donde, basándote en la información del cliente (customerInfo), decides si mostrar o no el Paywall. Para mostrarlo, devuelve true; de lo contrario, devuelve false. También puedes utilizar los completion handlers purchaseCompleted y restoreCompleted, que mencionamos anteriormente.

import SwiftUI
import RevenueCat
import RevenueCatUI

struct ContentView: View {
  var body: some View {
    Text("AsyncLearn Paywall")
      .presentPaywallIfNeeded { customerInfo in
        // Devuelve `true` para mostrar el Paywall
        // Puedes implementar tu lógica personalizada aquí
        return customerInfo.entitlements.active.keys.contains("entitlement-identifier")
      } purchaseCompleted: { customerInfo in
        // Gestiona la compra
      } restoreCompleted: {
        // Gestiona la restauración
      }
  }
}

Presentación manual del Paywall

La última opción es abrir manualmente el Paywall utilizando la vista PaywallView() dentro de un sheet. Puedes utilizar .onPurchaseCompleted { customerInfo in } y .onRestoreCompleted { customerInfo in } para saber cuándo se ha completado una compra o una restauración. Ten en cuenta que al presentar PaywallView(), no contiene un botón de cierre, pero al estar dentro de un sheet, puedes utilizar la función de cierre o agregar un botón de cierre manualmente.

import SwiftUI
import RevenueCat
import RevenueCatUI

struct ContentView: View {
  @State var showPaywall = false
  
  var body: some View {
    Text("AsyncLearn Paywall")
      .sheet(isPresented: $showPaywall) {
        PaywallView()
          .onPurchaseCompleted { customerInfo in
            // Gestiona la compra
          }
          .onRestoreCompleted { customerInfo in
            // Gestiona la restauración
          }
      }
  }
}

Footer del Paywall: ¿Qué es y cómo utilizarlo?

Si ya has desarrollado tu propio Paywall y simplemente deseas que RevenueCat se encargue de la lógica de compra y restauración, además de permitirte configurar ciertos elementos de manera remota, puedes utilizar el modificador .paywallFooter(condensed:fonts:purchaseCompleted:restoreCompleted:). Este footer incluye los siguientes elementos:

• Botón de compra.
• Detalles del paquete.
• Selección del paquete (en caso de haber más de uno configurado).

Veamos un ejemplo:

import SwiftUI
import RevenueCat
import RevenueCatUI

struct MyPaywall: View {
    var body: some View {
      Text("My Paywall")
        .paywallFooter { customerInfo in
          // Gestiona la compra
        } restoreCompleted: { customerInfo in
          // Gestiona la restauración
        }
    }
}

Básicamente, estamos incorporando el footer en tu Paywall personalizado. Puedes gestionar compras y restauraciones a través de los completion handlers de paywallFooter, tal como se muestra en el ejemplo.

Con esta nueva vista, RevenueCat simplifica la creación de Paywalls en tu aplicación, permitiéndote configurarlos de forma remota. ¡Aprovecha esta funcionalidad para mejorar la experiencia de tus usuarios y monetizar tu aplicación de una manera rápida!