Join us in person and online for Firebase Summit on October 18, 2022. Learn how Firebase can help you accelerate app development, release your app with confidence, and scale with ease. Register now

使用 Firebase 處理付款

透過集合功能整理內容 你可以依據偏好儲存及分類內容。

使用幾個不同的 Firebase 功能和 Stripe,您可以在您的網絡應用程序中處理付款,而無需構建自己的服務器基礎架構。本指南將引導您自定義和部署您自己的開源cloud-functions-stripe-sample.web.app示例應用程序版本。

在開始之前,請在Firebase 控制台中創建一個項目並設置一個Stripe帳戶。

實施概述

  1. 設置一個條紋帳戶。
  2. Firebase 控制台中創建一個項目。
  3. 為您的項目啟用計費功能並將 Firebase CLI 配置為通過firebase use --add使用您的項目。
  4. 獲取示例 Firestripe 應用程序的源代碼。使用適合您項目的正確信息對其進行配置,並自定義代碼以適合您的應用程序。
  5. 部署應用後,在 Firebase 控制台中查找用戶和事務列表。

設置和部署示例應用

  1. 獲取源代碼
  2. 在您的身份驗證提供商設置中啟用 Google 和電子郵件登錄。
  3. 啟用Cloud Firestore
  4. 如果您還沒有安裝Firebase CLI ,請使用firebase login
  5. 將此示例配置為通過firebase use --add使用您的項目。
  6. 通過運行cd functions; npm install; cd -
  7. 將您的Stripe API 密鑰添加到您的 Cloud Functions 環境配置中:

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

  8. /public/javascript/app.js中設置您的Stripe 可發布密鑰

    const STRIPE_PUBLISHABLE_KEY=<YOUR STRIPE PUBLISHABLE KEY>;

  9. 使用firebase deploy部署您的項目。這個命令:

    1. public目錄中的所有文件發送到 Hosting,以便您的網站可用。
    2. functions目錄中的代碼發送到 Cloud Functions for Firebase。
    3. 按照firestore.rules中的配置在 Cloud Firestore 數據庫上設置安全規則。提供的規則僅允許用戶讀取和寫入他們自己的付款和付款方式。

測試示例應用

your-firebase-project-id.web.app訪問您的付款應用的 URL,並驗證以下功能是否有效:

  • 您可以通過 Google 或電子郵件登錄。
  • 您可以添加新的Stripe 測試卡並在卡選擇元素中查看它。
  • 您可以選擇一張卡並對其進行收費。
  • 您可以退出。

如需比較,請參閱cloud-functions-stripe-sample.web.app

要為您的用戶提供簡化的體驗,您可以進一步自定義支付頁面的外觀,或將其插入現有應用程序。

查看已處理的付款

設置並部署付款頁面後,您可以檢查 Firebase 控制台並查看用戶列表以及他們的付款方式和付款方式。

  1. 轉到Cloud Firestore
  2. 檢查您的用戶列表,如果他們添加了任何信用卡或進行了任何交易,請查看每個用戶下的列表。

接受實時付款

準備好上線後,您需要將測試密鑰交換為實時密鑰。請參閱Stripe 文檔以了解有關這些鍵的更多信息。

  1. 更新您的 Stripe 密碼配置:

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

  2. /public/javascript/app.js中設置您的實時可發布密鑰

  3. 重新部署 Cloud Functions 和 Hosting 以使更改生效: firebase deploy