使用 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. 在 /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. 为您的 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。