Ce plugin est maintenant transféré vers le dépôt officiel de RevenueCat. Veuillez consulter la documentation officielle pour plus d'informations.
Capacitor Purchases is a plugin for the Capacitor framework that allows in-app purchases on iOS and Android. It provides a simple and consistent API across multiple platforms, making it easy for developers to implement in-app subscriptions and purchases in their mobile apps.
L'un des principaux avantages du plugin d'achat Capacitor est qu'il s'intègre avec RevenueCat, une plateforme qui fournit des outils pour les abonnements en application et les achats en application. RevenueCat simplifie le processus d'implémentation des abonnements en application et des achats en fournissant un API simple et cohérent à travers 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 gérer facilement les abonnements, suivre les revenus et effectuer d'autres tâches connexes. Certaines fonctionnalités proposées par RevenueCat incluent :
- Validation automatique des reçus
- Gestion des utilisateurs
- Support pour les modèles de tarification personnalisés
- Analytiques détaillés -Échelle
En utilisant le plugin d'achats Capacitor avec RevenueCat, les développeurs peuvent économiser du temps et de l'effort lors de l'implémentation des abonnements en application et des achats en application dans leurs applications mobiles, et fournir des fonctionnalités supplémentaires qui peuvent aider à améliorer l'expérience utilisateur et à augmenter les revenus.
En utilisant le plugin d'achats Capacitor et RevenueCat, les développeurs peuvent gérer et suivre facilement les abonnements et les achats en application, valider les reçus et gérer les utilisateurs à travers plusieurs plateformes. Cela permet également de créer des modèles de tarification personnalisés et d'obtenir des analytiques détaillés pour améliorer les performances et les revenus.
Installation
Assurez-vous d'utiliser la dernière version de Capacitor et du plugin d'achats Capacitor. Vous pouvez vérifier la dernière version de Capacitor et du plugin d'achats Capacitor sur le site Web de Capacitor.
Pour installer le plugin d'achats Capacitor, exécutez la commande suivante :
npm i @capgo/capacitor-purchases
ajoutez le plugin à votre application native code
npx cap sync
ajoutez la capacité d'achat en ligne dans Xcode :
ensuite
1. Créez un compte RevenueCat
Cette guide vous guidera tout au long de la mise en route des abonnements et de la mise en œuvre de RevenueCat’s SDK avec seulement quelques lignes de code.
Inscrivez-vous pour un nouveau compte RevenueCat ici.
📘
💡 Voici un conseil !
RevenueCat recommande de créer un compte RevenueCat distinct pour chaque application / projet que vous avez, surtout si vous prévoyez de vendre l'application. Cela accélérera le processus de transfert, car vous pouvez transférer l'ensemble du compte plutôt que d'attendre que le support RevenueCat transfère les projets individuels.
Organisations / Entreprise
Nous vous recommandons d'utiliser un compte entreprise lors de l'inscription chez RevenueCat et de configurer 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 les factures. Les collaborateurs de projet ne peuvent pas gérer les détails de facturation.
2. Configuration du projet et de l'application
▶️ Créer un projet
Allez sur le tableau de bord de RevenueCat et ajoutez un nouveau projet à partir du menu déroulant dans le menu de navigation supérieur appelé Projets.
La fenêtre modale pour créer un nouveau projet
Ajouter une application / plateforme ▶️
De Paramètres du projet > Applications Dans le menu gauche de l'interface de tableau de bord du projet, sélectionnez la plateforme pour l'application que vous allez ajouter.
Tableau de bord du projet pour sélectionner la plateforme de l'application
Le champ Nom de l'application est requis pour ajouter votre application à RevenueCat. Le reste des champs de configuration peuvent être ajoutés ultérieurement. Pour effectuer des achats de test et de production, le Bundle ID (iOS) / Nom de package (Android) ainsi que le Secret partagé (iOS) / Clés de service (Android) doivent être configurés.
Page de configuration de l'application pour une application Apple App Store
📘
💡 Voici un conseil !
Après l'enregistrement de votre application, RevenueCat recommande de configurer Notifications du Serveur de Plateforme. Ces notifications ne sont pas obligatoires, mais elles accéléreront webhooks et les temps de livraison de l'intégration et réduiront le temps de mise à jour de vos abonnés.
📘
Applications de production et de mise en scène et utilisateurs
RevenueCat n'a pas de milieux de production et de mise en scène séparés. Au lieu de cela, les transactions sous-jacentes pour les utilisateurs sont différenciées par sandbox et production.
Toute application RevenueCat peut effectuer des achats à la fois dans le sandbox et en production. Si vous avez des applications séparées pour la production et la mise en scène, 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, non plus. Le même utilisateur peut avoir des achats actifs dans le sandbox et en production en même temps.
▶️ Les Clés de Service
Les clés de service doivent être configurées pour que RevenueCat puisse communiquer avec les magasins d'applications en votre nom. Consultez les guides de RevenueCat Secret partagée d'App Store Connect, Clés de service Play, et Secret partagé d'Amazon Appstore Pour en savoir plus.
Notez que les clés de service Play peuvent prendre jusqu'à 36 heures pour se propager sur les serveurs de Google.
3. Configuration du produit
▶️ Configuration de la boutique
Avant de pouvoir utiliser RevenueCat pour récupérer les produits, vous devez configurer vos produits dans les boutiques respectives. Consultez les guides suivants pour App Store Connect, Google Play Console, Amazon Appstore, et Stripe pour obtenir de l'aide pour naviguer à travers ce processus.
Si vous vendez des produits iOS, assurez-vous de signer votre 'Accord de paiement pour les applications' et de renseigner vos informations bancaires et fiscales dans App Store Connect > Accords, impôts et banques. Il faut compléter cela avant de pouvoir tester tout achat..
📘
Voulez-vous passer outre la configuration de la boutique pendant les tests ?
Sur iOS, vous pouvez retarder la configuration des produits dans App Store Connect en testant avec des fichiers de configuration StoreKit au lieu.
Ces fichiers de configuration nécessitent une configuration minimale et sont configurables via Xcode directement. En savoir plus sur la configuration des fichiers de configuration StoreKit dans RevenueCat Test de la zone de développement
guide.
Une fois que vos produits intégrés ont été configurés dans App Store Connect, Google Play Console, Amazon Appstoreou Stripevous devrez copier cette configuration dans le tableau de bord de RevenueCat. RevenueCat utilise un système d'entitlements pour contrôler l'accès aux fonctionnalités premium et des offres pour gérer l'ensemble des produits que vous proposez à vos clients.
Les entitlements sont le niveau d'accès dont un client est « autorisé » après avoir acheté un produit spécifique. Les offres sont une façon simple pour vous organiser les produits intégrés que vous souhaitez « proposer » sur votre mur de payement et les configurer à distance. RevenueCat recommande d'utiliser ces fonctionnalités pour simplifier votre code et vous permettre de changer de produits sans mettre à jour l'application.
Voir Configuration des produits pour configurer vos produits et les organiser ensuite en offres ou en droits.
4. RevenueCat implémente les achats et les abonnements SDK de manière fluide.
RevenueCat SDK met en œuvre les achats et les abonnements de manière fluide sur les plateformes tout en synchronisant les jetons avec le serveur de RevenueCat.
Si vous rencontrez des problèmes avec le SDK, consultez la rubrique Résolution des problèmes des SDK pour obtenir des conseils.
📘
Utilisez uniquement votre clé publique SDK pour configurer les achats
Vous pouvez obtenir votre clé publique SDK dans l'onglet API clés sous Paramètres du projet dans l'interface de dashboard.
Vous devez configurer uniquement l'instance partagée de Achats seulement une fois, généralement lors du lancement de l'application. Par la suite, la même instance est partagée à travers votre application en accédant à l' .shared instance dans le SDK.
Consultez la guide de RevenueCat sur la configuration du SDK pour plus d'informations et des meilleures 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 la guide d'authentification de RevenueCat Veuillez vous assurer de ne configurer.
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_******'})
}Lorsque vous êtes en développement, RevenueCat recommande d'activer des journaux de débogage plus détaillés. Pour plus d'informations sur ces journaux, consultez leur guide de débogage.
Si vous prévoyez d'utiliser RevenueCat en parallèle de votre achat existant code, consultez leur guide sur la configuration de l'Observateur.
📘
Configurer les achats avec des identifiants d'utilisateur
Si vous avez un système d'authentification des utilisateurs dans votre application, vous pouvez fournir un identifiant d'utilisateur au moment de la configuration ou à une date ultérieure avec un appel à
.logIn(). Pour en savoir plus, consultez le guide de RevenueCat sur l'identification des utilisateurs.
Le SDK récupérera automatiquement les offres configurées et récupérera les informations de produit auprès d'Apple, Google ou Amazon. Ainsi, les produits disponibles seront déjà chargés lorsque les clients lanceront votre écran d'achat.
Voici un exemple de récupération des Offres. Vous pouvez utiliser les Offres pour organiser votre écran de paywall. Consultez la guide de RevenueCat sur Affichage des Produits ▶️ Récupérer et afficher les Produits Disponibles
Configuration des Achat avec les Identifiants Utilisateur
📘
Si vous avez un système d'authentification utilisateur dans votre application, vous pouvez fournir un identifiant utilisateur au moment de la configuration ou à une date ultérieure avec un appel à
Pour en savoir plus, consultez la guide de RevenueCat sur
.logIn()Identification des Utilisateurs __CAPGO_KEEP_0__.
The SDK will automatically fetch the Offres configurées et récupérer les informations de produit depuis Apple, Google ou Amazon. Ainsi, les produits disponibles seront déjà chargés lorsque les clients lanceront votre écran d'achat.
Voici un exemple de récupération des Offres. Vous pouvez utiliser les Offres pour organiser votre écran de paywall. Consultez la guide de RevenueCat sur Affichage des Produits pour plus d'informations et des meilleures pratiques.
const { offerings } = await CapacitorPurchases.getOfferings()
if (offerings.current !== null) {
// Display current offering with offerings.current
}Si le chargement de vos Offres, produits, ou les packages disponibles sont vides, c'est due à un problème de configuration dans le magasin respectif. Les raisons les plus courantes pour cela dans App Store Connect sont un accord de paiement obsolète ‘Paid Applications Agreement’ ou des produits qui ne sont pas au moins dans l'état ‘Ready To Submit’.
Dans Google Play, cela se produit généralement lorsque l'application n'est pas publiée sur une piste fermée et qu'un utilisateur de test valide a été ajouté.
Vous pouvez trouver plus d'informations sur la résolution de ce problème dans le centre d'aide de RevenueCat Centre d'aide.
▶️ Effectuer une Achat
The SDK comprend un méthode simple pour faciliter les achats. Le purchase:package procède à l'extraction d'un package de l'offre récupérée et traite la transaction avec le magasin d'applications correspondant.
The code exemple ci-dessous montre le processus d'achat d'un package et la confirmation que cela déverrouille le contenu « your_entitlement_id ». Plus de détails sur la purchase:package méthode peuvent être trouvés dans la guide de 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 l'état de la souscription
On peut utiliser cette méthode chaque fois que l'on a besoin de récupérer l'état le plus récent, et il est sécurisé d'appeler cette méthode à plusieurs reprises tout au long du cycle de vie de l'application. Achats se met automatiquement à jour avec le dernier CustomerInfo lorsqu'il est mis à jour — donc dans la plupart des cas, cette méthode récupère depuis la cache et fonctionne très rapidement.
Appeler cette méthode est typique lorsqu'on décide quel UI afficher à l'utilisateur, et chaque fois que l'utilisateur effectue une action qui nécessite un niveau d'entitlement spécifique.
📘
💡 Voici un conseil !
You pouvez accéder à bien plus d'informations sur une souscription que simplement savoir si elle est active ou non. Consultez la guide de RevenueCat sur État de la souscription pour savoir si la souscription est configurée pour se renouveler, si il y a un problème détecté avec la carte de crédit de l'utilisateur, et plus encore.
RevenueCat permet à vos utilisateurs de restaurer leurs achats en ligne, réactivant tout le contenu qu'ils ont acheté auparavant à partir du même compte de magasin (compte Apple, Google ou Amazon). Nous recommandons à tous les développeurs d'avoir une façon pour les utilisateurs de déclencher la méthode de restauration. Notez que Apple exige un mécanisme de restauration en cas où un utilisateur perd accès à ses achats (par exemple : désinstallation/réinstallation de l'application, perte de ses informations de compte, etc.). Si deux identifiants d'utilisateur de l'application Identifiants d'utilisateur de l'application
const res = await CapacitorPurchases.restoreTransactions()
const purchaserInfo = res.purchaserInfo
const ids: string[] = [] // extract active subscriptions ids
purchaserInfo.activeSubscriptions.forEach((id) => {
ids.push(id)
})
restaurent des transactions provenant du même compte de magasin sous-jacent (compte Apple, Google ou Amazon). RevenueCat peut tenter de créer un alias entre les deux identifiants d'utilisateur de l'application et les compter comme le même utilisateur à l'avenir. Consultez la guide de RevenueCat sur Restauration d'achats pour plus d'informations sur les différents comportements de restauration configurables. Puisque
SDK CustomerInfo en conformant à une méthode de délégué facultative, purchases:receivedUpdated:.
Cette méthode sera déclenchée chaque fois que le SDK reçoit une mise à jour CustomerInfo l'objet provenant de appels à getCustomerInfo(), purchase(package:), purchase(product:), ou restorePurchases().
Les mises à jour de CustomerInfo ne sont pas envoyées à votre application à partir du serveur RevenueCat, les mises à jour peuvent uniquement se produire à partir d'une requête réseau sortante vers RevenueCat, comme mentionné ci-dessus.
Selon votre application, il peut être suffisant d'ignorer le délégué et de gérer uniquement les modifications de l'information client la prochaine fois que votre application est lancée ou dans les blocs de fin de la méthode SDK.
CapacitorPurchases.addListener('purchasesUpdate', (data) => {
console.log('purchasesUpdate', data)
})👍
Félicitations !
Vous avez maintenant mis en place un système de souscription complet sans passer un mois à écrire des serveurs code. Félicitations !
Exemples d'applications
Pour télécharger des exemples plus complets d'intégration du SDK, rendez-vous sur les ressources d'applications d'exemple de RevenueCat.
Je publierai bientôt une application d'exemple utilisant Capacitor et Vue.js.
Si vous avez besoin de déplacer une utilisation approfondie de la Capacitor SDK, consultez la documentation ici.
Étapes suivantes
\
- Si vous n'avez pas déjà fait cela, assurez-vous que vos produits sont configurés correctement en consultant la guide de RevenueCat sur les droits Si vous souhaitez utiliser vos propres identifiants d'utilisateur, lisez sur la mise en place des IDs d'appareil.
- Si vous passez à RevenueCat depuis un autre système, consultez la guide de RevenueCat sur la migration de vos abonnements existants Une fois que vous êtes prêt à tester votre intégration, vous pouvez suivre les guides de RevenueCat sur .
- Voir les Exemples Je publierai bientôt une application d'exemple utilisant __CAPGO_KEEP_0__ et Vue.js..
- Si vous avez besoin de déplacer une utilisation approfondie de la __CAPGO_KEEP_0__ __CAPGO_KEEP_1__, consultez la documentation test et débogage.
- Si vous êtes éligible au programme Small Business de l'App Store, consultez la guide de RevenueCat sur comment postuler et informer RevenueCat
Si vous avez besoin d'une mise à jour en temps réel dans votre application
Rejoignez-nous ici 👇
