Activer les achats avec Flow & Paywall Builder dans le SDK Kotlin Multiplatform

Ce guide utilise les APIs du SDK Adapty Kotlin Multiplatform v4 (beta). Si vous utilisez la v3, consultez le guide de migration pour les noms de méthodes correspondants.

Pour activer les achats intégrés, vous devez comprendre trois concepts clés :

  • Produits – tout ce que les utilisateurs peuvent acheter (abonnements, consommables, accès à vie)
  • Flows & paywalls – les écrans qui présentent les produits aux utilisateurs, conçus dans le Flow & Paywall Builder sans code. Le SDK les récupère via getFlow. Si vous préférez construire l’interface dans votre propre code, consultez Implémenter des paywalls personnalisés.
  • Placements – où et quand vous affichez les flows & paywalls dans votre application (par exemple main, onboarding, settings). Vous les associez à des placements dans le tableau de bord, puis les demandez par identifiant de placement dans votre code. Cela facilite la mise en place de tests A/B et l’affichage de versions différentes selon les utilisateurs.

Adapty vous propose trois façons d’activer les achats dans votre application. Sélectionnez celle qui correspond à vos besoins :

ImplémentationComplexitéQuand l’utiliser
Adapty Flow & Paywall Builder✅ FacileVous créez un flow ou un paywall complet et prêt à l’achat dans le builder no-code. Adapty l’affiche automatiquement et gère toute la logique d’achat complexe, la validation des reçus et la gestion des abonnements en arrière-plan.
Paywalls personnalisés🟡 MoyenVous implémentez l’interface de votre paywall dans le code de votre application, mais récupérez quand même l’objet flow depuis Adapty pour conserver de la flexibilité dans vos offres de produits. Voir le guide.
Mode observateur🔴 DifficileVous disposez déjà de votre propre infrastructure de gestion des achats et souhaitez continuer à l’utiliser. Notez que le mode observateur présente des limitations dans Adapty. Voir l’article.
Important

Les étapes ci-dessous montrent comment implémenter un flow ou un paywall créé dans l’Adapty Flow & Paywall Builder.

Si vous préférez construire l’interface du paywall vous-même, consultez Implémenter des paywalls personnalisés.

Pour afficher un flow ou un paywall créé dans l’Adapty Flow & Paywall Builder, dans le code de votre application, vous devez simplement :

  1. Récupérez le flow ou le paywall : Récupérez-le depuis Adapty.
  2. Affichez-le et Adapty gère les achats pour vous : Montrez la vue dans votre application.
  3. Gérez les actions des boutons : Associez les interactions utilisateur aux réponses correspondantes dans votre application. Par exemple, ouvrez des liens ou fermez le paywall lorsque les utilisateurs cliquent sur des boutons.

Avant de commencer

Avant de commencer, effectuez les étapes suivantes :

  1. Connectez votre application à l’App Store et/ou à Google Play dans le Adapty Dashboard.
  2. Créez vos produits dans Adapty.
  3. Créez un flow ou un paywall et ajoutez-y des produits.
  4. Créez un placement et ajoutez-y votre flow ou paywall.
  5. Installez et activez le SDK Adapty dans le code de votre application.
Tip

Le moyen le plus rapide d’effectuer ces étapes est de suivre le guide de démarrage rapide ou de créer des flows et des placements via la Developer CLI.

1. Récupérer le flow ou le paywall

Vos flows et paywalls sont associés à des placements configurés dans le tableau de bord. Les placements vous permettent d’afficher différents flows ou paywalls selon les audiences ou de lancer des tests A/B.

Pour récupérer un flow ou un paywall créé dans le Adapty Flow & Paywall Builder, vous devez :

  1. Récupérer l’objet flow par l’ID du placement en utilisant la méthode getFlow.

  2. Créez la vue du flow avec la méthode createFlowView. La vue contient les éléments d’interface et les styles nécessaires à son affichage. Si le flow n’a pas de vue configurée, createFlowView renvoie une erreur — gérez-la dans onError.

Important

Pour obtenir la vue, publiez le flow ou le paywall. Un flow ou un paywall avec des modifications non publiées a le statut Dirty, et son placement continue de servir la dernière version publiée.

Adapty.getFlow("YOUR_PLACEMENT_ID")
    .onSuccess { flow ->
        AdaptyUI.createFlowView(flow)
            .onSuccess { view ->
                view.present()
            }
            .onError { error ->
                // the flow has no view configured, or view creation failed
            }
    }
    .onError { error ->
        // handle the error
    }

2. Afficher le flow ou le paywall

Maintenant que vous avez le flow, il suffit d’ajouter quelques lignes pour l’afficher.

Pour afficher le flow visuel sur l’écran de l’appareil, vous devez d’abord créer la vue. Pour cela, appelez la méthode AdaptyUI.createFlowView() :

AdaptyUI.createFlowView(flow)
    .onSuccess { view ->
        view.present()
    }
    .onError { error ->
        // handle the error
    }

Une fois la vue créée avec succès, vous pouvez la présenter à l’écran de l’appareil. Chaque vue ne peut être utilisée qu’une seule fois : après avoir appelé dismiss(), appelez à nouveau createFlowView pour afficher le flow une nouvelle fois.

Tip

Pour plus de détails sur la façon d’afficher un flow ou un paywall, consultez notre guide.

3. Gérer les actions des boutons

Quand les utilisateurs cliquent sur des boutons dans le flow ou le paywall, le SDK Kotlin Multiplatform gère automatiquement les achats, la restauration, la fermeture de l’écran et l’ouverture de liens.

Cependant, certains boutons ont des identifiants personnalisés ou prédéfinis et nécessitent une gestion des actions dans votre code. Vous pouvez également vouloir remplacer leur comportement par défaut.

Par exemple, voici le comportement par défaut du bouton de fermeture. Vous n’avez pas besoin de l’ajouter dans le code, mais vous pouvez voir ici comment procéder si nécessaire.

Notez que, par défaut, le flow reste ouvert après un achat réussi. Si vous souhaitez le fermer une fois l’achat terminé, fermez la vue dans le callback flowViewDidFinishPurchase.

Tip

Consultez nos guides sur la gestion des actions et des événements des boutons.

AdaptyUI.setFlowsEventsObserver(object : AdaptyUIFlowsEventsObserver {
    override fun flowViewDidPerformAction(view: AdaptyUIFlowView, action: AdaptyUIAction) {
        when (action) {
            is AdaptyUIAction.CloseAction -> mainUiScope.launch { view.dismiss() }
            else -> Unit
        }
    }

    override fun flowViewDidFinishPurchase(
        view: AdaptyUIFlowView,
        product: AdaptyPaywallProduct,
        purchaseResult: AdaptyPurchaseResult
    ) {
        if (purchaseResult !is AdaptyPurchaseResult.UserCanceled) {
            mainUiScope.launch { view.dismiss() }
        }
    }
})

Étapes suivantes

Votre flow ou paywall est prêt à être affiché dans l’application. Testez vos achats dans le sandbox de l’App Store ou dans le Google Play Store pour vous assurer de pouvoir effectuer un achat test depuis le flow.

Ensuite, vous devez vérifier le niveau d’accès des utilisateurs pour vous assurer d’afficher un paywall ou de donner accès aux fonctionnalités payantes aux bons utilisateurs.

Exemple complet

Voici comment intégrer toutes ces étapes ensemble dans votre application.

// Set up the observer for handling flow events
AdaptyUI.setFlowsEventsObserver(object : AdaptyUIFlowsEventsObserver {
    override fun flowViewDidPerformAction(view: AdaptyUIFlowView, action: AdaptyUIAction) {
        when (action) {
            is AdaptyUIAction.CloseAction -> mainUiScope.launch { view.dismiss() }
            else -> Unit
        }
    }

    override fun flowViewDidFinishPurchase(
        view: AdaptyUIFlowView,
        product: AdaptyPaywallProduct,
        purchaseResult: AdaptyPurchaseResult
    ) {
        if (purchaseResult !is AdaptyPurchaseResult.UserCanceled) {
            mainUiScope.launch { view.dismiss() }
        }
    }
})

// Get and display the flow
Adapty.getFlow("YOUR_PLACEMENT_ID")
    .onSuccess { flow ->
        AdaptyUI.createFlowView(flow)
            .onSuccess { view ->
                view.present()
            }
            .onError { error ->
                // the flow has no view configured — use custom logic
            }
    }
    .onError { error ->
        // handle the error
    }