Zahlungen mit Firebase verarbeiten

Mit einigen verschiedenen Firebase-Funktionen und Stripe können Sie Zahlungen in Ihrer Web-App verarbeiten, ohne eine eigene Serverinfrastruktur aufbauen zu müssen. In dieser Anleitung erfahren Sie, wie Sie Ihre eigene Version der Open-Source-Beispiel-App cloud-functions-stripe-sample.web.app anpassen und bereitstellen.

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

Implementierungsübersicht

  1. Richten Sie ein Stripe-Konto ein.
  2. Erstellen Sie ein Projekt in der Firebase Console.
  3. Führen Sie für Ihr Projekt ein Upgrade auf den Blaze-Tarif (Pay as you go) durch.
  4. Konfigurieren Sie die Firebase-Befehlszeile so, dass Ihr Projekt mit firebase use --add verwendet wird.
  5. Quellcode für die Firestripe-Beispiel-App abrufen, mit den richtigen Informationen für Ihr Projekt konfigurieren und den Code an Ihre App anpassen.
  6. Nachdem Sie Ihre App bereitgestellt haben, finden Sie in der Firebase Console eine Liste der Nutzer und Transaktionen.

Beispiel-App einrichten und bereitstellen

  1. Quellcode abrufen
  2. Aktivieren Sie die Anmeldung über Google und E‑Mail-Adresse in den Einstellungen für den Authentifizierungsanbieter.
  3. Aktivieren Sie Cloud Firestore.
  4. Installieren Sie das Firebase-CLI, falls noch nicht geschehen, und melden Sie sich mit firebase login an.
  5. Konfigurieren Sie dieses Beispiel so, dass Ihr Projekt mit firebase use --add verwendet wird.
  6. Installieren Sie Abhängigkeiten lokal, indem Sie cd functions; npm install; cd - ausführen.

  7. Fügen Sie der Cloud Functions-Umgebungskonfiguration Ihren Stripe API Secret Key hinzu:

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

  8. Legen Sie Ihren Stripe-Schlüssel für die Veröffentlichung 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 Verzeichnis public an Hosting, damit Ihre Website verfügbar ist.
    2. Sendet den Code im Verzeichnis functions an Cloud Functions for Firebase.
    3. Legt Sicherheitsregeln für Ihre Cloud Firestore-Datenbank fest, wie in firestore.rules konfiguriert. Die bereitgestellten Regeln erlauben es Nutzern nur, ihre eigenen Zahlungen und Zahlungsmethoden zu lesen und zu schreiben.

Beispiel-App testen

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

  • Sie können sich über Google oder per E‑Mail anmelden.
  • Sie können eine neue Stripe-Testkarte hinzufügen und sie im Element zur Kartenauswahl ansehen.
  • Sie können eine Ihrer Karten auswählen und damit bezahlen.
  • Sie können sich abmelden.

Einen Vergleich finden Sie unter cloud-functions-stripe-sample.web.app.

Um die Nutzerfreundlichkeit zu verbessern, können Sie das Erscheinungsbild Ihrer Zahlungsseite weiter anpassen oder sie in Ihre bestehende App einbinden.

Verarbeitete Zahlungen ansehen

Nachdem Sie Ihre Zahlungsseite eingerichtet und bereitgestellt haben, können Sie in der Firebase Console eine Liste der Nutzer mit ihren Zahlungsmethoden und Zahlungen aufrufen.

  1. Rufen Sie Cloud Firestore auf.
  2. Sehen Sie sich die Liste Ihrer Nutzer an. Wenn sie Kreditkarten hinzugefügt oder Transaktionen durchgeführt haben, wird unter jedem Nutzer eine Liste dieser Kreditkarten und Transaktionen angezeigt.

Live-Zahlungen akzeptieren

Wenn Sie bereit sind, live zu gehen, müssen Sie Ihre Testschlüssel gegen Ihre Live-Schlüssel tauschen. Weitere Informationen zu diesen Schlüsseln finden Sie in der Stripe-Dokumentation.

  1. Aktualisieren Sie Ihre Stripe-Secret-Konfiguration:

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

  2. Legen Sie Ihren Live-Schlüssel in /public/javascript/app.js fest.

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