透過 Firebase 處理付款

你可以使用幾項 Firebase 功能和 Stripe 處理付款 不必建構自己的伺服器基礎架構。本指南會逐步說明 只需透過自訂及部署 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. 設定 Stripe 可發布金鑰 在 /public/javascript/app.js 中：

    const STRIPE_PUBLISHABLE_KEY=<YOUR STRIPE PUBLISHABLE KEY>;

  9. 使用「firebase deploy」部署專案。此指令會執行下列作業：

    1. 將 public 目錄中的所有檔案傳送到 Hosting，以便存取您的網站。
    2. 將 functions 目錄中的程式碼傳送至 Cloud Functions for Firebase。
    3. 按照以下項目，為 Cloud Firestore 資料庫設定安全性規則： firestore.rules。提供的規則只允許使用者讀取及寫入自己的付款和付款方式。

測試範例應用程式

前往付款應用程式的網址： 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。