Mostrar flows en modo Observer en el SDK de iOS

Si usas el modo Observer, tú eres responsable de tu propia lógica de compras. Pero puedes delegar la interfaz del paywall en el Flow & Paywall Builder.

Diseña la pantalla en el builder y el SDK de Adapty la renderiza de forma nativa. Actualiza el texto, el diseño y los precios cuando quieras, sin necesidad de publicar una nueva versión de la app. Cuando el usuario pulsa el botón de compra, el SDK llama a tu código para completar la transacción.

Esta guía explica cómo presentar esa pantalla y gestionar la llamada de compra. Si Adapty gestiona las compras por ti, consulta Mostrar flows y paywalls en su lugar.

Antes de empezar

Necesitas:

Adapty iOS SDK v4 o posterior: Las versiones anteriores no pueden renderizar flows. Para migrar una app existente desde v3, consulta la guía de migración.
observerMode configurado en true: Consulta la guía de instalación del SDK de iOS.
Integración inicial con la store: Configura Adapty con la App Store.
Un flow publicado con productos: Créalo en el Flow & Paywall Builder y asígnale productos.
Un placement de flow: Crea un placement y asígnale tu flow.
El flow obtenido en tu app: Obtén el flow y su configuración antes de presentarlo.

Implementación

Implementa el objeto AdaptyObserverModeResolver:

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

func observerModeDidInitiateRestorePurchases(onStartRestore: @MainActor @Sendable @escaping () -> Void,
                                             onFinishRestore: @MainActor @Sendable @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	required	Un objeto `AdaptyFlow` obtenido mediante `Adapty.getFlow(placementId:)`. Ver Obtener flows y paywalls.
observerModeResolver	required	El `AdaptyObserverModeResolver` que implementaste anteriormente.

Inicializa el controlador de flow con 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` con 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)
```

Warning

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 propio modificador utiliza los mismos callbacks que el modo completo.

Warning

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 nuestras instrucciones específicas para cada framework en iOS.
Crea productos en el Adapty Dashboard.
Configura los paywalls, asígnales productos y personalízalos usando el Paywall Builder en el Adapty Dashboard.
Crea placements y asigna tus paywalls a ellos 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 AdaptyObserverModeResolver:

func observerMode(didInitiatePurchase product: AdaptyPaywallProduct,
                  onStartPurchase: @MainActor @Sendable @escaping () -> Void,
                  onFinishPurchase: @MainActor @Sendable @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: @MainActor @Sendable @escaping () -> Void,
                                             onFinishRestore: @MainActor @Sendable @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 flow 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 flow 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 que el paywall funcione correctamente, por ejemplo, para mostrar el indicador de carga, 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	required	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	required	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 solicitada

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

present(visualPaywall, animated: true)

Warning

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

(empty input — nothing to translate)

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 por cadenas específicas para personalizar el contenido. 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() se ejecuta correctamente, se invocará este callback.
didFailRestore	Si Adapty.restorePurchases() falla, se invocará este callback.
didFailRendering	Si ocurre un error durante la renderización de la interfaz, se invocará este callback.

Consulta el tema iOS - Gestión de eventos para conocer otros parámetros de closure.

Warning

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

Before you start presenting paywalls (Click to Expand)

Configura la integración inicial de Adapty con Google Play y con la 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 usando 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á de que el usuario ha iniciado una compra. Puedes activar tu propio 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 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 sirven como marcadores de posición en el contenido del paywall, reemplazándose dinámicamente con cadenas específicas para ofrecer contenido personalizado dentro 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)

Warning

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
          }, 
      )
}

(empty input — nothing to translate)

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. 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 actúan como marcadores de posición en el contenido del paywall, que se reemplazan dinámicamente con cadenas específicas para ofrecer contenido personalizado dentro del paywall. Consulta el tema Custom tags in paywall builder para más detalles.

Closure parameters:

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 se produce 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 - Manejo de eventos para ver otros parámetros del closure.

Warning

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