Zum Hauptinhalt springen
Tutorial

In-App-Käufe für capacitor

In-App-Käufe für capacitor umsetzen: Eine Anleitung für Capacitor-Anwendungen mit dem Capacitor-Purchases-Plugin und RevenueCat

Artikel Credits

Martin Donadieu

Autor

Valeria

Rezensent

Jordan

Redakteur

Einzelhandelsumsätze für capacitor

Dieser Plugin ist jetzt an das offizielle Repository von RevenueCat übertragen. Bitte schauen Sie sich die offizielle Dokumentation für weitere Informationen.

Wenn Sie eine einfache native API ohne RevenueCat bevorzugen, @capgo/native-purchases Implementiert Einzelhandelsumsätze und Abonnements direkt mit StoreKit und Google Play Billing.

Capacitor-Umsätze ist ein Plugin für das Capacitor-Framework, das Einzelhandelsumsätze auf iOS und Android ermöglicht. Es bietet eine einfache und konsistente API über mehrere Plattformen hinweg, was es Entwicklern erleichtert, Einzelhandel-Abonnements und -umsätze in ihren mobilen Apps zu implementieren.

Eines der wichtigsten Features des Capacitor-Umsätze-Plugins ist, dass es sich mit RevenueCat, einer Plattform, integriert, die Werkzeuge für Einzelhandel-Abonnements und -umsätze bietet. RevenueCat vereinfacht den Prozess der Implementierung von Einzelhandel-Abonnements und -umsätzen, indem es eine einfache und konsistente API über mehrere Plattformen hinweg bietet und Aufgaben wie die Validierung von Belegen und die Verwaltung von Benutzern automatisiert.

Mit RevenueCat können Entwickler Abonnements leicht verwalten, den Umsatz verfolgen und andere damit verbundene Aufgaben durchführen. Einige von RevenueCats angebotene Funktionen umfassen:

  • Automatisierte Belegverifizierung
  • Benutzerverwaltung
  • Unterstützung für benutzerdefinierte Preismodelle
  • Detaillierte Analytik -Skalierbarkeit

Mit der Verwendung des Capacitor Kaufs-Plugins 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 dem Capacitor Kaufs-Plugin und RevenueCat können Entwickler In-App-Abonnements und -Käufe einfach verwalten und tracken, Belege verifizieren und Benutzer über mehrere Plattformen verwalten. Es ermöglicht auch die Erstellung benutzerdefinierter Preismodelle und die Gewinnung detaillierter Analytik, um die Leistung und den Umsatz zu verbessern.

Installation

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

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

__CAPGO_KEEP_0__-Käufe-Fähigkeit 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 die Verwendung von RevenueCat’s SDK mit nur wenigen Zeilen von code führen.

Sich für ein neues RevenueCat-Konto anmelden hier.

📘

💡 Hier ist ein Tip!

RevenueCat empfiehlt, für jeden 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 / Enterprise

Wir empfehlen, bei der Registrierung für RevenueCat und der Einrichtung Ihrer App innerhalb eines Projekts ein Unternehmen zu verwenden. So können Sie den Rest Ihres Teams als Mitwirkende zu Ihrem Projekt einladen, aber nur der Projektbesitzer kann die Rechnungsführung verwaltenProjektmitarbeiter können die Rechnungsdetails nicht 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 Navigationsleiste, das Projekte.

EinnahmenCat Schritt 1

Das Popup-Fenster für die Erstellung eines neuen Projekts

▶️ App hinzufügen / Plattform

From Projekt-Einstellungen > Apps Im linken Menü des Projekt-Dashboards wählen Sie die Plattform für die App aus, die Sie hinzufügen werden.

Schritt 2 von RevenueCat

Projekt-Dashboard 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 gemeinsame Geheimcode (iOS) / Dienstzertifikate (Android) konfiguriert werden.

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 Ereignisbenachrichtigungen der PlattformDiese Benachrichtigungen sind nicht erforderlich, beschleunigen jedoch die Webhooks und reduzieren die Zeit für die Lieferung von Integrationen und die Aktualisierung Ihrer Abonnenten.

📘

Staging- vs. Produktionsanwendungen und -benutzer

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

Jede RevenueCat-Anwendung kann sowohl Sandbox- als auch Produktionskäufe aus den Stores tätigen. Wenn Sie separate Anwendungen für Staging und Produktionsanwendungen haben, können Sie mehrere Projekte in RevenueCat erstellen, um Ihr Setup zu spiegeln.

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, um mit den App-Stores auf Ihrem Namen zu kommunizieren. Siehe die RevenueCat-Anleitungen App Store Connect-Shared-Secret, Play Service-Zertifikate, und Amazon Appstore gemeinsamer Geheimcode zur weiteren Information.

Hinweis: Die play-Dienstwiederholung kann bis zu 36 Stunden dauern, um sich auf Google's Servern auszubreiten.

3. Produktkonfiguration

▶️ Ladenplatzkonfiguration

Bevor Sie mit der Nutzung von RevenueCat beginnen können, um Produkte abzurufen, müssen Sie Ihre Produkte in den jeweiligen Ladenplätzen konfigurieren. Siehe die folgenden Anleitungen für App Store Connect, Google Play Console, Amazon Appstore, und 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 Steuernummer angeben. 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 umgehen?

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

Einmal Ihre in-app-Produkte wurden im App Store Connect, Google Play Console, Amazon Appstore, oder Stripe, müssen Sie diese Konfiguration in das RevenueCat-Dashboard kopieren. RevenueCat verwendet ein Entitlements-System, um Zugriff auf Premium-Funktionen zu steuern, und Angebote, um die Produktpalette zu verwalten, die Sie Ihren Kunden anbieten.

Entitlements are the level of access that a customer is “entitled” to after purchasing a specific product. Offerings are a simple way for you to organize the in-app products you wish to “offer” on your paywall and configure them remotely. RevenueCat recommends Mit diesen Funktionen vereinfachen Sie Ihre code und ermöglichen es Ihnen, Produkte ohne eine App-Update zu ändern.

See Produktkonfiguration Um Ihre Produkte einzurichten und sie dann in Angebote oder Berechtigungen zu organisieren.

EinnahmenKat RevenueSchritt 4

4. Verwendung von RevenueCat's Purchases SDK

RevenueCat SDK implementiert Einkäufe und Abonnements auf allen Plattformen, während es Token mit dem RevenueCat-Server synchronisiert.

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

📘

Nur Ihre öffentliche SDK-Schlüssel verwenden, um Einkäufe zu konfigurieren

Sie können Ihren öffentlichen SDK-Schlüssel im API-Schlüssel Abschnitt unter Projekt-Einstellungen im Dashboard abrufen.

Sie sollten nur die gemeinsame Instanz von Einkäufen einmal, meistens bei der App-Start. Anschließend wird die gleiche Instanz über den gesamten App-Bereich hinweg durch Zugriff auf die .shared Instanz in der SDK.

Siehe die RevenueCat-Anleitung zu Konfiguration von SDK für weitere Informationen und beste Praktiken.

Konfigurieren Sie sicherstellen Sie Purchases mit Ihrem öffentlichen SDK-Schlüssel nur. 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. Für weitere Informationen zu diesen Protokollen, siehe ihre Debugging guide.

If Sie code mit RevenueCat verwenden möchten, beziehen Sie sich auf ihre Anleitung zu diesem Thema. Beobachtungsmodus.

📘

Konfiguration von Kaufs mit Benutzer-IDs

If Sie ein Benutzerauthentifizierungssystem in Ihrer App haben, können Sie einen Benutzer-Identifikator bei der Konfiguration oder zu einem späteren Zeitpunkt mit einem Aufruf an .logIn()Um mehr zu erfahren, besuchen Sie die RevenueCat Anleitung Benutzeridentifizierung.

Die SDK wird die Daten automatisch abrufen. konfigurierten Angebote automatisch abrufen und das Produktinformationen von Apple, Google oder Amazon abrufen. Daher werden die verfügbaren Produkte bereits geladen sein, wenn Kunden Ihre Kaufseite öffnen.

Hier ist ein Beispiel für die Abfrage von Angeboten. Mit Angeboten können Sie Ihre Zahlungsseite organisieren. Siehe die Anleitung von RevenueCat Produktanzeige für weitere Informationen und beste Praktiken.

▶️ Produkte abrufen und anzeigen

📘

Konfiguration von Kaufleistungen mit Benutzer IDs

Wenn Sie ein Benutzerauthentifizierungssystem in Ihrer App haben, können Sie eine Benutzeridentifikationsnummer bei der Konfiguration oder zu einem späteren Zeitpunkt mit einem Aufruf an .logIn()zur Verfügung stellen. Um mehr zu erfahren, besuchen Sie die Benutzer identifizieren.

Die SDK wird automatisch 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.

Hier ist ein Beispiel für die Abfrage von Angeboten. Mit Angeboten können Sie Ihre Zahlungsseite organisieren. Siehe die Anleitung von RevenueCat Produkte anzeigen für weitere Informationen und beste Praktiken.

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

Wenn Sie Ihre Angebote, Produkte, oder verfügbar Pakete sind leer, es handelt sich um eine Konfigurationsproblematik im jeweiligen Laden.

Die häufigsten Gründe für dieses Problem in App Store Connect sind ein veraltetes 'Zahlungsvereinbarungsabkommen' 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 im RevenueCat Hilfezentrum.

▶️ Eine Kaufabwicklung vornehmen

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

Das unten stehende Beispiel für code zeigt den Kaufprozess eines Pakets und die Bestätigung, dass es das 'your_entitlement_id' Inhalt freischaltet. Weitere Details über das purchase:package Diese Methode finden Sie in der RevenueCat-Anleitung zu Kaufabrechnungen erstellen.

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. Einkäufe automatisch den neuesten CustomerInfo wenn es aktualisiert wird — in der Regel also, zieht diese Methode aus der Zwischenspeicher und läuft sehr schnell.

It’s typical to call this method when deciding which UI to show the user, and whenever the user performs an action that requires a certain entitlement level.

📘

Hier ist ein Tipp!

Sie können mehrere Informationen über eine Abonnement erhalten als nur, ob es aktiv ist oder nicht. Siehe die Anleitung von RevenueCat Abonnementstatus um zu erfahren, ob die Abonnement wiederholt wird, wenn bei der Kreditkarte des Benutzers ein Problem festgestellt wird und mehr.

RevenueCat ermöglicht Ihren Benutzern, ihre In-App-Käufe wiederherzustellen, wodurch alle zuvor gekauften Inhalte wieder aktiviert werden. selben Ladenkonto (Apple, Google, or Amazon account). We recommend that all apps have some way for users to trigger the restore method. Note that Apple does require a restore mechanism in the event a user loses access to their purchases (e.g: uninstalling/reinstalling the app, losing their account information, etc).

  const res = await CapacitorPurchases.restoreTransactions()
  const purchaserInfo = res.purchaserInfo
  const ids: string[] = [] // extract active subscriptions ids
  purchaserInfo.activeSubscriptions.forEach((id) => {
    ids.push(id)
  })

Benutzer-IDs Benutzer-App-IDs restore transactions from the same underlying store account (Apple, Google, or Amazon account). RevenueCat may attempt to create an alias between the two App User IDs and count them as the same user going forward. See RevenueCat guide on Wiederherstellung von Kaufleistungen für weitere Informationen zu den verschiedenen konfigurierbaren Wiederherstellungsverhaltensweisen.

Since the SDK works seamlessly on any platform, changes to a user’s purchase info may come from a variety of sources. You can respond to any changes in a customer’s CustomerInfo indem Sie sich an eine optionalen Delegatemethode halten, purchases:receivedUpdated:.

Dieser Methodenaufruf wird ausgelöst, sobald das SDK eine Aktualisierung erhält CustomerInfo object aus Anrufen auf getCustomerInfo(), purchase(package:), purchase(product:)oder restorePurchases().

Die CustomerInfo-Updates werden nicht pushen Sie Ihre App von der RevenueCat-Backend, können Updates nur von einem Ausgangsnetzwerk anforderung an RevenueCat, wie oben erwähnt, erfolgen.

Je nach Ihrer App kann es ausreichen, den Delegate zu ignorieren und die Änderungen an der Kundeninformation einfach beim nächsten Start Ihrer App oder in den Abschlussblöcken der SDK-Methoden zu behandeln.

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

👍

You did it!

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

Beispiel-Apps

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

Beispiel-Ansichten

Ich werde bald ein Beispiel-App mit Capacitor und Vue.js veröffentlichen.

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

Nächste Schritte

\

Wenn Sie Live update 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 In-App-Käufe für __CAPGO_KEEP_0__ verwenden In-App-Käufe für capacitor Um Zahlungen und Käufe zu planen, verbinden Sie es mit Capgo-Preisgestaltung für das Produktworkflow in Capgo-Preisgestaltung Zahlungssystem für die Implementierungsdetails in Zahlungssystem @capgo/native-Einkäufe für die Implementierung in @capgo/native-purchases Getting Started für die Implementierung in Einstieg, und Einnahme-Handbuch für die Implementierung in Einnahme-Handbuch.

Live-Updates für Capacitor-Apps

Wenn ein Bug im Weblayer lebt, schicken Sie die Reparatur über Capgo anstatt Tage zu warten, bis die App-Store-Zulassung vorliegt. Die Benutzer erhalten die Aktualisierung im Hintergrund, während native Änderungen im normalen Review-Prozess bleiben.

Unterstützung durch Martin

Los geht’s jetzt

Neueste von unserem Blog

Capgo bietet Ihnen die besten Einblicke, die Sie benötigen, um eine wirklich professionelle Mobil-App zu erstellen.