Przetwarzanie płatności w Firebase
Zadbaj o dobrą organizację dzięki kolekcji
Zapisuj i kategoryzuj treści zgodnie ze swoimi preferencjami.
Korzystając z kilku funkcji Firebase i Stripe, możesz przetwarzać płatności w swojej aplikacji internetowej bez tworzenia własnej infrastruktury serwera. W tym przewodniku znajdziesz instrukcje dostosowywania i wdrażania własnej wersji przykładowej aplikacji open source cloud-functions-stripe-sample.web.app.
Zanim zaczniesz, utwórz projekt w konsoli Firebase i skonfiguruj konto Stripe.
Omówienie wdrażania
- Skonfiguruj konto Stripe.
- Utwórz projekt w konsoli Firebase.
- Przejdź w projekcie na abonament Blaze rozliczany według wykorzystania.
- Skonfiguruj interfejs wiersza poleceń Firebase do korzystania z Twojego projektu w usłudze
firebase use --add.
- Pobierz kod źródłowy przykładowej aplikacji Firestripe. Skonfiguruj go, podając odpowiednie informacje o projekcie, i dostosuj kod do swojej aplikacji.
- Po wdrożenie aplikacji w konsoli Firebase znajdziesz listę użytkowników i transakcji.
Konfigurowanie i wdrażanie przykładowej aplikacji
- Pobierz kod źródłowy.
- Włącz logowanie przez Google i e-mail w ustawieniach dostawcy uwierzytelniania.
- Włącz Cloud Firestore.
- Zainstaluj wiersz poleceń Firebase, jeśli jeszcze tego nie zrobiono, i zaloguj się za pomocą
firebase login.
- Skonfiguruj ten szablon tak, aby używał Twojego projektu w kontekście
firebase use --add.
- Zainstaluj zależności lokalnie, uruchamiając
cd functions; npm install; cd -
Dodaj klucz tajny interfejsu Stripe API do konfiguracji środowiska Cloud Functions:
firebase functions:config:set stripe.secret=<YOUR STRIPE SECRET KEY>
Ustaw klucz publikowania w usłudze Stripe w sekcji /public/javascript/app.js:
const STRIPE_PUBLISHABLE_KEY=<YOUR STRIPE PUBLISHABLE KEY>;
Wdróż projekt za pomocą firebase deploy. To polecenie:
- Wysyła wszystkie pliki z katalogu
public do Hosting, aby Twoja witryna była dostępna.
- Wysyła kod z katalogu
functions do Cloud Functions for Firebase.
- Ustawia reguły zabezpieczeń w bazie danych Cloud Firestore zgodnie z konfiguracją w
firestore.rules. Podane reguły umożliwiają użytkownikowi tylko odczytywanie i zapisywanie własnych płatności i form płatności.
Testowanie przykładowej aplikacji
Otwórz adres URL swojej aplikacji do płatności na stronie your-firebase-project-id.web.app i sprawdź, czy działają te funkcje:
- Możesz zalogować się za pomocą Google lub e-maila.
- Możesz dodać nową kartę testową Stripe i wyświetlić ją w elemencie wyboru karty.
- Możesz wybrać jedną z kart i na niej naliczyć opłatę.
- Możesz się wylogować.
Dla porównania możesz skorzystać z funkcji cloud-functions-stripe-sample.web.app.
Aby zapewnić użytkownikom wygodę, możesz dostosować wygląd strony płatności lub dodać ją do istniejącej aplikacji.
Wyświetlanie przetworzonych płatności
Po skonfigurowaniu i wdrożeniu strony płatności możesz w konsoli Firebase sprawdzić listę użytkowników wraz z ich formami płatności i płatnościami.
- Otwórz stronę Cloud Firestore.
- Sprawdź listę użytkowników i jeśli dodali oni jakieś karty kredytowe lub dokonali transakcji, sprawdź listę tych kart i transakcji.
Akceptowanie płatności na żywo
Gdy wszystko będzie gotowe do wdrożenia, musisz wymienić klucze testowe na klucze produkcyjne. Więcej informacji o tych kluczach znajdziesz w dokumentacji Stripe.
Zaktualizuj konfigurację obiektu tajnego Stripe:
firebase functions:config:set stripe.secret=<YOUR STRIPE LIVE SECRET KEY>
W sekcji /public/javascript/app.js ustaw klucz umożliwiający publikację na żywo.
Aby zmiany zaczęły obowiązywać, ponownie wdrożyć zarówno Cloud Functions, jak i Hosting:
firebase deploy.
O ile nie stwierdzono inaczej, treść tej strony jest objęta licencją Creative Commons – uznanie autorstwa 4.0, a fragmenty kodu są dostępne na licencji Apache 2.0. Szczegółowe informacje na ten temat zawierają zasady dotyczące witryny Google Developers. Java jest zastrzeżonym znakiem towarowym firmy Oracle i jej podmiotów stowarzyszonych.
Ostatnia aktualizacja: 2025-07-25 UTC.
[null,null,["Ostatnia aktualizacja: 2025-07-25 UTC."],[],[],null,["Using a few different Firebase features and Stripe, you can process payments in\nyour web app without building your own server infrastructure. This guide walks\nyou through customizing and deploying your own version of the open-source\n[cloud-functions-stripe-sample.web.app](//cloud-functions-stripe-sample.web.app/) example app.\n\nBefore you start, create a project in the\n[Firebase console](https://console.firebase.google.com) and set up a\n[Stripe](https://stripe.com/) account.\n| **Note:** Our partners at Stripe have introduced two new extensions, [Run Subscription Payments with Stripe](https://firebase.google.com/products/extensions/firestore-stripe-subscriptions) and [Send Invoices using Stripe](https://firebase.google.com/products/extensions/firestore-stripe-invoices), to make it possible to process payments with even less code!\n\nImplementation overview\n\n1. Set up a [Stripe](//stripe.com/) account.\n2. Create a project in the [Firebase console](//console.firebase.google.com).\n3. Upgrade your project to the [pay-as-you-go Blaze pricing plan](/pricing).\n4. Configure the Firebase CLI to use your project with `firebase use --add`.\n5. Get the [source code](//github.com/firebase/functions-samples/tree/main/Node-1st-gen/stripe) for the sample Firestripe app. Configure it with the right information for your project and customize the code to fit your app.\n6. Once you've deployed your app, look for a list of users and transactions in the Firebase console.\n\nSet up and deploy the sample app\n\n1. Get the [source code](//github.com/firebase/functions-samples/tree/main/Node-1st-gen/stripe).\n2. Enable Google \\& Email sign-in in your [authentication provider settings](//console.firebase.google.com/project/_/authentication/providers).\n3. Enable [Cloud Firestore](//console.firebase.google.com/project/_/firestore).\n4. Install the [Firebase CLI](//github.com/firebase/firebase-tools) if you haven't already, and log in with `firebase login`.\n5. Configure this sample to use your project with `firebase use --add`.\n6. Install dependencies locally by running `cd functions; npm install; cd -`\n7. Add your [Stripe API Secret Key](//dashboard.stripe.com/account/apikeys)\n to your Cloud Functions environment configuration:\n\n `firebase functions:config:set stripe.secret=\u003cYOUR STRIPE SECRET KEY\u003e`\n8. Set your [Stripe publishable key](//dashboard.stripe.com/account/apikeys)\n in [`/public/javascript/app.js`](//github.com/firebase/functions-samples/tree/main/Node-1st-gen/stripe/public/javascript/app.js#L16):\n\n `const STRIPE_PUBLISHABLE_KEY=\u003cYOUR STRIPE PUBLISHABLE KEY\u003e;`\n9. Deploy your project using `firebase deploy`. This command:\n\n 1. Sends all the files in the `public` directory to Hosting so that your website is available.\n 2. Sends the code in the `functions` directory to Cloud Functions for Firebase.\n 3. Sets security rules on your Cloud Firestore database as configured in `firestore.rules`. The provided rules only allow a user to read and write their own payments and payment methods.\n\nTest the sample app\n\nVisit your payments app's URL at\n`your-firebase-project-id.web.app` and verify that the following features work:\n\n- You can sign in via Google or Email.\n- You can add a new [Stripe test card](//stripe.com/docs/testing) and view it in the card select element.\n- You can select one of your cards and charge it.\n- You can sign out.\n\nFor comparison, see\n[cloud-functions-stripe-sample.web.app](//cloud-functions-stripe-sample.web.app/).\n\nTo provide a streamlined experience for your users, you can further customize\nyour payment page's appearance, or plug it into your existing app.\n\nView processed payments\n\nOnce you've set up and deployed your payments page, you can check the Firebase\nconsole and see a list of users along with their payment methods and payments.\n\n1. Go to [Cloud Firestore](https://console.firebase.google.com/project/_/firestore/data).\n2. Check for a list of your users and, if they added any credit cards or made any transactions, a list of those under each user.\n\nAccept live payments\n\nOnce you're ready to go live, you'll need to exchange your test keys for your\nlive keys. See the [Stripe docs](https://stripe.com/docs/keys) to learn more\nabout these keys.\n\n1. Update your Stripe secret config:\n\n `firebase functions:config:set stripe.secret=\u003cYOUR STRIPE LIVE SECRET KEY\u003e`\n2. Set your [live publishable key](//dashboard.stripe.com/account/apikeys) in\n [`/public/javascript/app.js`](//github.com/thorsten-stripe/functions-samples/blob/thorsten-stripe/update-stripe-template/stripe/public/javascript/app.js#L16).\n\n3. Redeploy both Cloud Functions and Hosting for the changes to take effect:\n `firebase deploy`."]]
