透過 Firebase 處理付款

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

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

導入總覽

  1. 設定 Stripe 帳戶。
  2. 在 Firebase 控制台中建立專案。
  3. 將專案升級至即付即用 Blaze 定價方案。
  4. 設定 Firebase CLI 以使用 firebase use --add 中的專案。
  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。