如何使用 Express.js 和 Stripe 实现在线支付功能

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