Présenter les flows en mode Observer dans le SDK iOS

Si vous utilisez le mode Observer, vous êtes responsable de votre propre logique d’achat. Mais vous pouvez déléguer l’interface utilisateur du paywall au Flow & Paywall Builder.

Concevez l’écran dans le builder, et le SDK Adapty le restitue nativement. Modifiez le texte, la mise en page et les prix quand vous le souhaitez, sans publier de mise à jour. Quand un utilisateur appuie sur le bouton d’achat, le SDK appelle votre code pour finaliser l’achat.

Ce guide explique comment afficher cet écran et gérer l’appel d’achat. Si Adapty gère les achats pour vous, consultez Afficher des flows et des paywalls à la place.

Avant de commencer

Vous avez besoin de :

Adapty iOS SDK v4 ou version ultérieure : Les versions antérieures ne peuvent pas afficher les flows. Pour migrer une application existante depuis v3, consultez le guide de migration.
observerMode défini sur true : Consultez le guide d’installation du SDK iOS.
Intégration initiale avec le store : Configurez Adapty avec l’App Store.
Un flow publié avec des produits : Créez-le dans le Flow & Paywall Builder et associez-y des produits.
Un placement de flow : Créez un placement et assignez-y votre flow.
Le flow récupéré dans votre application : Obtenez le flow et sa configuration avant de l’afficher.

Implémentation

Implémentez l’objet 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
}

Créez un objet de configuration de flow, en passant votre resolver comme paramètre observerModeResolver: :

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

Paramètres de la requête :

Paramètre	Présence	Description
forFlow	required	Un objet `AdaptyFlow` obtenu via `Adapty.getFlow(placementId:)`. Voir Obtenir des flows et des paywalls.
observerModeResolver	required	Le `AdaptyObserverModeResolver` que vous avez implémenté ci-dessus.

Initialisez le contrôleur de flow avec AdaptyUI.flowController(with:delegate:) :

import AdaptyUI

let visualFlow = try AdaptyUI.flowController(
    with: flowConfiguration,
    delegate: <AdaptyFlowControllerDelegate>
)

Paramètres de la requête :

Paramètre	Présence	Description
flowConfiguration	requis	Un objet `AdaptyUI.FlowConfiguration` contenant les détails visuels du flow. Voir Obtenir les flows et les paywalls.
delegate	requis	Un `AdaptyFlowControllerDelegate` pour écouter les événements du flow. Voir Gérer les événements flow & paywall.

Retourne :

Objet	Description
AdaptyFlowController	Un objet représentant l’écran de flow demandé.

Présentez le contrôleur :
```
present(visualFlow, animated: true)
```

Warning

N’oubliez pas d’associer les paywalls aux transactions d’achat. Sans cela, Adapty ne pourra pas identifier le paywall source de l’achat.

Dans SwiftUI, récupérez la configuration du flow avec le resolver et passez-la au modifier .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>
            )
        }
}

Le paramètre observerModeResolver: sur getFlowConfiguration est ce qui permet au flow rendu de respecter votre logique d’achat personnalisée — le modificateur lui-même utilise les mêmes callbacks qu’en mode complet.

Warning

N’oubliez pas d’associer les paywalls aux transactions d’achat. Sinon, Adapty ne pourra pas déterminer le paywall source de l’achat.

Avant de commencer à afficher les paywalls (Cliquez pour développer)

Configurez l’intégration initiale d’Adapty avec Google Play et avec l’App Store.
Installez et configurez le SDK Adapty. Assurez-vous de définir le paramètre observerMode sur true. Consultez nos instructions spécifiques à chaque framework pour iOS.
Créez des produits dans l’Adapty Dashboard.
Configurez des paywalls, assignez-leur des produits et personnalisez-les avec le Paywall Builder dans l’Adapty Dashboard.
Créez des placements et assignez-leur vos paywalls dans l’Adapty Dashboard.
Récupérez les paywalls Paywall Builder et leur configuration dans le code de votre application mobile.

Implémentez l’objet 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
}

L’événement observerMode(didInitiatePurchase:onStartPurchase:onFinishPurchase:) vous informera que l’utilisateur a initié un achat. Vous pouvez déclencher votre propre flow d’achat personnalisé en réponse à ce callback.

L’événement observerModeDidInitiateRestorePurchases(onStartRestore:onFinishRestore:) vous informera que l’utilisateur a initié une restauration. Vous pouvez déclencher votre propre flow de restauration personnalisé en réponse à ce callback.

Pensez également à appeler les callbacks suivants pour notifier AdaptyUI de l’avancement de l’achat ou de la restauration. Cela est nécessaire au bon fonctionnement du paywall, notamment pour l’affichage du chargement, entre autres :

Callback	Description
onStartPurchase()	Ce callback doit être invoqué pour notifier AdaptyUI que l’achat a démarré.
onFinishPurchase()	Ce callback doit être invoqué pour notifier AdaptyUI que l’achat est terminé.
onStartRestore()	Ce callback doit être invoqué pour notifier AdaptyUI que la restauration a démarré.
onFinishRestore()	Ce callback doit être invoqué pour notifier AdaptyUI que la restauration est terminée.

Créez un objet de configuration de paywall :

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

Paramètres de la requête :

Paramètre	Présence	Description
Paywall	requis	Un objet `AdaptyPaywall` permettant d’obtenir un contrôleur pour le paywall souhaité.
ObserverModeResolver	requis	L’objet `AdaptyObserverModeResolver` que vous avez implémenté à l’étape précédente.

Initialisez le paywall visuel que vous souhaitez afficher en utilisant la méthode .paywallController(for:products:viewConfiguration:delegate:) :

import AdaptyUI

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

Paramètres de la requête :

Paramètre	Présence	Description
Paywall Configuration	required	Un objet `AdaptyUI.PaywallConfiguration` contenant les détails visuels du paywall. Utilisez la méthode `AdaptyUI.getPaywallConfiguration(forPaywall:locale:)`. Consultez la rubrique Récupérer les paywalls Paywall Builder et leur configuration pour plus de détails.
Delegate	required	Un `AdaptyPaywallControllerDelegate` pour écouter les événements du paywall. Consultez la rubrique Gérer les événements du paywall pour plus de détails.

Retours :

Objet	Description
AdaptyPaywallController	Un objet représentant l’écran de paywall demandé

Une fois l’objet créé avec succès, vous pouvez l’afficher comme suit :

present(visualPaywall, animated: true)

Warning

N’oubliez pas d’associer les paywalls aux transactions d’achat. Sinon, Adapty ne pourra pas déterminer le paywall source de l’achat.

Pour afficher le paywall visuel sur l’écran de l’appareil, utilisez le modificateur .paywall dans 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)

Paramètre	Présence	Description
Paywall Configuration	requis	Un objet `AdaptyUI.PaywallConfiguration` contenant les détails visuels du paywall. Utilisez la méthode `AdaptyUI.getPaywallConfiguration(forPaywall:locale:)`. Consultez la rubrique Récupérer les paywalls du Paywall Builder et leur configuration pour plus de détails.
Products	optionnel	Fournissez un tableau d’objets `AdaptyPaywallProduct` pour optimiser le temps d’affichage des produits à l’écran. Si `nil` est passé, AdaptyUI récupérera automatiquement les produits nécessaires.
TagResolver	optionnel	Définissez un dictionnaire de balises personnalisées et leurs valeurs résolues. Les balises personnalisées servent de marqueurs substitutifs dans le contenu du paywall, remplacées dynamiquement par des chaînes spécifiques pour un contenu personnalisé. Consultez la rubrique Balises personnalisées dans le Paywall Builder pour plus de détails.
ObserverModeResolver	optionnel	L’objet `AdaptyObserverModeResolver` que vous avez implémenté à l’étape précédente

Paramètres de closure :

Paramètre de closure	Description
didFinishRestore	Si Adapty.restorePurchases() réussit, ce callback sera invoqué.
didFailRestore	Si Adapty.restorePurchases() échoue, ce callback sera invoqué.
didFailRendering	Si une erreur survient lors du rendu de l’interface, ce callback sera invoqué.

Référez-vous à la rubrique iOS - Gestion des événements pour les autres paramètres de fermeture.

Warning

N’oubliez pas d’associer les paywalls aux transactions d’achat. Sinon, Adapty ne pourra pas déterminer le paywall source de l’achat.

Before you start presenting paywalls (Click to Expand)

Configurez l’intégration initiale d’Adapty avec Google Play et avec l’App Store.
Installez et configurez le SDK Adapty. Assurez-vous de définir le paramètre observerMode sur true. Consultez nos instructions par framework pour iOS, React Native, Flutter, et Unity.
Créez des produits dans l’Adapty Dashboard.
Configurez des paywalls, assignez-leur des produits et personnalisez-les avec le Paywall Builder dans l’Adapty Dashboard.
Créez des placements et assignez-leur vos paywalls dans l’Adapty Dashboard.
Récupérez les paywalls Paywall Builder et leur configuration dans le code de votre application mobile.

Implémentez l’objet 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
}

Le événement paywallController(_:didInitiatePurchase:onStartPurchase:onFinishPurchase:) vous informe que l’utilisateur a initié un achat. Vous pouvez déclencher votre flow d’achat personnalisé en réponse à cet événement.

N’oubliez pas non plus d’invoquer les callbacks suivants pour notifier AdaptyUI de l’avancement de l’achat. Cela est nécessaire pour le bon comportement du paywall, notamment pour afficher le chargeur, entre autres :

Callback	Description
onStartPurchase	Ce callback doit être invoqué pour informer AdaptyUI que l’achat a démarré.
onFinishPurchase	Ce callback doit être invoqué pour informer AdaptyUI que l’achat est terminé.

Initialisez le paywall visuel à afficher en utilisant la méthode .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>
)

Paramètres de la requête :

Paramètre	Présence	Description
Paywall	requis	Un objet `AdaptyPaywall` pour obtenir un contrôleur pour le paywall souhaité.
Products	optionnel	Fournissez un tableau d’objets `AdaptyPaywallProduct` pour optimiser le moment d’affichage des produits à l’écran. Si `nil` est passé, AdaptyUI récupérera automatiquement les produits nécessaires.
ViewConfiguration	requis	Un objet `AdaptyUI.LocalizedViewConfiguration` contenant les détails visuels du paywall. Utilisez la méthode `AdaptyUI.getViewConfiguration(paywall:locale:)`. Consultez la rubrique Récupérer les paywalls du Paywall Builder et leur configuration pour plus de détails.
Delegate	requis	Un `AdaptyPaywallControllerDelegate` pour écouter les événements du paywall. Consultez la rubrique Gérer les événements du paywall pour plus de détails.
ObserverModeDelegate	requis	L’objet `AdaptyObserverModeDelegate` que vous avez implémenté à l’étape précédente.
TagResolver	optionnel	Définissez un dictionnaire de balises personnalisées et leurs valeurs résolues. Les balises personnalisées servent de variables dans le contenu du paywall, remplacées dynamiquement par des chaînes spécifiques pour un contenu personnalisé. Consultez la rubrique Balises personnalisées dans le Paywall Builder pour plus de détails.

Retours :

Objet	Description
AdaptyPaywallController	Un objet représentant l’écran de paywall demandé

Une fois l’objet créé avec succès, vous pouvez l’afficher comme suit :

present(visualPaywall, animated: true)

Warning

N’oubliez pas d’Associer les paywalls aux transactions d’achat. Sinon, Adapty ne pourra pas déterminer le paywall source de l’achat.

Pour afficher le paywall visuel sur l’écran de l’appareil, utilisez le modificateur .paywall dans 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)

Paramètre	Présence	Description
Paywall	requis	Un objet `AdaptyPaywall` permettant d’obtenir un contrôleur pour le paywall souhaité.
Product	optionnel	Fournissez un tableau d’objets `AdaptyPaywallProduct` pour optimiser le moment d’affichage des produits à l’écran. Si `nil` est passé, AdaptyUI récupère automatiquement les produits nécessaires.
Configuration	requis	Un objet `AdaptyUI.LocalizedViewConfiguration` contenant les détails visuels du paywall. Utilisez la méthode `AdaptyUI.getViewConfiguration(paywall:locale:)`. Consultez la rubrique Récupérer les paywalls du Paywall Builder et leur configuration pour plus de détails.
TagResolver	optionnel	Définissez un dictionnaire de balises personnalisées et leurs valeurs résolues. Les balises personnalisées servent d’espaces réservés dans le contenu du paywall, remplacés dynamiquement par des chaînes spécifiques pour personnaliser le contenu du paywall. Consultez la rubrique Custom tags in paywall builder pour plus de détails.

Closure parameters:

Paramètre de closure	Description
didFinishRestore	Si Adapty.restorePurchases() réussit, ce callback sera invoqué.
didFailRestore	Si Adapty.restorePurchases() échoue, ce callback sera invoqué.
didFailRendering	Si une erreur survient pendant le rendu de l’interface, ce callback sera invoqué.
observerModeDidInitiatePurchase	Ce callback est invoqué lorsqu’un utilisateur initie un achat.

Reportez-vous à la rubrique iOS - Gestion des événements pour les autres paramètres de fermeture.

Warning

N’oubliez pas d’Associer les paywalls aux transactions d’achat. Sinon, Adapty ne pourra pas déterminer le paywall source de l’achat.