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

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

Esta sección hace referencia al modo Observer únicamente. 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 la App Store. 2. Instala y configura el SDK de Adapty. 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ígnales 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 SDK v3: el modo observador en sí no cambia entre el renderizado de flows y paywalls:

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

func observerModeDidInitiateRestorePurchases(onStartRestore: @escaping () -> Void,
                                             onFinishRestore: @escaping () -> Void) {
       // call onStartRestore / onFinishRestore to notify AdaptyUI about the restore progress
}

Crea un objeto de configuración del 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 mediante `Adapty.getFlow(placementId:)`. Consulta Obtener flows y paywalls.
observerModeResolver	requerido	El `AdaptyObserverModeResolver` que implementaste anteriormente.

Inicializa el controlador del 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	requerido	Un objeto `AdaptyUI.FlowConfiguration` que contiene los detalles visuales del flow. Consulta Obtener flows y paywalls.
delegate	requerido	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)
```

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
                }
            },
            didFinishPurchase: { product, purchaseResult in /* dismiss, or do nothing to let the flow continue */ },
            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í utiliza 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 ampliar)

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 específicas para cada plataforma en iOS. 3. Crea productos en el Adapty Dashboard. 4. Configura 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
}

func observerModeDidInitiateRestorePurchases(onStartRestore: @escaping () -> Void,
                                             onFinishRestore: @escaping () -> Void) {
       // use the onStartRestore and onFinishRestore callbacks to notify AdaptyUI about the process of the restore
}

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 flujo de restauración personalizado en respuesta a este callback. También recuerda invocar los siguientes callbacks para notificar a AdaptyUI sobre el proceso de compra o restauración. Esto es necesario para el correcto funcionamiento del paywall, como mostrar el loader, entre otras cosas:

Callback	Description
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 de 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 para el 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 del Paywall Builder y su configuración para más detalles.
Delegate	requerido	Un `AdaptyPaywallControllerDelegate` para escuchar los eventos del paywall. Consulta el tema Gestionar eventos del paywall para más detalles.
Devuelve:

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

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

present(visualPaywall, animated: true)

No olvides Asociar 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 }
      )
}

Request parameters:

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 Fetch Paywall Builder paywalls and their configuration para más detalles.
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.
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 ofrecer contenido personalizado. Consulta el tema Custom tags in Paywall Builder para más detalles.
ObserverModeResolver	opcional	El objeto `AdaptyObserverModeResolver` que implementaste en el paso anterior
Parámetros del closure:

Parámetro del closure	Descripción
didFinishRestore	Si Adapty.restorePurchases() tiene éxito, 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.
Consulta el tema iOS - Gestión de eventos para ver otros parámetros de cierre.

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 ampliar)

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 aplicación móvil.

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á de que el usuario ha iniciado una compra. Puedes activar tu flow 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, 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.

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	requerido	Un objeto `AdaptyPaywall` para obtener un controlador del paywall deseado.
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.
ViewConfiguration	requerido	Un objeto `AdaptyUI.LocalizedViewConfiguration` que contiene los detalles visuales del paywall. Usa el método `AdaptyUI.getViewConfiguration(paywall:locale:)`. Consulta el tema Fetch Paywall Builder paywalls and their configuration para más detalles.
Delegate	requerido	Un `AdaptyPaywallControllerDelegate` para escuchar los eventos del paywall. Consulta el tema Handling paywall events para más detalles.
ObserverModeDelegate	requerido	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 personalizar el contenido del paywall. 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
          }, 
      )
}

Request parameters:

Parámetro	Presencia	Descripción
Paywall	obligatorio	Un objeto `AdaptyPaywall` para obtener un controlador para el 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. Usa 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 sirven como marcadores de posición en el contenido del paywall, y se reemplazan dinámicamente con cadenas específicas para personalizar el contenido dentro del paywall. Consulta el tema Custom tags in paywall builder para más detalles.
Parámetros de cierre:
Parámetro del closure	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 artículo iOS - Gestión de eventos para conocer otros parámetros de cierre.

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