前言
在前端开发中，我们经常需要和第三方支付服务进行交互。而在这些交互中，与支付服务进行通信是一个必须要面对的任务。Adyen 就是一家提供全球支付解决方案的公司，其提供的 API 能够方便地实现支付、退款等功能。Adyen API 还提供了一些用于在前端实现支付的方法，其中 adyen-api-js 就是其中一个非常方便易用的 npm 包。本文将介绍如何使用 npm 包 adyen-api-js 实现前端支付。
安装
可以通过 npm 包管理工具来安装 adyen-api-js ：
npm install adyen-api-js --save
在项目中通过以下代码引入 npm 包：
import adyen from "adyen-api-js";
使用
当安装并引入 adyen-api-js 后，可以通过以下步骤来实现前端支付：
1. 初始化
在使用之前，需要调用 init 方法来初始化 adyen-api-js ：
adyen.checkout(
{
merchantAccount: "TestMerchantCheckoutAccount",
amount: { value: 1000, currency: "EUR" },
reference: "YOUR_REFERENCE",
},
"#checkout"
);这里，需要传递一个包含 merchantAccount、amount 和 reference 等信息的对象，其中 merchantAccount 是 Adyen 分配给商户的账户 ID，amount 是支付金额，以及 reference 是在 Adyen 系统中的唯一标识。
2. 样式
<div id="checkout"></div>
这里声明了一个 id 为 checkout 的 div 元素作为存放支付表单的容器。
3. 绑定事件
-- -------------------- ---- -------
--------
-----------------------------
-------------------------- -------- ------- -
-----------------------
------------------------------------- -------- -
-- --------------- -
-- --------- ------------- ----- - --- ------
----------------------------------
- ---- -
-- ----
--------------------
-
---
---这里创建了一个点击事件监听器来进行支付，点击事件触发后会创建一笔新的支付，并通过 adyen.handleAction(result.action); 调用 Adyen 的 API 来提交支付信息。
示例代码
-- -------------------- ---- -------
--------- -----
------
------
----- --------------- --
------------ --- ------------
----- --------------- ---------------------------- ---------------- --
------- ------------------------------------------------------------------------------------------
-------
------
--------- --- ---------
------- ---------------------- ---- --------------
---- --------------------
------- --------------------------
-------
--------- -------------------- ---- -------
------ ----- ---- ---------------
---------------
-
---------------- ------------------------------
------- - ------ ----- --------- ----- --
---------- -----------------
--
-----------
--
--------
-----------------------------
-------------------------- -------- ------- -
-----------------------
------------------------------------- -------- -
-- --------------- -
----------------------------------
- ---- -
--------------------
-
---
---总结
本文介绍了如何使用 npm 包 adyen-api-js 实现前端支付，并且提供了示例代码，希望能够帮助大家更快更好地掌握这一技术。通过使用 adyen-api-js ，我们可以方便地实现前端支付功能，提高用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056cad81e8991b448e61c1