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
- Richten Sie ein Stripe- Konto ein.
- Erstellen Sie ein Projekt in der Firebase-Konsole .
- Aktivieren Sie die Abrechnung für Ihr Projekt und konfigurieren Sie die Firebase-CLI für die Verwendung Ihres Projekts mit
firebase use --add
. - 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.
- 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
- Holen Sie sich den Quellcode .
- Aktivieren Sie die Google- und E-Mail-Anmeldung in den Einstellungen Ihres Authentifizierungsanbieters .
- Aktivieren Sie Cloud Firestore .
- Installieren Sie die Firebase-CLI, falls Sie dies noch nicht getan haben, und melden Sie sich mit
firebase login
an. - Konfigurieren Sie dieses Beispiel, um Ihr Projekt mit
firebase use --add
zu verwenden. - Installieren Sie Abhängigkeiten lokal, indem Sie
cd functions; npm install; cd -
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>
Legen Sie Ihren für Stripe veröffentlichbaren Schlüssel in
/public/javascript/app.js
fest:const STRIPE_PUBLISHABLE_KEY=<YOUR STRIPE PUBLISHABLE KEY>;
Stellen Sie Ihr Projekt mit
firebase deploy
bereit. Dieser Befehl:- Sendet alle Dateien im
public
Verzeichnis an Hosting, damit Ihre Website verfügbar ist. - Sendet den Code im
functions
an Cloud Functions für Firebase. - 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.
- Sendet alle Dateien im
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.
- Gehen Sie zum Cloud Firestore .
- 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 .
Aktualisieren Sie Ihre Stripe-Secret-Konfiguration:
firebase functions:config:set stripe.secret=<YOUR STRIPE LIVE SECRET KEY>
Legen Sie Ihren live veröffentlichbaren Schlüssel in
/public/javascript/app.js
fest.Stellen Sie sowohl Cloud Functions als auch Hosting erneut bereit, damit die Änderungen wirksam werden:
firebase deploy
.