透過 Firebase 處理付款

您可以使用幾項不同的 Firebase 功能和 Stripe，在網頁應用程式中處理付款，不必自行建構伺服器基礎架構。本指南將逐步說明如何自訂及部署自己的開放原始碼版本 cloud-functions-stripe-sample.web.app 範例應用程式。

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

導入程序總覽

  1. 設定 Stripe 帳戶。
  2. 在 Firebase 控制台中建立專案。
  3. 將專案升級至即付即用 Blaze 定價方案。
  4. 使用 firebase use --add 將 Firebase CLI 設為使用您的專案。
  5. 取得範例 Firestripe 應用程式的原始碼，並為專案設定正確資訊，然後自訂程式碼以符合應用程式需求。
  6. 部署應用程式後，請在 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，確認下列功能運作正常：

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