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 poradnik przeprowadzi Cię przez proces dostosowywania i wdrażania własną wersję open source cloud-functions-stripe-sample.web.app przykład aplikacji.

Przed rozpoczęciem tworzenia projektu w konsoli Firebase i skonfigurować Stripe konto.

Przegląd wdrożenia

  1. Konfigurowanie Stripe konto.
  2. Tworzenie projektu w konsoli Firebase .
  3. Włącz rozliczeniowe dla swojego projektu i skonfigurować Firebase CLI do korzystania z projektu z firebase use --add .
  4. Pobierz kod źródłowy dla 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 Google & Email sign-in w swoich ustawieniach dostawcy uwierzytelniania .
  3. Włącz Chmura FireStore .
  4. Zainstalować Firebase CLI , jeśli jeszcze go nie masz, i zalogować się firebase login .
  5. Skonfigurować tę próbkę do wykorzystania projektu z firebase use --add .
  6. Zainstalować zależności lokalnie poprzez uruchomienie cd functions; npm install; cd -

  7. Dodaj swoją Stripe API tajny klucz do konfiguracji Funkcje środowiska cloud:

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

  8. Ustaw Stripe opublikowania klucz w /public/javascript/app.js :

    const STRIPE_PUBLISHABLE_KEY=<YOUR STRIPE PUBLISHABLE KEY>;

  9. Wdrożyć swój projekt za pomocą firebase deploy . To polecenie:

    1. Wysyła wszystkie pliki w public katalogu do Hosting tak, że witryna jest dostępna.
    2. Wysyła kod w functions katalogu do funkcji Chmura Firebase.
    3. Ustala zasady bezpieczeństwa na bazie Chmura FireStore skonfigurowana 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ź URL swojej aplikacji Płatności za co your-firebase-project-id.web.app i sprawdzić, czy następujące cechy pracy:

  • Możesz zalogować się przez Google lub e-mail.
  • Można dodać nową kartę testową Stripe i wyświetlać go w karty wybierz elementu.
  • Możesz wybrać jedną ze swoich kart i ją obciążyć.
  • Możesz się wylogować.

Dla porównania, patrz 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. Idź 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. Zobaczyć docs Stripe , aby dowiedzieć się więcej na temat tych kluczy.

  1. Zaktualizuj swoją tajną konfigurację Stripe:

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

  2. Ustaw żywo klucz do publikacji w /public/javascript/app.js .

  3. Przesunięcie obu funkcji Cloud and Hosting, aby zmiany odniosły skutek: firebase deploy .