前言：
Paystack 是一个仅面向非洲的支付网关，ReactJS 是一个当前十分火热的前端框架，通过 reactjs-paystack 这个 npm 包可以轻松地实现 Paystack 的支付流程，本文将教大家如何使用 reactjs-paystack 包。
准备工作
我们的前提是已经安装好了 Paystack 的 API Key 和商品的价格以及商品 ID 等信息，这些信息需要提前准备好。
安装与引用
首先，在我们的项目目录下运行以下命令安装 reactjs-paystack 模块：
npm install reactjs-paystack
安装好后，我们只需要在我们的目标页面中引用组件即可：
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ -------------- ---- -------------------
-------- --- -- -
----- ------ - -
---------- ---- ------------------
------ -------------------
------- ------
---------- --------------------------
--
----- -------- - ---------- -- -
---------------------- -- ------
--
----- ----- - -- -- -
-------------------- ---------- -- ------
--
------ -
---------------
--------- ----
---------------------
-------------------
-------------
----------------
-------------
----------------------------
--------------------
----------------------
----------------------------
------------
--
--
-
-------------------- --- --------------------------------配置参数
reactjs-paystack 组件使用是需要传递一些参数过去的，下面我们讲解一些比较关键的参数的意义和使用方法。
text(String)
设置支付按钮文字。
className(String)
添加 CSS 类名来更改 default 按钮样式。
callback(Function)
支付成功时的响应回调函数。
close(Function)
支付关闭时的回调函数。
disabled(Boolean)
设置为 true 将禁用该按钮的点击事件。
embed(Boolean)
如果您使用的是模态的 payment 方式，则应将该参数设置为 true。
reference(String)
唯一的交易参考 ID。
email(String)
电子邮件地址，将用于向用户发送收据。
amount(Number)
交易金额以“kobo”为单位。
publicKey(String)
Paystack 公钥 ID。
tag(String)
指定 < PaystackButton > 实例的 button tag，通常为 button 或 a。
示例代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ -------------- ---- -------------------
-------- --- -- -
----- ------ - -
---------- ---- ------------------
------ -------------------
------- ------
---------- --------------------------
--
----- -------- - ---------- -- -
----------------------
--
----- ----- - -- -- -
-------------------- ----------
--
------ -
---------------
--------- ----
---------------------
-------------------
-------------
----------------
-------------
----------------------------
--------------------
----------------------
----------------------------
------------
--
--
-
-------------------- --- --------------------------------总结
通过本文的详细讲解，相信大家已经能够使用 reactjs-paystack 这个 npm 包实现非常简洁的支付收费功能。Paystack 是非洲地区比较流行的支付网关，它的 api 非常好用，而且 reactjs-paystack 是支付流程的很好的封装。这对于前端开发者来说是非常棒的一个组合。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056cf581e8991b448e6b4d