Presentar paywalls del Paywall Builder en modo Observer en el SDK de iOS

Si has personalizado un paywall con el Paywall Builder, no necesitas preocuparte por renderizarlo en el código de tu app para mostrárselo al usuario. Ese paywall ya contiene tanto lo que se debe mostrar como la forma en que se debe mostrar.

Esta sección se refiere únicamente al modo Observer. Si no trabajas en modo Observer, consulta iOS - Presentar paywalls con Paywall Builder.

Antes de empezar a presentar flows (haz clic para expandir)

Configura la integración inicial de Adapty con App Store. 2. Instala y configura el SDK. Asegúrate de establecer el parámetro observerMode en true. Consulta la guía de instalación del SDK para iOS. 3. Crea productos en el Adapty Dashboard. 4. Configura flows o paywalls en los builders y asígnales productos. 5. Crea placements y asígna tus flows o paywalls. 6. Obtén los flows y su configuración en el código de tu app.

Implementa el objeto AdaptyObserverModeResolver. El protocolo es el mismo que en la versión SDK v3 — el modo observer no cambia entre el renderizado de flow y paywall:

   func observerMode(didInitiatePurchase product: AdaptyPaywallProduct,
                     onStartPurchase: @escaping () -> Void,
                     onFinishPurchase: @escaping () -> Void) {
          // usa el objeto product para gestionar la compra
          // llama a onStartPurchase / onFinishPurchase para notificar a AdaptyUI sobre el progreso de la compra
   }
```swift
   func observerModeDidInitiateRestorePurchases(onStartRestore: @escaping () -> Void,
                                                onFinishRestore: @escaping () -> Void) {
          // call onStartRestore / onFinishRestore to notify AdaptyUI about the restore progress
   }

Crea un objeto de configuración de flow pasando tu resolver como parámetro observerModeResolver::

   do {
       let flowConfiguration = try await AdaptyUI.getFlowConfiguration(
           forFlow: flow,
           observerModeResolver: <AdaptyObserverModeResolver>
       )
   } catch {
       // handle the error
   }

Parámetros de la solicitud:

Parámetro	Presencia	Descripción
forFlow	requerido	Un objeto `AdaptyFlow` obtenido a través de `Adapty.getFlow(placementId:)`. Consulta Obtener flows y paywalls.
observerModeResolver	requerido	El `AdaptyObserverModeResolver` que implementaste anteriormente.

Inicializa el controlador de flow usando AdaptyUI.flowController(with:delegate:):
```
import AdaptyUI

let visualFlow = try AdaptyUI.flowController(
    with: flowConfiguration,
    delegate: <AdaptyFlowControllerDelegate>
)
```
Parámetros de la solicitud: | Parámetro | Presencia | Descripción | | :------------------------- | :------- | :----------------------------------------------------------------------------------------------------------------------------------------------- | | flowConfiguration | obligatorio | Un objeto AdaptyUI.FlowConfiguration que contiene los detalles visuales del flow. Consulta Obtener flows y paywalls. | | delegate | obligatorio | Un AdaptyFlowControllerDelegate para escuchar los eventos del flow. Consulta Gestionar eventos de flow y paywall. | Devuelve:

Objeto Descripción
AdaptyFlowController Un objeto que representa la pantalla del flow solicitado.
Presenta el controlador:
```
present(visualFlow, animated: true)
```

Objeto	Descripción
AdaptyFlowController	Un objeto que representa la pantalla del flow solicitado.

No olvides asociar los paywalls a las transacciones de compra. De lo contrario, Adapty no podrá determinar el paywall de origen de la compra.

En SwiftUI, obtén la configuración del flow con el resolver y pásala al modificador .flow:

@State var flowPresented = false
@State var flowConfiguration: AdaptyUI.FlowConfiguration?

var body: some View {
    Text("Hello, AdaptyUI!")
        .flow(
            isPresented: $flowPresented,
            flowConfiguration: flowConfiguration,
            didPerformAction: { action in
                switch action {
                    case .close:
                        flowPresented = false
                    default:
                        break
                }
            },
            didFailPurchase: { product, error in /* handle the error */ },
            didFinishRestore: { profile in /* check access level and dismiss */ },
            didFailRestore: { error in /* handle the error */ },
            didReceiveError: { error in flowPresented = false }
        )
        .task {
            flowConfiguration = try? await AdaptyUI.getFlowConfiguration(
                forFlow: flow,
                observerModeResolver: <AdaptyObserverModeResolver>
            )
        }
}

El parámetro observerModeResolver: en getFlowConfiguration es lo que hace que el flow renderizado respete tu lógica de compra personalizada — el modificador en sí usa los mismos callbacks que el modo completo.

No olvides asociar los paywalls a las transacciones de compra. De lo contrario, Adapty no podrá determinar el paywall de origen de la compra.

Antes de empezar a mostrar paywalls (haz clic para expandir)

Configura la integración inicial de Adapty con Google Play y con App Store. 2. Instala y configura el SDK de Adapty. Asegúrate de establecer el parámetro observerMode en true. Consulta nuestras instrucciones por framework para iOS. 3. Crea productos en el Adapty Dashboard. 4. Configura los paywalls, asígnales productos y personalízalos con el Paywall Builder en el Adapty Dashboard. 5. Crea placements y asígnales tus paywalls en el Adapty Dashboard. 6. Obtén los paywalls del Paywall Builder y su configuración en el código de tu app.

Implementa el objeto AdaptyObserverModeResolver:

func observerMode(didInitiatePurchase product: AdaptyPaywallProduct,
                  onStartPurchase: @escaping () -> Void,
                  onFinishPurchase: @escaping () -> Void) {
       // use the product object to handle the purchase
       // use the onStartPurchase and onFinishPurchase callbacks to notify AdaptyUI about the process of the purchase
}

El evento observerMode(didInitiatePurchase:onStartPurchase:onFinishPurchase:) te informará de que el usuario ha iniciado una compra. Puedes activar tu flujo de compra personalizado en respuesta a este callback. El evento observerModeDidInitiateRestorePurchases(onStartRestore:onFinishRestore:) te informará de que el usuario ha iniciado una restauración. Puedes activar tu propio flujo de restauración personalizado en respuesta a este callback.

Recuerda también invocar los siguientes callbacks para notificar a AdaptyUI sobre el proceso de compra o restauración. Esto es necesario para que el paywall funcione correctamente, por ejemplo, para mostrar el loader, entre otras cosas:

Callback	Descripción
onStartPurchase()	El callback debe invocarse para notificar a AdaptyUI que la compra ha comenzado.
onFinishPurchase()	El callback debe invocarse para notificar a AdaptyUI que la compra ha finalizado.
onStartRestore()	El callback debe invocarse para notificar a AdaptyUI que la restauración ha comenzado.
onFinishRestore()	El callback debe invocarse para notificar a AdaptyUI que la restauración ha finalizado.

Crea un objeto de configuración del paywall:

do {
    let paywallConfiguration = try AdaptyUI.getPaywallConfiguration(
     forPaywall: <paywall object>, 
     observerModeResolver: <AdaptyObserverModeResolver>
     )
} catch {
    // handle the error
}

Parámetros de la solicitud:

Parámetro	Presencia	Descripción
Paywall	requerido	Un objeto `AdaptyPaywall` para obtener un controlador del paywall deseado.
ObserverModeResolver	requerido	El objeto `AdaptyObserverModeResolver` que implementaste en el paso anterior.

Inicializa el paywall visual que quieres mostrar usando el método .paywallController(for:products:viewConfiguration:delegate:):

import AdaptyUI

let visualPaywall = AdaptyUI.paywallController(
    with: <paywall configuration object>,
    delegate: <AdaptyPaywallControllerDelegate>
)

Parámetros de la solicitud:

Parámetro	Presencia	Descripción
Paywall Configuration	requerido	Un objeto `AdaptyUI.PaywallConfiguration` que contiene los detalles visuales del paywall. Usa el método `AdaptyUI.getPaywallConfiguration(forPaywall:locale:)`. Consulta el tema Obtener paywalls de Paywall Builder y su configuración para más detalles.
Delegate	requerido	Un `AdaptyPaywallControllerDelegate` para escuchar los eventos del paywall. Consulta el tema Gestión de eventos del paywall para más detalles.
Retornos:

Objeto	Descripción
AdaptyPaywallController	Un objeto que representa la pantalla del paywall solicitado

Una vez creado el objeto con éxito, puedes mostrarlo así:

present(visualPaywall, animated: true)

No olvides asociar los paywalls a las transacciones de compra. De lo contrario, Adapty no podrá determinar el paywall de origen de la compra.

Para mostrar el paywall visual en la pantalla del dispositivo, usa el modificador .paywall en SwiftUI:

@State var paywallPresented = false

var body: some View {
	Text("Hello, AdaptyUI!")
			.paywall(
          isPresented: $paywallPresented,
          paywallConfiguration: <paywall configuration object>,
          didPerformAction: { action in
              switch action {
                  case .close:
                      paywallPresented = false
                  default:
                      // Handle other actions
                      break
              }
          },
          didFinishRestore: { profile in /* check access level and dismiss */  },
          didFailRestore: { error in /* handle the error */ },
          didFailRendering: { error in paywallPresented = false }
      )
}

Parámetros de solicitud:

Parámetro	Presencia	Descripción
Paywall Configuration	obligatorio	Un objeto `AdaptyUI.PaywallConfiguration` que contiene los detalles visuales del paywall. Usa el método `AdaptyUI.getPaywallConfiguration(forPaywall:locale:)`. Consulta el tema Obtener paywalls del Paywall Builder y su configuración para más detalles.
Products	opcional	Proporciona un array de objetos `AdaptyPaywallProduct` para optimizar el tiempo de visualización de los productos en pantalla. Si se pasa `nil`, AdaptyUI obtendrá automáticamente los productos necesarios.
TagResolver	opcional	Define un diccionario de etiquetas personalizadas y sus valores resueltos. Las etiquetas personalizadas actúan como marcadores de posición en el contenido del paywall, reemplazados dinámicamente por cadenas específicas para contenido personalizado dentro del paywall. Consulta el tema Etiquetas personalizadas en Paywall Builder para más detalles.
ObserverModeResolver	opcional	El objeto `AdaptyObserverModeResolver` que implementaste en el paso anterior.
Parámetros de closure:

Parámetro de closure	Descripción
didFinishRestore	Si Adapty.restorePurchases() tiene éxito, se invocará este callback.
didFailRestore	Si Adapty.restorePurchases() falla, se invocará este callback.
didFailRendering	Si se produce un error durante el renderizado de la interfaz, se invocará este callback.
Consulta el tema iOS - Gestión de eventos para conocer otros parámetros de closure.

No olvides asociar los paywalls a las transacciones de compra. De lo contrario, Adapty no podrá determinar el paywall de origen de la compra.

Antes de empezar a mostrar paywalls (Haz clic para expandir)

Configura la integración inicial de Adapty con Google Play y con el App Store.
Instala y configura el SDK de Adapty. Asegúrate de establecer el parámetro observerMode en true. Consulta las instrucciones específicas para cada framework: iOS, React Native, Flutter y Unity.
Crea productos en el Adapty Dashboard.
Configura los paywalls, asígnales productos y personalízalos con el Paywall Builder en el Adapty Dashboard.
Crea placements y asígnales tus paywalls en el Adapty Dashboard.
Obtén los paywalls del Paywall Builder y su configuración en el código de tu app.

Implementa el objeto AdaptyObserverModeDelegate:

   func paywallController(_ controller: AdaptyPaywallController,
                          didInitiatePurchase product: AdaptyPaywallProduct,
                          onStartPurchase: @escaping () -> Void,
                          onFinishPurchase: @escaping () -> Void) {
          // use the product object to handle the purchase
          // use the onStartPurchase and onFinishPurchase callbacks to notify AdaptyUI about the process of the purchase
   }

El evento paywallController(_:didInitiatePurchase:onStartPurchase:onFinishPurchase:) te informará cuando el usuario haya iniciado una compra. Puedes activar tu flujo de compra personalizado en respuesta a este evento.

Además, recuerda invocar los siguientes callbacks para notificar a AdaptyUI sobre el proceso de compra. Esto es necesario para que el paywall funcione correctamente, por ejemplo, para mostrar el loader:

Callback	Descripción
onStartPurchase	El callback debe invocarse para notificar a AdaptyUI que la compra ha comenzado.
onFinishPurchase	El callback debe invocarse para notificar a AdaptyUI que la compra ha finalizado.

Inicializa el paywall visual que quieres mostrar usando el método .paywallController(for:products:viewConfiguration:delegate:observerModeDelegate:):

   import AdaptyUI
   
   let visualPaywall = AdaptyUI.paywallController(
       for: <paywall object>,
       products: <paywall products array>,
       viewConfiguration: <LocalizedViewConfiguration>,
       delegate: <AdaptyPaywallControllerDelegate>
       observerModeDelegate: <AdaptyObserverModeDelegate>
   )

Parámetros de la solicitud:

Parámetro	Presencia	Descripción
Paywall	obligatorio	Un objeto `AdaptyPaywall` para obtener un controlador para el paywall deseado.
Products	opcional	Proporciona un array de objetos `AdaptyPaywallProduct` para optimizar el momento en que se muestran los productos en pantalla. Si se pasa `nil`, AdaptyUI obtendrá automáticamente los productos necesarios.
ViewConfiguration	obligatorio	Un objeto `AdaptyUI.LocalizedViewConfiguration` que contiene los detalles visuales del paywall. Usa el método `AdaptyUI.getViewConfiguration(paywall:locale:)`. Consulta el tema Obtener paywalls del Paywall Builder y su configuración para más detalles.
Delegate	obligatorio	Un `AdaptyPaywallControllerDelegate` para escuchar los eventos del paywall. Consulta el tema Gestión de eventos del paywall para más detalles.
ObserverModeDelegate	obligatorio	El objeto `AdaptyObserverModeDelegate` que implementaste en el paso anterior.
TagResolver	opcional	Define un diccionario de etiquetas personalizadas y sus valores resueltos. Las etiquetas personalizadas actúan como marcadores de posición en el contenido del paywall y se reemplazan dinámicamente con cadenas específicas para mostrar contenido personalizado. Consulta el tema Custom tags in Paywall Builder para más detalles.
Devuelve:

Objeto	Descripción
AdaptyPaywallController	Un objeto que representa la pantalla de paywall solicitada

Una vez creado el objeto correctamente, puedes mostrarlo así:

present(visualPaywall, animated: true)

No olvides asociar los paywalls a las transacciones de compra. De lo contrario, Adapty no podrá determinar el paywall de origen de la compra.

Para mostrar el paywall visual en la pantalla del dispositivo, usa el modificador .paywall en SwiftUI:

@State var paywallPresented = false

var body: some View {
	Text("Hello, AdaptyUI!")
			.paywall(
          isPresented: $paywallPresented,
          paywall: <paywall object>,
          configuration: <LocalizedViewConfiguration>,
          didPerformAction: { action in
              switch action {
                  case .close:
                      paywallPresented = false
                  default:
                      // Handle other actions
                      break
              }
          },
          didFinishRestore: { profile in /* check access level and dismiss */  },
          didFailRestore: { error in /* handle the error */ },
          didFailRendering: { error in paywallPresented = false },
          observerModeDidInitiatePurchase: { product, onStartPurchase, onFinishPurchase in
              // use the product object to handle the purchase
              // use the onStartPurchase and onFinishPurchase callbacks to notify AdaptyUI about the process of the purchase
          }, 
      )
}

Parámetros de solicitud:

Parámetro	Presencia	Descripción
Paywall	obligatorio	Un objeto `AdaptyPaywall` para obtener un controlador del paywall deseado.
Product	opcional	Proporciona un array de objetos `AdaptyPaywallProduct` para optimizar el tiempo de visualización de los productos en pantalla. Si se pasa `nil`, AdaptyUI obtendrá automáticamente los productos necesarios.
Configuration	obligatorio	Un objeto `AdaptyUI.LocalizedViewConfiguration` que contiene los detalles visuales del paywall. Utiliza el método `AdaptyUI.getViewConfiguration(paywall:locale:)`. Consulta el tema Obtener paywalls del Paywall Builder y su configuración para más detalles.
TagResolver	opcional	Define un diccionario de etiquetas personalizadas y sus valores resueltos. Las etiquetas personalizadas actúan como marcadores de posición en el contenido del paywall, reemplazados dinámicamente por cadenas específicas para personalizar el contenido dentro del paywall. Consulta el tema Etiquetas personalizadas en el Paywall Builder para más detalles.
Parámetros de cierre:
Parámetro de cierre	Descripción
:----------------------------------	:-----------------------------------------------------------------------------------------------
didFinishRestore	Si Adapty.restorePurchases() se ejecuta correctamente, se invocará este callback.
didFailRestore	Si Adapty.restorePurchases() falla, se invocará este callback.
didFailRendering	Si ocurre un error durante el renderizado de la interfaz, se invocará este callback.
observerModeDidInitiatePurchase	Este callback se invoca cuando un usuario inicia una compra.
Consulta el tema iOS - Gestión de eventos para conocer otros parámetros de closure.

No olvides asociar paywalls a las transacciones de compra. De lo contrario, Adapty no podrá determinar el paywall de origen de la compra.