Cette extension est maintenant transférée vers le dépôt officiel de RevenueCat. Veuillez consulter la documentation officielle pour plus d'informations.
If you prefer a simpler native API without RevenueCat, @capgo/native-purchases implémente les achats en application et les abonnements directement avec StoreKit et Google Play Billing.
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.
One of the key features of the Capacitor Purchases plugin is that it integrates with RevenueCat, a platform that provides tools for in-app subscriptions and in-app purchases. RevenueCat simplifies the process of implementing in-app subscriptions and purchases by providing a simple and consistent API across multiple platforms, and automating tasks such as receipt validation and user management.
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 réceptions
- Gestion des utilisateurs
- Support for custom pricing models
- 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 et des achats en ligne 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 ligne, valider les réceptions, et gérer les utilisateurs sur 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'achats en ligne dans Xcode :
ensuite
1. Créez un compte RevenueCat
Cette guide vous guidera à travers la mise en place des abonnements et de la fonctionnalité SDK de RevenueCat avec seulement quelques lignes de code.
Inscrivez-vous à 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 pourrez transférer l'ensemble du compte plutôt que d'attendre que le support RevenueCat transfère les projets individuels.
Organisations / Entreprise
Nous recommandons d'utiliser un compte professionnel lors de l'enregistrement 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 facturesles collaborateurs du projet ne peuvent pas gérer les détails de facturation.
2. Configuration du projet et de l'application
▶️ Créer un projet
Naviguez vers le tableau de bord de RevenueCat et ajoutez un nouveau projet à partir du menu de navigation supérieur appelé Projets.
La fenêtre contextuelle pour la création d'un nouveau Projet
Ajoutez une App / Plateforme
From Paramètres du projet > Applications Dans le menu gauche de l'interface de projet, sélectionnez le plateforme pour l'application que vous ajouterez.
Interface de projet pour sélectionner la plateforme de l'application
Le champ App name 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.
App configuration page for an Apple App Store app
📘
💡 Voici un conseil!
Après avoir enregistré votre application, RevenueCat recommande de configurer Notifications du serveur de plateformeCes notifications ne sont pas obligatoires, mais elles accéléreront webhooks et réduiront les temps de latence lors de la mise à jour de vos abonnés.
📘
Staging vs. Applications de production et utilisateurs
RevenueCat n'a pas de milieux de test et de production séparés. Les transactions sous-jacentes pour les utilisateurs sont distinguées par sandbox et production.
Tout application RevenueCat peut effectuer des achats de sandbox et de production à la fois dans les magasins. Si vous avez des applications séparées 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, non plus. Le même utilisateur peut avoir des achats de sandbox actifs et des achats de production actifs en même temps.
▶️ Identifiants de service
Les identifiants de service doivent être configurés pour que RevenueCat puisse communiquer avec les magasins d'applications en votre nom. Consultez les guides de RevenueCat Secret de l'App Store Connect, Identifiants de service de Play, et Amazon Appstore Secret Partagé pour plus d'informations.
Les informations de service de jeu peuvent prendre jusqu'à 36 heures pour se propager sur les serveurs de Google.
3. Configuration du Produit
▶️ Configuration de la Boutique
Avant de pouvoir commencer à utiliser RevenueCat pour récupérer des produits, vous devez configurer vos produits dans les magasins respectifs. 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.
If vous vendez des produits iOS, assurez-vous de signer votre 'Accord de paiement des applications' et de remplir vos informations bancaires et fiscales dans App Store Connect > Accords, impôts et banques. Cela doit être terminé avant que vous puissiez tester tout achat.
📘
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 au lieu. Ces fichiers de configuration nécessitent un minimum de configuration et sont configurables via Xcode directement.
Lisez plus sur la configuration des fichiers de configuration StoreKit dans RevenueCat Test de la sandbox guide.
▶️ Configurez les produits et les droits dans RevenueCat
Une fois que vos produits en application ont été configurés dans App Store Connect, Google Play Console, Amazon Appstore, ou Stripe, vous 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.
Entitlements sont le niveau d'accès dont un client est « entité » après avoir acheté un produit spécifique. Les Offres sont une façon simple pour vous organiser les produits en applis que vous souhaitez « offrir » sur votre mur de paiement et les configurer à distance. RevenueCat recommande utilise ces fonctionnalités pour simplifier votre code et vous permettre de changer de produits sans mettre à jour l'application.
Voir Configurer les produits pour configurer vos produits et les organiser ensuite en Offres ou Entitlements.
4. Utiliser Purchases de RevenueCat SDK
RevenueCat SDK mette 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 de dépannage 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 les clés API sous Paramètres du projet dans le tableau de bord.
Vous devriez uniquement configurer l'instance partagée de Purchases 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 à .shared instance dans le SDK.
Consultez la guide de RevenueCat sur 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 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_******'})
}Lors du développement, RevenueCat recommande d'activer les journaux de débogage plus détaillés. Pour plus d'informations sur ces journaux, consultez leur Debugging guide.
If vous prévoyez d'utiliser RevenueCat en parallèle de votre achat code, consultez leur guide sur Mode d'observation.
📘
Configuring Purchases with User IDs
If 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 en appelant
.logIn()Pour en savoir plus, consultez le guide de RevenueCat sur 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 d'offres. Vous pouvez utiliser les offres pour organiser votre écran de paywall. Consultez le guide de RevenueCat sur Affichage des produits pour plus d'informations et de meilleures pratiques.
▶️ Récupérer et Afficher les Produits Disponibles
📘
Configuring Purchases with User IDs
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 à
.logIn()To learn more, consultez la guide de RevenueCat sur 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 Afficher les Produits pour plus d'informations et de meilleures pratiques.
const { offerings } = await CapacitorPurchases.getOfferings()
if (offerings.current !== null) {
// Display current offering with offerings.current
}Si vous récupérez Offres, produits, ou disponibles packages sont vides, c'est dû à 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 'Paid Applications Agreement' obsolète ou des produits qui ne sont pas au moins dans l'état 'Ready To Submit'. Dans GooglePlay, 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 RevenueCat Centre d'aide.
▶️ Effectuer une achat
L'SDK comprend une méthode simple pour faciliter les achats. Le purchase:package trait un paquet à partir de l'offre récupérée et traite la transaction avec la plateforme de magasin d'applications correspondante.
Le code exemple ci-dessous montre le processus d'achat d'un package et de confirmation que cela déverrouille le contenu « votre_entitlement_id ». Plus de détails sur le purchase:package La méthode peut être trouvée 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érifiez l'état de la souscription
You can use this method whenever you need to get the latest status, and it’s safe to call this repeatedly throughout the lifecycle of your app. Achats cache automatiquement le statut le plus récent CustomerInfo lorsqu'il met à jour — donc dans la plupart des cas, cette méthode récupère dans la cache et fonctionne très rapidement.
C'est courant d'appeler cette méthode lors de la décision de montrer à l'utilisateur quelle interface utiliser, et chaque fois que l'utilisateur effectue une action qui nécessite un niveau d'entitlement spécifique.
📘
💡 Voici un conseil!
Vous pouvez accéder à bien plus d'informations sur une souscription que simplement savoir si elle est active ou non. Consultez la guide de RevenueCat. État de la souscription apprendre si l'abonnement est configuré pour se renouveler, si un problème est détecté avec la carte de crédit de l'utilisateur, et plus encore.
RevenueCat permet à vos utilisateurs de restaurer leurs achats en application, réactivant ainsi tout contenu qu'ils ont acheté auparavant depuis le le même compte de magasin (compte Apple, Google ou Amazon). Nous recommandons que tous les applications aient une façon pour les utilisateurs de déclencher la méthode de restauration. Notez que Apple exige une 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).
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'application restore transactions from the same underlying store account (Apple, Google, or Amazon account). RevenueCat may attempt to create an alias between the two App User IDs and count them as the same user going forward. See RevenueCat guide on Récupération d'Achats Pour plus d'informations sur les différents comportements de restauration configurables.
Since the SDK works seamlessly on any platform, changes to a user’s purchase info may come from a variety of sources. You can respond to any changes in a customer’s CustomerInfo 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 objet provenant de les appels à getCustomerInfo(), purchase(package:), purchase(product:)ou restorePurchases().
Mises à jour de CustomerInfo pas Mises à jour peuvent uniquement être effectuées à 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 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 vente de souscriptions complet sans passer un mois à écrire du code serveur code.
Sample Apps
Téléchargez des exemples plus complets d'intégration de la SDK sur les ressources d'applications de démonstration de RevenueCat.
Je publierai bientôt un exemple d'applications utilisant la Capacitor et Vue.js.
Si vous devez utiliser en profondeur la Capacitor SDK consultez la documentation. ici.
Étapes suivantes
\
- Si vous n'avez pas déjà fait cela, assurez-vous que vos produits sont correctement configurés en consultant RevenueCat. guide sur les entités.
- Si vous souhaitez utiliser vos propres identifiants d'utilisateur, consultez configuration des identifiants d'utilisateur de l'application .
- Si vous passez à RevenueCat depuis un autre système, consultez le guide de RevenueCat sur Migrer vos abonnements existants.
- Une fois prêt à tester votre intégration, vous pouvez suivre les guides de RevenueCat. Étapes suivantes.
- Si vous êtes éligible au programme Small Business de l'App Store, consultez la guide de RevenueCat. comment appliquer et informer RevenueCat
If you need Live update in your app
Rejoignez-nous ici 👇
Inscrivez-vous ici pour obtenir votre compte
Keep going from in app purchases for capacitor
Si vous utilisez les achats en application pour capacitor pour planifier les paiements et les achats, connectez-l’avec Capgo Tarification pour le flux de travail du produit dans Capgo Tarification, Système de paiement pour le détail d'implémentation dans Système de paiement, @capgo/achats_natives pour le détail d'implémentation dans @capgo/achats_natives Getting Started pour le détail d'implémentation dans Démarrage, et Guide de la rémunération pour le détail d'implémentation dans Guide de la rémunération.
