Achats in-app pour capacitor

Ce plugin a désormais été transféré dans le dépôt officiel de RevenueCat. Veuillez consulter le 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 via StoreKit et Google Play Billing.

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

L’une des fonctionnalités clés 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, et en automatisant des tâches telles que 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 associées. Parmi les fonctionnalités proposées par RevenueCat :

Validation automatisée des reçus
Gestion des utilisateurs
Support for custom pricing models
Analyses détaillées -Évolutivité

En utilisant le plugin Capacitor Purchases avec RevenueCat, les développeurs économisent du temps et des efforts lors de la mise en place d’abonnements et d’achats in-app dans leurs applications mobiles, et bénéficient de 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 analyses 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 consulter 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 Ajoutez le plugin à votre app native code npx cap sync

Ajoutez la capacité d’achats in-app dans Xcode :

Xcode étape 1 puis Étape 2 Xcode

1. Créer un compte RevenueCat

Ce guide vous montre comment démarrer avec les abonnements et le SDK de RevenueCat en seulement quelques lignes de code.

Créer un compte RevenueCat ici.

📘

💡 Voici un conseil !

RevenueCat recommande de créer un compte RevenueCat distinct pour chaque application / projet, surtout si vous prévoyez de vendre l’application. Cela accélère le processus de transfert, car vous pouvez transférer l’intégralité du compte au lieu d’attendre que le support RevenueCat transfère des projets individuels.

Organisations / Entreprise

Nous recommandons d’utiliser un compte entreprise lors de l’inscription à RevenueCat et de la configuration de votre application dans un projet. Vous pourrez inviter le reste de votre équipe en tant que collaborateurs à votre projet, mais seul le propriétaire du projet peut gérer la facturation. Les 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 barre de navigation supérieure appelé Projets.

RevenueCat étape 1

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

▶️ Ajouter une application / plateforme

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

RevenueCat étape 2

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 peuvent être ajoutés plus tard. Pour effectuer des achats de test et de production, l’identifiant de bundle (iOS) / le nom du package (Android) ainsi que le secret partagé (iOS) / les identifiants de service (Android) doivent être configurés.

Étape 3 de RevenueCat

Page de configuration d’une app pour l’App Store Apple

📘

💡 Voici un conseil !

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

📘

Apps et utilisateurs en staging vs. production

RevenueCat ne dispose pas d’environnements distincts pour le staging et la production. En revanche, les transactions sous-jacentes des utilisateurs sont différenciées entre le sandbox et la production.

Toute app RevenueCat peut effectuer des achats en sandbox et en production depuis les stores. Si vous avez des apps 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 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 au nom de votre application. 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 sur les serveurs de Google peut prendre jusqu'à 36 heures.

3. Configuration des produits

▶️ Configuration du store

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

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

📘

Envie de sauter la configuration du store pendant les tests ?

Sur iOS, vous pouvez reporter la configuration des produits dans App Store Connect en testant avec des fichiers de configuration StoreKit. Ces fichiers nécessitent une configuration minimale et sont configurables directement via Xcode.

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

▶️ Configurer les produits et les entitlements dans RevenueCat

Une fois vos produits in-app configurés dans App Store Connect, la 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 proposés aux clients.

Les Entitlements définissent 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 « offrir » sur votre paywall et de les configurer à distance. RevenueCat recommande utilisez ces fonctionnalités pour simplifier votre code et changer de produits sans avoir à publier de nouvelle version de l'app.

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

Étape 4 de RevenueCat

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 obtenir votre clé publique SDK depuis le les clés API onglet 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 application en y accédant .shared instance dans le SDK.

Voir le guide RevenueCat sur Configurer SDK pour plus d'informations et de bonnes pratiques.

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

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 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 existant, consultez leur guide sur Mode Observer.

📘

Configurer les achats avec les ID utilisateur

Si votre application dispose d'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.

Le SDK récupérera automatiquement les Offerings configurées et récupérera les informations sur les produits auprès d'Apple, Google ou Amazon. Ainsi, les produits disponibles seront déjà chargés lorsque les clients ouvriront votre é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 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 dispose d'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.

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

Si le fetch de vos Offerings,, produits, ou disponible paquets disponibles est vide, c’est dû à un problème de configuration dans le store concerné.

Les causes les plus fréquentes 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 se produit généralement quand l'app n'est pas publiée sur un canal fermé et qu'un utilisateur de test valide n'a pas été ajouté.

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

▶️ Effectuer un achat

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

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, à la section 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 chaque fois que vous avez besoin d'obtenir le statut le plus récent, et vous pouvez l'appeler sans risque de façon répétée tout au long du cycle de vie de votre app. Achats met automatiquement en cache la dernière CustomerInfo lorsqu’elle se met à jour — dans la plupart des cas, cette méthode lit depuis le cache et s’exécute très rapidement.

Il est courant d’appeler cette méthode pour déterminer quelle interface afficher à l’utilisateur, et chaque fois que l’utilisateur effectue une action nécessitant un certain niveau d’entitlement.

📘

💡 Voici un conseil !

Vous pouvez accéder à bien plus d’informations sur un abonnement que simplement son statut actif. 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é sur la carte bancaire de l’utilisateur, et plus encore.

RevenueCat permet à vos utilisateurs de restaurer leurs achats in-app, en réactivant tout contenu qu’ils avaient précédemment acheté depuis le même compte store (compte Apple, Google ou Amazon). Nous recommandons que toutes les applications proposent un moyen pour les utilisateurs de déclencher la restauration. Notez qu’Apple exige un mécanisme de restauration au cas où un utilisateur perdrait l’accès à ses achats (par exemple : désinstallation/réinstallation de l’application, 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 Identifiants d'utilisateur de l'app restaurer les transactions à partir du même compte store sous-jacent (compte Apple, Google ou Amazon). RevenueCat peut tenter de créer un alias entre les deux App User IDs et les compter comme un seul et même utilisateur à l'avenir. Consultez le guide RevenueCat sur 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 modifications des informations d'achat d'un utilisateur peuvent provenir de diverses sources. Vous pouvez réagir à toute modification des 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 objet provenant des appels à 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 application, il peut suffire d'ignorer le délégué et de gérer simplement les modifications des informations client lors du prochain lancement de votre application ou dans les blocs de complétion des méthodes SDK.

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

👍

Vous y êtes !

Vous avez maintenant implémenté un système d’achat d’abonnements complet sans passer un mois à écrire du code serveur code. Félicitations !

Apps d'exemple

Pour télécharger des exemples plus complets d’intégration de SDK, rendez-vous sur les ressources d’applications d’exemple de RevenueCat.

Voir les exemples

Je publierai bientôt une application d’exemple utilisant Capacitor et Vue.js.

Si vous devez approfondir l’utilisation de Capacitor SDK, consultez la documentation ici.

Étapes suivantes

Si ce n’est pas déjà fait, vérifiez que vos produits sont correctement configurés en consultant le guide RevenueCat sur les entitlements.
Si vous souhaitez utiliser vos propres identifiants d’utilisateur, lisez à propos de la configuration des identifiants d’utilisateur de l’app .
Si vous migrez vers RevenueCat depuis un autre système, consultez le guide RevenueCat sur la migration de vos abonnements existants.
Une fois que vous êtes prêt à tester votre intégration, vous pouvez suivre les guides RevenueCat sur les tests et le debug.
Si vous êtes éligible au programme App Store Small Business, consultez le guide RevenueCat sur comment appliquer 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

Continuez 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 Capgo Tarifs, 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, Prise en main pour les détails d'implémentation dans Getting Started, et Playbook revenus pour les détails d'implémentation dans le Revenue Playbook.