Zum Hauptinhalt springen
Anleitung

In-App-Käufe für capacitor

In-App-Käufe für capacitor-Apps mit dem Capacitor-Käufe-Plugin und RevenueCat implementieren

Martin Donadieu

Martin Donadieu

Content-Marketing-Manager

In-App-Käufe für capacitor

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

Capacitor-Käufe 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 mehreren Plattformen, was es Entwicklern erleichtert, In-App-Abonnements und Käufe in ihren mobilen Apps zu implementieren.

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

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

  • Automatisierte Rechnungsvalidierung
  • Benutzerverwaltung
  • Unterstützung für benutzerdefinierte Preismodelle
  • Detaillierte Analysen -Skalierbarkeit

Indem Entwickler das Capacitor Kauf-Plugin mit RevenueCat verwenden, können sie Zeit und Mühe sparen, wenn sie In-App-Abonnements und -Kä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 dem Capacitor Kauf-Plugin und RevenueCat können Entwickler leicht In-App-Abonnements und -Käufe verwalten und verfolgen, Rechnungen validieren und Benutzer über mehrere Plattformen verwalten. Es ermöglicht auch die Erstellung von benutzerdefinierten Preismodellen und die Gewinnung detaillierter Analysen, um die Leistung und den Umsatz zu verbessern.

Installation

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

Um das Capacitor Kauf-Plugin zu installieren, führen Sie den folgenden Befehl aus: npm i @capgo/capacitor-purchases fügen Sie das Plugin zu Ihrer App hinzu native code npx cap sync

Fügen Sie die Einkaufsfunktion in Xcode hinzu:

Xcode-Schritt 1 dann Xcode-Schritt 2

1. Erstellen Sie ein RevenueCat-Konto

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

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

📘

💡 Hier ist ein Tip!

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

Organisationen / Unternehmen

Wir empfehlen Ihnen, eine Unternehmenskennung zu verwenden, wenn Sie sich bei RevenueCat anmelden und Ihre App innerhalb eines Projekts einrichten. Sie können den Rest Ihres Teams als "Mitwirkende" zu Ihrem Projekt einladen, aber nur der Projektbesitzer kann die Rechnungsfreigabe verwalten. Projektmitwirkende können keine Rechnungsdetails verwalten. Mitwirkende aber nur der Projektbesitzer kann die Rechnungsfreigabe verwalten.2. Projekt- und App-Konfiguration

▶️ Projekt erstellen

Navigieren Sie zum RevenueCat-Dashboard und fügen Sie ein neues Projekt aus dem Dropdown-Menü in der oberen Navigation hinzugefügt.

Projekte Schritt 1 von RevenueCat add a new project from the dropdown in the top navigation menu called.

Projects

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 aus, die Sie hinzufügen werden.

Schritt 2 von RevenueCat

Projektdashboard für die Auswahl der App-Plattform

Das Feld App-Name 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 sein.

Schritt 3 von 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, beschleunigen jedoch die Webhooks und die Lieferzeiten von Integrationsleistungen und reduzieren die Verzögerungszeit bei der Aktualisierung Ihrer Abonnenten.

📘

Staging- vs. Produktionsanwendungen und -benutzer

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

Jede RevenueCat-Anwendung kann sowohl Sandbox- als auch Produktionskäufe von den Stores ausführen. Wenn Sie separate Anwendungen für Staging und Produktionsanwendungen haben, können Sie mehrere Projekte in RevenueCat erstellen, um Ihren Aufbau zu spiegeln.

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

▶️ Dienstzugriffsberechtigungen

Dienstzugriffsberechtigungen müssen für RevenueCat eingerichtet werden, damit es mit den Stores auf Ihrem Namen kommunizieren kann. Siehe die RevenueCat-Anleitungen App Store Connect-Schlüssel, Play Service-Zertifikate, und Amazon Appstore-Schlüssel Weitere Informationen finden Sie hier.

Hinweis: Play Service-Zertifikate können bis zu 36 Stunden, um sich auf Google-Servern zu verbreiten.

3. Produktkonfiguration

▶️ Ladenplatzkonfiguration

Bevor Sie mit der Nutzung von RevenueCat zur Abfrage von Produkten beginnen können, müssen Sie Ihre Produkte in den jeweiligen Läden 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 'Zahlungsanwendungsabkommen' unterzeichnen und Ihre Bank- und Steuerinformationen in App Store Connect > Vereinbarungen, Steuern und Bankgeschäfte. Dies muss vor der Testung von Kaufvorgängen abgeschlossen werden..

📘

Möchten Sie die Ladenanlage während der Testphase 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 lesen. Sandbox-Testen Anleitung.

▶️ Produkte und Berechtigungen in RevenueCat konfigurieren

Sobald Ihre In-App-Produkte in App Store Connect, Google Play Console, Amazon Appstore oder Stripe konfiguriert wurden, müssen Sie diese Konfiguration in das RevenueCat-Dashboard kopieren. RevenueCat verwendet ein Entitlements-System, um Zugriff auf Premium-Funktionen zu steuern, und Offerings, um die Produktsätze zu verwalten, die Sie Ihren Kunden anbieten. Entitlements sind der Zugriff, den ein Kunde nach dem Kauf eines bestimmten Produkts hat., Offerings sind ein einfacher Weg, um die In-App-Produkte zu organisieren, die Sie auf Ihrer Zahlungsbarriere anbieten möchten und sie remote konfigurieren möchten., RevenueCat empfiehlt, diese Funktionen zu nutzen, um Ihre __CAPGO_KEEP_0__ zu vereinfachen und Ihnen zu ermöglichen, Produkte ohne eine App-Update zu ändern.Siehe Produkte konfigurierenOnce your in-app products have been configured in

App Store Connect Google Play Console utilizing these features to simplify your code and enable you to change products without releasing an app update.

, or Stripe Ihre Produkte einzurichten und sie dann in Angebote oder Entgeltberechtigungen zu organisieren.

Schritt 4 von RevenueCat

4. RevenueCat’s Purchases SDK verwenden

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

Wenn Sie Probleme mit dem SDK haben, sehen Sie Troubleshooting der SDKs für Anweisungen.

📘

Verwenden Sie nur Ihre öffentliche SDK-Schlüssel, um Purchases zu konfigurieren

Sie können Ihre öffentliche SDK-Schlüssel unter API-Schlüssel im Reiter Projekt-Einstellungen im Dashboard.

Sie sollten die gemeinsame Instanz von Käufe nur einmal konfigurieren, meist bei der App-Start. Anschließend wird die gleiche Instanz in Ihrem App über die Zugriff auf die .shared SDK

Instance Configuring SDK siehe die RevenueCat Anleitung zu

Konfiguration von __CAPGO_KEEP_0__ für weitere Informationen und Best Practices. with your public SDK key only. You can read more about the different API keys available in RevenueCat Käufe.

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 von ausführlicheren Debug-Protokollen. Für weitere Informationen über diese Protokolle, sehen Sie sich bitte ihre Anleitung an. Debugging Wenn Sie beabsichtigen, RevenueCat neben Ihrem bestehenden Kaufprozess zu verwenden, beziehen Sie sich bitte auf ihre Anleitung zum "Observer Mode"

If you’re planning to use RevenueCat alongside your existing purchase code, refer to their guide on 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 ".

📘

Identifizierung von Benutzern

Der __CAPGO_KEEP_0__ wird die konfigurierten Angebote automatisch abrufen und die Produktinformationen von Apple, Google oder Amazon abrufen. Daher werden bereits verfügbare Produkte geladen, wenn Kunden Ihre Kaufseite öffnen. .logIn()Konfiguration von Kaufs 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 ".

The SDK will automatically fetch the Der __CAPGO_KEEP_0__ wird die konfigurierten Angebote automatisch abrufen und die Produktinformationen von Apple, Google oder Amazon abrufen. Daher werden bereits verfügbare Produkte geladen, wenn Kunden Ihre Kaufseite öffnen. Konfiguration von Kaufs mit Benutzer-IDs

Hier ist ein Beispiel für das Abrufen von Angeboten. Sie können Angebote verwenden, um Ihre Zahlungsschaltfläche zu organisieren. Siehe die RevenueCat-Anleitung zu Produkte anzeigen ▶️ Produkte abrufen und anzeigen, die verfügbar sind

Einkäufe mit Benutzer-IDs konfigurieren

📘

Wenn Sie ein Benutzerauthentifizierungssystem in Ihrer App haben, können Sie einen Benutzer-Bezeichner zur Zeit der Konfiguration oder zu einem späteren Zeitpunkt mit einem Aufruf an

mehr erfahren, überprüfen Sie die RevenueCat-Anleitung zu .logIn()Benutzer identifizieren Der __CAPGO_KEEP_0__ wird automatisch die.

The SDK will automatically fetch the abrufen und die Produktinformationen von Apple, Google oder Amazon abrufen. Daher werden bereits verfügbare Produkte geladen, wenn Kunden Ihre Kaufschaltfläche öffnen. Hier ist ein Beispiel für das Abrufen von Angeboten. Sie können Angebote verwenden, um Ihre Zahlungsschaltfläche zu organisieren. Siehe die RevenueCat-Anleitung zu

Produkte anzeigen Produkte anzeigen zur weiteren Information und besten Praktiken.

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

Wenn Sie Ihre Angebote, Produkte, oder verfügbare Pakete leer sind, liegt dies wahrscheinlich 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 Hilfe Center.

▶️ Eine Kaufabwicklung vornehmen

The SDK beinhaltet eine einfache Methode zur Vereinfachung von Kaufprozessen. Die purchase:package nimmt ein Paket vom abgerufenen Angebot und verarbeitet die Transaktion mit dem entsprechenden App-Store.

The code-Beispiel unten zeigt den Kaufprozess eines Pakets und die Bestätigung, dass es das „your_entitlement_id“-Inhalt freischaltet. Weitere Details zur purchase:package Methode finden Sie in der RevenueCat-Anleitung 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
}

▶️ Abonnementstatus überprüfen

Sie können diese Methode verwenden, wenn Sie den aktuellen Status benötigen, und es ist sicher, diese Methode wiederholt während des Lebenszyklus Ihrer App aufzurufen. Käufe werden automatisch die neuesten Daten im Cache abrufen, sobald diese aktualisiert werden – in der Regel läuft diese Methode daher sehr schnell. CustomerInfo Es ist üblich, diese Methode aufzurufen, wenn Sie entscheiden, welche Benutzeroberfläche dem Benutzer anzeigen sollen, und wenn der Benutzer eine Aktion durchführt, die eine bestimmte Berechtigungsebene erfordert.

💡 Hier ist ein Tip!

📘

Käufe

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

RevenueCat ermöglicht es Ihren Benutzern, ihre In-App-Käufe wiederherzustellen, indem sie alle Inhalte reaktivieren, die sie zuvor aus dem selben Ladenkonto (Apple, Google oder Amazon-Konto) gekauft haben. Wir empfehlen allen Apps, eine Möglichkeit für Benutzer bereitzustellen, den Wiederherstellungsprozess auszulösen. Beachten Sie, dass Apple eine Wiederherstellungsmechanismus erfordert, falls ein Benutzer Zugriff auf seine Käufe verliert (z.B. bei einem Entfernen/Neuinstallieren der App oder bei einem Verlust der Kontoinformationen 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 Benutzer-IDs Wiederherstellungstransaktionen aus demselben zugrunde liegenden Ladenkonto (Apple, Google oder Amazon-Konto) ausführen. RevenueCat kann versuchen, zwischen den zwei Benutzer-IDs einen Alias zu erstellen und sie als denselben Benutzer zu zählen. Siehe die RevenueCat-Anleitung zu Wiederherstellen von Käufen für weitere Informationen zu den verschiedenen konfigurierbaren Wiederherstellungsverhaltensweisen.

Da sich SDK reibungslos auf jedem Plattform befindet, können Änderungen an einem Benutzers Kaufinformationen aus verschiedenen Quellen stammen. Sie können auf jede Änderung in einem Kundenkonto reagieren. CustomerInfo indem Sie sich an einer optionalen Delegatemethode anpassen purchases:receivedUpdated:.

Diese Methode wird ausgelöst, sobald das SDK eine aktualisierte CustomerInfo Objekt aus Aufrufen von getCustomerInfo(), purchase(package:), purchase(product:), oder restorePurchases().

Kundeninformationen werden nicht an Ihre App von der RevenueCat-Hintergrundanwendung geschickt, Updates können nur von einem Ausgangsnetzwerkanforderung an RevenueCat erfolgen, wie oben erwähnt.

Je nach Ihrer App mag es ausreichen, die Delegierte zu ignorieren und die Änderungen an der Kundeninformation einfach im nächsten Mal, wenn Ihre App gestartet wird, oder in den Abschlussblöcken der SDK-Methoden zu behandeln.

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

👍

Sie haben es geschafft!

Sie haben jetzt ein vollständig ausgestattetes Abonnementkaufsystem implementiert, ohne einen Monat damit zu verbringen, Server code zu schreiben. Herzlichen Glückwunsch!

Beispiel-Apps

Um mehr vollständige Beispiele für die Integration des SDK herunterzuladen, besuchen Sie die RevenueCat-Beispielanwendungsdokumentation.

Beispielanwendungen anzeigen

Ich werde bald eine Beispielanwendung mit Capacitor und Vue.js veröffentlichen.

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

Nächste Schritte

\

Wenn Sie Live-Updates in Ihrer App benötigen

Treten Sie uns bei 👇

Hier registrieren Sie sich, um Ihr Konto zu erhalten

Capgo

Live-Updates für Capacitor-Apps

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

Los geht's jetzt

Neuestes aus unserem Blog

Capgo bietet Ihnen die besten Einblicke, die Sie benötigen, um ein wirklich professionelles mobiles App zu erstellen.