Verarbeiten Sie Zahlungen mit Firebase

Mit einigen verschiedenen Firebase-Funktionen und Stripe können Sie Zahlungen in Ihrer Web-App verarbeiten, ohne eine eigene Serverinfrastruktur aufzubauen. Dieser Leitfaden führt Sie durch die Anpassung und Bereitstellung Ihrer eigenen Version der Open-Source-Beispiel-App „cloud-functions-stripe-sample.web.app “.

Bevor Sie beginnen, erstellen Sie ein Projekt in der Firebase-Konsole und richten Sie ein Stripe- Konto ein.

Übersicht über die Implementierung

  1. Richten Sie ein Stripe- Konto ein.
  2. Erstellen Sie ein Projekt in der Firebase-Konsole .
  3. Aktivieren Sie die Abrechnung für Ihr Projekt und konfigurieren Sie die Firebase-CLI für die Verwendung Ihres Projekts mit firebase use --add .
  4. Holen Sie sich den Quellcode für die Beispiel-Firestripe-App. Konfigurieren Sie es mit den richtigen Informationen für Ihr Projekt und passen Sie den Code an Ihre App an.
  5. Suchen Sie nach der Bereitstellung Ihrer App in der Firebase-Konsole nach einer Liste von Benutzern und Transaktionen.

Richten Sie die Beispiel-App ein und stellen Sie sie bereit

  1. Holen Sie sich den Quellcode .
  2. Aktivieren Sie die Google- und E-Mail-Anmeldung in den Einstellungen Ihres Authentifizierungsanbieters .
  3. Aktivieren Sie Cloud Firestore .
  4. Installieren Sie die Firebase-CLI, falls Sie dies noch nicht getan haben, und melden Sie sich mit firebase login an.
  5. Konfigurieren Sie dieses Beispiel, um Ihr Projekt mit firebase use --add zu verwenden.
  6. Installieren Sie Abhängigkeiten lokal, indem Sie cd functions; npm install; cd -

  7. Fügen Sie Ihren geheimen Stripe-API-Schlüssel zu Ihrer Cloud Functions-Umgebungskonfiguration hinzu:

    firebase functions:config:set stripe.secret=<YOUR STRIPE SECRET KEY>

  8. Legen Sie Ihren für Stripe veröffentlichbaren Schlüssel in /public/javascript/app.js fest:

    const STRIPE_PUBLISHABLE_KEY=<YOUR STRIPE PUBLISHABLE KEY>;

  9. Stellen Sie Ihr Projekt mit firebase deploy bereit. Dieser Befehl:

    1. Sendet alle Dateien im public Verzeichnis an Hosting, damit Ihre Website verfügbar ist.
    2. Sendet den Code im functions an Cloud Functions für Firebase.
    3. Legt Sicherheitsregeln für Ihre Cloud Firestore-Datenbank fest, wie in firestore.rules konfiguriert. Die bereitgestellten Regeln erlauben einem Benutzer lediglich das Lesen und Schreiben seiner eigenen Zahlungen und Zahlungsmethoden.

Testen Sie die Beispiel-App

Besuchen Sie die URL Ihrer Zahlungs-App unter your-firebase-project-id.web.app und überprüfen Sie, ob die folgenden Funktionen funktionieren:

  • Sie können sich über Google oder E-Mail anmelden.
  • Sie können eine neue Stripe-Testkarte hinzufügen und diese im Kartenauswahlelement anzeigen.
  • Sie können eine Ihrer Karten auswählen und aufladen.
  • Sie können sich abmelden.

Zum Vergleich siehe cloud-functions-stripe-sample.web.app .

Um Ihren Benutzern ein optimiertes Erlebnis zu bieten, können Sie das Erscheinungsbild Ihrer Zahlungsseite weiter anpassen oder sie in Ihre bestehende App integrieren.

Verarbeitete Zahlungen anzeigen

Sobald Sie Ihre Zahlungsseite eingerichtet und bereitgestellt haben, können Sie in der Firebase-Konsole eine Liste der Benutzer mit ihren Zahlungsmethoden und Zahlungen sehen.

  1. Gehen Sie zum Cloud Firestore .
  2. Suchen Sie nach einer Liste Ihrer Benutzer und, falls diese Kreditkarten hinzugefügt oder Transaktionen durchgeführt haben, nach einer Liste der Benutzer unter jedem Benutzer.

Akzeptieren Sie Live-Zahlungen

Sobald Sie bereit sind, live zu gehen, müssen Sie Ihre Testschlüssel gegen Ihre Live-Schlüssel eintauschen. Weitere Informationen zu diesen Schlüsseln finden Sie in den Stripe-Dokumenten .

  1. Aktualisieren Sie Ihre Stripe-Secret-Konfiguration:

    firebase functions:config:set stripe.secret=<YOUR STRIPE LIVE SECRET KEY>

  2. Legen Sie Ihren live veröffentlichbaren Schlüssel in /public/javascript/app.js fest.

  3. Stellen Sie sowohl Cloud Functions als auch Hosting erneut bereit, damit die Änderungen wirksam werden: firebase deploy .