什么是 tappay？
tappay 是 TapPay 为移动应用和网站提供的一种支付解决方案。它可以帮助开发者轻松接入多种支付方式，如信用卡支付、银联支付、支付宝等。而 tappay npm 包则是基于官方 API 封装的一种 JavaScript 库，可以方便地在前端应用中使用 tappay 功能。
安装 tappay 包
在开始使用 tappay 包之前，需要先安装它。在终端中运行以下命令即可：
npm install tappay --save
使用 tappay 支付
通过 tappay 支付，可以让用户在前端应用中进行支付操作。下面是一个完整的 tappay 支付示例：
-- -------------------- ---- -------
------ - -------- - ---- ---------
-- -- ------
----- ------ - -------------------
-- -- --- -- - --- ----------
------- -----------------
-------- --------------
-- ----
------------ ----------
---
-- ---------
----- ---- - -
------- -------------------
----------------- -----
---------------- -------
---- ------
--
-- ------
------------------------ -------- --------- -- -
-- ------- --- -- -
-- ---------
----------------------------
-------
-
-- -----------
----------------------
---在上面的代码中，我们首先使用 TPDirect.setupSDK() 方法配置了 tappay 环境，并且得到了一个 tappay 对象，用于后续的支付操作。接着，我们创建了一个包含信用卡信息的对象 card，指定了信用卡号、到期月份、到期年份和 CVV 码。最后，我们调用了 tappay.payWithForm() 方法，发起了支付操作，并传入了回调函数以处理支付结果。
深入理解 tappay 包
除了上述示例外，tappay 包还提供了许多其它功能。下面我们来深入学习一下。
初始化 tappay
在使用 tappay 功能之前，需要先初始化 tappay 对象。可以使用 TPDirect.setupSDK() 方法完成初始化。该方法接受一个包含配置参数的对象作为参数，其中包含以下属性：
app_id：在 TapPay 网站上注册应用后得到的 App ID；app_key：在 TapPay 网站上注册应用后得到的 App Key；environment：指定要使用的 tappay 环境，可选值为'sandbox'（测试环境）和'production'（生产环境）。
下面是一个初始化 tappay 的示例：
import { TPDirect } from 'tappay';
TPDirect.setupSDK({
app_id: 'app_1234567890',
app_key: 'app_abcdefg',
environment: 'sandbox',
});添加信用卡表单
为了让用户输入信用卡信息，可以使用 TPDirect.card.setup() 方法在页面上添加一个信用卡表单。该方法接受一个包含配置参数的对象作为参数，其中包含以下属性：
fields：指定要显示的表单字段，可选值为'number'（信用卡号）、'expiration-date'（到期日期）和'ccv'（CVV 码），默认值为['number', 'expiration-date', 'ccv']；styles：指定表单的样式，可以使用 CSS 样式表或者一个包含 CSS 属性的对象；container：指定表单的容器，可以是一个 HTML 元素或者元素的 ID。
下面是一个添加信用卡表单的示例：
-- -------------------- ---- -------
------ - -------- - ---- ---------
-- -------
---------------------
------- -
------- -
-- --------
-------- --------------- -- --- ---- -------- --
------------ ----- ---- ---- ------
--
--------------- -
-- --------
-------- ------------------------ -- --- ---- -------- --
------------ --- - ----
--
---- -
-- -- --- ---
-------- ------------ -- --- ---- -------- --
------------ ------
--
--
------- -
-- ------
------ -
------ -------
--
--------- -
------ --------
--
--
---------- ------------- -- --- ---- -------- --
---上述代码中，我们使用 TPDirect.card.setup() 方法添加了一个包含三个字段（信用卡号、到期日期和 CVV 码）的信用卡表单，并指定了表单字段的样式和容器。表单字段可以在 HTML 中使用 <input> 元素实现，需要分别指定对应的 ID，然后再在 fields 对象中指定对应的参数。
校验信用卡信息
在用户输入信用卡信息后，需要验证该信息的有效性。可以使用 TPDirect.card.getTappayFieldsStatus() 方法校验表单字段，并得到一个包含校验结果的对象。例如：
-- -------------------- ---- ------- ------ - -------- - ---- --------- -- ------ ----- ------------ - -------------------------------------- -- ------------- -- ----------------------------------- - -- --------- ------------------------------- ------- - -- ---------------------- -- --------------------------- - ------------------------------ ------- - -- ---------------------------- - ---------------------------- ------- - -- --------------------------- - ----------------------------- ------- - -- ----------------------------- - ------------------------------ ------- -
上述代码中，我们使用 TPDirect.card.getTappayFieldsStatus() 方法对表单字段进行校验，并得到了一个包含校验结果的对象。使用 fieldsStatus.isTappayFieldsValid 可以判断表单字段是否都校验通过，而 fieldsStatus.canGetPrime、fieldsStatus.canGetHolder、fieldsStatus.canGetPhone 和 fieldsStatus.canGetZipCode 则可以进一步判断各个字段是否校验通过。
获取支付 token
在进行支付操作前，需要先通过 tappay 后端 API 获取一个支付 token。可以使用 TPDirect.card.getPrime() 方法获取支付 token。该方法接受一个回调函数作为参数，用于处理返回结果。例如：
-- -------------------- ---- -------
------ - -------- - ---- ---------
-- ---- -----
------------------------------- -- -
-- -------------- --- -- -
-- ---------
--------------------------
-------
-
-- -----------
----- ----- - ------------------
-------------------
---上述代码中，我们使用 TPDirect.card.getPrime() 方法获取支付 token，并传入一个回调函数，用于处理返回结果。如果获取失败，则会在回调函数中输出相应的错误信息，否则会在回调函数中得到支付 token（即 prime 属性）。
进行支付操作
在获取到支付 token 后，可以使用 TPDirect.card.pay() 方法发起支付操作。该方法接受一个包含支付参数的对象作为参数，其中包含以下属性：
prime：支付 token，必需；amount：支付金额，单位为新台币（NTD），必需；merchant_id：商家 ID，必需；currency：货币类型，可选值为'TWD'（新台币）、'USD'（美元）和'JPY'（日元），默认值为'TWD'；details：订单详情，必需；order_number：订单号，必需；cardholder：持卡人姓名，必需；cardholder_phone_number：持卡人手机号，必需；cardholder_email：持卡人邮箱，必需；cardholder_address：持卡人地址，必需；cardholder_zip_code：持卡人邮政编码，必需；
下面是一个发起支付操作的示例：
-- -------------------- ---- -------
------ - -------- - ---- ---------
-- ------
-------------------
------ --------------------
------- -----
------------ --------------------
-------- ---------
------------- -------------
----------- ------
------------------------ -------------
----------------- -------------------
------------------- ---------
-------------------- ------
-- -------- --------- -- -
-- ------- --- -- -
-- ---------
----------------------------
-------
-
-- -----------
----------------------
---上述代码中，我们使用 TPDirect.card.pay() 方法发起支付操作，并传入一个回调函数以处理支付结果。
总结
tappay 是一种方便易用的支付解决方案，而 tappay npm 包则是基于官方 API 封装的一种 JavaScript 库，可以方便地在前端应用中使用 tappay 功能。通过本文的介绍，我们学习了 tappay 包的安装和使用方法，包括初始化 tappay 对象、添加信用卡表单、校验信用卡信息、获取支付 token 和进行支付操作等。希望通过本文的学习，读者能够更加深入地理解和掌握 tappay 的使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005663881e8991b448e2316