Zahlungen mit Firebase verarbeiten

Mit einigen Firebase-Funktionen und Stripe können Sie Zahlungen in Ihrer Webanwendung verarbeiten, ohne eine eigene Serverinfrastruktur aufbauen zu müssen. In dieser Anleitung erfahren Sie, wie Sie Ihre eigene Version der Open-Source-Beispielanwendung 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 ein Upgrade Ihres Projekts 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. Rufen Sie den Quellcode für die Beispiel-Firestripe App ab. Konfigurieren Sie ihn mit den richtigen Informationen für Ihr Projekt und passen Sie den Code an Ihre App an.
6. Nachdem Sie Ihre App bereitgestellt haben, sehen Sie sich in der Firebase Console eine Liste der Nutzer und Transaktionen an.

Beispielanwendung einrichten und bereitstellen

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

7. Fügen Sie Ihrer Cloud Functions-Umgebungskonfiguration Ihren Secret-Schlüssel für die Stripe API hinzu:

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

8. Lege deinen veröffentlichbaren Stripe-Schlüssel unter /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. Alle Dateien im Verzeichnis public werden an Hosting gesendet, damit Ihre Website verfügbar ist.
   2. Der Code im Verzeichnis functions wird an Cloud Functions for Firebase gesendet.
   3. Hiermit werden Sicherheitsregeln für Ihre Cloud Firestore-Datenbank festgelegt, wie in firestore.rules konfiguriert. Die bereitgestellten Regeln erlauben es einem Nutzer nur, seine 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 „Kartenauswahl“ ansehen.
• Sie können eine Ihrer Karten auswählen und sie aufladen.
• Sie können sich abmelden.

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

Sie können das Erscheinungsbild Ihrer Zahlungsseite weiter anpassen oder sie in Ihre vorhandene App einbinden, um Ihren Nutzern eine möglichst reibungslose Nutzung zu ermöglichen.

Verarbeitete Zahlungen ansehen

Nachdem Sie die 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. Rufen Sie eine Liste Ihrer Nutzer auf und sehen Sie sich unter jedem Nutzer an, ob er Kreditkarten hinzugefügt oder Transaktionen durchgeführt hat.

Live-Zahlungen akzeptieren

Sobald du bereit bist, musst du deine Testschlüssel gegen deine Liveschlüssel austauschen. Weitere Informationen zu diesen Schlüsseln findest du in der Stripe-Dokumentation.

1. Aktualisieren Sie die Stripe-Secret-Konfiguration:

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

2. Lege deinen veröffentlichbaren Schlüssel für Livestreams unter /public/javascript/app.js fest.

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