In-App-Käufe für capacitor

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

Falls du eine einfachere native 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 leicht implementieren 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 die Receipt-Validierung und das 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 können Entwickler Zeit und Aufwand bei der Implementierung von In-App-Abonnements und Käufen in ihren mobilen Apps sparen und zusätzliche Features bereitstellen, die das Nutzererlebnis verbessern und den Umsatz steigern können.

Mit dem Capacitor Purchases Plugin und RevenueCat können Entwickler In-App-Abos und Käufe einfach verwalten, Belege validieren und Nutzer plattformübergreifend tracken. Zudem lassen sich individuelle Preismodelle erstellen und detaillierte Analytics nutzen, um Performance und Umsatz zu steigern.

Installation

Nutze unbedingt die neueste Version von Capacitor und dem Capacitor Purchases Plugin. Die aktuellsten Versionen von Capacitor und dem Capacitor Purchases Plugin findest du auf der Capacitor Website.

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

In-App-Käufe in Xcode aktivieren:

dann

1. Erstelle ein RevenueCat-Konto

In diesem Guide erfährst du, wie du Abonnements und RevenueCats SDK mit nur wenigen Zeilen code implementierst.

Für ein neues RevenueCat-Konto registrieren hier.

📘

💡 Ein kleiner Tipp!

RevenueCat empfiehlt, für jede App bzw. jedes Projekt ein eigenes RevenueCat-Konto zu erstellen, besonders wenn du die App später einmal 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 dein Team als Collaborators zu deinem Projekt einladen, aber nur der Project Owner kann das Billing verwalten. Projekt-Collaborators können keine Abrechnungsdetails verwalten.

2. Projekt- und App-Konfiguration

▶️ Ein Projekt erstellen

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

Das Popup-Modal zum Erstellen eines neuen Projekts

▶️ Eine App / Plattform hinzufügen

Von Projekteinstellungen > Apps wähle im linken Menü des Projekt-Dashboards die Plattform für die App aus, die du hinzufügen möchtest.

Projekt-Dashboard zur Auswahl der App-Plattform

Das Feld App-Name ist erforderlich, um deine App zu 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) / der Package Name (Android) sowie das Shared Secret (iOS) / die Service Credentials (Android) konfiguriert sein.

App-Konfigurationsseite für eine Apple App Store App

📘

💡 Hier ist ein Tipp!

Nach der Registrierung deiner App empfiehlt RevenueCat die Einrichtung von Plattform-Server-Benachrichtigungen. Diese Benachrichtigungen sind nicht zwingend erforderlich, beschleunigen aber webhooks sowie die Integrationszeiten und reduzieren die Verzögerung bei der Aktualisierung deiner Abonnenten.

📘

Staging vs. Production Apps und User

RevenueCat selbst bietet keine getrennten Umgebungen für Staging und Production an. Stattdessen werden die zugrunde liegenden Transaktionen der User durch Sandbox und Production unterschieden.

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

Zudem werden die Nutzer nicht nach Umgebungen getrennt. Derselbe Nutzer kann gleichzeitig aktive Sandbox-Käufe und aktive Produktions-Käufe haben.

▶️ Service-Zugangsdaten

Service Credentials müssen eingerichtet werden, damit RevenueCat in deinem Namen mit den App Stores kommuniziert. Siehe die 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 sich Play Service Credentials über Googles Server verbreitet haben.

3. Produktkonfiguration

▶️ Store-Setup

Bevor du RevenueCat zum Abrufen von Produkten nutzen kannst, musst du deine Produkte in den jeweiligen Stores konfigurieren. Nutze diese Guides für App Store Connect, Google Play Console, Amazon Appstore, und Stripe um dich durch diesen Prozess zu führen.

Wenn Sie iOS-Produkte verkaufen, stellen Sie sicher, dass Sie Ihr „Paid Applications Agreement“ unterzeichnet und Ihre Bank- sowie Steuerinformationen in App Store Connect > Verträge, Steuern und Bankwesen. hinterlegt hast. Dies muss erledigt sein, bevor du Käufe testen kannst..

📘

Möchtest du das Store-Setup beim Testen überspringen?

Unter iOS kannst du die Konfiguration in App Store Connect hinauszögern, indem du stattdessen mit StoreKit Configuration Files testest. Diese Config-Files erfordern minimalen Setup und lassen sich direkt via Xcode konfigurieren.

Erfahre mehr über die Einrichtung von StoreKit Configuration Files in RevenueCat Sandbox-Tests Guide.

▶️ Produkte und Entitlements in RevenueCat konfigurieren

Once your in-app products have been configured in App Store Connect, Google Play Console, Amazon Appstore, oder Stripe konfiguriert sind, musst du diese Konfiguration in das RevenueCat Dashboard kopieren. RevenueCat nutzt ein Entitlements-System, um den Zugriff auf Premium-Features zu steuern, und Offerings, um die Produktpalette für deine Kunden zu verwalten.

Entitlements definieren die Zugriffsebene, auf die ein Kunde nach dem Kauf eines bestimmten Produkts „Anspruch“ hat. Offerings sind eine einfache Möglichkeit, deine In-App-Produkte auf der Paywall zu organisieren und diese remote zu konfigurieren. RevenueCat empfiehlt diese Features zu nutzen, um dein code zu vereinfachen und Produkte ohne App-Update zu ändern.

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

4. Nutzung von RevenueCat Purchases SDK

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

Falls Probleme mit dem SDK auftreten, siehe Fehlerbehebung der SDKs für Hilfestellung.

📘

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

Deinen öffentlichen SDK Key findest du im API Keys Tab unter Projekteinstellungen im Dashboard.

You should only configure the shared instance of In-App-Käufe solltest du nur einmal konfigurieren, meist beim App-Start. Danach wird dieselbe Instanz in deiner gesamten App über die .shared Instanz im SDK genutzt.

RevenueCat-Guide ansehen unter Configuring SDK. für weitere Informationen und Best Practices.

Stelle sicher, dass du nur In-App-Käufe mit deinem öffentlichen SDK Key konfigurierst. Mehr Infos zu den verfügbaren API Keys findest du im RevenueCat Authentication Guide.

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

Während der Entwicklung empfiehlt RevenueCat, detailliertere Debug-Logs zu aktivieren. Weitere Informationen zu diesen Logs findest du im Debugging Guide.

Falls du planst, RevenueCat zusammen mit deinem bestehenden code zu nutzen, schau dir den Guide zu Observer-Modus.

📘

Konfiguration von Käufen mit User IDs

Wenn deine App ein User-Authentifizierungssystem nutzt, kannst du bei der Konfiguration oder später per Aufruf von .logIn()Weitere Informationen findest du im RevenueCat-Guide zu Benutzer identifizieren.

Das SDK ruft automatisch die konfigurierten Offerings ab und lädt die Produktinformationen von Apple, Google oder Amazon. So sind verfügbare Produkte bereits geladen, wenn Kunden deinen Purchase Screen öffnen.

Hier ist ein Beispiel für das Abrufen von Offerings. Du kannst Offerings nutzen, um deinen Paywall-Screen zu organisieren. Siehe den RevenueCat-Guide zu Produkte anzeigen und den entsprechenden Best Practices.

▶️ Verfügbare Produkte abrufen und anzeigen

📘

Käufe mit User IDs konfigurieren

Wenn deine App ein Benutzer-Authentifizierungssystem nutzt, kannst du zum Zeitpunkt der Konfiguration oder später über einen Aufruf von .logIn()Weitere Informationen findest du im RevenueCat-Guide zu Benutzer identifizieren.

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

Hier ist ein Beispiel für das Abrufen von Offerings. Du kannst Offerings nutzen, um deinen Paywall-Screen zu organisieren. Siehe den RevenueCat-Guide 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
}

Falls das Abrufen deiner Offerings, Produkteoder verfügbare Packages leer ist, liegt das an einem Konfigurationsfehler im jeweiligen Store.

Die häufigsten Gründe in App Store Connect sind ein veralteter „Paid Applications Agreement“ oder Produkte, die nicht mindestens den Status „Ready To Submit“ haben. Bei Google Play liegt es meist daran, dass die App nicht in einem Closed Track veröffentlicht wurde oder kein gültiger Testnutzer hinzugefügt wurde.

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

▶️ Einen Kauf tätigen

Das SDK enthält eine einfache Methode, um Käufe zu ermöglichen. Die purchase:package nimmt ein Package aus dem abgerufenen Offering und wickelt die Transaktion über den jeweiligen App Store ab.

Das untenstehende code Sample zeigt den Prozess eines Package-Kaufs und bestätigt, dass damit der Inhalt „your_entitlement_id“ freigeschaltet wird. Details zur purchase:package Methode findest du im RevenueCat Guide zu Kä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 nutzen, um den aktuellen Status abzufragen; es ist sicher, sie während des gesamten App-Lifecycles wiederholt aufzurufen. In-App-Käufe cached automatisch das neueste CustomerInfo bei jedem Update – in den meisten Fällen greift diese Methode also auf den Cache zu und läuft extrem schnell.

Es ist üblich, diese Methode aufzurufen, um zu entscheiden, welches UI dem Nutzer angezeigt wird, oder wenn eine Aktion ein bestimmtes Entitlement-Level erfordert.

📘

💡 Ein kleiner Tipp!

Du kannst viel mehr Informationen über ein Abonnement abrufen, als nur zu wissen, ob es aktiv ist oder nicht. Siehe den RevenueCat-Guide zu Abonnement-Status um zu erfahren, ob sich das Abo in der Verlängerung befindet, ob Probleme mit der Kreditkarte vorliegen und mehr.

RevenueCat ermöglicht es deinen Nutzern, ihre In-App-Käufe wiederherzustellen und so alle Inhalte zu reaktivieren, die sie zuvor über denselben Store-Account erworben haben (Apple-, Google- oder Amazon-Account). Wir empfehlen, dass alle Apps eine Möglichkeit bieten, die Restore-Methode auszulösen. Beachte, dass Apple einen Restore-Mechanismus zwingend vorschreibt, falls Nutzer den Zugriff auf ihre Käufe verlieren (z. B. durch Deinstallation/Neuinstallation der App, Verlust der Account-Daten etc.).

  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-User-IDs Transaktionen aus demselben zugrunde liegenden Store-Account (Apple-, Google- oder Amazon-Account) wiederherstellen. RevenueCat versucht eventuell, einen Alias zwischen den beiden App User IDs zu erstellen und sie künftig als denselben Nutzer zu zählen. Siehe RevenueCat-Guide zu Käufe wiederherstellen für weitere Informationen zu den verschiedenen konfigurierbaren Restore-Verhaltensweisen.

Da SDK nahtlos auf jeder Plattform funktioniert, können Änderungen an den Kaufdaten eines Nutzers aus verschiedenen Quellen stammen. Sie können auf Änderungen in den CustomerInfo indem man eine optionale Delegate-Methode implementiert, purchases:receivedUpdated:.

Diese Methode wird aufgerufen, sobald SDK ein aktualisiertes CustomerInfo Objekt durch Aufrufe von getCustomerInfo(), purchase(package:), purchase(product:), oder restorePurchases().

CustomerInfo-Updates werden nicht vom RevenueCat-Backend an Ihre App gepusht; wie oben erwähnt, können Updates nur über einen ausgehenden Netzwerk-Request an RevenueCat erfolgen.

Je nach App kann es ausreichen, den Delegate zu ignorieren und Änderungen an den Kundeninformationen einfach 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-System implementiert, ohne einen Monat lang Server-code zu schreiben. Glückwunsch!

Beispiel-Apps

Für vollständigere Beispiele zur Integration von SDK schau dir die RevenueCat Sample App Ressourcen 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 dir den RevenueCat- Guide zu Entitlements ansiehst.
• 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 zum Migrieren deiner bestehenden Abonnements.
• Sobald du bereit bist, deine Integration zu testen, kannst du den RevenueCat-Guides zu Testing und Debugging folgen.
• Falls du für das App Store Small Business Program qualifiziert bist, schau dir den RevenueCat-Guide an: wie du dich bewirbst und RevenueCat informierst

Wenn du Live update in deiner App benötigst

Mach hier mit 👇

Registriere dich hier, um dein Konto zu erhalten

Capgo

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

Wenn Sie ... verwenden In-App-Käufe für capacitor um Zahlungen und Käufe zu planen, verbinden Sie es mit Capgo Preise für den Product-Workflow in Capgo Preisen, Zahlungssystem für die Implementierungsdetails im Zahlungssystem, @capgo/native-purchases für die Implementierungsdetails in @capgo/native-purchases, Erste Schritte für die Implementierungsdetails beim Getting Started, und Umsatz-Playbook für die Details im Revenue Playbook.