什么是 alipayjs？
alipayjs是一款基于支付宝的JavaScript SDK，主要提供支付宝钱包客户端内部的支付流程，支持各种支付场景和支付方式，例如APP支付、PC支付、H5支付、WAP支付等。
通过使用alipayjs，我们可以方便地在前端页面中集成支付宝支付功能。
安装 alipayjs
安装alipayjs非常简单，你只需要在终端中使用npm包管理器进行安装即可：
npm install alipayjs --save
使用 alipayjs
初始化支付宝 API
在使用alipayjs之前，我们需要首先初始化支付宝API：
-- -------------------- ---- ------- ------ ----------- ---- ----------- ----- ------ - --- ------------- ------ ---------- ----------- --------- ---------------- ---------------- -------- -------- --------------------------------------- --- ----------------------- - ---------------------------- ---
上面的代码中，我们首先引入了alipayjs，并通过传入对象打包参数进行初始化，其中包含你的appId、应用私钥、支付宝公钥、签名类型等信息。
该初始化会返回一个AlipayJSAPI实例，并在回调函数中打印日志，用于检验初始化是否完成。
发起支付
已经完成支付宝 API 的初始化之后，我们就可以开始发起支付了。发起支付的代码如下：
-- -------------------- ---- ------- ------------ -------- --- -- -------- ----- --- -- --------- ----------- --- -- ------- --------------- ------ -- ------- ------------ --- -- ------ ---------- - -- ---------- -- -------- ---------- - -- -- -- -------- ------- - -- -- ---
- subject：订单标题，必填项；
- body：订单描述，可以为空；
- outTradeNo：订单号，必填项；
- timeoutExpress：有效期，必填项；
- totalAmount：金额，必填项；
- qrPayMode：PC支付模式，必填项。
发送支付请求时，alipayjs会在支付宝客户端内部打开一个支付页面，用户可以选择支付方式。
支付成功后，成功回调函数会被调用，失败则会返回错误信息。
集成到 React 应用中
如果你的前端应用是基于React构建的，则可以通过如下代码快速地集成alipayjs：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ ----------- ---- -----------
----- --- ------- --------- -
------------------ -
-------------
---------- - -
------- ----
--
-
------------------- -
----- ------ - --- -------------
------ ----------
----------- ---------
----------------
---------------- --------
-------- ---------------------------------------
---
----------------------- -
----------------------------
---
--------------- ------- ------ ---
-
------------ -
----- ------ - ------------------
-- -------- -
------------
-------- --- -- --------
----- --- -- ---------
----------- --- -- -------
--------------- ------ -- -------
------------ --- -- ------
---------- - -- ----------
-- -------- ---------- -
-- --
-- -------- ------- -
-- --
---
-
-
-------- -
------ -
-----
------- ------------------------------------------------
------
--
-
-上述代码中，我们在组件销毁前初始化AlipayJSAPI，并将其保存到组件状态中，方便在后续的点击事件中调用。
支付宝 API文档
如果你想要深入了解支付宝API的相关内容，可以参考支付宝提供的官方文档。
总结
通过以上的介绍，你已经学会了使用npm包alipayjs集成支付宝支付的方法，无论是在传统的静态页面中还是在React应用中，都可以轻松地完成支付功能的集成。
支付宝是一种常用的支付方式，通过学习和使用alipayjs，你可以快速地将支付宝支付功能应用到你的项目中，提升用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055cb781e8991b448da3b7