Korzystając z kilku różnych funkcji Firebase i Stripe, możesz przetwarzać płatności w swojej aplikacji internetowej bez budowania własnej infrastruktury serwerowej. Ten przewodnik przeprowadzi Cię przez proces dostosowywania i wdrażania własnej wersji przykładowej aplikacji cloud-functions-stripe-sample.web.app typu open source.
Zanim zaczniesz, utwórz projekt w konsoli Firebase i skonfiguruj konto Stripe .
Omówienie implementacji
- Skonfiguruj konto Stripe .
- Utwórz projekt w konsoli Firebase .
- Włącz płatności za projekt i skonfiguruj interfejs wiersza polecenia Firebase, aby używać projektu z
firebase use --add
. - Pobierz kod źródłowy przykładowej aplikacji Firestripe. Skonfiguruj go za pomocą odpowiednich informacji dla swojego projektu i dostosuj kod, aby pasował do Twojej aplikacji.
- Po wdrożeniu aplikacji poszukaj listy użytkowników i transakcji w konsoli Firebase.
Skonfiguruj i wdróż przykładową aplikację
- Pobierz kod źródłowy .
- Włącz logowanie przez Google i pocztę e-mail w ustawieniach dostawcy uwierzytelniania .
- Włącz Cloud Firestore .
- Zainstaluj Firebase CLI, jeśli jeszcze tego nie zrobiłeś, i zaloguj się przy użyciu
firebase login
. - Skonfiguruj ten przykład, aby używać swojego projektu z
firebase use --add
. - Zainstaluj zależności lokalnie, uruchamiając
cd functions; npm install; cd -
Dodaj swój tajny klucz Stripe API do konfiguracji środowiska Cloud Functions:
firebase functions:config:set stripe.secret=<YOUR STRIPE SECRET KEY>
Ustaw swój publikowalny klucz Stripe w
/public/javascript/app.js
:const STRIPE_PUBLISHABLE_KEY=<YOUR STRIPE PUBLISHABLE KEY>;
Wdróż swój projekt za pomocą narzędzia
firebase deploy
. To polecenie:- Wysyła wszystkie pliki z katalogu
public
do usługi Hosting, aby Twoja witryna była dostępna. - Wysyła kod z katalogu
functions
do Cloud Functions for Firebase. - Ustawia reguły bezpieczeństwa w bazie danych Cloud Firestore zgodnie z konfiguracją w
firestore.rules
. Podane zasady pozwalają użytkownikowi tylko odczytywać i zapisywać własne płatności i metody płatności.
- Wysyła wszystkie pliki z katalogu
Przetestuj przykładową aplikację
Odwiedź adres URL aplikacji do płatności pod adresem your-firebase-project-id.web.app
i sprawdź, czy działają następujące funkcje:
- Możesz zalogować się przez Google lub e-mail.
- Możesz dodać nową kartę testową Stripe i wyświetlić ją w elemencie wyboru karty.
- Możesz wybrać jedną ze swoich kart i ją naładować.
- Możesz się wylogować.
Dla porównania zobacz cloud-functions-stripe-sample.web.app .
Aby zapewnić użytkownikom lepsze wrażenia, możesz dodatkowo dostosować wygląd strony płatności lub podłączyć ją do istniejącej aplikacji.
Wyświetl przetworzone płatności
Po skonfigurowaniu i wdrożeniu strony płatności możesz sprawdzić konsolę Firebase i wyświetlić listę użytkowników wraz z ich metodami płatności i płatnościami.
- Przejdź do Cloud Firestore .
- Sprawdź listę swoich użytkowników i, jeśli dodali jakieś karty kredytowe lub dokonali jakichkolwiek transakcji, listę tych pod każdym użytkownikiem.
Akceptuj płatności na żywo
Gdy będziesz gotowy do transmisji na żywo, musisz wymienić klucze testowe na klucze aktywne. Zobacz dokumentację Stripe, aby dowiedzieć się więcej o tych klawiszach.
Zaktualizuj swoją tajną konfigurację Stripe:
firebase functions:config:set stripe.secret=<YOUR STRIPE LIVE SECRET KEY>
Ustaw swój klucz do publikacji na żywo w
/public/javascript/app.js
.Ponownie wdróż funkcje Cloud Functions i Hosting, aby zmiany zaczęły obowiązywać:
firebase deploy
.