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-Beauftragter

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 die Integration mit RevenueCat, einer Plattform, 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 bietet 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 verbundene Aufgaben durchführen. Einige Funktionen, die von RevenueCat angeboten werden, sind:

  • Automatisierte Rechnungsvalidierung
  • Benutzerverwaltung
  • Unterstützung für benutzerdefinierte Preismodelle
  • Detaillierte Analysen -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 Kaufoption und RevenueCat können Entwickler Einnahmen und Abonnementsverwaltung leicht verwalten und tracken, Empfänger bestätigen und Benutzer über mehrere Plattformen verwalten. Es ermöglicht auch die Erstellung benutzerdefinierter Preismodelle und die Gewinnung detaillierter Analysen, um die Leistung und Einnahmen zu verbessern.

Installation

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

Um die Capacitor Kaufoption zu installieren, führen Sie den folgenden Befehl aus: npm i @capgo/capacitor-purchases code in Ihrer App hinzufügen npx cap sync

Die in-App-Kauffähigkeit in Xcode hinzufügen:

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 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 bei RevenueCat ein Unternehmen zu verwenden und Ihre App innerhalb eines Projekts einzurichten. So können Sie den Rest Ihres Teams als Mitwirkende zu Ihrem Projekt einladen, aber nur der Projektleiter kann die Rechnung verwalten.Die Projektkollaboratoren können keine Rechnungsdetails 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 Navigation, das 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 Projekt-Dashboards die Plattform für die App, die Sie hinzufügen werden.

Schritt 2 von RevenueCat

Projekt-Dashboard für die Auswahl der App-Plattform

Das Feld Appname ist erforderlich, um Ihre App bei RevenueCat hinzufü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 gemeinsame Geheimcode (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 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. Stattdessen werden die zugrunde liegenden Transaktionen für Benutzer durch Sandbox- und Produktionsumgebungen unterschieden.

App name

Jeder RevenueCat-App kann sowohl Sandbox- als auch Produktionskäufe aus den Stores vornehmen. 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 Ihre Rechnung kommunizieren kann. Siehe die RevenueCat-Anleitungen App Store Connect-Shared-Secret, Play Service-Zertifikateund Amazon Appstore-Shared-Secret für weitere Informationen.

Hinweis: Play-Service-Zertifikate können bis zu 36 Stunden, um sich auf Google-Servern 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 'Zahlungspflichtiges Anwendungsabkommen' unterzeichnen und Ihre Bank- und Steuerinformationen in App Store Connect > Vereinbarungen, Steuern und Banking. ausfüllen. Dies muss vor dem Testen von Kauftransaktionen abgeschlossen sein..

📘

Möchten Sie die Store-Einrichtung 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 Berechtigungs-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 "berechtigt" ist. Angebote sind eine einfache Möglichkeit, um die In-App-Produkte zu organisieren, die Sie auf Ihrer Zahlungsseite "anbieten" möchten und sie remote konfigurieren möchten. RevenueCat empfiehlt die Verwendung dieser Funktionen, um Ihre __CAPGO_KEEP_0__ zu vereinfachen und Ihnen zu ermöglichen, Produkte ohne eine App-Update-Veröffentlichung 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. Die 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 dem SDK Probleme haben, 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 Ihre öffentliche SDK-Schlüssel aus der API-Schlüssel Registerkarte unter Projekt-Einstellungen im Dashboard.

Sie sollten die gemeinsame Instanz von Purchases nur einmal konfigurieren, normalerweise bei der App-Start. Anschließend wird die gleiche Instanz in Ihrem App durch Zugriff auf die .shared Instanz in der SDK

geteilt. Configuring SDK Konfiguration von __CAPGO_KEEP_0__

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

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. Weitere Informationen zu diesen Protokollen finden Sie in ihrer Debugging Anleitung.

Wenn Sie beabsichtigen, RevenueCat neben Ihrem bestehenden Kauf code zu verwenden, beziehen Sie sich auf ihre Anleitung zum Beobachtermodus.

📘

Konfigurieren von Käufen mit Benutzer-IDs

Wenn Sie ein Benutzerauthentifizierungssystem in Ihrer App haben, können Sie einen Benutzeridentifier bei der Konfiguration oder zu einem späteren Zeitpunkt mit einem Aufruf an .logIn()Weitere Informationen finden Sie in der Anleitung von RevenueCat 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 Beispiel für das Abrufen von Angeboten. Sie können 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 Benutzeridentifier bei der Konfiguration oder später mit einem Aufruf von

📘

mehr erfahren. Überprüfen Sie den RevenueCat-Leitfaden zu

Benutzer identifizieren .logIn()Konfigurieren Sie die Käufe mit Benutzer-IDs Benutzer identifizieren.

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 starten. Konfigurierte Angebote 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. Wenn das Abrufen Ihrer

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

Angebote Produkte, , oder verfügbarenPakete leer sind, liegt es an einer Konfigurationsproblematik im jeweiligen Store. Angebote abrufen

The 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.

Sie finden weitere Informationen zum Beheben dieses Problems in RevenueCat Hilfe.

▶️ Kauf abschließen

Das SDK enthält eine einfache Methode zur Vereinfachung von Kaufvorgängen. Es purchase:package eine Pakete 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 das 'your_entitlement_id' Inhalt freischaltet. Weitere Details zur purchase:package Methode finden Sie in der RevenueCat-Anleitung zum Kaufabschließen.

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 immer dann verwenden, wenn Sie den aktuellen Status benötigen, und es ist sicher, diese Methode wiederholt während des Lebenszyklus Ihrer App aufzurufen. Purchases automatisch den neuesten CustomerInfo wenn es sich aktualisiert — also in den meisten Fällen, zieht diese Methode aus dem Cache und läuft sehr schnell.

Man ruft diese Methode typischerweise auf, wenn man entscheidet, welche Benutzeroberfläche 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 oder nicht, abrufen. Siehe die RevenueCat-Anleitung zu Abonnementstatus um zu erfahren, ob das Abonnement sich erneuern lässt, ob bei der Kreditkarte des Benutzers ein Problem festgestellt wurde 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, dass sie eine Möglichkeit für die Benutzer 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 un- und wieder 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 Benutzer-IDs für die App Wiederherstellen von Transaktionen aus demselben zugrunde liegenden Speicheraccount (Apple, Google oder Amazon-Konto). RevenueCat kann versuchen, zwischen den beiden App-Benutzer-IDs einen Alias zu erstellen und sie als denselben Benutzer weiterzuzählen. Siehe die RevenueCat-Anleitung zu Wiederherstellen von Kaufs , um mehr Informationen zu den verschiedenen konfigurierbaren Wiederherstellungsverhaltensweisen zu erhalten.

Da SDK auf jedem Plattform problemlos funktioniert, können Änderungen an einem Benutzers Kaufinformationen aus verschiedenen Quellen stammen. Sie können auf jede Änderung in einem Kunden CustomerInfo durch die Implementierung eines optionalen Delegate-Methode reagieren, purchases:receivedUpdated:.

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

CustomerInfo-Updates 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, SDK überprüfen Sie die Dokumentation 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 __CAPGO_KEEP_0__ verwenden in App-Käufe für capacitor um Zahlungen und Käufe zu planen und zu verwalten, 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 Anleitung zum Starten für die Implementierungsdetails in Anleitung zum Starten, und Revenue-Playbook Für die Implementierungsdetails im Revenue Playbook.

Live Updates für Capacitor-Apps

Wenn ein Web-Schicht-Bug live ist, versenden 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 jetzt

Neueste aus unserem Blog

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