Zum Hauptinhalt springen
Tutorial

In-App-Käufe für capacitor

Wie Sie In-App-Käufe für capacitor-Apps mit dem Capacitor-Purchases-Plugin und RevenueCat umsetzen

Martin Donadieu

Martin Donadieu

Content-Marketing-Spezialist

In-App-Käufe für capacitor

Dieses Plugin wurde nun in den offiziellen Repository von RevenueCat übertragen. Bitte besuchen Sie die offizielle Dokumentation für weitere Informationen.

Capacitor Einkäufe ist ein Plugin für das Capacitor Framework, das es Entwicklern ermöglicht, In-App-Einkäufe auf iOS und Android durchzuführen. Es bietet eine einfache und konsistente API über mehrere Plattformen hinweg, was es Entwicklern erleichtert, In-App-Abonnements und Einkäufe in ihren mobilen Apps zu implementieren.

Ein wichtiger Vorteil des Capacitor Einkäufe-Plugins ist, dass es sich mit RevenueCat, einer Plattform, integriert, die Werkzeuge für In-App-Abonnements und In-App-Einkäufe bereitstellt. RevenueCat vereinfacht den Prozess der Implementierung von In-App-Abonnements und Einkäufen, indem es eine einfache und konsistente API über mehrere Plattformen hinweg bereitstellt und Aufgaben wie die Validierung von Rechnungen und die Benutzerverwaltung automatisiert.

Mit RevenueCat können Entwickler Einkäufe leicht verwalten, den Umsatz verfolgen und andere damit zusammenhängende Aufgaben durchführen. Einige Funktionen, die von RevenueCat angeboten werden, sind:

  • Automatisierte Rechnungsvalidierung
  • Benutzerverwaltung
  • Unterstützung für benutzerdefinierte Preismodelle
  • Detaillierte Analytik -Scalierung

Durch die Verwendung des Capacitor Einkäufe-Plugins mit RevenueCat können Entwickler Zeit und Mühe sparen, wenn sie In-App-Abonnements und Einkäufe in ihren mobilen Apps implementieren, und zusätzliche Funktionen bereitstellen, die dazu beitragen können, die Benutzererfahrung zu verbessern und den Umsatz zu erhöhen.

Mit der Capacitor-Einkäufe-Plugin und RevenueCat können Entwickler Einkäufe und Abonnements in ihren Apps leicht verwalten und tracken, Empfängerprüfungen durchführen und Benutzer über mehrere Plattformen hinweg verwalten. Es ermöglicht auch die Erstellung von benutzerdefinierten Preismodellen und die Gewinnung von detaillierten Analysen, um die Leistung und den Umsatz zu verbessern.

Installation

Stellen Sie sicher, dass Sie die neueste Version von Capacitor und der Capacitor-Einkäufe-Plugin verwenden. Sie können die neueste Version von Capacitor und der Capacitor-Einkäufe-Plugin auf der Capacitor-Website überprüfen.

Um die Capacitor-Einkäufe-Plugin zu installieren, führen Sie den folgenden Befehl aus: npm i @capgo/capacitor-purchases code-Plugin zur App hinzufügen npx cap sync

__CAPGO_KEEP_0__-Einkäufe-Fähigkeit in Xcode hinzufügen:

Xcode-Schritt 1 Dann Xcode-Schritt 2

1. Ein neues RevenueCat-Konto erstellen

Diese Anleitung führt Sie durch die Einrichtung von Abonnements und RevenueCat’s SDK mit nur wenigen Zeilen code.

Registrieren Sie sich für ein neues RevenueCat-Konto here.

📘

💡 Hier ist ein Tip!

RevenueCat empfiehlt, für jede App / Projekt ein separates RevenueCat-Konto zu erstellen, insbesondere, wenn Sie jemals beabsichtigen, die App zu verkaufen. Dies wird den Übertragungsprozess beschleunigen, da Sie das gesamte Konto übertragen können, anstatt auf die Übertragung einzelner Projekte durch RevenueCat-Support zu warten.

Organisationen / Enterprise

Wir empfehlen, bei der Registrierung für RevenueCat ein Unternehmen zu verwenden und Ihre App innerhalb eines Projekts einzurichten. Sie können den Rest Ihrer Mannschaft als Mitglieder zu Ihrem Projekt einladen, aber nur der Projektleiter kann die Rechnungsstellung verwalten. Projektmitglieder können keine Rechnungsstellungsdetails verwalten.

2. Projekt- und App-Konfiguration

▶️ Projekt erstellen

Navigieren Sie zum RevenueCat-Dashboard und ein neues Projekt hinzufügen aus dem Dropdown-Menü in der oberen Navigationsoption namens Projekte.

Schritt 1 von RevenueCat

Das Pop-up-Fenster für die Erstellung eines neuen Projekts

▶️ Eine App / Plattform hinzufügen

Von Projekt-Einstellungen > Apps wählen Sie in der linken Menüleiste des Projektdashboards die Plattform für die App, die Sie hinzufügen werden.

Schritt 2 von RevenueCat

Projektdashboard für die Auswahl der App-Plattform

Das Feld Appname ist erforderlich, um Ihre App bei RevenueCat hinzuzufügen. Die restlichen Konfigurationsfelder können später hinzugefügt werden. Um Test- und Produktionskäufe durchzuführen, müssen die Bundle-ID (iOS) / Paketname (Android) sowie der Shared Secret (iOS) / Dienstzertifikate (Android) konfiguriert werden. Schritt 3 bei RevenueCat

App-Konfigurationsseite für eine Apple App Store-App

💡 Hier ist ein Tip!

📘

Nach der Registrierung Ihrer App empfiehlt RevenueCat die Einrichtung von

Plattformserverbenachrichtigungen . Diese Benachrichtigungen sind nicht erforderlich, aber sie beschleunigen dieWebhooks und die Lieferung von Integrationszeiten und reduzieren die Verzögerungszeit bei der Aktualisierung Ihrer Abonnenten. Staging- vs. Produktions-Apps und -Benutzer

📘

RevenueCat selbst hat keine separaten Umgebungen für Staging und Produktions. Vielmehr werden die zugrunde liegenden Transaktionen für Benutzer durch Sandbox- und Produktionsumgebungen unterschieden.

Schritt 3 bei RevenueCat

Jeder RevenueCat-App können sowohl Sandbox- als auch Produktionskäufe aus den Stores gemacht werden. Wenn Sie separate Apps für Staging und Produktionsumgebung haben, können Sie mehrere Projekte in RevenueCat erstellen, um Ihr Setup zu reflektieren.

Darüber hinaus werden die Benutzer nicht durch die Umgebung getrennt. Der gleiche Benutzer kann gleichzeitig aktive Sandbox-Käufe und aktive Produktionskäufe haben.

▶️ Dienstzertifikate

Dienstzertifikate müssen für RevenueCat eingerichtet werden, damit es mit den App-Stores auf Ihrer Seite kommunizieren kann. Siehe die RevenueCat-Anleitungen App Store Connect-Shared-Secret, Play Service-Zertifikate, und Amazon Appstore-Shared-Secret für weitere Informationen.

Hinweis, dass Play-Service-Zertifikate bis zu 36 Stunden, um sich durch Google’s Server zu verbreiten.

3. Produktkonfiguration

▶️ Store-Einrichtung

Bevor Sie mit der Nutzung von RevenueCat beginnen können, um Produkte abzurufen, müssen Sie Ihre Produkte in den jeweiligen Stores konfigurieren. Siehe die folgenden Anleitungen für App Store Connect, Google Play Console, Amazon Appstore, und Stripe für Hilfe bei der Navigation durch diesen Prozess.

Wenn Sie iOS-Produkte verkaufen, stellen Sie sicher, dass Sie Ihr 'Paid Applications Agreement' unterzeichnen und Ihre Bank- und Steuerinformationen in App Store Connect > Vereinbarungen, Steuern und Banking. dieses muss vor dem Testen von Kaufvorgängen abgeschlossen werden..

📘

Möchten Sie die Store-Konfiguration während des Testens auslassen?

Auf iOS können Sie die Produktkonfiguration in App Store Connect durch die Verwendung von StoreKit-Konfigurationsdateien verzögern. Diese Konfigurationsdateien erfordern nur minimalen Aufwand und können über Xcode direkt konfiguriert werden.

Mehr über die Einrichtung von StoreKit-Konfigurationsdateien in RevenueCat erfahren. Sandbox-Testen Leitfaden.

▶️ Produkte und Berechtigungen in RevenueCat konfigurieren

Sobald Ihre In-App-Produkte in App Store Connect, Google Play Console, Amazon Appstoreoder Stripehaben Sie das Konfigurationsdatum kopieren müssen, um es in das RevenueCat-Dashboard einzufügen. RevenueCat verwendet ein Berechtigungen-System, um Zugriff auf Premium-Funktionen zu steuern, und Angebote, um die Menge der Produkte zu verwalten, die Kunden angeboten werden.

Berechtigungen sind der Zugriff, den ein Kunde nach dem Kauf eines bestimmten Produkts "erworben" hat. Angebote sind eine einfache Möglichkeit, die In-App-Produkte zu organisieren, die Sie auf Ihrem Paywall anbieten und sie remote konfigurieren möchten. empfiehlt die Verwendung dieser Funktionen, um Ihre __CAPGO_KEEP_0__ zu vereinfachen und Ihnen zu ermöglichen, Produkte ohne eine App-Update zu ändern. utilizing these features to simplify your code and enable you to change products without releasing an app update.

Produkte konfigurieren um Ihre Produkte einzurichten und sie dann in Angebote oder Entgeltberechtigungen zu organisieren. Schritt 4 von RevenueCat

4. Verwendung von RevenueCat's Einkäufen __CAPGO_KEEP_0__

RevenueCat SDK implementiert Einkäufe und Abonnements auf Plattformen reibungslos und synchronisiert Token mit dem Server von RevenueCat.

Wenn Sie mit Problemen mit den SDK konfrontiert sind, sehen Sie

If you run into issues with the SDK, see für Anweisungen. Verwenden Sie nur Ihre öffentliche __CAPGO_KEEP_0__-Schlüssel, um Einkäufe zu konfigurieren.

📘

Only use your public SDK key to configure Purchases

Sie können Ihren öffentlichen SDK-Schlüssel im API-Schlüssel Registerkarte unter Projekt-Einstellungen im Dashboard finden.

Sie sollten den gemeinsamen __CAPGO_KEEP_0__-Instanz nur einmal konfigurieren, normalerweise bei der App-Start. Anschließend wird die gleiche Instanz in Ihrem App über den Zugriff auf die __CAPGO_KEEP_0__-Instanz geteilt. .shared instance in the SDK.

__CAPGO_KEEP_0__-Konfiguration Configuring SDK __CAPGO_KEEP_0__

Stellen Sie sicher, dass Sie die Konfiguration Einkäufe mit Ihrem öffentlichen SDK-Schlüssel nur. Sie können mehr über die verschiedenen API-Schlüssel in RevenueCat lesen Authentifizierungsleitfaden.

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_******'})
}

Wenn Sie in der Entwicklung sind, empfiehlt RevenueCat die Aktivierung umfangreicherere Debug-Protokolle. Weitere Informationen über diese Protokolle finden Sie in ihrem Fehlersuche Leitfaden.

Wenn Sie beabsichtigen, RevenueCat neben Ihrem bestehenden Einkaufs-code zu verwenden, beziehen Sie sich auf ihren Leitfaden zu Beobachtungsmodus.

📘

Konfigurieren Sie Einkäufe mit Benutzer-IDs

Wenn Sie ein Benutzerauthentifizierungssystem in Ihrer App haben, können Sie einen Benutzer-Bezeichner zum Zeitpunkt der Konfiguration oder zu einem späteren Zeitpunkt mit einem Aufruf an .logIn()Weitere Informationen finden Sie in der RevenueCat-Leitfaden zu Benutzer identifizieren.

Der SDK wird die konfigurierten Angebote automatisch abrufen und die Produktinformationen von Apple, Google oder Amazon abrufen. So werden bereits verfügbare Produkte geladen, wenn Kunden Ihre Kaufseite öffnen. Konfigurierte Angebote Zum Beispiel können Sie Angebote verwenden, um Ihre Bezahlwand zu organisieren. Weitere Informationen finden Sie im RevenueCat-Leitfaden zu

Produkte anzeigen ▶️ Verfügbare Produkte abrufen und anzeigen Käufe mit Benutzer-IDs konfigurieren

Wenn Sie ein Benutzerauthentifizierungssystem in Ihrer App haben, können Sie einen Benutzer-Bezeichner bei der Konfiguration oder später mit einem Aufruf von

📘

zur Verfügung stellen. Weitere Informationen finden Sie im RevenueCat-Leitfaden zu

Benutzer identifizieren .logIn()__CAPGO_KEEP_0__ __CAPGO_KEEP_0__.

Die SDK wird automatisch die konfigurierten Angebote abrufen und die Produktinformationen von Apple, Google oder Amazon abrufen. So werden bereits verfügbare Produkte geladen, wenn Kunden Ihre Kaufseite öffnen. Konfigurierte Angebote Um Ihre Kaufseite zu starten, müssen die Produkte bereits geladen sein.

Hier ist ein Beispiel für das Abrufen von Angeboten. Sie können Angebote verwenden, um Ihre Paywall-Ansicht zu organisieren. Siehe die RevenueCat-Anleitung zu Produkte anzeigen für weitere Informationen und Best Practices.

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

Wenn das Abrufen Ihrer Angebote, Produkte, oder verfügbaren Pakete leer sind, liegt es an einer Konfigurationsproblematik im jeweiligen Store.

Die häufigsten Gründe für dieses Problem in App Store Connect sind ein veraltetes 'Zahlungsanwendungsabkommen' oder Produkte, die sich nicht zumindest im 'Zur Veröffentlichung bereit' Zustand befinden. In GooglePlay tritt dies normalerweise auf, wenn die App nicht auf einem geschlossenen Track veröffentlicht ist und ein gültiger Testnutzer hinzugefügt wurde.

Mehr Informationen zu diesem Problem finden Sie im RevenueCat-Hilfezentrum Hilfezentrum.

▶️ Eine Kaufabwicklung vornehmen

Das SDK enthält eine einfache Methode zur Vereinfachung von Kaufabwicklungen. Die purchase:package nimmt ein Paket aus der abgerufenen Angebote und verarbeitet die Transaktion mit dem entsprechenden App-Store.

Das code-Beispiel unten zeigt den Kaufprozess eines Pakets und die Bestätigung, dass es die 'your_entitlement_id' Inhalte freischaltet. Weitere Details zur purchase:package Methode finden Sie im RevenueCat-Leitfaden zum Kaufabwickeln.

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
}

▶️ Abonnementstatus überprüfen

Sie können diese Methode jederzeit aufrufen, wenn Sie den aktuellen Status benötigen, und es ist sicher, diese Methode wiederholt während des Lebenszyklus Ihrer App aufzurufen. Käufe __CAPGO_KEEP_0__ automatisch den neuesten CustomerInfo __CAPGO_KEEP_0__ — also in den meisten Fällen, zieht es aus dem Cache und läuft sehr schnell.

Es ist üblich, diese Methode aufzurufen, wenn man entscheidet, welche UI dem Benutzer angezeigt werden soll, und wenn der Benutzer eine Aktion durchführt, die eine bestimmte Berechtigungsebene erfordert.

📘

💡 Hier ist ein Tip!

Sie können mehr Informationen über eine Abonnement als nur, ob es aktiv ist, abrufen. Siehe die RevenueCat-Anleitung zu Abonnementstatus um zu erfahren, ob das Abonnement sich erneuern lässt, ob es bei der Benutzerkreditkarte ein Problem gibt und mehr.

RevenueCat ermöglicht es Ihren Benutzern, ihre In-App-Käufe wiederherzustellen, wodurch alle Inhalte, die sie zuvor aus dem selben Ladenkonto (Apple, Google oder Amazon-Konto) gekauft haben, wieder aktiviert werden. Wir empfehlen allen Apps, eine Möglichkeit für die Benutzer zu haben, den Wiederherstellungsprozess auszulösen. Beachten Sie, dass Apple eine Wiederherstellungsmechanismen anfordert, falls ein Benutzer Zugriff auf seine Käufe verliert (z.B. wenn er die App uninstaliert und neu installiert, seine Kontoinformationen verliert, usw.).

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

Wenn zwei verschiedene App-Benutzer-IDs Transaktionen aus demselben zugrunde liegenden Speicheraccount (Apple, Google oder Amazon-Konto) wiederherstellen. RevenueCat kann versuchen, zwischen den beiden App-Benutzer-IDs einen Alias zu erstellen und sie als denselben Benutzer weiterhin zu zählen. Siehe die RevenueCat-Anleitung zu "Restoring Purchases" für weitere Informationen zu den verschiedenen konfigurierbaren Wiederherstellungsverhaltensweisen. Restoration von Kaufleistungen Für weitere Informationen zu den verschiedenen konfigurierbaren Wiederherstellungsverhaltensweisen siehe die Anleitung zu "Restoring Purchases".

Da sich SDK reibungslos auf jedem Plattformbetrieb bewegt, können Änderungen an einem Benutzers Kaufinformationen aus verschiedenen Quellen stammen. Sie können auf jede Änderung an einem Kunden CustomerInfo indem Sie sich an einem optionalen Delegate-Methode halten, purchases:receivedUpdated:.

Dieses Method wird ausgelöst, wenn SDK ein aktualisiertes CustomerInfo Objekt von Aufrufen an getCustomerInfo(), purchase(package:), purchase(product:)oder restorePurchases().

Kundeninformationen werden nicht von der RevenueCat-Hintergrundanwendung an Ihr App weitergegeben, Updates können nur durch einen Ausgangsnetzwerkaufruf an RevenueCat erfolgen, wie oben erwähnt.

Je nach Ihrer App kann es ausreichen, den Delegate zu ignorieren und einfach Änderungen an Kundeninformationen beim nächsten Start Ihrer App oder in den Abschlussblöcken der SDK-Methoden zu behandeln.

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

👍

Du hast es geschafft!

Du hast jetzt ein vollständiges Abonnement-Kaufsystem implementiert, ohne einen Monat damit zu verbringen, den Server code zu schreiben. Gratulation!

Beispiel-Apps

Um mehr vollständige Beispiele für die Integration des SDK herunterzuladen, besuche die RevenueCat-Beispielanwendungsressourcen.

Beispiel-Ansichten

Ich werde bald ein Beispiel-App mit Capacitor und Vue.js veröffentlichen.

Wenn Sie tiefe Verwendung des Capacitor benötigen, überprüfen Sie die Dokumentation SDK. hier.

Nächste Schritte

\

Wenn Sie Live-Updates in Ihrer App benötigen

Hier anmelden 👇

Hier registrieren, um Ihr Konto zu erhalten

Capgo

Weitermachen von In-App-Käufen für capacitor

Wenn Sie für capacitor In-App-Käufe verwenden um Zahlungen und Käufe zu planen, verbinden Sie es mit Capgo Preisgestaltung für den Produktworkflow in Capgo Preisgestaltung, Zahlungssystem für die Implementierungsdetails in Zahlungssystem, @capgo/native-purchases für die Implementierungsdetails in @capgo/native-purchases, Einstieg für die Implementierungsdetails in Einstieg, und Revenue Playbook Für die Implementierungsdetails im Revenue Playbook.

Live Updates für Capacitor-Apps

Wenn ein Web-Schicht-Bug live ist, liefern Sie die Reparatur über Capgo anstatt Tage zu warten, bis die App-Store-Zulassung genehmigt ist. Die Benutzer erhalten die Aktualisierung im Hintergrund, während native Änderungen im normalen Review-Verfahren bleiben.

Los geht's

Neueste von unserem Blog

Capgo gibt Ihnen die besten Einblicke, die Sie benötigen, um eine wirklich professionelle mobile App zu erstellen.