Activer les achats avec Flow & Paywall Builder dans le SDK Capacitor

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 – séquences d’écrans qui présentent des produits aux utilisateurs, créées dans le Flow & Paywall Builder sans code. Le SDK les récupère via getFlow. Si vous préférez créer l’interface dans votre propre code, utilisez plutôt un paywall — voir Implémenter les paywalls manuellement.
• Placements – où et quand vous affichez les flows dans votre application (par exemple main, onboarding, settings). Vous associez les flows aux placements dans le tableau de bord, puis vous les demandez par identifiant de placement dans votre code. Cela facilite l’exécution de tests A/B et l’affichage de flows différents selon les utilisateurs.

Adapty vous propose trois façons d’activer les achats dans votre application. Choisissez-en une selon les besoins de votre application :

Pour afficher un flow créé dans l’Adapty Flow & Paywall Builder, dans le code de votre application, vous avez seulement besoin de :

1. Récupérer le flow : Récupérez-le depuis Adapty.
2. Affichez-le et Adapty gère les achats pour vous : Affichez la vue dans votre application.
3. Gérer les actions des boutons : Associez les interactions utilisateur aux réponses de votre application. Par exemple, ouvrez des liens ou fermez le flow 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 l’Adapty Dashboard.
2. Créez vos produits dans Adapty.
3. Créez un flow et ajoutez-y des produits.
4. Créez un placement et ajoutez-y votre flow.
5. Installez et activez le SDK dans le code de votre application. Ce guide utilise les API du SDK Adapty Capacitor v4.

1. Récupérer le flow

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

Pour récupérer un flow créé dans l’Adapty Flow & Paywall Builder, obtenez l’objet flow à partir de l’identifiant du placement en utilisant la méthode getFlow. Le flow contient les éléments d’interface et les styles nécessaires à son affichage.

try {
  const flow = await adapty.getFlow({
    placementId: 'YOUR_PLACEMENT_ID',
  });
  // the requested flow
} catch (error) {
  // handle the error
}

2. Afficher le flow

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

Créez une view avec la méthode createFlowView, définissez ses gestionnaires d’événements, puis appelez view.present(). Chaque view ne peut être utilisée qu’une seule fois. Si vous devez afficher le flow à nouveau, appelez createFlowView une nouvelle fois pour créer une nouvelle instance de view.

try {
  const view = await createFlowView(flow);

  await view.setEventHandlers({
    onPurchaseCompleted(purchaseResult, product) {
      return purchaseResult.type === 'success'; // close the flow on a successful purchase, keep it open for cancelled or pending purchases
    },
  });

  await view.present();
} catch (error) {
  // handle the error
}

3. Gérer les actions des boutons

Lorsque les utilisateurs cliquent sur des boutons dans le flow, le SDK Capacitor gère automatiquement les achats, la restauration, la fermeture du flow et l’ouverture des URLs.

Cependant, d’autres boutons ont des identifiants personnalisés ou prédéfinis et nécessitent une gestion des actions dans votre code. Ou bien, vous pouvez souhaiter 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.

const unsubscribe = await view.setEventHandlers({
  onCloseButtonPress() {
    return true; // allow the flow to close
  },
});

Étapes suivantes

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

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

Exemple complet

Voici comment toutes les étapes de ce guide peuvent être intégrées ensemble dans votre application.

export async function showFlow() {
  try {
    const flow = await adapty.getFlow({
      placementId: 'YOUR_PLACEMENT_ID',
    });

    const view = await createFlowView(flow);

    await view.setEventHandlers({
      onCloseButtonPress() {
        return true;
      },
      onPurchaseCompleted(purchaseResult, product) {
        return purchaseResult.type === 'success'; // close the flow on a successful purchase, keep it open for cancelled or pending purchases
      },
    });

    await view.present();
  } catch (error) {
    // handle any error that may occur during the process
    console.warn('Error showing flow:', error);
  }
}