Zum Hauptinhalt springen
Inhaltsanleitung

Einkäufe in der App für capacitor

Wie Sie Einkäufe in der App für capacitor-Anwendungen mit dem Capacitor-Purchases-Plugin und RevenueCat umsetzen können

Martin Donadieu

Martin Donadieu

Content-Marketing-Beauftragter

Einkäufe in der App für capacitor

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

Wenn Sie eine einfachere native API-App ohne RevenueCat bevorzugen, @capgo/native-purchases Implementiert In-App-Käufe und -abonnements direkt mit StoreKit und Google Play Billing.

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 mehrere Plattformen hinweg, wodurch es Entwicklern leichter fällt, In-App-Abonnements und Käufe in ihren mobilen Apps umzusetzen.

Eines der wichtigsten Funktionen des Capacitor Kauf-Plugins ist, dass es mit RevenueCat, einer Plattform, integriert ist, die Werkzeuge für In-App-Abonnements und In-App-Käufe bereitstellt. 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 Abonnements leicht verwalten, den Umsatz verfolgen und andere damit verbundene Aufgaben durchführen. Einige von RevenueCat angebotene Funktionen umfassen:

  • Automatisierte Belegvalidierung
  • Benutzerverwaltung
  • Unterstützung für benutzerdefinierte Preismodelle
  • Detaillierte Analyse\n- Skalierbarkeit

Mit der Verwendung des Capacitor Kaufs-Plugins in Verbindung mit RevenueCat können Entwickler 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 der Capacitor Kauf-Plugin und RevenueCat können Entwickler In-App-Abonnements und -Käufe 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 detaillierter Analysen, um die Leistung und den Umsatz zu verbessern.

Installation

Stellen Sie sicher, dass Sie die neueste Version von Capacitor und der Capacitor Kauf-Plugin verwenden. Sie können die neueste Version von Capacitor und der 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 code in Ihrer App hinzufügen npx cap sync

__CAPGO_KEEP_0__-Einkäufe in Xcode hinzufügen:

Xcode-Schritt 1 Dann Xcode-Schritt 2

1. Erstellen Sie ein RevenueCat-Konto

Dieses Leitfaden wird Sie durch die Einrichtung von Abonnements und RevenueCat’s SDK mit nur wenigen Zeilen code führen.

Für ein neues RevenueCat-Konto anmelden 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 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, 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.Projektmitarbeiter können keine Rechnungsdetails verwalten.

2. Projekt- und App-Konfiguration

▶️ Erstellen Sie ein Projekt

Navigieren Sie zum RevenueCat-Dashboard und Ein neues Projekt hinzufügen aus dem Dropdown-Menü in der oberen Navigation, das Projekte.

context":"Seite/Bereich: Capgo-Marketing-Website. Rolle: Kurzer UI-Label oder Navigationselement. Anzeigen in: Seite contributing.astro. Nachrichten Schlüssel `projects` (Projekte)."

Einnahmen-Kat-Step 1

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

▶️ Eine App / Plattform hinzufügen Von Projekt-Einstellungen > Apps

im linken Menü des Projekt-Dashboards auswählen Sie die Plattform für die App, die Sie hinzufügen werden.

Einnahmen-Kat-Step 2

Projekt-Dashboard für die Auswahl der App-Plattformen 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 gemeinsame Geheimcode (iOS) / Dienstzertifikate (Android) konfiguriert werden.

Schritt 3 bei RevenueCat

Konfigurationsseite für eine Apple App Store-App

📘

💡 Hier ist ein Tip!

Nach der Registrierung Ihrer App empfiehlt RevenueCat, die Einrichtung von Plattformserverbenachrichtigungenzuzulegen. Diese Benachrichtigungen sind nicht erforderlich, aber sie beschleunigen die Webhooks und verringern die Zeit, die für die Lieferung von Integrationen und die Aktualisierung Ihrer Abonnenten benötigt wird.

📘

Staging- und Produktions-Apps und -Benutzer

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

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

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

Für RevenueCat müssen Dienstzertifikate eingerichtet werden, damit die App Stores auf Ihre Rechnung kommunizieren können. Siehe die RevenueCat-Anleitungen App Store Connect-Shared-Secret, Play Service Credentials, und Amazon Appstore-Shared-Secret zur weiteren Information.

Hinweis: Die Play-Servicerechte können bis zu 36 Stunden, um sich auf Google-Servern auszubreiten.

3. Produktkonfiguration

▶️ Store-Einrichtung

Bevor Sie mit der Nutzung von RevenueCat beginnen können, um Produkte abzurufen, müssen Sie Ihre Produkte in den entsprechenden Stores konfigurieren. Siehe die folgenden Anleitungen für App Store Connect, Google Play Console, Amazon Appstoreund Stripe zur Hilfe, um sich durch diesen Prozess zu navigieren.

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 Kaufvorgängen abgeschlossen sein..

📘

Wollen Sie den Store-Einrichtungsvorgang während des Testens auslassen?

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

Lesen Sie mehr über die Einrichtung von StoreKit-Konfigurationsdateien in RevenueCat Sandbox-Testen Anleitung.

▶️ Konfigurieren Sie Produkte und Berechtigungen in RevenueCat

Einmal Ihre In-App-Produkte in App Store Connect, Google Play Console, Amazon Appstoreoder Stripe, müssen Sie die Konfiguration in das RevenueCat-Dashboard kopieren. 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 Zahlungswall anbieten möchten und sie remote konfigurieren möchten. RevenueCat empfiehlt verwendet diese Funktionen, um Ihre code zu vereinfachen und Ihnen zu ermöglichen, Produkte ohne eine App-Update zu ändern.

Siehe Produkte konfigurieren um Ihre Produkte einzurichten und sie dann in Angebote oder Entgeltberechtigungen zu organisieren.

Etappe 4 von RevenueCat

4. Verwendung von RevenueCats Einkäufen SDK

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

Wenn Sie Probleme mit der SDK haben, sehen Sie Troubleshooting der SDKs zur Anleitung.

📘

Verwenden Sie nur Ihren öffentlichen SDK-Schlüssel, um Einkäufe zu konfigurieren.

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

Sie sollten den gemeinsamen __CAPGO_KEEP_0__-Instanz nur einmal konfigurieren, normalerweise bei der App-Start. Anschließend wird die gleiche Instanz in Ihrem gesamten App durch Zugriff auf die __CAPGO_KEEP_0__-Instanz geteilt. Siehe die RevenueCat-Anleitung zu Konfigurieren Sie __CAPGO_KEEP_0__ .shared instance in the SDK.

Purchases Configuring SDK dashboard

Stellen Sie sicher, dass Sie die Konfiguration Einkäufe mit Ihrem öffentlichen SDK-Schlüssel durchführen. 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 von ausführlicheren Debug-Protokollen. Weitere Informationen über diese Protokolle finden Sie in ihrem Debugging-Leitfaden Wenn Sie RevenueCat neben Ihrem bestehenden Kauf __CAPGO_KEEP_0__ verwenden möchten, beziehen Sie sich auf ihren Leitfaden zum

If you’re planning to use RevenueCat alongside your existing purchase code, refer to their guide on Konfigurieren Sie Einkäufe 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

. Um mehr zu erfahren, besuchen Sie den Leitfaden von RevenueCat zu .logIn()Konfigurieren Sie Einkäufe mit Benutzer-IDs 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. Die unten stehende Beispielanweisung zeigt, wie Angebote abgerufen werden können. Sie können Angebote verwenden, um Ihre Bezahlwand zu organisieren. Weitere Informationen und Best Practices finden Sie im RevenueCat-Leitfaden zu ▶️ Abrufen und Anzeigen verfügbarer Produkte

Konfigurieren Sie Kauf mit Benutzer-IDs Wenn Sie ein Benutzerauthentifizierungssystem in Ihrer App haben, können Sie einen Benutzer-Bezeichner bei der Konfiguration oder zu einem späteren Zeitpunkt mit einem Aufruf von mehr erfahren, besuchen Sie den RevenueCat-Leitfaden zu

Benutzer identifizieren

📘

Angebote konfigurieren

Benutzer-IDs mit Kauf konfigurieren .logIn()Benutzer-IDs mit Kauf konfigurieren Benutzer-IDs mit Kauf konfigurieren.

Wird SDK automatisch die konfigurierten Angebote abrufen und die Produktinformationen von Apple, Google oder Amazon abrufen. Daher werden bereits verfügbare Produkte geladen, wenn Kunden Ihre Kaufseite öffnen. Konfigurierte Angebote und die Produktinformationen von Apple, Google oder Amazon abrufen. Daher werden bereits verfügbare Produkte geladen, wenn Kunden Ihre Kaufseite öffnen.

Ein Beispiel für die Abfrage von Angeboten finden Sie unten. Mit Angeboten können Sie Ihre Bezahlwand organiseren. Weitere Informationen und Best Practices finden Sie im RevenueCat-Leitfaden zu Anzeigen von Produkten Um Ihre

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

Angebote Produkte, oder verfügbare Pakete leer zu haben, liegt ein Konfigurationsproblem in der jeweiligen Verkaufsplattform vor. Ein Beispiel für die Abfrage von Angeboten finden Sie unten. Mit Angeboten können Sie Ihre Bezahlwand organiseren. Weitere Informationen und Best Practices finden Sie im RevenueCat-Leitfaden zu Anzeigen von Produkten.

Die häufigsten Gründe für dieses Problem in App Store Connect sind ein veraltetes 'Zahlungsdienstvereinbarung' oder Produkte, die sich nicht zumindest im 'Zur Veröffentlichung bereitgestellten' 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.

▶️ Eine Kaufabwicklung vornehmen

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

Das unten stehende Beispiel für code zeigt den Prozess der Kaufabwicklung eines Pakets und der Bestätigung, dass es die 'your_entitlement_id' Inhalte freischaltet. Weitere Details zur purchase:package Methode finden Sie in der RevenueCat-Anleitung zu Kaufabwicklungen.

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. Abo-Transaktionen automatisch den neuesten CustomerInfo whenever es aktualisiert wird — so in den meisten Fällen zieht diese Methode aus dem Cache und läuft sehr schnell.

Es ist üblich, diese Methode zu verwenden, 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 es bei der Kreditkarte des Benutzers 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 die Benutzer zu haben, den Restore-Mechanismus auszulösen. Beachten Sie, dass Apple einen Restore-Mechanismus erfordert, wenn ein Benutzer Zugriff auf seine Käufe verliert (z.B. wenn er die App uninstalliert 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)
  })

Zwei verschiedene Benutzer-IDs Wiederherstellen Sie die Transaktionen aus demselben zugrunde liegenden Speicher-Konto (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 Kaufgeschäften für weitere Informationen zu den verschiedenen konfigurierbaren Wiederherstellungsverhaltensweisen.

Da sich SDK reibungslos auf jedem Plattform arbeitet, können Änderungen an den Kaufinformationen eines Benutzers aus verschiedenen Quellen stammen. Sie können auf jede Änderung bei den Kaufinformationen eines Kunden reagieren, indem Sie sich an ein optionalen Delegate-Methoden halten, CustomerInfo Diese Methode wird ausgelöst, wenn __CAPGO_KEEP_0__ ein aktualisiertes purchases:receivedUpdated:.

This method will fire whenever the SDK receives an updated CustomerInfo oder getCustomerInfo(), purchase(package:), purchase(product:)Kundeninformationen werden restorePurchases().

nicht von der RevenueCat-Hintergrundanwendung an Ihr App geschoben, können Updates nur durch einen Ausgangsnetzwerkaufruf an RevenueCat erfolgen, wie oben erwähnt. Je nach Ihrer App kann es ausreichen, den Delegate zu ignorieren und einfach die Änderungen an den Kundeninformationen beim nächsten Mal, wenn Ihre App gestartet wird, oder in den Abschlussblöcken der __CAPGO_KEEP_0__-Methoden zu behandeln.

Depending on your app, it may be sufficient to ignore the delegate and simply handle changes to customer information the next time your app is launched or in the completion blocks of the SDK methods.

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

👍

Du hast es geschafft!

You have now implemented a fully-featured subscription purchasing system without spending a month writing server code. Congrats!

Beispiel-Apps

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

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

\

Registrieren Sie sich hier, um Ihr Konto zu erhalten

__CAPGO_KEEP_0__

Fortsetzen Sie mit den In-App-Käufen für __CAPGO_KEEP_0__

Capgo

capacitor

If Sie __CAPGO_KEEP_0__ verwenden in app purchases for capacitor und es mit __CAPGO_KEEP_0__ Pricing verbinden um den Produktworkflow in Capgo Pricing zu steuern for the product workflow in Capgo Pricing, um die Implementierungsdetails in Zahlungssystem zu steuern @__CAPGO_KEEP_0__/native-purchases um die Implementierungsdetails in @capgo/native-purchases zu steuern for the implementation detail in @capgo/native-purchases, um die Implementierungsdetails in Anleitung zum Starten zu steuern Einnahmen-Handbuch um die Implementierungsdetails in Einnahmen-Handbuch zu steuern Für die Implementierungsdetails im Revenue Playbook.

Echtzeit-Updates für Capacitor-Apps

Wenn ein Fehler im Weblayer live ist, schicken Sie die Reparatur über Capgo anstatt Tage zu warten, bis die App im App Store genehmigt ist. Die Benutzer erhalten das Update im Hintergrund, während native Änderungen im normalen Review-Prozess bleiben.

Menschliche Unterstützung von Martin

Los geht's jetzt

Neueste aus unserem Blog

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