Przetwarzaj płatności za pomocą Firebase

Korzystając z kilku różnych funkcji Firebase i Stripe, możesz przetwarzać płatności w swojej aplikacji internetowej bez konieczności 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 załóż konto Stripe .

Przegląd wdrożenia

  1. Załóż konto Stripe .
  2. Utwórz projekt w konsoli Firebase .
  3. Włącz rozliczenia dla swojego projektu i skonfiguruj interfejs CLI Firebase tak, aby korzystał z projektu za pomocą firebase use --add .
  4. Pobierz kod źródłowy przykładowej aplikacji Firestripe. Skonfiguruj go, podając odpowiednie informacje dla swojego projektu i dostosuj kod do swojej aplikacji.
  5. Po wdrożeniu aplikacji poszukaj listy użytkowników i transakcji w konsoli Firebase.

Skonfiguruj i wdróż przykładową aplikację

  1. Zdobądź kod źródłowy .
  2. Włącz logowanie przez Google i e-mail w ustawieniach dostawcy uwierzytelniania .
  3. Włącz Cloud Firestore .
  4. Zainstaluj interfejs CLI Firebase, jeśli jeszcze tego nie zrobiłeś, i zaloguj się przy użyciu firebase login .
  5. Skonfiguruj ten przykład, aby używać projektu z firebase use --add .
  6. Zainstaluj zależności lokalnie, uruchamiając cd functions; npm install; cd -

  7. Dodaj tajny klucz API Stripe do konfiguracji środowiska Cloud Functions:

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

  8. Ustaw swój klucz do publikacji Stripe w /public/javascript/app.js :

    const STRIPE_PUBLISHABLE_KEY=<YOUR STRIPE PUBLISHABLE KEY>;

  9. Wdróż swój projekt za pomocą firebase deploy . To polecenie:

    1. Wysyła wszystkie pliki z katalogu public do Hostingu, aby Twoja witryna była dostępna.
    2. Wysyła kod z katalogu functions do Cloud Functions dla Firebase.
    3. Ustawia reguły bezpieczeństwa w bazie danych Cloud Firestore zgodnie z konfiguracją w firestore.rules . Udostępnione zasady pozwalają użytkownikowi jedynie na odczytywanie i zapisywanie własnych płatności i metod płatności.

Przetestuj przykładową aplikację

Odwiedź adres URL swojej aplikacji płatniczej pod 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ą obciążyć.
  • Możesz się wylogować.

Dla porównania zobacz cloud-functions-stripe-sample.web.app .

Aby zapewnić użytkownikom usprawnioną obsługę, możesz jeszcze bardziej dostosować wygląd strony płatności lub podłączyć ją do istniejącej aplikacji.

Zobacz 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.

  1. Przejdź do Cloud Firestore .
  2. Sprawdź listę swoich użytkowników i, jeśli dodali jakieś karty kredytowe lub dokonali jakichkolwiek transakcji, listę użytkowników pod każdym użytkownikiem.

Akceptuj płatności na żywo

Gdy wszystko będzie gotowe do uruchomienia, będziesz musiał wymienić klucze testowe na klucze aktywne. Zobacz dokumentację Stripe , aby dowiedzieć się więcej o tych kluczach.

  1. Zaktualizuj swoją tajną konfigurację Stripe:

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

  2. Ustaw swój klucz do publikacji na żywo w /public/javascript/app.js .

  3. Wdróż ponownie funkcje chmury i hosting, aby zmiany odniosły skutek: firebase deploy .