Verarbeiten Sie Zahlungen mit Firebase

Mit einigen verschiedenen Firebase-Funktionen und Stripe können Sie Zahlungen in Ihrer Webanwendung verarbeiten, ohne eine eigene Serverinfrastruktur aufzubauen. Dieser Leitfaden 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.

Überblick ü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 Firestripe-Beispiel-App. Konfigurieren Sie es mit den richtigen Informationen für Ihr Projekt und passen Sie den Code an Ihre App an.
5. Nachdem Sie Ihre App bereitgestellt haben, suchen Sie in der Firebase-Konsole nach einer Liste mit 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 so, dass Ihr Projekt mit firebase use --add .
6. Installieren Sie Abhängigkeiten lokal, indem Sie cd functions; npm install; cd -

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

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

8. Legen Sie Ihren veröffentlichbaren Stripe-Schlüssel 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 das Hosting, damit Ihre Website verfügbar ist.
   2. Sendet den Code im 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 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 vergewissern Sie sich, dass die folgenden Funktionen funktionieren:

• Sie können sich über Google oder E-Mail anmelden.
• Sie können eine neue Stripe-Testkarte 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 ein optimiertes Erlebnis zu bieten, können Sie das Erscheinungsbild Ihrer Zahlungsseite weiter anpassen oder sie in Ihre vorhandene App integrieren.

Verarbeitete Zahlungen anzeigen

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

1. Gehen Sie zu Cloud Firestore .
2. Suchen Sie nach einer Liste Ihrer Benutzer und, falls sie 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 austauschen. Weitere Informationen zu diesen Schlüsseln finden Sie in der Stripe-Dokumentation .

1. Aktualisieren Sie Ihre geheime Stripe-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 .

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