Activer les achats dans votre paywall personnalisé avec le SDK React Native

Ce guide explique comment intégrer Adapty dans vos paywalls personnalisés. Gardez le contrôle total de l’implémentation du paywall, pendant que le SDK Adapty récupère les produits, gère les nouveaux achats et restaure les achats précédents.

Avant de commencer

Configurer les produits

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)
• Paywalls – configurations qui définissent quels produits proposer. Dans Adapty, les paywalls sont le seul moyen de récupérer des produits, mais cette conception vous permet de modifier les produits, les prix et les offres sans toucher au code de votre app.
• Placements – où et quand vous affichez les paywalls dans votre app (comme main, onboarding, settings). Vous configurez les paywalls pour les placements dans le tableau de bord, puis vous les demandez par ID de placement dans votre code. Cela facilite l’exécution de tests A/B et l’affichage de paywalls différents à différents utilisateurs.

Assurez-vous de bien comprendre ces concepts même si vous travaillez avec votre paywall personnalisé. En résumé, c’est simplement votre façon de gérer les produits que vous vendez dans votre app.

Pour implémenter votre paywall personnalisé, vous devrez créer un paywall et l’ajouter à un placement. Cette configuration vous permet de récupérer vos produits. Pour comprendre ce que vous devez faire dans le tableau de bord, suivez le guide de démarrage rapide ici.

Gérer les utilisateurs

Vous pouvez travailler avec ou sans authentification backend de votre côté.

Cependant, le SDK Adapty gère différemment les utilisateurs anonymes et identifiés. Lisez le guide de démarrage rapide sur l’identification pour comprendre les spécificités et vous assurer de bien gérer vos utilisateurs.

Étape 1. Obtenir les produits

Pour récupérer les produits de votre paywall personnalisé, vous devez :

1. Obtenir l’objet flow en passant l’ID du placement à la méthode getFlow.
2. Obtenir le tableau des produits pour ce flow à l’aide de la méthode getPaywallProducts.

async function loadPaywall() {
  try {
    const flow: AdaptyFlow = await adapty.getFlow('YOUR_PLACEMENT_ID');
    const products: AdaptyPaywallProduct[] = await adapty.getPaywallProducts(flow);
    
    // Use products to build your custom paywall UI
  } catch (error) {
    // Handle the error
  }
}

Étape 2. Accepter les achats

Lorsqu’un utilisateur appuie sur un produit dans votre paywall personnalisé, appelez la méthode makePurchase avec le produit sélectionné. Cela gérera le flux d’achat et retournera le profil mis à jour.

async function purchaseProduct(product: AdaptyPaywallProduct) {
  try {
    const purchaseResult: AdaptyPurchaseResult = await adapty.makePurchase(product);
    
    switch (purchaseResult.type) {
      case 'success':
        // Purchase successful, profile updated
        break;
      case 'user_cancelled':
        // User canceled the purchase
        break;
      case 'pending':
        // Purchase is pending (e.g., user will pay offline with cash)
        break;
    }
  } catch (error) {
    // Handle the error
  }
}

Étape 3. Restaurer les achats

Les stores d’applications exigent que toutes les apps avec des abonnements proposent un moyen pour les utilisateurs de restaurer leurs achats.

Appelez la méthode restorePurchases lorsque l’utilisateur appuie sur le bouton de restauration. Cela synchronisera son historique d’achats avec Adapty et retournera le profil mis à jour.

async function restorePurchases() {
  try {
    const profile: AdaptyProfile = await adapty.restorePurchases();
    // Restore successful, profile updated
  } catch (error) {
    // Handle the error
  }
}

Prochaines étapes

Votre paywall est prêt à être affiché dans l’app. Testez vos achats dans le sandbox App Store ou dans Google Play Store pour vous assurer de pouvoir effectuer un achat test depuis le paywall. Pour voir comment cela fonctionne dans une implémentation prête pour la production, consultez CustomPurchaseScreen.tsx dans notre exemple d’app, qui illustre la gestion des achats avec une gestion appropriée des erreurs, des états de chargement et la gestion de l’état de l’interface.

Ensuite, vérifiez si les utilisateurs ont finalisé leur achat pour déterminer si vous devez afficher le paywall ou accorder l’accès aux fonctionnalités payantes.