引言
在线支付已经成为了现代商业活动的基础，为企业带来巨大的收益和便利。为了实现在线支付，开发人员需要接手的重要任务是实现付款流程。付款流程需要与支付提供商的 API 进行交互，以向用户展示付款表单和将金额传输到商家账户。本文将介绍如何使用 Express.js 和 Stripe API 实现付款流程的最佳实践。
Stripe API 的概述
Stripe API 是一种广泛使用的支付解决方案之一，易于使用且具有出色的文档。Stripe API 具有许多不同的端点，可用于管理客户、付款、结账和退款等活动。我们将专注于 Stripe API 中的付款端点来实现付款流程。
Express.js 的概述
Express.js 是一种流行的 Node.js Web 框架，它提供了一种灵活且易于使用的方式来构建 Web 应用程序。它支持处理 HTTP 请求、路由、中间件以及处理静态文件等常见任务。
准备工作
在继续之前，请确保您已经安装了 Node.js 和 npm。我们还需要一个 Stripe 帐户，以获取 API 密钥。请到 Stripe 官网注册账户并创建账户。
在创建帐户之后，我们可以查看 API 密钥并存储它。请确保您不会将这些密钥共享给其他人。我们将在接下来的示例代码中使用这些密钥进行付款操作。
构建后端服务器
让我们用 Express 构建我们的后端服务器。首先，通过运行以下命令安装 Express：
--- ------- -------
接下来，在您的项目目录下创建一个名为 server.js 的文件，然后将以下代码添加到文件中：
----- ------- - ------------------- ----- --- - ---------- ------------ ----- ---- -- - --------------- --------- --- ---------------- -- -- - ------------------- -- ------- -- ---- ------- ---
该代码将创建一个 Express 应用程序，该应用程序将监听端口3000，并在浏览器中打印出“Hello World!”消息。使用以下命令启动服务器：
---- ---------
集成 Stripe API
现在，我们已经有了一个运行中的服务器，下一步是集成 Stripe API。这里，我们将使用 Stripe 的 Node.js 库来实现付款流程。运行以下命令安装 Stripe：
--- ------- ------
接下来，将以下代码添加到 server.js 文件中：
----- ------ - ----------------------------------
------------------- ------------- ---- -
--- ------ - -----
-------------------------
------ ---------------
------- --------------------
--
-------------- --
-----------------------
-------
------------ ------- --------
--------- ------
--------- -----------
---
------------ -- -------------------------
---------- -- -
--------------------- -----
---------------------------- --------- ----------
---
---该代码将创建一个 /charge 网址，用于接受客户端 POST 请求，创建一个新的客户并使用该客户的 credit card 进行付款。我们设置了一个名为 "amount" 的变量，用于设置付款金额。请记得更改 "your-api-key" 为您的 Stripe API 密钥。此代码将返回一个状态码为 500 的错误消息，以防发生付款失败事件。
构建前端客户端
为了与我们的后端服务器进行交互，我们需要一个前端客户端。在本教程中，我们将使用 React.js 作为我们的前端框架。
首先，安装 React 和 ReactDOM：
--- ------- ----- ---------
接下来，创建一个名为 client.js 的文件，然后使用以下代码填充它：
------ ------ - --------- - ---- --------
------ -------- ---- ------------
----- -------- ------- --------- -
----- - -
------ ---
----- ---
-------- ---
----- ---
------ ---
---- ---
--------- ---
----------- ---
------- ---
---- --
--
----------------- - - -- -
----- - ----- ----- - - ---------
---------------
------- -----
---
--
------------ - -- -- -
---------------- -
------- -------
----- ---------------------------
-------- -
--------------- ------------------
-
--
--------- -- -----------
---------- -- ------------------
---------- -- --------------------- ------
--
-------- -
------ -
----- -----------------------------
----------- ------------
--------------------
------ ------------ ------------ ------------------------ --------------------------------- --
-------------------
------ ----------- ----------- ----------------------- --------------------------------- --
----------------------
------ ----------- -------------- -------------------------- --------------------------------- --
-------------------
------ ----------- ----------- ----------------------- --------------------------------- --
--------------------
------ ----------- ------------ ------------------------ --------------------------------- --
------------------
------ ----------- ---------- ---------------------- --------------------------------- --
----------- ------------
----------- ------------
------ ----------- --------------- --------------------------- --------------------------------- --
----------- --------------
------ ----------- ----------------- ----------------------------- --------------------------------- --
---------------------
------ ----------- ------------- ------------------------- --------------------------------- --
------------------
------ ----------- ---------- ---------------------- --------------------------------- --
------- ----------------- ------------
-------
--
-
-
------------------------- --- ---------------------------------该代码定义了 Checkout 组件，它将流通碰到我们的 /charge API。它包括一个表单，客户可以输入他们的账单详情和信用卡信息，然后我们可以使用 "handleSubmit" 函数向服务器提交这些信息。请注意，我们使用了state为客户端输入保存了Billing Details和Payment Details。
运行应用程序
最后，创建一个名为 index.html 的文件，以在浏览器中显示我们的前端应用程序。在该文件中，我们将使用以下代码：
--------- -----
------
------
------------- -------------------
-------
------
---- ----------------
------- --------------------------
-------
-------将该文件保存到项目的根目录中。
现在，我们可以使用我们的命令行将所有文件进行打包：
----- --------- ---------- ------------------ ----- --- --------- ----
要启动应用程序，请输入以下命令：
---- ------------------
该命令将启动 Express 服务器并在端口3000上运行。请在浏览器中输入http://localhost:3000/以查看应用程序。现在客户可以与应用程序进行交互并进行购物。经过全面测试，您的应用程序现在正常工作。
结论
本文介绍了如何使用 Express.js 和 Stripe API 实现付款流程的最佳实践。我们学习了如何使用 Stripe 的 Node.js 库来与 Stripe API 进行交互，并了解了如何使用 React.js 构建我们的前端客户端。本文提供了示例代码，以帮助您开始构建自己的付款流程。较小的应中用Stripe和React展现在您的Web和移动应用程序中，这将为你的用户提供更好的购物体验以及为你的企业带来巨大的收益和便利。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/672acbd9ddd3a70eb6d0cc64