Zum Hauptinhalt springen
Inhaltsanleitung

Einkäufe in der App für capacitor

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

Artikelcredits

Martin Donadieu

Autoren

Valeria

Rezensent

Jordan

Redakteur

Einkäufe in der App für capacitor

Diese Erweiterung wurde nun in das offizielle Repository von RevenueCat übertragen. Bitte schauen Sie sich das offizielle Dokumentation für weitere Informationen.

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

Capacitor Purchases is a plugin for the Capacitor framework that allows in-app purchases on iOS and Android. It provides a simple and consistent API across multiple platforms, making it easy for developers to implement in-app subscriptions and purchases in their mobile apps.

One of the key features of the Capacitor Purchases plugin is that it integrates with RevenueCat, a platform that provides tools for in-app subscriptions and in-app purchases. RevenueCat simplifies the process of implementing in-app subscriptions and purchases by providing a simple and consistent API across multiple platforms, and automating tasks such as receipt validation and user management.

über mehrere Plattformen hinweg, was es Entwicklern erleichtert, in-app-Abonnements und -Käufe in ihren mobilen Apps zu implementieren.

  • Ein wichtiger Vorteil der __CAPGO_KEEP_0__-Käufe-Erweiterung ist, dass sie mit RevenueCat integriert ist, einer Plattform, die Werkzeuge für in-app-Abonnements und -Käufe bereitstellt. RevenueCat vereinfacht den Prozess der Implementierung von in-app-Abonnements und -Käufen, indem sie eine einfache und konsistente
  • __CAPGO_KEEP_1__
  • über mehrere Plattformen hinweg anbietet und Aufgaben wie die Validierung von Rechnungen und die Benutzerverwaltung automatisiert.
  • Detaillierte Analytik -Skalierbarkeit

Mit der Verwendung des Capacitor Kauf-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 Kauf-Plugin und RevenueCat können Entwickler leicht In-App-Abonnements und -Käufe 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 Analytik, 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 code in Ihrer App native hinzufügen npx cap sync

__CAPGO_KEEP_0__-Käufe-Fähigkeit in Xcode hinzufügen:

Xcode-Schritt 1 dann Xcode-Schritt 2

1. Ein RevenueCat-Konto erstellen

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

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

📘

💡 Hier ist ein Tip!

RevenueCat empfiehlt, für jedes App / Projekt ein separates RevenueCat-Konto zu erstellen, insbesondere wenn Sie jemals beabsichtigen, das 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. Sie können den Rest Ihrer Mannschaft 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

▶️ Projekt erstellen

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

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

Schritt 1 RevenueCat

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

▶️ Hinzufügen Sie eine App / Plattform Von Einstellungen > Apps

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

Projektübersicht 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 sein.

Schritt 3 von RevenueCat

Konfigurationsseite für eine Apple App Store-App

📘

💡 Hier ist ein Tip!

Nach der Registrierung Ihrer App empfiehlt RevenueCat, die Ereignisbenachrichtigungen zu konfigurieren. Diese Benachrichtigungen sind nicht erforderlich, aber sie beschleunigen die Webhooks und die Lieferung von Integrationszeiten und reduzieren die Verzögerung bei der Aktualisierung Ihrer Abonnenten.

📘

Staging-Apps 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.

Jedes RevenueCat-App kann sowohl Sandbox- als auch Produktionskäufe aus den Stores machen. Wenn Sie separate Apps für Staging und Produktions 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.

▶️ Dienstzertifikate

Dienstzertifikate müssen für RevenueCat eingerichtet werden, damit es mit den Stores auf Ihrem Namen kommunizieren kann. Siehe die RevenueCat-Anleitungen App Store Connect-Shared-Secret, Play-Servicenamen, und Amazon Appstore-Shared-Secret zurück zur Übersicht.

Hinweis: Play-Servicenamen können bis zu 36 Stunden, um sich durch die Google-Server zu verbreiten.

3. Produktkonfiguration

▶️ Ladenkonto einrichten

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

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 Bankgeschäfte. Dies muss vor dem Testen von Kaufvorgängen abgeschlossen werden..

📘

Wollen Sie die Laden-Einrichtung während der Testphase auslassen?

Bei iOS können Sie die Produkt-Konfiguration in App Store Connect durch die Verwendung von StoreKit-Konfigurationsdateien hinausstellen. Diese Konfigurationsdateien erfordern nur minimalen Aufwand und können über Xcode direkt konfiguriert werden.

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

▶️ Produkte und Berechtigungen in RevenueCat konfigurieren

Als Nächstes haben Sie Ihre In-App-Produkte in App Store Connect, Google Play Console, Amazon Appstoreoder StripeSie müssen diese Konfiguration in das RevenueCat-Dashboard kopieren. RevenueCat verwendet ein Entitlements-System, um Zugriff auf Premium-Funktionen zu steuern, und Offerings, um die Produktpalette zu verwalten, die Kunden angeboten werden.

Entitlements sind der Zugriff, den ein Kunde nach dem Kauf eines bestimmten Produkts erhält. Offerings sind eine einfache Möglichkeit, die in-app-Produkte zu organisieren, die Sie auf Ihrer Zahlungsbarriere anbieten und sie remote konfigurieren möchten. RevenueCat empfiehlt die Verwendung dieser 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 Offerings oder Entitlements zu organisieren.

RevenueCat Schritt 4

4. Mit RevenueCat's Purchases SDK

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

Wenn Sie Probleme mit dem SDK haben, sehen Sie sich bitte Troubleshooting die SDKs zur Anleitung.

📘

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

Sie können Ihren öffentlichen SDK-Schlüssel im API-Schlüssel Unter der Einstellungen im Dashboard.

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

Siehe das RevenueCat-Leitfaden auf Konfiguration SDK zur weiteren Information und besten Praktiken.

Stellen Sie sicher, dass Sie __CAPGO_KEEP_0__ Käufe mit Ihrem öffentlichen SDK-Schlüssel konfigurieren. 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 zu diesen Protokollen finden Sie in ihrem Debugging Leitfaden.

Wenn Sie beabsichtigen, RevenueCat neben Ihren bestehenden Kauf code zu verwenden, beziehen Sie sich auf ihren Leitfaden zum Beobachtungsmodus.

📘

Konfiguration von Käufen mit Benutzer-IDs

If Sie ein Benutzerauthentifizierungssystem in Ihrer App haben, können Sie einen Benutzeridentifikator bei der Konfiguration oder zu einem späteren Zeitpunkt mit einem Aufruf anbieten. .logIn(). Zur Identifizierung von Benutzern.

Der SDK 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. Ein Beispiel für die Abfrage von Angeboten finden Sie unten. Sie können Angebote verwenden, um Ihre Bezahlwand zu organisieren. Weitere Informationen und Best Practices finden Sie im RevenueCat-Leitfaden zu Displaying Products

▶️ Abfrage und Anzeige verfügbarer Produkte Konfiguration von Kaufvorgängen mit Benutzer-IDs If Sie ein Benutzerauthentifizierungssystem in Ihrer App haben, können Sie einen Benutzeridentifikator bei der Konfiguration oder zu einem späteren Zeitpunkt mit einem Aufruf anbieten.

Zur Identifizierung von Benutzern

📘

Die __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.

Ein Beispiel für die Abfrage von Angeboten finden Sie unten. Sie können Angebote verwenden, um Ihre Bezahlwand zu organisieren. Weitere Informationen und Best Practices finden Sie im RevenueCat-Leitfaden zu .logIn(). Um mehr zu erfahren, besuchen Sie die RevenueCat-Anleitung zu Benutzeridentifizierung.

Die SDK 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. Konfigurierte Angebote Produktinformationen

Unten ist ein Beispiel für die Abfrage von Angeboten. Sie können Angebote verwenden, um Ihre Zahlungsseite zu organisieren. Siehe die RevenueCat-Anleitung 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
}

Wenn Sie Ihre Angebote, Produkteoder verfügbare Package Die Pakete sind leer, es handelt sich um eine Konfigurationsproblematik im jeweiligen Store.

Die häufigsten Gründe für dieses Problem in App Store Connect sind ein veraltetes 'Zahlungsdienstvereinbarung' oder Produkte, die sich nicht zumindest im 'Bereit für die Veröffentlichung' 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 Kaufabwicklungen. Das purchase:package verarbeitet ein Paket aus der abgerufenen Angebotsliste und verarbeitet die Transaktion mit dem jeweiligen 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 zur purchase:package Methode finden Sie im RevenueCat-Leitfaden 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 verwenden, wann immer Sie die neueste Statusinformation benötigen, und es ist sicher, diese Methode wiederholt während des Lebenszyklus Ihrer App aufzurufen. Purchases automatisch die neuesten Daten im Cache speichert, sobald es aktualisiert wird — daher läuft diese Methode in den meisten Fällen schnell, indem es von dem Cache ausführt. CustomerInfo Es ist üblich, diese Methode aufzurufen, wenn Sie entscheiden, 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 mehrere Informationen über eine Abonnement erhalten, die über die einfache Frage, ob es aktiv ist oder nicht, hinausgehen. Siehe die RevenueCat-Anleitung zu

Abonnement-Status 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, dass sie eine Möglichkeit für die Benutzer haben, den Wiederherstellungsprozess auszulösen. Beachten Sie, dass Apple einen Wiederherstellungsmechanismus erfordert, falls ein Benutzer Zugriff auf seine Käufe verliert (z.B. wenn er die App uninstaliert und neu installiert, seine Zugangsdaten verliert, usw.). Automatisch speichert es die neuesten Daten im Cache, sobald es aktualisiert wird — daher läuft diese Methode in den meisten Fällen schnell, indem es von dem Cache ausführt.

  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 unterschiedliche App-Benutzer-IDs Wiederherstellungen von Transaktionen aus demselben zugrunde liegenden Speicheraccount (Apple, Google oder Amazon-Konto). RevenueCat kann versuchen, zwischen den zwei App-Benutzer-IDs einen Alias zu erstellen und sie als denselben Benutzer zu zählen. Siehe die RevenueCat-Anleitung zu "Wiederherstellung von Kaufs" Wiederherstellung von Kaufs für weitere Informationen zu den verschiedenen konfigurierbaren Wiederherstellungshandlungen.

Da sich SDK reibungslos auf jedem Plattform betätigt, können Änderungen an einem Benutzers Kaufinformationen aus verschiedenen Quellen stammen. Sie können auf jede Änderung in einem Kunden CustomerInfo indem Sie sich an ein optionalen Delegate-Methoden halten purchases:receivedUpdated:.

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

Kundeninformationen werden nicht von Ihrem App aus von dem RevenueCat Backend ausgeschüttet, können Updates nur von einem Ausgangsnetzwerk anforderung an RevenueCat erfolgen, wie oben erwähnt.

Je nach Ihrer App kann es ausreichen, den Delegate zu ignorieren und die Änderungen an Kundeninformationen einfach beim 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 vollwertiges Abonnementkaufsystem implementiert, ohne einen Monat damit zu verbringen, einen Server code zu schreiben. Gratulation!

Beispiel-Apps

Um mehr vollständige Beispiele für die Integration der 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 der Capacitor benötigen, SDK überprüfen Sie die Dokumentation hier.

Zukünftige Schritte

\

__CAPGO_KEEP_0__

__CAPGO_KEEP_1__

__CAPGO_KEEP_2__

Fortschritt von In-App-Käufen für Capgo

Bei der Verwendung von In-App-Käufen für capacitor

Wenn Sie In-App-Käufe für __CAPGO_KEEP_0__ um Zahlungen und Käufe zu planen, verbinden Sie es mit capacitor-Preisgestaltung um das Produktworkflow in __CAPGO_KEEP_0__-Preisgestaltung Capgo Pricing for the product workflow in Capgo Pricing, @__CAPGO_KEEP_0__/native-purchases um die Implementierungsdetails in @__CAPGO_KEEP_0__/native-purchases @capgo/native-purchases capgo __CAPGO_KEEP_0__ Für die Implementierungsdetails in Getting Started, und Einnahme-Handbuch Für die Implementierungsdetails 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 Beiträge aus unserem Blog

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