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 budowania własnej infrastruktury serwerowej. Ten przewodnik poprowadzi Cię przez dostosowywanie i wdrażanie własnej wersji przykładowej aplikacji typu open source cloud-functions-stripe-sample.web.app .

Zanim zaczniesz, utwórz projekt w konsoli Firebase i skonfiguruj 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 wiersza polecenia Firebase tak, aby używał swojego projektu z firebase use --add .
  4. Pobierz kod źródłowy przykładowej aplikacji Firestripe. Skonfiguruj go z odpowiednimi informacjami 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. Pobierz kod źródłowy .
  2. Włącz logowanie przez Google i pocztę e-mail w ustawieniach dostawcy uwierzytelniania .
  3. Włącz Cloud Firestore .
  4. Zainstaluj Firebase CLI , 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 swój tajny klucz API Stripe do konfiguracji środowiska Cloud Functions:

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

  8. Ustaw klucz publikowania 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 reguły pozwalają użytkownikowi tylko na odczytywanie i zapisywanie własnych płatności i metod płatności.

Przetestuj przykładową aplikację

Odwiedź adres URL swojej aplikacji do płatności na 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 uproszczoną obsługę, 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 zobaczyć listę użytkowników wraz z ich formami płatności i płatnościami.

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

Akceptuj płatności na żywo

Gdy będziesz gotowy do uruchomienia, musisz wymienić klucze testowe na klucze aktywne. Zobacz dokumentację Stripe , aby dowiedzieć się więcej o tych klawiszach.

  1. Zaktualizuj swoją tajną konfigurację Stripe:

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

  2. Ustaw aktywny klucz publikowania w /public/javascript/app.js .

  3. Aby zmiany zaczęły obowiązywać, ponownie wdróż Cloud Functions i Hosting: firebase deploy .