Passer au contenu principal
Tutoriel

achats en application pour capacitor

Comment mettre en œuvre les achats en application pour les applications capacitor à l'aide du plugin d'achats de Capacitor Purchases et de RevenueCat

Martin Donadieu

Martin Donadieu

Spécialiste du contenu marketing

achats en application pour capacitor

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

Si vous préférez une mise en œuvre native plus simple de API sans RevenueCat, @capgo/native-purchases implémente les achats en application et les abonnements directs avec StoreKit et Google Play Billing.

Capacitor Purchases est un plugin pour le cadre de travail Capacitor qui permet les achats en application sur iOS et Android. Il fournit une mise en œuvre simple et cohérente de API sur plusieurs plateformes, ce qui facilite la mise en œuvre des abonnements et des achats en application dans les applications mobiles.

L'une des fonctionnalités clés du plugin Capacitor Purchases est qu'il intègre 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 application en fournissant une mise en œuvre simple et cohérente de API 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 gérer facilement les abonnements, suivre les revenus et effectuer d'autres tâches connexes. Certaines fonctionnalités proposées par RevenueCat incluent :

  • La validation automatique des reçus
  • La gestion des utilisateurs
  • Le support des modèles de tarification personnalisés
  • Analytiques détaillées -Échelle

En utilisant le plugin d'achat Capacitor 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 mobile 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 mobile, 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 analytiques 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 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 natif code à votre application npx cap sync

ajoutez la capacité d'achat en application mobile dans Xcode :

Étape 1 Xcode ensuite Étape 2 Xcode

1. Créez un compte RevenueCat

This guide will walk you through how to get up and running with subscriptions and RevenueCat’s SDK with only a few lines of 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 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 d'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 seulement le propriétaire du projet peut gérer les factures.Les collaborateurs du projet ne peuvent pas gérer les détails de facturation.

2. Configuration du projet et de l'application

▶️ Créez un Projet

Naviguez vers le tableau de bord RevenueCat et ajoutez un nouveau projet à partir du menu déroulant en haut de la barre de navigation appelé Projets.

Étape RevenueCat 1

La fenêtre contextuelle pour créer un nouveau Projet

▶️ Ajoutez une Application / Plateforme

À partir Paramètres du Projet > Applications dans le menu latéral du tableau de bord du projet, sélectionnez la plateforme pour l'application que vous allez ajouter.

Étape RevenueCat 2

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.

Étape 3 de RevenueCat

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.

📘

Staging vs. applications de production et utilisateurs

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

Tout application RevenueCat peut effectuer des achats à la fois dans le sandbox et la production des magasins. Si vous avez des applications séparées pour la production et le test, 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 la production 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 partagé d'App Store Connect, Play Service Credentials, et 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 des produits

▶️ Configuration de l'application

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 Appstoreet 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 banques. Cela doit être terminé avant que vous puissiez tester n'importe quel achat.

📘

Voulez-vous passer par le setup 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 de cela. Ces fichiers de configuration nécessitent un setup minimal et sont configurables via Xcode directement.

En savoir plus sur la configuration des fichiers de configuration StoreKit dans RevenueCat Test de la boîte de sable guide.

▶️ Configurez les produits et les autorisations dans RevenueCat

Une fois que vos produits en application ont été configurés dans App Store Connect, Google Play Console, Amazon Appstore, ou 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 « entité » après avoir acheté un produit spécifique. Les Offres sont une façon simple pour vous d'organiser les produits en appli que vous souhaitez « offrir » sur votre mur de payement et de les configurer à distance. RevenueCat RevenueCat recommande l'utilisation de 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.

Étape 4 de RevenueCat

4. Utilisation de Purchases SDK de RevenueCat

RevenueCat SDK implémente 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, voir Résoudre les problèmes des SDKs pour des instructions.

📘

Utilisez uniquement votre clé publique SDK pour configurer les achats

Vous 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 Purchases seulement une fois, généralement lors du lancement de l'application. Par la suite, la même instance est partagée dans votre application en accédant à l' .shared instance dans le SDK.

Consultez la guide de RevenueCat sur Configurer 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 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 plus d'informations 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 le

If you’re planning to use RevenueCat alongside your existing purchase code, refer to their guide on Configuration des Achats avec les IDs d'utilisateur.

📘

Configuring __CAPGO_KEEP_0__

If 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(). Pour en savoir plus, consultez la guide de RevenueCat sur Identifier les 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 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 Afficher les produits pour plus d'informations et de meilleures pratiques.

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

📘

Configurer les achats avec des identifiants utilisateur

If 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(). Pour en savoir plus, consultez la guide de RevenueCat sur Identifier les 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 vos 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 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 le centre d'aide de RevenueCat. Centre d'aide.

▶️ Effectuer une transaction

Le SDK comprend une méthode simple pour faciliter les achats. La purchase:package prend un package à partir de l'offre récupérée et traite la transaction avec le magasin d'applications respectif.

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

You 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 du cycle de vie de votre application. Purchases cache automatiquement le statut le plus récent CustomerInfo lorsqu'il est mis à jour — donc dans la plupart des cas, cette méthode récupère depuis le cache et s'exécute très rapidement.

C'est typique d'appeler cette méthode lors de la décision de montrer à l'utilisateur laquelle interface à afficher, 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 à beaucoup plus d'informations sur une souscription que simplement savoir si elle est active ou non. Consultez la guide de RevenueCat sur Statut de souscription pour apprendre 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 que tous les applications aient 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 d'incident où un utilisateur perd accès à ses achats (par exemple : désinstallation/réinstallation de l'application, perte de ses informations de compte, etc). __CAPGO_KEEP_0__ __CAPGO_KEEP_0__

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

If two different utilisateurs ont des identifiants d'application différents, ils peuvent restaurer des 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'application et les compter comme le même utilisateur à l'avenir. Voir la guide de RevenueCat sur "Restoring Purchases" pour plus d'informations sur les différents comportements de restauration configurables. Depuis que Capgo fonctionne de manière transparente sur n'importe quelle plateforme, les modifications de l'information d'achat d'un utilisateur peuvent provenir de diverses sources. Vous pouvez répondre à toute modification dans les informations d'achat d'un client en conformant à une méthode de délégué facultative, "customerInfoUpdated:" Cette méthode se déclenchera chaque fois que Capgo reçoit une mise à jour de l'objet "CustomerInfo" provenant d'appels à , ou "CustomerInfo.update()". Les mises à jour de l'information de client ne sont pas App User IDs __CAPGO_KEEP_0__ __CAPGO_KEEP_0__

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 Restoring Purchases purchases:receivedUpdated:.

This method will fire whenever the SDK receives an updated CustomerInfo CustomerInfo getCustomerInfo(), purchase(package:), purchase(product:)CustomerInfo.update() restorePurchases().

CustomerInfo __CAPGO_KEEP_0__ envoyé à votre application à partir du serveur backend de RevenueCat, les mises à jour ne peuvent se produire que par 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 des informations de 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 à fonctionnalités complet sans passer un mois à écrire du serveur code. Félicitations !

Exemples d'Applications

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.

Si vous devez utiliser en profondeur la Capacitor SDK, consultez la documentation ici.

Étapes suivantes

\

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 ligne pour capacitor

Si vous utilisez les achats en ligne pour capacitor pour planifier les paiements et les achats, connectez-le avec Capgo Tarification pour le flux de travail du produit dans Capgo Tarification, Système de paiement pour les détails d'implémentation dans Système de paiement, @capgo/native-purchases pour les détails d'implémentation dans @capgo/native-purchases, Démarrage Détails d'implémentation pour le Getting Started, et Plan de revenus Détails d'implémentation pour le Plan de revenus.

Mises à jour en temps réel pour les applications Capacitor

Lorsqu'un bug de la couche web est en ligne, expédiez la correction par Capgo au lieu d'attendre des jours pour l'approbation de la boutique d'applications. Les utilisateurs reçoivent la mise à jour en arrière-plan tandis que les modifications natives restent dans la voie de revue normale.

Commencez dès maintenant

Dernières actualités de notre Blog

Capgo vous donne les meilleures informations dont vous avez besoin pour créer une application mobile véritablement professionnelle.