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