使用 Firebase 处理付款

使用一些不同的 Firebase 功能和 Stripe,您可以在 Web 应用程序中处理付款,而无需构建自己的服务器基础设施。本指南将引导您自定义和部署您自己的开源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目录中的所有文件发送到托管,以便您的网站可用。
    2. functions目录中的代码发送到 Cloud Functions for Firebase。
    3. 按照firestore.rules中的配置,在 Cloud Firestore 数据库上设置安全规则。提供的规则仅允许用户读取和写入自己的付款和付款方式。

测试示例应用程序

访问您的付款应用程序的 URL 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