achats in-app pour capacitor

Ce plugin a été transféré vers le dépôt officiel de RevenueCat. Veuillez consulter documentation officielle pour plus d'informations.

Si vous préférez un API natif plus simple sans RevenueCat, @capgo/native-purchases implémente les achats in-app et les abonnements directement avec StoreKit et Google Play Billing.

Capacitor Purchases est un plugin pour le framework Capacitor qui permet de gérer les achats in-app sur iOS et Android. Il offre une API simple et cohérente sur plusieurs plateformes, facilitant ainsi l'implémentation des abonnements et des achats in-app dans les applications mobiles.

L'un des atouts majeurs du plugin Capacitor Purchases est son intégration avec RevenueCat, une plateforme qui fournit des outils pour les abonnements et les achats in-app. RevenueCat simplifie le processus d'implémentation en offrant une API simple et cohérente sur plusieurs plateformes, tout en automatisant des tâches comme la validation des reçus et la gestion des utilisateurs.

Avec RevenueCat, les développeurs peuvent facilement gérer les abonnements, suivre les revenus et effectuer d'autres tâches connexes. Parmi les fonctionnalités proposées par RevenueCat :

• Validation automatisée des reçus
• Gestion des utilisateurs
• Support des modèles de tarification personnalisés
• Analyses détaillées - Scalabilité

En utilisant le plugin Capacitor Purchases avec RevenueCat, les développeurs gagnent du temps et de l'énergie lors de l'implémentation des abonnements et achats in-app, tout en proposant des fonctionnalités supplémentaires pour améliorer l'expérience utilisateur et augmenter les revenus.

Avec le plugin Capacitor Purchases et RevenueCat, les développeurs peuvent facilement gérer et suivre les abonnements et achats in-app, valider les reçus et gérer les utilisateurs sur plusieurs plateformes. Il permet aussi de créer des modèles de tarification personnalisés et d'obtenir des statistiques détaillées pour améliorer les performances et les revenus.

Installation

Assurez-vous d'utiliser la dernière version de Capacitor et du plugin Capacitor Purchases. Vous pouvez vérifier la dernière version de Capacitor et du plugin Capacitor Purchases sur le site de Capacitor.

Pour installer le plugin Capacitor Purchases, exécutez la commande suivante : npm i @capgo/capacitor-purchases ajouter le plugin à votre app native code npx cap sync

ajouter la capacité d'achats in-app dans Xcode :

puis

1. Créer un compte RevenueCat

Ce guide vous accompagnera pour mettre en place les abonnements et le SDK de RevenueCat avec seulement quelques lignes de code.

Créer un compte RevenueCat ici.

📘

💡 Un petit conseil !

RevenueCat recommande de créer un compte RevenueCat distinct pour chaque application ou projet, surtout si vous envisagez de vendre l'app. Cela accélérera le processus de transfert, car vous pourrez transférer l'intégralité du compte au lieu d'attendre que le support RevenueCat transfère chaque projet individuellement.

Organisations / Entreprise

Nous recommandons d'utiliser un compte d'entreprise lors de votre inscription à RevenueCat et de configurer votre app au sein d'un projet. Vous pourrez inviter le reste de votre équipe en tant que collaborateurs sur votre projet, mais seul le propriétaire du projet peut gérer la facturationLes collaborateurs du projet ne peuvent pas gérer les détails de facturation.

2. Configuration du projet et de l'app

▶️ Créer un projet

Accédez au dashboard RevenueCat et ajouter un nouveau projet depuis le menu déroulant de la navigation supérieure nommé Projets.

La fenêtre modale de création d'un nouveau projet

▶️ Ajouter une app / plateforme

Depuis Paramètres du projet > Apps dans le menu de gauche du dashboard du projet, sélectionnez la plateforme de l'app que vous allez ajouter.

Dashboard du projet pour sélectionner la plateforme de l'app

Le champ Nom de l'app est requis pour ajouter votre app à RevenueCat. Les autres champs de configuration pourront être ajoutés plus tard. Pour effectuer des achats de test et de production, le Bundle ID (iOS) / Package Name (Android) ainsi que le Shared Secret (iOS) / Service Credentials (Android) doivent être configurés.

Page de configuration de l'app pour une application Apple App Store

📘

💡 Un petit conseil !

Après avoir enregistré votre app, RevenueCat recommande de configurer les Notifications serveur de la plateforme. Ces notifications ne sont pas obligatoires, mais elles accéléreront les webhooks et les délais d'intégration, tout en réduisant le temps de latence lors de la mise à jour de vos abonnés.

📘

Apps et utilisateurs : Staging vs Production

RevenueCat ne possède pas d'environnements distincts pour le staging et la production. Les transactions des utilisateurs sont plutôt différenciées par le sandbox et la production.

Toute application RevenueCat peut effectuer des achats en sandbox et en production sur les stores. Si vous utilisez des applications distinctes pour le staging et la production, vous pouvez créer plusieurs projets dans RevenueCat pour refléter votre configuration.

De plus, les utilisateurs ne sont pas non plus séparés par environnement. Un même utilisateur peut avoir des achats sandbox et des achats en production actifs simultanément.

▶️ Identifiants de service

Les identifiants de service doivent être configurés pour que RevenueCat puisse communiquer avec les stores en votre nom. Consultez les guides RevenueCat Secret partagé App Store Connect, Identifiants de service Play, et Secret partagé Amazon Appstore pour plus d'informations.

Notez que la propagation des identifiants de service Play peut prendre jusqu'à 36 heures sur les serveurs de Google.

3. Configuration des produits

▶️ Configuration du store

Avant d'utiliser RevenueCat pour récupérer vos produits, vous devez les configurer dans les stores respectifs. Consultez les guides suivants pour App Store Connect, Google Play Console, Amazon Appstore, et Stripe pour vous aider dans ce processus.

Si vous vendez des produits iOS, assurez-vous de signer votre « Paid Applications Agreement » et de renseigner vos informations bancaires et fiscales dans App Store Connect > Contrats, fiscalité et opérations bancaires. Cette étape doit être terminée avant de pouvoir tester des achats.

📘

Want to skip the store setup while testing?

Sur iOS, vous pouvez retarder la configuration des produits dans App Store Connect en testant avec des fichiers de configuration StoreKit. Ces fichiers nécessitent un minimum de configuration et sont paramétrables directement via Xcode.

En savoir plus sur la configuration des fichiers StoreKit dans le guide Tests en sandbox RevenueCat.

▶️ Configurer les produits et les entitlements dans RevenueCat

Une fois vos produits in-app configurés dans App Store Connect, Google Play Console, Amazon Appstore, ou Stripe, vous devrez copier cette configuration dans le dashboard RevenueCat. RevenueCat utilise un système d'Entitlements pour contrôler l'accès aux fonctionnalités premium, et des Offerings pour gérer l'ensemble des produits que vous proposez à vos clients.

Les Entitlements représentent le niveau d'accès auquel un client a « droit » après l'achat d'un produit spécifique. Les Offerings sont un moyen simple d'organiser les produits in-app que vous souhaitez « proposer » sur votre paywall et de les configurer à distance. RevenueCat recommande utilisez ces fonctionnalités pour simplifier votre code et modifier vos produits sans avoir à publier de nouvelle version de l'app.

Voir Configuration des produits pour configurer vos produits, puis les organiser en Offerings ou Entitlements.

4. Utilisation du SDK Purchases de RevenueCat

RevenueCat SDK permet d'implémenter les achats et abonnements de manière fluide sur toutes les plateformes, tout en synchronisant les tokens avec le serveur RevenueCat.

Si vous rencontrez des problèmes avec le SDK, consultez Dépannage des SDK pour obtenir de l'aide.

📘

Utilisez uniquement votre clé SDK publique pour configurer Purchases

Vous pouvez récupérer votre clé publique SDK depuis l'onglet API clés sous Paramètres du projet dans le dashboard.

Vous ne devez configurer l'instance partagée de Achats une seule fois, généralement au lancement de l'app. Ensuite, la même instance est partagée dans toute votre app en accédant au .shared instance dans le SDK.

Consultez le guide RevenueCat sur la configuration de SDK pour plus d'informations et de bonnes pratiques.

Assurez-vous de configurer Achats uniquement avec votre clé publique SDK. Vous pouvez en savoir plus sur les différentes clés API disponibles dans le guide d'authentification de RevenueCat.

import { CapacitorPurchases } from '@capgo/capacitor-purchases'
import { isPlatform } from '@ionic/vue' // use the right one for your framework

CapacitorPurchases.setDebugLogsEnabled({ enabled: import.meta.env.DEV }) // Enable to get debug logs in dev mode
if (isPlatform('ios')) {
    CapacitorPurchases.setup({ apiKey:'appl_******'})
} else if (isPlatform('android')) {
    CapacitorPurchases.setup({ apiKey:'goog_******'})
}

En phase de développement, RevenueCat recommande d'activer des logs de debug plus détaillés. Pour plus d'informations sur ces logs, consultez leur Débogage guide.

Si vous prévoyez d'utiliser RevenueCat avec votre code d'achat actuel, reportez-vous à leur guide sur le mode Observer.

📘

Configurer les achats avec les ID utilisateur

Si votre application possède un système d'authentification, vous pouvez fournir un identifiant utilisateur lors de la configuration ou plus tard via un appel à .logIn(). Pour en savoir plus, consultez le guide RevenueCat sur Identifier les utilisateurs.

SDK récupérera automatiquement les Offerings configurées et récupérera les informations produits auprès d'Apple, Google ou Amazon. Ainsi, les produits disponibles seront déjà chargés lorsque vos clients lanceront l'écran d'achat.

Voici un exemple de récupération des Offerings. Vous pouvez utiliser les Offerings pour organiser votre paywall. Consultez le guide RevenueCat sur l' Affichage des produits pour plus d'informations et de bonnes pratiques.

▶️ Récupérer et afficher les produits disponibles

📘

Configurer les achats avec les ID utilisateur

Si votre application possède un système d'authentification, vous pouvez fournir un identifiant utilisateur lors de la configuration ou plus tard via un appel à .logIn(). Pour en savoir plus, consultez le guide RevenueCat sur Identifier les utilisateurs.

SDK récupérera automatiquement les Offerings configurées et récupérera les informations produits d'Apple, Google ou Amazon. Ainsi, les produits disponibles seront déjà chargés lorsque vos clients ouvriront l'écran d'achat.

Voici un exemple de récupération des Offerings. Vous pouvez utiliser les Offerings pour organiser votre paywall. Voir le guide RevenueCat sur l' affichage des produits pour plus d'informations et de bonnes pratiques.

const { offerings } = await CapacitorPurchases.getOfferings()
if (offerings.current !== null) {  
    // Display current offering with offerings.current
}

Si la récupération de vos Offerings, produits, ou disponible packages disponibles est vide, cela est dû à un problème de configuration dans le store concerné.

Les raisons les plus courantes dans App Store Connect sont un « Paid Applications Agreement » obsolète ou des produits qui ne sont pas au moins à l'état « Ready To Submit ». Sur Google Play, cela arrive généralement quand l'app n'est pas publiée sur un canal fermé avec un utilisateur de test valide.

Vous trouverez plus d'informations pour résoudre ce problème dans le centre d'aide RevenueCat Centre d'aide.

▶️ Effectuer un achat

Le SDK inclut une méthode simple pour faciliter les achats. La purchase:package récupère un package depuis l'Offering récupéré et traite la transaction avec le store respectif.

L'exemple code ci-dessous montre le processus d'achat d'un package et confirme qu'il débloque le contenu « your_entitlement_id ». Plus de détails sur la purchase:package méthode sont disponibles dans le guide RevenueCat sur Effectuer des achats.

const purchase = async (p: Package): Promise<PurchaserInfo | null> => {
  try {
    // console.log('purchase', p)
    const data = await CapacitorPurchases.purchasePackage({
      identifier: p.identifier,
      offeringIdentifier: p.offeringIdentifier,
    })
    const purchaserInfo = data.purchaserInfo
    // console.log('listenBuy', purchaserInfo)
    if (purchaserInfo.activeSubscriptions.includes(p.identifier)) {
      // set the user as paid
    }
    return purchaserInfo
  }
  catch (e) {
    console.error('listenBuy error', e)
  }
  return null
}

▶️ Vérifier le statut de l'abonnement

Vous pouvez utiliser cette méthode dès que vous avez besoin d'obtenir le dernier statut ; il est sûr de l'appeler de manière répétée tout au long du cycle de vie de votre app. Achats met en cache automatiquement la dernière CustomerInfo à chaque mise à jour — ainsi, dans la plupart des cas, cette méthode utilise le cache et s'exécute très rapidement.

Il est courant d'appeler cette méthode pour décider quelle interface afficher à l'utilisateur, ou lorsqu'il effectue une action nécessitant un certain niveau de droits.

📘

💡 Un petit conseil !

Vous pouvez accéder à bien plus d'informations sur un abonnement qu'au simple statut actif ou non. Consultez le guide RevenueCat sur Statut de l'abonnement pour savoir si l'abonnement est configuré pour se renouveler, si un problème est détecté avec la carte bancaire de l'utilisateur, et bien plus encore.

RevenueCat permet à vos utilisateurs de restaurer leurs achats in-app, réactivant ainsi tout contenu précédemment acheté via le même compte de store (compte Apple, Google ou Amazon). Nous recommandons que toutes les apps proposent un moyen pour les utilisateurs de déclencher la méthode de restauration. Notez qu'Apple exige un mécanisme de restauration si un utilisateur perd l'accès à ses achats (ex: désinstallation/réinstallation de l'app, perte des informations de compte, etc.).

  const res = await CapacitorPurchases.restoreTransactions()
  const purchaserInfo = res.purchaserInfo
  const ids: string[] = [] // extract active subscriptions ids
  purchaserInfo.activeSubscriptions.forEach((id) => {
    ids.push(id)
  })

Si deux différents IDs utilisateur de l'application restaurer les transactions depuis le même compte de store sous-jacent (compte Apple, Google ou Amazon). RevenueCat peut tenter de créer un alias entre les deux App User IDs et les considérer comme le même utilisateur à l'avenir. Consultez le guide RevenueCat sur la restauration des achats pour plus d'informations sur les différents comportements de restauration configurables.

Comme SDK fonctionne de manière transparente sur n'importe quelle plateforme, les changements dans les infos d'achat d'un utilisateur peuvent provenir de diverses sources. Vous pouvez répondre à tout changement dans les CustomerInfo en vous conformant à une méthode déléguée optionnelle, purchases:receivedUpdated:.

Cette méthode sera déclenchée chaque fois que SDK reçoit un objet CustomerInfo mis à jour suite aux appels de getCustomerInfo(), purchase(package:), purchase(product:), ou restorePurchases().

Les mises à jour de CustomerInfo sont pas poussées vers votre application depuis le backend RevenueCat, les mises à jour ne peuvent se produire que via une requête réseau sortante vers RevenueCat, comme mentionné précédemment.

Selon votre app, il peut suffire d'ignorer le délégué et de simplement gérer les changements d'informations client lors du prochain lancement de votre app ou dans les blocs de complétion des méthodes SDK.

CapacitorPurchases.addListener('purchasesUpdate', (data) => {
  console.log('purchasesUpdate', data)
})

👍

Bravo !

Vous venez d'implémenter un système complet d'achat d'abonnements sans passer un mois à écrire du code côté serveur. Félicitations !

Apps d'exemple

Pour télécharger des exemples plus complets d'intégration de SDK, consultez les ressources d'exemples d'apps de RevenueCat.

Voir les exemples

Je publierai bientôt une app d'exemple utilisant Capacitor et Vue.js.

Si vous voulez approfondir l'usage de Capacitor SDK, consultez la documentation ici.

Étapes suivantes

\

• Si ce n'est pas déjà fait, assurez-vous que vos produits sont correctement configurés en consultant RevenueCat guide sur les entitlements.
• Si vous souhaitez utiliser vos propres identifiants utilisateurs, lisez ceci : configuration des ID utilisateur de l'app .
• Si vous passez à RevenueCat depuis un autre système, consultez le guide RevenueCat sur la migration de vos abonnements existants.
• Une fois prêt à tester votre intégration, vous pouvez suivre les guides RevenueCat sur les tests et le débogage.
• Si vous êtes éligible au Small Business Program de l'App Store, consultez le guide RevenueCat sur comment postuler et informer RevenueCat

Si vous avez besoin de Live update dans votre app

Rejoignez-nous ici 👇

Inscrivez-vous ici pour créer votre compte

Capgo

Allez plus loin avec les achats in-app pour capacitor

Si vous utilisez achats in-app pour capacitor pour planifier les paiements et les achats, connectez-l’à Tarifs Capgo pour le workflow produit dans la page Tarifs de Capgo, Système de paiement pour les détails d'implémentation du système de paiement, @capgo/native-purchases pour les détails d'implémentation dans @capgo/native-purchases, Premiers pas pour les détails d'implémentation dans Getting Started, et Playbook de revenus pour les détails d'implémentation dans le Revenue Playbook.