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官方寄来的小礼品,再次感谢关注我的各位大佬以及官方。

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

  • 1
    点赞
  • 2
    收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:黑客帝国 设计师:我叫白小胖 返回首页
评论

打赏作者

喵十一点半

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值