前言
近年来,移动支付领域迅速发展,不少企业的电商平台都开始尝试向此方向转移。OpenPay 作为一款移动支付服务,得到了广泛的应用。但如何在前端领域中使用 OpenPay,对于一些前端开发者来说可能还较为陌生。本文将介绍 npm 包 loopback-component-openpay
的使用教程,帮助读者更好地应用 OpenPay。
简介
loopback-component-openpay
是一个基于 loopback
框架的 OpenPay 扩展组件。在使用此组件之前,需要先安装 loopback
。
安装和配置
安装 loopback-component-openpay
:
--- ------- -------------------------- ------
在 server/component-config.json
文件中添加组件配置:
- ----------------------------- - ------------- ----------- ------------ ----------- ------------- ----- --------- ------- - -
其中:
merchantId
:OpenPay 商户 ID;secretKey
:OpenPay 秘钥;production
:当此值为true
时,表示在生产环境中使用 OpenPay,否则在测试环境中使用;locale
:OpenPay 支付所使用的地区。
API
Model 层
首先,需要在 model-config.json
文件中配置你的 OpenpayAccount
模型:
- ----------------- - ------------- ----- --------- ---- - -
创建 OpenpayAccount
模型:
-- -----
在交互式终端中输入以下信息:
----- --- ----- ----- -------------- ------ --- ------------ -- ------ ------- ---- ------ -------------- ------ - -- ------ ------ ---- - -- ------ ----- -- ------ ---- - ------
以上操作会自动生成相关文件。
Routes 层
在 server/boot/root.js
中添加 api 路由:
-------------- - ---------------- - --- -------------- - ----------------------------- --- ------ - ------------------------- -- ---- ------------------------------------ ------------- ---- ----- - ------------------------------- ------------- -------- - -- ----- - -------------------------- - ---- - ------------------ - --- --- -- ----- ------------------- --
客户端
在前端页面中,需要加载 openpay.js
,以进行支付操作。
------- ---------------------- -------------------------------------------------------
支付流程
- 初始化 OpenPay:
------------------------------ -------------------------- ------------------------------ --------------------------
- 创建 token:
-- ------------------- ---------------------- --------------------------------- ------------------- ----- --------- ----------------------- ------------------------ ------------ -- ------------------ - ---------------------- ---
- 创建 charge:
--------------------------- -------------- - ------- ------ --------- ------- --------- ------ -------------- ------- ------- -- ------------ ----------- -------- ------------- - ----------------- ---- ------------- - -------- ------------------- - ---------------------- -
示例代码
客户端
--------- ----- ------ ------ ----- ---------------- -------------- ------------ ------- ---------------------- ------------------------------------------------------- ------- ------ ------ ---------------- ----------- ------------------- -- --------- ------ ---------------- ----------- -------------------- -- -- --------- ------ -------------------- ----------- ---------------- -- ------------- ------ --------------------- ----------- ---------------- -- ------------- ------ --------- ----------- ------------------- ------- --------------- ---------------------------- ------- ----------------------- ------------------------------ ---- ------------------------------------------------------------------------------ ---------- -----------------------------------------------------------------------------------------------------------------------------