Stripe 是一家提供在线支付功能的公司,许多网站和应用都使用它来实现支付功能。 在本文中,我们将介绍如何使用 Express.js 和 Stripe 一起构建一个简单的在线支付系统。通过本文的学习,您将理解如何使用 Express.js 构建简单的 Web 应用程序,并且了解如何使用 Stripe 自动处理付款事务。
环境设置
在开始开发之前,我们需要完成以下环境设置:
- 在您的计算机上安装 Node.js 和 npm。
- 创建一个空文件夹,并使用终端进入该文件夹。
在终端中创建一个全新的 Node.js 应用程序,输入以下命令:
- --- ----
随后按提示输入应用程序的名称以及其他必要的信息。稍后,您将得到一个 package.json 文件。
安装依赖项
使用以下命令安装 Express 应用程序依赖项:
- --- ------- ------- ------
接下来,让我们安装 Stripe Node.js 库,它将与 Express 一起使用来处理支付请求和付款。
- --- ------- ------ ------
在完成安装之后,我们将开始编写代码实现以下支付功能:
创建付款表单
我们要实现的第一步是创建一个 HTML 表单来设置并发送付款请求。 我们将使用基本的 HTML、CSS 和 JavaScript 创建表单。
首先,创建一个名为 "public" 的子目录存放所有的前端代码。
在 "public" 目录下,创建一个名为 "index.html" 的文件,并将以下代码复制到文件中:
--------- ----- ------ ------ ------------- ------- ---------------- ------- -------------------------------------------------------------------------------- ------- ----------------------------------------- ------- ----------------------- ---------------------------- - --- ------ - ---------------------------------------- --- -------- - ------------------ --- ----- - - ----- - ------ ---------- ----------- ----------- ------ ---------- ------------ -------------- -------------- --------- ------- ---------------- - ------ --------- - -- -------- - ------ ---------- ---------- --------- - -- --- ---- - ----------------------- ------- -------- ---------------------------- ------------------------------- --------------- - --- ------------ - --------------------------------------- -- ------------- - ------------------------ - -------------------- - ---- - ------------------------ - --- - --- --- ---- - ---------------------------------------- ------------------------------- --------------- - ----------------------- ---------------------------------------------- - -- -------------- - --- ------------ - --------------------------------------- ------------------------ - --------------------- - ---- - --------------------------------- - --- --- -------- ------------------------- - --- ---- - ---------------------------------------- --- ----------- - -------------------------------- -------------------------------- ---------- -------------------------------- --------------- --------------------------------- ---------- ------------------------------ -------------- - --- --------- ------- ------------ - ---------- ------ ------- - ----- -------- ----- - ----- - -------- ------------- ------ ----- -------------- ----- -------- ----- ------------------- ----- ---------------- ----- ----------- ----- ------- --- ----- ----- -------------- ---- - ------ - ----------------- -------- ------- ----- ------ ----- ------- -------- ---------- ----- ------------ ---- ------------ -------- -------------- ----- -------- ---- ----- ----------- ------- ---------------- ----- --------------- ------- ------------ ------- -------------- ---- - ----------------- - ------ ----- - ------------- - ----------------- ------ -------- ----- -------------- ---- ------- --- ----- ----- - ------------ - ------ -------- ------------ ---- ----------- ----- - -------- ------- ------ ---- -------------------- ----- ----------------- -------------- ------ ----------- --------- ----------- ----------------- ------ ----- ------------------------ --------- ---- ------------------------ ---- ---------------- ------------------- ------- -------------------- ---------------- ------- ------ ------- -------
在 index.html 文件中,我们引用了 Stripe 的 JavaScript 库,并在文件底部创建了一个表单。在该表单中,我们创建了一个名为 "card-holder-name" 的文本框,以便用户输入卡持有人的名称。 在表单中,我们还创建了一个名为 "card-element" 的添加卡片元素,它将显示卡的类型、号码和有效期。 在卡的下方,我们还添加了一个用于显示验证错误的
创建服务器端代码
接下来,我们将在服务器端代码中实现 Stripe 和 Express 集成的功能。我们将从创建服务器实例开始。
在应用程序根目录下创建一个名为 "index.js" 的文件,并将以下代码复制到文件中:
----- ------- - ------------------- ----- ---------- - ----------------------- ----- ---- - ---------------- ----- ---- - ---------------- ----- ------ - ---------------------------------------------- ----- --- - ---------- --------------------------- ------------------------------- --------- ----- ---- ------------------------------------------- ------------ ------------------- ----- ---- -- - -- ------- -------------------- --- ------------ - ------ ---------------------- -------- -------- ------ ------ --- - ----- ------ - --- -- -- ----- ----------------------- ------- ------------ ------- -------- --------- ------ ------- --------------------- -- ----- ------- -- - -- ----- - ------------------- ------ -------------------------- - ------ ----------------------------- --- --- ----- ---- - ---------------- -- ------- --------------- ------ ----- ------ - ----------------------- ------------------- -- -- ---------------- ------- -- ---------------------
在服务器代码中,我们首先引入了所需的依赖项,包括 Express、body-parser、path、http 和 Stripe。 我们将使用 body-parser 来解析 POST 请求,以及 path 来构造文件路径。 我们还建立了一个 Express 应用程序实例,并在应用程序实例中设置了中间件功能。
然后,我们添加了一个名为 "charge" 的路由,该路由将处理 POST 请求,并使用 Stripe 创建付款。 在该路由中,我们首先验证 Stripe token 是否存在。 如果存在,我们使用 Stripe.charges.create 方法来创建付款。 为免费测试,我们设置了付款价格为 $0.99 美元。
最后,我们侦听来自指定端口的请求,并在控制台中打印服务器地址。
完成支付
现在我们已经编写了客户端和服务器端代码,我们应该能够成功地使用 Stripe 来处理支付事务了。 请运行以下命令以启动服务器:
- ---- --------
访问 "http://localhost:3000/",将看到我们之前在 "index.html" 文件中创建的表单。在表单上输入卡持有人的名称和信用卡信息,然后点击 "Submit Payment" 按钮。
这将会向我们在服务器端创建的 /charge 路由提交表单数据。 在服务器端,我们将创建 Stripe 付款并从用户帐户中扣除费用。如果一切顺利,我们将收到 Stripe 的返回信息并在浏览器中显示。
结论
在本文中,我们看到了如何使用 Express.js 和 Stripe.js 来创建自己的在线支付系统。我们使用基本的 HTML、CSS 和 JavaScript 创建了付款表单,使用 Stripe 的 Node.js 库来处理支付请求。 我们还创建了服务器端代码来验证支付请求并创建 Stripe 付款。
此代码只是一个示例,您可能需要进一步扩展以符合您的实际需求。 阅读 Stripe 和 Express 官方文档可帮助您了解更多有关条款和条件、限制、费用和其他重要细节的信息。
来源:JavaScript中文网 ,转载请注明来源 本文地址:https://www.javascriptcn.com/post/66fb6cf644713626015cb69b