使用 Firebase 处理付款
使用集合让一切井井有条
根据您的偏好保存内容并对其进行分类。
只需使用若干不同的 Firebase 功能和 Stripe,您无需自己构建服务器基础架构,便可在您的网页应用中处理付款。本指南将为您详细介绍如何自定义和部署自己专属的开源 cloud-functions-stripe-sample.web.app 示例应用版本。
开始之前,请在 Firebase 控制台中创建一个项目并设置一个 Stripe 账号。
实现概览
- 设置 Stripe 账号。
- 在 Firebase 控制台中创建一个项目。
- 将您的项目升级为随用随付 Blaze 定价方案。
- 配置 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
目录中的所有文件发送到 Hosting,以便网站可以访问。
- 将
functions
目录中的代码发送到 Cloud Functions for Firebase。
- 按照
firestore.rules
中的配置方式设置 Cloud Firestore 数据库的安全规则。提供的规则仅允许用户读取和写入其付款和付款方式。
测试示例应用
通过 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>
在 /public/javascript/app.js
中设置真实的可发布密钥。
重新部署 Cloud Functions 和 Hosting,使更改生效:firebase deploy
。
如未另行说明,那么本页面中的内容已根据知识共享署名 4.0 许可获得了许可,并且代码示例已根据 Apache 2.0 许可获得了许可。有关详情,请参阅 Google 开发者网站政策。Java 是 Oracle 和/或其关联公司的注册商标。
最后更新时间 (UTC):2025-07-25。
[null,null,["最后更新时间 (UTC):2025-07-25。"],[],[],null,["Using a few different Firebase features and Stripe, you can process payments in\nyour web app without building your own server infrastructure. This guide walks\nyou through customizing and deploying your own version of the open-source\n[cloud-functions-stripe-sample.web.app](//cloud-functions-stripe-sample.web.app/) example app.\n\nBefore you start, create a project in the\n[Firebase console](https://console.firebase.google.com) and set up a\n[Stripe](https://stripe.com/) account.\n| **Note:** Our partners at Stripe have introduced two new extensions, [Run Subscription Payments with Stripe](https://firebase.google.com/products/extensions/firestore-stripe-subscriptions) and [Send Invoices using Stripe](https://firebase.google.com/products/extensions/firestore-stripe-invoices), to make it possible to process payments with even less code!\n\nImplementation overview\n\n1. Set up a [Stripe](//stripe.com/) account.\n2. Create a project in the [Firebase console](//console.firebase.google.com).\n3. Upgrade your project to the [pay-as-you-go Blaze pricing plan](/pricing).\n4. Configure the Firebase CLI to use your project with `firebase use --add`.\n5. Get the [source code](//github.com/firebase/functions-samples/tree/main/Node-1st-gen/stripe) for the sample Firestripe app. Configure it with the right information for your project and customize the code to fit your app.\n6. Once you've deployed your app, look for a list of users and transactions in the Firebase console.\n\nSet up and deploy the sample app\n\n1. Get the [source code](//github.com/firebase/functions-samples/tree/main/Node-1st-gen/stripe).\n2. Enable Google \\& Email sign-in in your [authentication provider settings](//console.firebase.google.com/project/_/authentication/providers).\n3. Enable [Cloud Firestore](//console.firebase.google.com/project/_/firestore).\n4. Install the [Firebase CLI](//github.com/firebase/firebase-tools) if you haven't already, and log in with `firebase login`.\n5. Configure this sample to use your project with `firebase use --add`.\n6. Install dependencies locally by running `cd functions; npm install; cd -`\n7. Add your [Stripe API Secret Key](//dashboard.stripe.com/account/apikeys)\n to your Cloud Functions environment configuration:\n\n `firebase functions:config:set stripe.secret=\u003cYOUR STRIPE SECRET KEY\u003e`\n8. Set your [Stripe publishable key](//dashboard.stripe.com/account/apikeys)\n in [`/public/javascript/app.js`](//github.com/firebase/functions-samples/tree/main/Node-1st-gen/stripe/public/javascript/app.js#L16):\n\n `const STRIPE_PUBLISHABLE_KEY=\u003cYOUR STRIPE PUBLISHABLE KEY\u003e;`\n9. Deploy your project using `firebase deploy`. This command:\n\n 1. Sends all the files in the `public` directory to Hosting so that your website is available.\n 2. Sends the code in the `functions` directory to Cloud Functions for Firebase.\n 3. Sets security rules on your Cloud Firestore database as configured in `firestore.rules`. The provided rules only allow a user to read and write their own payments and payment methods.\n\nTest the sample app\n\nVisit your payments app's URL at\n`your-firebase-project-id.web.app` and verify that the following features work:\n\n- You can sign in via Google or Email.\n- You can add a new [Stripe test card](//stripe.com/docs/testing) and view it in the card select element.\n- You can select one of your cards and charge it.\n- You can sign out.\n\nFor comparison, see\n[cloud-functions-stripe-sample.web.app](//cloud-functions-stripe-sample.web.app/).\n\nTo provide a streamlined experience for your users, you can further customize\nyour payment page's appearance, or plug it into your existing app.\n\nView processed payments\n\nOnce you've set up and deployed your payments page, you can check the Firebase\nconsole and see a list of users along with their payment methods and payments.\n\n1. Go to [Cloud Firestore](https://console.firebase.google.com/project/_/firestore/data).\n2. Check for a list of your users and, if they added any credit cards or made any transactions, a list of those under each user.\n\nAccept live payments\n\nOnce you're ready to go live, you'll need to exchange your test keys for your\nlive keys. See the [Stripe docs](https://stripe.com/docs/keys) to learn more\nabout these keys.\n\n1. Update your Stripe secret config:\n\n `firebase functions:config:set stripe.secret=\u003cYOUR STRIPE LIVE SECRET KEY\u003e`\n2. Set your [live publishable key](//dashboard.stripe.com/account/apikeys) in\n [`/public/javascript/app.js`](//github.com/thorsten-stripe/functions-samples/blob/thorsten-stripe/update-stripe-template/stripe/public/javascript/app.js#L16).\n\n3. Redeploy both Cloud Functions and Hosting for the changes to take effect:\n `firebase deploy`."]]