react app 拉起微信、支付宝支付

机缘: 这其实是我第一次在react 的 app 项目中拉微信及支付宝支付，所以特地来记录一下本次的思路及过程中踩到的坑

思路: 

由于app 中是不存在微信及支付宝的支付环境，所以引入jssdk是拉不起来支付的, 于是放弃了这个想法，但我想到app中是存在 h5+ 的，于是我打开了h5+api的文档，在里面找到了一个模块 payment 根据官方介绍是用来管理支付功能的, 我顺着这个模块的往下找了找又发现了两个方法 getChannels 和 request 第一个使用开获取支付通道的，第二个则是用来拉起支付的，有了这两个方法就可以实现支付了

---

request

        ​

这里我们看到两个必填和两个可选参数, 分别是

1. channel: 支付通道
2. statement: 支付订单信息，这里可以理解为拉起各种支付所需要的配置
3. successCB: 成功回调
4. errorCB: 失败回调

这里第二个参数可以通过后台获取，第三第四可以自己写，但这个支付通道需要使用getChannels方法来获取

getChannels

 

这里我们看到两个可选参数, 分别是

1. successCB: 成功回调
2. errorCB: 失败回调

 成功的返回值大致如下

这个时候我们有了支付通道就可以拉起支付了

以下是我的支付demo 这里就展示微信demo了支付宝和微信基本一致，如果有需要支付宝方法的可以私信我

    // 微信APP支付
    wxPlayAPP = (payData)=> {
        // 获取支付通道
        window.plus.payment.getChannels((res)=>{
            // 用于支付通道下标
            let i = null;
            // 循环遍历所有支付通道
            res.forEach((item, index)=>{
                // 找出微信支付通道
                item.id == "wxpay" ? i = index : "";
            })
            // 发起接口从后台获取拉支付所需参数
            api.appWechatPay(payData, {
                success: RES=>{
                    // 如果未安装微信支付通道
                    if(!res[i].serviceReady) {
                        // 则安装微信通道
                        return res[i].installService();
                    }
                    // 拉起微信支付
                    window.plus.payment.request(res[i], RES.result, ()=>{
                        // 成功回调
                    }, (err)=>{
                        // 失败回调
                    })
                }
            })
        })
    }

demo中之所以需要遍历所有通道找出微信通道是因为防止通道顺序调换所以不能写死。

到这里为止就可以拉起微信支付了

注意事项:

      如果以上方法使用还是不能拉起支付，或者支付报错则核对一下这些地方     

1. 核对支付提供方审核是否通过
2. 核对后台给的配置项数据是否有问题
3. 支付宝支付空格,因为这个配置数据通常是一个字符串前后有可能会存在空格，可以使用strinde的trim方法去除当然大佬们也可以手动去除

---

技术链接:
h5+官网https://www.html5plus.org/doc/h5p.html     getChannelshttps://www.html5plus.org/doc/zh_cn/payment.html#plus.payment.getChannels

requesthttps://www.html5plus.org/doc/zh_cn/payment.html#plus.payment.request啊最后一个对不齐,崩溃中........大家凑活着看

---

收获

1. 对于h5+api能做的事情有了进一步的了解
2. 对于支付环境有了更深的认识

---

最近有公司项目有点忙，有段时间没更博客了，前两天收到CSDN官方寄来的小礼品，再次感谢关注我的各位大佬以及官方。

结语: 天才无非是长久的忍耐，努力吧!