在前端开发中，我们需要使用各种各样的依赖包来帮助我们实现功能。npm 是一个非常流行的 JavaScript 包管理器，其中包含着来自全球开发者的丰富的开源库和工具。
cardpay 是一个非常实用的 npm 包，它可以帮助我们实现一个简单的支付功能。在本文中，我们将一步一步详细介绍如何使用 cardpay 这个 npm 包，并附带实际的代码案例。
安装 cardpay 包
在使用 cardpay 这个 npm 包前，我们需要先安装。可以在控制台中执行以下命令进行安装：
npm install cardpay --save
安装完成后，我们将能在项目中使用 cardpay 这个包了。
连接 Stripe 账户
cardpay 是基于 Stripe 的支付包，因此我们需要连接至 Stripe 的账户才能使用。以下是连接 Stripe 的步骤：
首先在 Stripe 网站上注册账户，如果已经有账户，则可以直接跳过该步骤。
在控制台中执行以下命令，使用注册的账户连接至 Stripe：
cardpay connect
在执行完该命令后，会跳转至 Stripe 页面让我们登录并链接 Stripe 账户，链接成功后即可继续进行 cardpay 的使用。
创建支付页面
接下来我们创建一个简单的支付页面，用于展示如何使用 cardpay。
-- -------------------- ---- -------
--------- -----
------
------
-------------------
------- -----------------------------------------
-------
------
-------------
----- ------------------
---- -----------------
------ -------------------
------
--------
---- ------------------
---- ------ -------- ---- ------ --- ----- ---
------
---- ---- -- ------- ---- ------ ---
---- ---------------- -------------------
------
---------- ------------
-------
------- ----------------------------------------------------------
--------
--- ------ - --------------------------
--- ---- - ---------------------------------
----------------- --------------- -
--- ------------ - ---------------------------------------
-- ------------- -
------------------------ - --------------------
- ---- -
------------------------ - ---
-
---
--- ---- - ----------------------------------------
------------------------------- --------------- -
-----------------------
---------------------------------------------- -
-- -------------- -
--- ------------ - ---------------------------------------
------------------------ - ---------------------
- ---- -
---------------------------------
-
---
---
-------- ------------------------- -
--- ---- - ----------------------------------------
--- ----------- - --------------------------------
-------------------------------- ----------
-------------------------------- ---------------
--------------------------------- ----------
------------------------------
--------------
-
---------
-------
-------如上代码所示，我们创建了一个简单的支付页面，该页面包含一个支付表单和一个用于连接 Stripe 的 Script 标签。
我们使用 cardpay 提供的 Stripe key 来初始化 Stripe，并创建了一个 card（卡片）组件，该卡片会自动处理用户的输入。
当用户输入信用卡信息时，cardpay 会监听 card 的变化事件，并在发生错误时向用户显示错误提示信息。
当用户点击支付按钮时，我们调用 Stripe API 创建一个 token，并将该 token 附加到表单中的 stripeToken 输入字段中，最后将该表单提交给服务器进行支付处理。
提交支付请求
当用户点击购买按钮时，我们首先需要使用 cardpay 提供的额外功能 cardpay.createPaymentIntent() 创建一个 paymentIntent，并传入实际的支付金额和随机的 client_secret。
-- -------------------- ---- -------
----- ------------- - ----- -----------------------------
------- ----- -- -----------
--------- ------
-------------- ---------------------
--------- -
--------- -------
--
---
-- --------------------------- -- ----------------随后，我们将从 paymentIntent 中获取到随机分配的 client_secret，将该值传递至前端页面，用于执行后续的支付操作。
-- -------------------- ---- -------
-------------------- ----- ----- ---- -- -
----- ------------- - ----- -----------------------------
------- -----
--------- ------
-------------- ---------------------
--------- -
--------- -------
--
---
---------------------- -
------ -------- ----------
-------------- ----------------------------
---
---执行支付操作
接下来，在前端页面中添加以下代码，根据获取到的 client_secret 值和支付表单中的 token 进行支付操作。
-- -------------------- ---- -------
---------------- -
------- -------
-------- - --------------- ------------------ --
----- ----------------
-------------- --------------
--------------- -
----- ------------
---------------- -
----- ------ -------
--
--
---
--
------------------------ -
------ ----------------
--
---------------------- -
-- -------------- -
----------------------------------
- ---- -
--------------------
-
---以上代码使用 fetch 方法发送 post 请求至 charge 路由，并将必要的支付信息传递至服务器进行支付处理。
在服务器中，我们可以创建一个 /charge 路由用于接收并处理支付请求，如下所示：
-- -------------------- ---- -------
------------------- ----- ----- ---- -- -
----- ------------- - -----------------------
----- ------------- - ------------------------
--- -
----- ------ - ----- -------------------------------------------- -
--------------- --------------
---
---------- -------- ---- ---
- ----- --- -
---------- ------ --------- ---
-
---在该路由中，我们从 req.body 中获取到 paymentIntent 和 paymentMethod，并使用 Stripe API 的 paymentIntents.confirm() 方法进行支付处理。该方法会返回一个 paymentIntent，我们可以通过该 paymentIntent 获取到支付操作的详情。
结论
cardpay 是一个非常实用的 npm 包，它提供了许多便利的功能来实现在线支付操作。在本教程中，我们讲解了如何使用 cardpay 这个 npm 包，并创建了一个简单的支付页面。我们还介绍了如何与 Stripe 连接，并使用 Stripe API 创建 paymentIntent 并执行支付操作。
希望这个教程对于希望学习在线支付操作的前端开发者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066c93ccdc64669dde5afa