使用 Firebase 處理付款

使用一些不同的 Firebase 功能和 Stripe，您可以在 Web 應用程式中處理付款，而無需建立自己的伺服器基礎架構。本指南將引導您自訂和部署您自己的開源cloud-functions-stripe-sample.web.app範例應用程式版本。

開始之前，請在Firebase 控制台中建立一個專案並設定Stripe帳戶。

實施概述

  1. 設定Stripe帳戶。
  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目錄中的所有文件傳送到託管，以便您的網站可用。
    2. 將functions目錄中的程式碼傳送到 Cloud Functions for Firebase。
    3. 依照firestore.rules中的配置，在 Cloud Firestore 資料庫上設定安全規則。提供的規則僅允許用戶讀取和寫入自己的付款和付款方式。

測試範例應用程式

存取您的付款應用程式的 URL your-firebase-project-id.web.app並驗證以下功能是否有效：

  • 您可以透過 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 。