Google 致力于为黑人社区推动种族平等。查看具体举措

使用 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