Afficher les paywalls Paywall Builder en mode Observer dans le SDK iOS

Si vous avez personnalisé un paywall avec le Paywall Builder, vous n’avez pas à vous soucier de son rendu dans le code de votre application mobile pour l’afficher à l’utilisateur. Un tel paywall contient à la fois ce qui doit être affiché et comment il doit l’être.

Cette section concerne uniquement le mode Observer. Si vous ne travaillez pas en mode Observer, consultez iOS - Afficher les paywalls Paywall Builder.

Avant de commencer à afficher des flows (cliquez pour développer)

Configurez l’intégration initiale d’Adapty avec l’App Store.
Installez et configurez le SDK Adapty. Assurez-vous de définir le paramètre observerMode sur true. Consultez le guide d’installation du SDK iOS.
Créez des produits dans l’Adapty Dashboard.
Configurez des flows ou des paywalls dans les builders et assignez-leur des produits.
Créez des placements et assignez-leur vos flows ou paywalls.
Récupérez les flows et leur configuration dans le code de votre application mobile.

Implémentez l’objet AdaptyObserverModeResolver. Le protocole est identique à celui du SDK v3 — le mode observer lui-même ne change pas entre le rendu des flows et des 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
}

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	requis	Un objet `AdaptyFlow` obtenu via `Adapty.getFlow(placementId:)`. Voir Obtenir les flows et paywalls.
observerModeResolver	requis	L’`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 paywalls.
delegate	requis	Un `AdaptyFlowControllerDelegate` pour écouter les événements du flow. Voir Gérer les événements de flow & paywall.

Retourne :

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

Affichez le contrôleur :
```
present(visualFlow, animated: true)
```

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

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

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 des 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 par 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: @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
}

L’événement observerMode(didInitiatePurchase:onStartPurchase:onFinishPurchase:) vous informe 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 informe que l’utilisateur a initié une restauration. Vous pouvez déclencher votre propre flow de restauration personnalisé en réponse à ce callback.

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

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` pour 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 avec 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	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 Paywall Builder et leur configuration pour plus de détails.
Delegate	requis	Un `AdaptyPaywallControllerDelegate` pour écouter les événements du paywall. Consultez la rubrique Gestion des événements paywall pour plus de détails.

Retourne :

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

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

present(visualPaywall, animated: true)

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

Paramètres de la requête :

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 Paywall Builder et leur configuration pour plus de détails.
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.
TagResolver	optionnel	Définissez un dictionnaire de tags personnalisés et leurs valeurs résolues. Les tags personnalisés servent de placeholders dans le contenu du paywall, remplacés dynamiquement par des chaînes spécifiques pour un contenu personnalisé. Consultez la rubrique Tags personnalisés 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	Invoqué si `Adapty.restorePurchases()` réussit.
didFailRestore	Invoqué si `Adapty.restorePurchases()` échoue.
didFailRendering	Invoqué si une erreur survient lors du rendu de l’interface.

Consultez la rubrique iOS - Gestion des événements pour les autres paramètres de closure.

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

L’événement paywallController(_:didInitiatePurchase:onStartPurchase:onFinishPurchase:) vous informe que l’utilisateur a initié un achat. Vous pouvez déclencher votre propre 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 loader :

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é.

Initialisez le paywall visuel que vous souhaitez afficher avec 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 Paywall Builder et leur configuration pour plus de détails.
Delegate	requis	Un `AdaptyPaywallControllerDelegate` pour écouter les événements du paywall. Consultez la rubrique Gestion des événements 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 tags personnalisés et leurs valeurs résolues. Les tags personnalisés servent de placeholders dans le contenu du paywall, remplacés dynamiquement par des chaînes spécifiques pour un contenu personnalisé. Consultez la rubrique Tags personnalisés dans le Paywall Builder pour plus de détails.

Retourne :

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

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

present(visualPaywall, animated: true)

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

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é.
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érera 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 Paywall Builder et leur configuration pour plus de détails.
TagResolver	optionnel	Définissez un dictionnaire de tags personnalisés et leurs valeurs résolues. Les tags personnalisés servent de placeholders dans le contenu du paywall, remplacés dynamiquement par des chaînes spécifiques pour un contenu personnalisé. Consultez la rubrique Tags personnalisés dans le Paywall Builder pour plus de détails.

Paramètres de closure :

Paramètre de closure	Description
didFinishRestore	Invoqué si `Adapty.restorePurchases()` réussit.
didFailRestore	Invoqué si `Adapty.restorePurchases()` échoue.
didFailRendering	Invoqué si une erreur survient lors du rendu de l’interface.
observerModeDidInitiatePurchase	Invoqué lorsqu’un utilisateur initie un achat.

Consultez la rubrique iOS - Gestion des événements pour les autres paramètres de closure.

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