使用 Firebase 处理付款

只需使用若干不同的 Firebase 功能和 Stripe,您无需自己构建服务器基础架构,便可在您的网页应用中处理付款。本指南将为您详细介绍如何自定义和部署自己专属的开源 Firestripe 示例应用版本。

开始之前,请在 Firebase 控制台中创建一个项目并设置一个 Stripe 帐号。

实现概览

  1. 使用 Firebase 托管设置和部署您的应用,使其具备运行应用所需的 Firebase 功能。使用 Firebase CLI,您可以直接通过命令行部署启用了 Cloud Functions 和 Firebase 实时数据库的 shell 应用。
  2. 获取示例 Firestripe 应用的源代码。使用适合您的项目的信息配置该应用,并自定义代码以便与您的应用相匹配。
  3. 部署应用之后,在 Firebase 控制台中查找用户和交易列表。

设置和部署您的应用

先创建一个与您的 Firebase 项目相关联并且包含所有您需要的 Firebase 功能的 shell 应用。然后,部署您的 shell 应用并测试其配置是否正确。

在 Firebase CLI 中的操作

  1. 要安装 Firebase CLI,请按照 Firebase CLI 设置部分中的步骤操作。
  2. 安装 Firebase CLI 后,运行 firebase init,创建一个 shell 应用。
  3. 选择数据库函数托管。然后从项目列表中选择您的 Firebase 项目。

测试是否生效

  1. 要部署您的 shell 应用,请运行 firebase deploy
  2. 检查确保您的应用正在运行。

获取并配置示例应用

对示例应用的操作

  1. 获取 Firestripe 的源代码。
  2. functions 目录下运行 npm install -g,以便在本地安装 Node.js 库。
  3. 设置 public/index.html 文件中的 Firebase 密钥和 Stripe 密钥:

      firebase.initializeApp({
        apiKey: "YOUR WEB API KEY",
        authDomain: "YOUR FIREBASE APP NAME.firebaseapp.com",
        databaseURL: "https://YOUR FIREBASE APP NAME.firebaseio.com",
        storageBucket: "YOUR FIREBASE APP NAME.appspot.com",
        messagingSenderId: "YOUR CLOUD MESSAGING SENDER ID"
      });
      Stripe.setPublishableKey('YOUR STRIPE PUBLISHABLE KEY');
    

在 Firebase CLI 中的操作

  1. 要配置 Stripe 服务器密钥,请在项目目录下运行以下命令:firebase functions:config:set stripe.token="YOUR TEST SECRET KEY"
  2. 通过运行 firebase deploy 来实施您最新的更改。

测试是否生效

在 <应用名称>.firebaseapp.com 上访问您的付款应用的网址,并确保以下功能正常运行:

  • 您的用户名显示在页面上。
  • 您可以输入一个信用卡号并添加此卡。
  • 您可以创建一笔新的收费
  • 您可以退出帐号。

如需对比,可尝试 Firestripe 示例。

为了向用户提供简便高效的体验,您可以进一步自定义付款页面的外观,或将其插入您当前的应用中。

查看已处理的付款

设置并部署付款页面后,您可以在 Firebase 控制台中查看用户和交易列表。

在 Firebase 控制台中的操作

  1. 转到数据库
  2. 查看您的用户列表。如果用户添加了任何信用卡或进行了任何交易,则每位用户下方会有相应的列表。

发送以下问题的反馈:

此网页
需要帮助?请访问我们的支持页面