Google is committed to advancing racial equity for Black communities. See how.
Diese Seite wurde von der Cloud Translation API übersetzt.
Switch to English

Zahlungen mit Firebase verarbeiten

Mit einigen verschiedenen Firebase-Funktionen und Stripe können Sie Zahlungen in Ihrer Web-App verarbeiten, ohne eine eigene Serverinfrastruktur aufzubauen. Dieses Handbuch führt Sie durch das Anpassen und Bereitstellen 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.

Implementierungsübersicht

  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 so, dass Ihr Projekt mit firebase use --add .
  4. Rufen Sie den Quellcode für die Beispiel-Firestripe-App ab. 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 der Benutzer 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. Cloud Firestore aktivieren .
  4. Installieren Sie die Firebase-CLI, falls Sie dies noch nicht getan haben, und melden Sie sich mit der firebase login .
  5. Konfigurieren Sie dieses Beispiel für die Verwendung Ihres Projekts mit firebase use --add .
  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-Funktionsumgebungskonfiguration hinzu:

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

  8. /public/javascript/app.js Sie Ihren Stripe- /public/javascript/app.js in /public/javascript/app.js :

    const STRIPE_PUBLISHABLE_KEY=<YOUR STRIPE PUBLISHABLE KEY>;

  9. Stellen Sie Ihr Projekt mit firebase deploy . 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 for Firebase.
    3. Legt die Sicherheitsregeln für Ihre Cloud Firestore-Datenbank fest, wie in firestore.rules konfiguriert. Die bereitgestellten Regeln ermöglichen es einem Benutzer nur, seine eigenen Zahlungen und Zahlungsmethoden zu lesen und zu schreiben.

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 Streifentestkarte hinzufügen und 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 eine optimierte Benutzererfahrung zu bieten, können Sie das Erscheinungsbild Ihrer Zahlungsseite weiter anpassen oder in Ihre vorhandene App einbinden.

Verarbeitete Zahlungen anzeigen

Sobald Sie Ihre Zahlungsseite eingerichtet und bereitgestellt haben, können Sie die Firebase-Konsole überprüfen und eine Liste der Benutzer mit ihren Zahlungsmethoden und Zahlungen anzeigen.

  1. Gehe 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 dieser Benutzer.

Akzeptieren Sie Live-Zahlungen

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

  1. Aktualisieren Sie Ihre geheime Stripe-Konfiguration:

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

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

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