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