h5移动端调用支付宝、微信支付的实现


Posted in HTML / CSS onJune 08, 2020

公司项目之前已有支付宝支付,现要求增加微信支付,第一次做,摸着石头过河!结果是满意的。
废话就不说了直接上代码:

var aliChannel = null; 
    var wxChannel = null;

    // 定义支付方式切换 
    var state_type = 1;
    // 选择支付方式  默认为支付宝样式
    $(".zfb").find("i").css("background-Image","url(../img/pl_8.png)");
    $(".pay").on("singleTap",".pay_c",function(){
        $(this).find("i").css("background-Image","url(../img/pl_8.png)");
        $(this).siblings().find("i").css("background-Image","url(../img/pl_9.png)");

        if($(this).find("span").text().trim() == "支付宝"){
            state_type = 1;

        }else if($(this).find("span").text().trim() == "微信"){
            state_type = 2;
        }
    })
    // 点击支付
    $('.pay_btn').unbind();
    $('.pay_btn').singleTap(function () {
        if(state_type == 1){
            // 支付宝通道
            mui.plusReady(function () { // 获取支付通道  
                plus.payment.getChannels(function (channels) {
                    for (var i in channels) {
                        if (channels[i].id == "wxpay") {
                            wxChannel = channels[i];
                        } else {
                            aliChannel = channels[i];
                        }
                    }
                }, function (e) {
                    alert("获取支付通道失败:" + e.message);
                });
            })

            mui.post('此处填写支付接口', {
               '此处填写所需参数'
            },
            function (data) {
                console.log(JSON.stringify(data));
                if (data) {
                    data = data.data.payStr;
                    plus.payment.request(aliChannel, data, function (result) {
                        
                            // 支付成功处理
                       
                    }, function (e) {
                        floatRemind("付费失败,用户已取消");
                    });
                } else {
                    plus.nativeUI.alert("支付失败");
                }
            });
        }else if(state_type == 2){
            // 微信通道
            mui.plusReady(function () { // 获取支付通道  
                plus.payment.getChannels(function (channels) {
                    for (var i in channels) {
                        if (channels[i].id == "wxpay") {
                            wxChannel = channels[i];
                        } else {
                            aliChannel = channels[i]; 
                        }
                    }
                }, function (e) {
                    alert("获取支付通道失败:" + e.message);
                });
            })

            mui.post('此处填写支付接口', {
                '此处填写所需参数'
            },
                function (data) {
                    data = JSON.stringify(data.data);
                    if (data) {
                        plus.payment.request(wxChannel, data, function (result) {
                            
                                // 支付成功处理
                           
                        }, function (msg) {
                            // JSON.stringify(msg.message)
                            floatRemind('支付失败');
                        });
                    } else {
                        plus.nativeUI.alert("支付失败");
                    }
                });
        }

        
        
    })

自己已经用过了,没有问题,支付宝可以真机调试,微信必须打包下载测试。

测试过程中有过报错-100,百度各种解决方法,后来发现不是前端问题,有人说打包必须选自有证书,自己试过了不需要,公用证书就可以的。

h5移动端调用支付宝、微信支付的实现

代码就是这些,可以直接拿去用,测试如果OK,请给点鼓励,谢谢!第一次写博客,写的不好请见谅!

到此这篇关于h5移动端调用支付宝、微信支付的实现的文章就介绍到这了,更多相关h5移动端支付宝微信支付内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

HTML / CSS 相关文章推荐
纯CSS3发光分享按钮的实现教程
Sep 06 HTML / CSS
利用纯CSS3实现tab选项卡切换示例代码
Sep 21 HTML / CSS
html5 Canvas绘制线条 closePath()实例代码
May 10 HTML / CSS
Html5实现如何在两个div元素之间拖放图像
Mar 29 HTML / CSS
HTML5本地数据库基础操作详解
Apr 26 HTML / CSS
详解H5 活动页之移动端 REM 布局适配方法
Dec 07 HTML / CSS
深入浅析HTML5中的article和section的区别
May 15 HTML / CSS
canvas简易绘图的实现(海绵宝宝篇)
Jul 04 HTML / CSS
HTML5 播放 RTSP 视频的实例代码
Jul 29 HTML / CSS
HTML5 FileReader对象的具体使用方法
May 22 HTML / CSS
HTML+CSS 实现顶部导航栏菜单制作
Jun 03 HTML / CSS
CSS子盒子水平和垂直居中的五种方法
Jul 23 HTML / CSS
使用SVG实现提示框功能的示例代码
Jun 05 #HTML / CSS
Html5嵌入钉钉的实现示例
Jun 04 #HTML / CSS
浅析数据存储的三种方式 cookie sessionstorage localstorage 的异同
Jun 04 #HTML / CSS
h5页面唤起app如果没安装就跳转下载(iOS和Android)
Jun 03 #HTML / CSS
html5视频自动横过来自适应页面且点击播放功能的实现
Jun 03 #HTML / CSS
使用Html5 Stream开发实时监控系统
Jun 02 #HTML / CSS
Html5 canvas画图白板踩坑
Jun 01 #HTML / CSS
You might like
最省空间的计数器
2006/10/09 PHP
php 调用远程url的六种方法小结
2009/11/02 PHP
PHP 一个随机字符串生成代码
2010/05/26 PHP
ThinkPHP使用PHPExcel实现Excel数据导入导出完整实例
2014/07/22 PHP
laravel withCount 统计关联数量的方法
2019/10/10 PHP
如何在一个页面显示多个百度地图
2013/04/07 Javascript
javascript中字符串的定义示例代码
2013/12/19 Javascript
jquery实现可自动收缩的TAB网页选项卡代码
2015/09/06 Javascript
axios 处理 302 状态码的解决方法
2018/04/10 Javascript
webpack打包优化的几个方法总结
2020/02/10 Javascript
[52:20]VP vs VG Supermajor小组赛 B组胜者组决赛 BO3 第一场 6.2
2018/06/03 DOTA
Python+Django在windows下的开发环境配置图解
2009/11/11 Python
python人人网登录应用实例
2014/09/26 Python
详细解读Python的web.py框架下的application.py模块
2015/05/02 Python
Python while 循环使用的简单实例
2016/06/08 Python
python抓取并保存html页面时乱码问题的解决方法
2016/07/01 Python
Python正则替换字符串函数re.sub用法示例
2017/01/19 Python
利用Django内置的认证视图实现用户密码重置功能详解
2017/11/24 Python
Python 网络爬虫--关于简单的模拟登录实例讲解
2018/06/01 Python
Django实现CAS+OAuth2的方法示例
2019/10/30 Python
python 实现多线程下载视频的代码
2019/11/15 Python
Python应用实现双指数函数及拟合代码实例
2020/06/19 Python
python函数超时自动退出的实操方法
2020/12/28 Python
CSS3 3D制作实战案例分析
2016/09/18 HTML / CSS
HTML5文档结构标签
2017/04/21 HTML / CSS
Html5自定义字体解决方法
2019/10/09 HTML / CSS
The North Face意大利官网:服装、背包和鞋子
2020/06/17 全球购物
体育专业个人求职信范文
2013/12/27 职场文书
2015年度内部审计工作总结
2015/05/20 职场文书
2015暑假打工实践报告
2015/07/13 职场文书
新闻通讯稿范文
2015/07/22 职场文书
大学生村官工作心得体会
2016/01/23 职场文书
PHP遍历数组的6种方式总结
2021/11/17 PHP
【海涛教你打dota】体验一超神发条:咱是抢盾专业户
2022/04/01 DOTA
详解Flutter网络请求Dio库的使用及封装
2022/04/14 Java/Android
TS 类型兼容教程示例详解
2022/09/23 Javascript