react app 拉起微信、支付宝支付思路: 由于app 中是不存在微信及支付宝的支付环境，所以引入jssdk是拉不

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第1天，点击查看活动详情。

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

思路:

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

request

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

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

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

getChannels

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

successCB: 成功回调
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)=>{
                        // 失败回调
                    })
                }
            })
        })
    }