Comment mettre en œuvre les achats en ligne pour les applications capacitor

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.

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.

across multiple plateformes, ce qui facilite la mise en œuvre des abonnements et des achats en application dans les applications mobiles des développeurs.

• L'un des principaux avantages du plugin __CAPGO_KEEP_0__ Achat est qu'il s'intègre avec RevenueCat, une plateforme qui fournit des outils pour les abonnements et les achats en application. RevenueCat simplifie le processus de mise en œuvre des abonnements et des achats en fournissant une interface utilisateur simple et cohérente
• __CAPGO_KEEP_1__
• across multiple 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 Capacitor Achat avec RevenueCat, les développeurs peuvent économiser du temps et de l'effort lors de la mise en œuvre des abonnements 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'achat 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 sur plusieurs plateformes. Cela permet également de créer des modèles de tarification personnalisés et d'obtenir des analyses détaillées pour améliorer les performances et le revenu.

Installation

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

Pour installer le plugin d'achat 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 application dans Xcode :

ensuite

1. Créez un compte RevenueCat

Cette guide vous guidera à travers la mise en route des abonnements et de RevenueCat’s SDK avec seulement quelques lignes de code.

Inscrivez-vous pour un nouveau compte RevenueCat French.

📘

💡 Voici un conseil !

RevenueCat recommande de créer un compte RevenueCat distinct pour chaque application / projet que vous avez, surtout si vous avez l'intention de vendre l'application à l'avenir. Cela accélérera le processus de transfert, car vous pouvez transférer le compte entier plutôt que d'attendre que le support RevenueCat transfère les projets individuels.

Organisations / Entreprise

Nous recommandons d'utiliser un compte entreprise 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 seulement 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

Naviguez jusqu'au tableau de bord RevenueCat et ajouter un nouveau projet à partir du menu déroulant dans la barre de navigation supérieure intitulé Projets.

Le modale de création d'un nouveau Projet

▶️ Ajouter une Application / Plateforme

De Paramètres du Projet > Applications dans le menu de gauche de l'interface de bord de projet, sélectionnez la plateforme pour l'application que vous ajouterez.

Interface de bord de projet pour sélectionner la plateforme de l'application

Le champ Nom de l'application Le nom de l'application est requis pour ajouter votre application à RevenueCat. Les autres 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 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 les temps de livraison de l'intégration et réduiront le temps de mise à jour de vos abonnés.

📘

Applications et utilisateurs de production et de test

RevenueCat n'a pas de milieux de test et de production séparés. Au lieu de cela, les transactions sous-jacentes pour les utilisateurs sont différenciées par sandbox et production.

Quels que soient les applications RevenueCat, elles peuvent effectuer des achats de type sandbox et de production dans les magasins. Si vous avez des applications séparées pour le stade 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. Le même utilisateur peut avoir des achats 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 RevenueCat Secret partagé d'App Store Connect, Identifiants de service Playet Secret partagé d'Amazon Appstore pour plus d'informations.

Notez que les identifiants de service Play peuvent prendre jusqu'à 36 heures pour se propager à travers les serveurs de Google.

3. Configuration du produit

▶️ Configuration du magasin

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 dans ce processus.

Si vous vendez des produits iOS, assurez-vous de signer votre 'Accord sur les applications payantes' et de remplir vos informations bancaires et fiscales dans App Store Connect > Accords, impôts et banque. Cela doit être terminé avant que vous puissiez tester tout achat.

📘

Voulez-vous passer sous silence la configuration du magasin 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 StoreKit dans RevenueCat Test de l'arborescence de test guide.

▶️ Configurez les produits et les droits en RevenueCat

Une fois que vos produits en application ont été configurés dans App Store Connect, Google Play Console, Amazon Appstoreou Stripe, vous devrez copier cette configuration dans le tableau de bord de RevenueCat. RevenueCat utilise un système de droits pour contrôler l'accès aux fonctionnalités premium et des offres pour gérer l'ensemble des produits que vous offrez à vos clients.

Les droits 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 d'organiser les produits en application que vous souhaitez « offrir » sur votre mur de payement et les configurer à distance. RevenueCat recommande l'utilisation de ces fonctionnalités pour simplifier votre code et vous permettre de changer de produits sans mettre à jour une mise à jour de l'application.

Voir Configuration des produits pour configurer vos produits et les organiser ensuite en Offres ou en Entitlements.

4. En utilisant les achats de Purchases de RevenueCat SDK

RevenueCat SDK met en œuvre les achats et les abonnements de manière fluide sur plusieurs plateformes tout en synchronisant les jetons avec le serveur de RevenueCat.

Si vous rencontrez des problèmes avec le SDK, voir Dépannage des SDK pour obtenir des conseils.

📘

Utilisez uniquement votre clé publique de SDK pour configurer les achats

You pouvez obtenir votre clé publique SDK dans la section les clés API sous l'onglet Paramètres du projet dans le tableau de bord.

Vous devez configurer 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.

Voir la guide de RevenueCat sur la configuration de SDK pour plus d'informations et de 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 chez 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_******'})
}

Lorsque vous êtes en développement, RevenueCat recommande d'activer les journaux de débogage plus détaillés. Pour en savoir plus sur ces journaux, consultez leur Guide de débogage Si vous prévoyez d'utiliser RevenueCat en parallèle de vos achats existants __CAPGO_KEEP_0__, consultez leur guide sur

If you’re planning to use RevenueCat alongside your existing purchase code, refer to their guide on Configuration des achats avec les 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 à

Pour en savoir plus, consultez le guide de RevenueCat sur .logIn()Authentification des utilisateurs Identifier les Utilisateurs.

Le SDK récupérera automatiquement les offres 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 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 la guide de RevenueCat sur Afficher les Produits pour plus d'informations et de meilleures pratiques.

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

📘

Configurer les achats avec les identifiants des utilisateurs

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 la guide de RevenueCat sur Identifier les Utilisateurs.

The SDK récupérera automatiquement les offres 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 lanceront votre écran de purchase. Offres configurées et récupérer les informations sur les produits à partir d'Apple, Google ou Amazon. Ainsi, les produits disponibles seront déjà chargés lorsque les clients lanceront votre écran de purchase.

Voici un exemple de récupération d'offres. Vous pouvez utiliser les offres pour organiser votre écran de paywall. Consultez la guide de RevenueCat sur la Affichage des 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 la récupération de vos offres, produits, ou les packages disponibles sont vides, c'est due à un problème de configuration dans le magasin respectif. configured Offerings and retrieve the product information from Apple, Google, or Amazon. Thus, available products will already be loaded when customers launch your purchase screen.

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 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 transaction

Le SDK comprend une méthode simple pour faciliter les achats. La purchase:package procède à partir d'un paquet récupéré de l'offre et traite la transaction avec la plateforme de l'application respective.

Le code d'exemple ci-dessous montre le processus d'achat d'un paquet et de confirmation qu'il débloque 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 d'une souscription

Vous pouvez utiliser cette méthode chaque fois que vous avez besoin de récupérer le statut le plus récent, et il est sécurisé d'appeler cette méthode à plusieurs reprises tout au long de la durée de vie de votre application. Achats cache automatiquement la version la plus récente CustomerInfo Cette méthode fonctionne très rapidement car elle récupère généralement dans le cache et non en ligne.

Il est courant d'appeler cette méthode lors de la décision de montrer à l'utilisateur la bonne interface et chaque fois que l'utilisateur effectue une action nécessitant un niveau d'autorisation 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 sur État de la souscription pour savoir si la souscription est configurée 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 ligne, réactivant ainsi 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 une mécanisme de restauration en cas de perte d'accès aux 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 identifiants d'utilisateur d'applications sont différents __CAPGO_KEEP_0__ restaurer les transactions à partir 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 d'application et les compter comme le même utilisateur à l'avenir. Voir la guide de RevenueCat sur Récupérer les achats pour plus d'informations sur les différents comportements de récupération 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 __CAPGO_KEEP_0__ purchases:receivedUpdated:.

This method will fire whenever the SDK receives an updated CustomerInfo Cette méthode se déclenchera chaque fois que le getCustomerInfo(), purchase(package:), purchase(product:)__CAPGO_KEEP_0__ restorePurchases().

reçoit une mise à jour de l'objet à partir d'appels à , ou

Depending on your app, it may be sufficient to ignore the delegate and simply handle changes to customer information the next time your app is launched or in the completion blocks of the SDK methods.

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

👍

You l'avez fait!

Vous avez maintenant mis en œuvre un système de souscription à fonctionnalités complètes sans passer un mois à écrire un serveur code. Félicitations!

Applications d'exemple

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

Voir les Exemples

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

If you need to move deep usage of the Capacitor SDK check the documentation ici.

Étapes suivantes

\

• Si vous n'avez pas déjà fait, 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 documentation.
• Si vous avez besoin d'utiliser des utilisateurs identifiants profondément, consultez la documentation __CAPGO_KEEP_1__ ici paramètres de l'application des identifiants d'utilisateur .
• Si vous passez à RevenueCat à partir d'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 la test et la 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 direct dans votre application

Rejoignez-nous ici 👇

Inscrivez-vous ici pour obtenir votre compte

Capgo

Continuez à partir des achats en application pour capacitor

If vous utilisez des achats en ligne pour __CAPGO_KEEP_0__ in app purchases for capacitor __CAPGO_KEEP_0__ Tarification pour le flux de travail du produit dans Capgo Tarification, for the product workflow in Capgo Pricing, pour les détails d'implémentation dans Système de paiement, @__CAPGO_KEEP_0__/achats natifs pour les détails d'implémentation dans @capgo/achats natifs, for the implementation detail in @capgo/native-purchases, pour les détails d'implémentation dans Prise en main, et Guide de revenus @__CAPGO_KEEP_0__/achats natifs Détails d'implémentation dans le Livre de stratégie de revenus.