使用一些不同的 Firebase 功能和 Stripe,您可以在 Web 应用程序中处理付款,而无需构建自己的服务器基础设施。本指南将引导您自定义和部署您自己的开源cloud-functions-stripe-sample.web.app示例应用程序版本。
开始之前,请在Firebase 控制台中创建一个项目并设置Stripe帐户。
实施概述
- 设置Stripe帐户。
- 在Firebase 控制台中创建一个项目。
- 为您的项目启用计费功能,并将 Firebase CLI 配置为通过
firebase use --add
来使用您的项目。 - 获取示例 Firestripe 应用程序的源代码。使用适合您的项目的正确信息对其进行配置,并自定义代码以适合您的应用程序。
- 部署应用后,请在 Firebase 控制台中查找用户和事务列表。
设置和部署示例应用程序
- 获取源代码。
- 在您的身份验证提供商设置中启用 Google 和电子邮件登录。
- 启用Cloud Firestore 。
- 如果尚未安装Firebase CLI ,请安装,然后使用
firebase login
登录。 - 配置此示例以通过
firebase use --add
使用您的项目。 - 通过运行
cd functions; npm install; cd -
将您的Stripe API 密钥添加到您的 Cloud Functions 环境配置中:
firebase functions:config:set stripe.secret=<YOUR STRIPE SECRET KEY>
在
/public/javascript/app.js
中设置您的Stripe 可发布密钥:const STRIPE_PUBLISHABLE_KEY=<YOUR STRIPE PUBLISHABLE KEY>;
使用
firebase deploy
部署您的项目。这个命令:- 将
public
目录中的所有文件发送到托管,以便您的网站可用。 - 将
functions
目录中的代码发送到 Cloud Functions for Firebase。 - 按照
firestore.rules
中的配置,在 Cloud Firestore 数据库上设置安全规则。提供的规则仅允许用户读取和写入自己的付款和付款方式。
- 将
测试示例应用程序
访问您的付款应用程序的 URL your-firebase-project-id.web.app
并验证以下功能是否有效:
- 您可以通过 Google 或电子邮件登录。
- 您可以添加新的Stripe 测试卡并在卡选择元素中查看它。
- 您可以选择一张卡并为其充值。
- 您可以退出。
如需比较,请参阅cloud-functions-stripe-sample.web.app 。
为了为您的用户提供简化的体验,您可以进一步自定义支付页面的外观,或将其插入现有的应用程序中。
查看已处理的付款
设置并部署付款页面后,您可以检查 Firebase 控制台并查看用户列表及其付款方式和付款。
- 转到Cloud Firestore 。
- 检查您的用户列表,如果他们添加了任何信用卡或进行了任何交易,则检查每个用户下的列表。
接受实时付款
准备好上线后,您需要将测试密钥更换为实时密钥。请参阅Stripe 文档以了解有关这些键的更多信息。
更新您的 Stripe 秘密配置:
firebase functions:config:set stripe.secret=<YOUR STRIPE LIVE SECRET KEY>
重新部署 Cloud Functions 和 Hosting 以使更改生效:
firebase deploy
。