In-App-Käufe für capacitor

Dieses Plugin wurde in das offizielle RevenueCat-Repository übertragen. Bitte schau dir das an: offiziellen Dokumentation für weitere Informationen.

Wenn du ein einfacheres natives API ohne RevenueCat bevorzugst, @capgo/native-purchases implementiert In-App-Käufe und Abonnements direkt über StoreKit und Google Play Billing.

Capacitor Purchases ist ein Plugin für das Capacitor Framework, das In-App-Käufe auf iOS und Android ermöglicht. Es bietet eine einfache und konsistente API über mehrere Plattformen hinweg, sodass Entwickler In-App-Abonnements und Käufe in ihren mobilen Apps einfach umsetzen können.

Ein Hauptmerkmal des Capacitor Purchases Plugins ist die Integration mit RevenueCat, einer Plattform, die Tools für In-App-Abonnements und In-App-Käufe bereitstellt. RevenueCat vereinfacht die Implementierung von In-App-Abonnements und Käufen durch eine einfache und konsistente API über mehrere Plattformen hinweg und automatisiert Aufgaben wie Receipt-Validierung und User-Management.

Mit RevenueCat können Entwickler Abonnements verwalten, Umsätze tracken und andere damit verbundene Aufgaben erledigen. Zu den Funktionen von RevenueCat gehören:

Automatisierte Receipt-Validierung
User-Management
Unterstützung für benutzerdefinierte Preismodelle
Detaillierte Analytics - Skalierbarkeit

Durch die Nutzung des Capacitor Purchases Plugins mit RevenueCat sparen Entwickler Zeit und Aufwand bei der Implementierung von In-App-Abonnements und Käufen in ihren mobilen Apps und können zusätzliche Features bereitstellen, die die User Experience verbessern und den Umsatz steigern.

Mit dem Capacitor Purchases-Plugin und RevenueCat können Entwickler In-App-Abonnements und Käufe einfach verwalten und nachverfolgen, Belege validieren und Nutzer über mehrere Plattformen hinweg verwalten. Es ermöglicht zudem die Erstellung individueller Preismodelle und liefert detaillierte Analysen, um Leistung und Umsatz zu steigern.

Installation

Achte darauf, die neueste Version von Capacitor und das Capacitor Purchases-Plugin zu verwenden. Die aktuellen Versionen von Capacitor und dem Capacitor Purchases-Plugin findest du auf der Capacitor-Website.

Um das Capacitor Purchases-Plugin zu installieren, führe den folgenden Befehl aus: npm i @capgo/capacitor-purchases Füge das Plugin zu deinem nativen code-App-Projekt hinzu npx cap sync

Füge die In-App-Käufe-Funktion in Xcode hinzu:

Xcode Schritt 1 dann Xcode Schritt 2

1. RevenueCat-Konto erstellen

Dieser Guide zeigt dir, wie du mit nur wenigen Zeilen code Subscriptions und RevenueCat’s SDK einrichtest.

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

📘

💡 Hier ist ein Tipp!

RevenueCat empfiehlt, für jede App bzw. jedes Projekt ein eigenes RevenueCat-Konto zu erstellen, besonders wenn du die App später verkaufen möchtest. Das beschleunigt den Transferprozess, da du das gesamte Konto übertragen kannst, anstatt darauf zu warten, dass der RevenueCat Support einzelne Projekte überträgt.

Organisationen / Enterprise

Wir empfehlen, bei der Registrierung für RevenueCat ein Firmenkonto zu nutzen und deine App innerhalb eines Projekts einzurichten. Du kannst den Rest deines Teams als Mitarbeiter zu deinem Projekt einladen, aber nur der Projektinhaber kann das Billing verwalten. Projekt-Mitarbeiter können keine Abrechnungsdetails verwalten.

2. Projekt- und App-Konfiguration

▶️ Ein Projekt erstellen

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

RevenueCat Schritt 1

Das Popup-Modal zum Erstellen eines neuen Projekts

▶️ App / Plattform hinzufügen

Von Projekteinstellungen > Apps Wählen Sie im linken Menü des Projekt-Dashboards die Plattform für die App aus, die Sie hinzufügen möchten.

RevenueCat Schritt 2

Projekt-Dashboard zur Auswahl der App-Plattform

Das Feld App-Name ist erforderlich, um Ihre App bei RevenueCat hinzuzufügen. Die restlichen Konfigurationsfelder können später ergänzt werden. Für Test- und Produktionskäufe müssen die Bundle ID (iOS) / Package Name (Android) sowie der Shared Secret (iOS) / Service Credentials (Android) konfiguriert sein.

RevenueCat Schritt 3

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

📘

💡 Hier ist ein Tipp!

Nach der Registrierung Ihrer App empfiehlt RevenueCat die Einrichtung von Plattformserver-Benachrichtigungen. Diese Benachrichtigungen sind nicht erforderlich, beschleunigen aber Webhooks und Integrationszeiten verkürzen sowie Verzögerungen bei Updates für Ihre Abonnenten reduzieren.

📘

Staging- vs. Produktions-Apps und -Nutzer

RevenueCat selbst bietet keine separaten Umgebungen für Staging und Produktion. Stattdessen werden die zugrunde liegenden Transaktionen der Nutzer über Sandbox und Produktion unterschieden.

Jede RevenueCat-App kann sowohl Sandbox- als auch Production-Käufe in den Stores tätigen. Falls du separate Apps für Staging und Production nutzt, kannst du in RevenueCat mehrere Projekte erstellen, um dein Setup abzubilden.

Zudem werden Nutzer auch nicht nach Umgebung getrennt. Derselbe Nutzer kann gleichzeitig aktive Sandbox-Käufe und aktive Production-Käufe haben.

▶️ Service-Zugangsdaten

Service Credentials müssen eingerichtet werden, damit RevenueCat in deinem Namen mit den App Stores kommunizieren kann. Siehe RevenueCat-Guides App Store Connect Shared Secret, Play Service-Anmeldedaten, und Amazon Appstore Shared Secret für weitere Informationen.

Beachte, dass es bis zu 36 Stunden dauern kann, bis Play Service Credentials auf den Google-Servern verteilt sind.

3. Produktkonfiguration

▶️ Store-Setup

Bevor du RevenueCat nutzen kannst, um Produkte abzurufen, musst du deine Produkte in den jeweiligen Stores konfigurieren. Siehe die folgenden Guides für App Store Connect, die Google Play Console, Amazon Appstore, und Stripe als Hilfe, um diesen Prozess zu durchlaufen.

Wenn du iOS-Produkte verkaufst, unterschreibe unbedingt den „Paid Applications Agreement“ und gib deine Bank- und Steuerdaten in App Store Connect > Agreements, Tax, and Banking. Dies muss abgeschlossen sein, bevor du Käufe testen kannst.

📘

Willst du das Store-Setup beim Testen überspringen?

Auf iOS kannst du die Konfiguration von Produkten in App Store Connect hinauszögern, indem du stattdessen mit StoreKit Configuration files testest. Diese Config-Files erfordern ein minimales Setup und lassen sich direkt über Xcode konfigurieren.

Mehr zur Einrichtung von StoreKit Configuration files in RevenueCat Sandbox-Testing lesen.

▶️ Produkte und Berechtigungen in RevenueCat konfigurieren

Once your in-app products have been configured in App Store Connect, die Google Play Console, Amazon Appstore, oder Stripe, musst du diese Konfiguration in das RevenueCat-Dashboard kopieren. RevenueCat nutzt ein Entitlements-System, um den Zugriff auf Premium-Funktionen zu steuern, und Offerings, um das Sortiment der Produkte zu verwalten, die du deinen Kunden anbietest.

Entitlements definieren das Zugriffslevel, das ein Kunde nach dem Kauf eines bestimmten Produkts erhält. Offerings sind eine einfache Möglichkeit, die In-App-Produkte zu organisieren, die du in deinem Paywall anbieten möchtest, und sie remote zu konfigurieren. RevenueCat empfiehlt diese Features zu nutzen, um dein code zu vereinfachen und Produkte zu ändern, ohne ein App-Update zu veröffentlichen.

Siehe Produkte konfigurieren um deine Produkte einzurichten und sie anschließend in Offerings oder Entitlements zu organisieren.

RevenueCat Schritt 4

4. RevenueCats Purchases SDK nutzen

RevenueCat SDK implementiert Käufe und Abonnements nahtlos plattformübergreifend und synchronisiert dabei Tokens mit dem RevenueCat-Server.

Bei Problemen mit dem SDK siehe Fehlerbehebung bei den SDKs für weitere Hilfe.

📘

Nutze für die Purchases-Konfiguration nur deinen öffentlichen SDK Key

Du findest deinen öffentlichen SDK-Key im API Keys Tab unter Projekteinstellungen im Dashboard.

Du solltest die gemeinsame Instanz von In-App-Käufe einmal, in der Regel beim App-Start. Anschließend wird dieselbe Instanz in Ihrer gesamten App geteilt, indem auf .shared Instanz im SDK zugreifst.

RevenueCat-Leitfaden zu Konfiguration von SDK für weitere Informationen und Best Practices.

Stelle sicher, dass du In-App-Käufe nur mit deinem öffentlichen SDK-Key konfigurierst. Weitere Informationen zu den verschiedenen verfügbaren API-Keys findest du im 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_******'})
}

In der Entwicklung empfiehlt RevenueCat, ausführlichere Debug-Logs zu aktivieren. Weitere Informationen zu diesen Logs findest du in ihrem Debugging Leitfaden.

Wenn du RevenueCat zusammen mit deiner bestehenden Kauf-code verwenden möchtest, siehe ihren Leitfaden zu Observer-Modus.

📘

Purchases mit User-IDs konfigurieren

Wenn deine App ein Benutzerauthentifizierungssystem hat, kannst du eine User-ID bei der Konfiguration oder später per Aufruf von .logIn()übergeben. Weitere Informationen findest du im RevenueCat-Guide zu Benutzeridentifizierung.

Das SDK ruft automatisch die konfigurierten Offerings ab und holt die Produktinformationen von Apple, Google oder Amazon. So sind die verfügbaren Produkte bereits geladen, wenn Kunden deinen Kaufbildschirm öffnen.

Nachfolgend ein Beispiel zum Abrufen von Offerings. Du kannst Offerings nutzen, um deinen Paywall-Bildschirm zu strukturieren. Siehe RevenueCat-Guide zu Produkte anzeigen für weitere Informationen und Best Practices.

▶️ Verfügbare Produkte abrufen und anzeigen

📘

Purchases mit User-IDs konfigurieren

Wenn deine App ein Benutzerauthentifizierungssystem hat, kannst du eine User-ID bei der Konfiguration oder später per Aufruf von .logIn()übergeben. Weitere Informationen findest du im RevenueCat-Guide zu Benutzeridentifizierung.

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

Wenn du deine Offerings, Produkte, oder verfügbar Packages leer sind, liegt es an einem Konfigurationsproblem im jeweiligen Store.

Die häufigsten Gründe dafür in App Store Connect sind ein veralteter „Paid Applications Agreement“ oder Produkte, die nicht mindestens im Status „Ready To Submit“ sind. Bei Google Play tritt dies in der Regel auf, wenn die App nicht auf einem geschlossenen Track veröffentlicht und ein gültiger Testbenutzer hinzugefügt wurde.

Weitere Informationen zur Fehlerbehebung findest du im RevenueCat Hilfe-Center.

▶️ Kauf durchführen

Das SDK enthält eine einfache Methode zur Erleichterung von Käufen. Die purchase:package nimmt ein Package aus dem abgerufenen Offering und verarbeitet die Transaktion mit dem jeweiligen App-Store.

Das code-Beispiel unten zeigt den Prozess des Kaufs eines Packages und bestätigt, dass der Inhalt „your_entitlement_id“ freigeschaltet wird. Weitere Details zur purchase:package Methode findest du im RevenueCat-Guide zu Einkäufe tätigen.

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
}

▶️ Abo-Status prüfen

Du kannst diese Methode jederzeit verwenden, um den aktuellen Status abzurufen. Es ist sicher, sie während des gesamten App-Lebenszyklus wiederholt aufzurufen. In-App-Käufe cacht den neuesten Stand automatisch CustomerInfo bei jedem Update – in den meisten Fällen holt sich diese Methode also Daten aus dem Cache und läuft sehr schnell.

Typischerweise rufst du diese Methode auf, um zu entscheiden, welche UI dem Benutzer angezeigt wird, und immer dann, wenn der Benutzer eine Aktion ausführt, die ein bestimmtes Berechtigungslevel erfordert.

📘

💡 Hier ist ein Tipp!

Du kannst viel mehr Informationen über ein Abo abrufen, als nur, ob es aktiv ist. Siehe RevenueCat-Guide zu Abonnement-Status um zu erfahren, ob das Abo erneuert wird, ob ein Problem mit der Kreditkarte des Benutzers festgestellt wurde und mehr.

Mit RevenueCat können deine Benutzer ihre In-App-Käufe wiederherstellen und Inhalte, die sie zuvor aus dem gleichen Store-Konto (Apple-, Google- oder Amazon-Konto). Wir empfehlen, dass alle Apps eine Möglichkeit bieten, mit der Nutzer die Restore-Methode auslösen können. Beachte, dass Apple einen Restore-Mechanismus vorschreibt, falls ein Nutzer den Zugriff auf seine Käufe verliert (z. B. durch Deinstallation/Neuinstallation der App, Verlust der Kontodaten 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-Benutzerkennungen Transaktionen aus demselben zugrunde liegenden Store-Konto (Apple-, Google- oder Amazon-Konto) wiederherstellen. RevenueCat versucht möglicherweise, einen Alias zwischen den beiden App User IDs zu erstellen und sie künftig als denselben Nutzer zu zählen. Siehe den RevenueCat-Leitfaden zu Käufe wiederherstellen für weitere Informationen zu den verschiedenen konfigurierbaren Restore-Verhalten.

Da SDK nahtlos auf jeder Plattform funktioniert, können Änderungen an den Kaufinformationen eines Nutzers aus verschiedenen Quellen stammen. Du kannst auf Änderungen an den CustomerInfo durch die Implementierung einer optionalen Delegate-Methode purchases:receivedUpdated:.

Diese Methode wird ausgelöst, wann immer SDK ein aktualisiertes CustomerInfo Objekt von Aufrufen an getCustomerInfo(), purchase(package:), purchase(product:), oder restorePurchases().

CustomerInfo-Updates sind es nicht da sie vom RevenueCat-Backend in deine App gepusht werden, können Updates nur über eine ausgehende Netzwerk-Anfrage an RevenueCat erfolgen, wie oben erwähnt.

Je nach App kann es ausreichen, den Delegate zu ignorieren und Änderungen an den Kundendaten beim nächsten App-Start oder in den Completion-Blocks der SDK-Methoden zu verarbeiten.

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

👍

Geschafft!

Du hast jetzt ein vollwertiges Subscription-Kaufsystem implementiert, ohne einen Monat lang Server-code zu schreiben. Glückwunsch!

Beispiel-Apps

Um vollständigere Beispiele für die Integration von SDK herunterzuladen, schau dir die Ressourcen der RevenueCat Sample App an.

Samples ansehen

Bald veröffentliche ich eine Beispiel-App mit Capacitor und Vue.js.

Wenn du die Capacitor tiefergehend nutzen möchtest, SDK schau in die Dokumentation. hier.

Nächste Schritte

Falls noch nicht geschehen, stelle sicher, dass deine Produkte korrekt konfiguriert sind, indem du den RevenueCat- Guide zu Entitlements liest.
Wenn du eigene User-IDs verwenden möchtest, lies mehr über App-User-IDs festlegen .
Wenn du von einem anderen System zu RevenueCat wechselst, lies den RevenueCat-Guide zu der Migration deiner bestehenden Abonnements.
Sobald du bereit bist, deine Integration zu testen, folge den RevenueCat-Guides zu Testing und Debugging.
Wenn du für das App Store Small Business Program infrage kommst, lies den RevenueCat-Guide zu wie du dich bewirbst und RevenueCat informierst

Wenn du Live update in deiner App brauchst

Hier mitmachen 👇

Registriere dich hier für dein Konto

Capgo

Weiter geht's mit In-App-Käufen für capacitor

Wenn du es nutzt In-App-Käufe für capacitor um Zahlungen und Käufe zu planen, verbinde es mit Capgo Preise für den Produkt-Workflow auf der Preisseite von Capgo, Zahlungssystem für die Implementierungsdetails im Zahlungssystem, @capgo/native-purchases für das Implementierungsdetail in @capgo/native-purchases, Erste Schritte für das Implementierungsdetail in Getting Started und Umsatz-Playbook für das Implementierungsdetail im Revenue Playbook.