前言
近年来，移动支付领域迅速发展，不少企业的电商平台都开始尝试向此方向转移。OpenPay 作为一款移动支付服务，得到了广泛的应用。但如何在前端领域中使用 OpenPay，对于一些前端开发者来说可能还较为陌生。本文将介绍 npm 包 loopback-component-openpay 的使用教程，帮助读者更好地应用 OpenPay。
简介
loopback-component-openpay 是一个基于 loopback 框架的 OpenPay 扩展组件。在使用此组件之前，需要先安装 loopback。
安装和配置
安装 loopback-component-openpay：
npm install loopback-component-openpay --save
在 server/component-config.json 文件中添加组件配置：
{
"loopback-component-openpay": {
"merchantId": "XXXXXXXX",
"secretKey": "XXXXXXXX",
"production": true,
"locale": "es_MX"
}
}其中：
merchantId：OpenPay 商户 ID；secretKey：OpenPay 秘钥；production：当此值为true时，表示在生产环境中使用 OpenPay，否则在测试环境中使用；locale：OpenPay 支付所使用的地区。
API
Model 层
首先，需要在 model-config.json 文件中配置你的 OpenpayAccount 模型：
{
"OpenpayAccount": {
"dataSource": "db",
"public": true
}
}创建 OpenpayAccount 模型：
lb model
在交互式终端中输入以下信息：
Enter the model name: OpenpayAccount Select the data-source: db Select model's base class: PersistedModel Expose ? No Custom plural form ? No Common model or server only ? common
以上操作会自动生成相关文件。
Routes 层
在 server/boot/root.js 中添加 api 路由：
-- -------------------- ---- -------
-------------- - ---------------- -
--- -------------- - -----------------------------
--- ------ - -------------------------
-- ----
------------------------------------ ------------- ---- ----- -
------------------------------- ------------- -------- -
-- ----- -
--------------------------
- ---- -
------------------
-
---
---
-- -----
-------------------
--客户端
在前端页面中，需要加载 openpay.js，以进行支付操作。
<script type="text/javascript" src="https://js.openpay.mx/openpay.v1.min.js"></script>
支付流程
- 初始化 OpenPay：
OpenPay.setSandboxMode(false);
OpenPay.setId('XXXXXXXX');
OpenPay.setApiKey('XXXXXXXX');
OpenPay.setLanguage('es');- 创建 token：
-- -------------------- ---- -------
-- -------------------
----------------------
---------------------------------
------------------- ----- ---------
-----------------------
------------------------
------------
-- ------------------ -
----------------------
---- 创建 charge：
-- -------------------- ---- ------- --------------------------- -------------- - ------- ------ --------- ------- --------- ------ -------------- ------- ------- -- ------------ ----------- -------- ------------- - ----------------- ---- ------------- - -------- ------------------- - ---------------------- -
示例代码
客户端
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
-------------- ------------
------- ---------------------- -------------------------------------------------------
-------
------
------ ---------------- ----------- ------------------- -- ---------
------ ---------------- ----------- -------------------- -- -- ---------
------ -------------------- ----------- ---------------- -- -------------
------ --------------------- ----------- ---------------- -- -------------
------ --------- ----------- -------------------
------- --------------- ----------------------------
------- -----------------------
------------------------------
----
- ------------------------------------------------------------------------------ --------
------------------------------------------------------------------------------------------------------------------------