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新特性应用之过渡与动画
Jan 10 HTML / CSS
25个CSS3动画按钮和菜单教程分享
Oct 03 HTML / CSS
CSS3制作文字半透明倒影效果的两种实现方式
Aug 08 HTML / CSS
网页切图的CSS和布局经验与要点
Apr 09 HTML / CSS
CSS3属性 line-clamp控制文本行数的使用
Mar 19 HTML / CSS
html5指南-4.使用Geolocation实现定位功能
Jan 07 HTML / CSS
HTML5 History API 实现无刷新跳转
Jan 11 HTML / CSS
详解HTML5中的拖放事件(Drag 和 drop)
Nov 14 HTML / CSS
canvas里面如何基于随机点绘制一个多边形的方法
Jun 13 HTML / CSS
HTML5 客户端数据库简易使用:IndexedDB
Dec 19 HTML / CSS
css height属性中的calc方法详解
Jun 03 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
<script defer> defer 是什么意思
2009/05/10 Javascript
多种方式实现JS调用后台方法进行数据交互
2013/08/20 Javascript
使用jquery hover事件实现表格的隔行换色功能示例
2013/09/03 Javascript
js数字转换为float,取N位小数
2014/02/08 Javascript
DIV始终居中的js代码
2014/02/17 Javascript
jQuery中ajax的post()方法用法实例
2014/12/26 Javascript
原生js实现类似弹窗抖动效果
2015/04/02 Javascript
js兼容pc端浏览器并有多种弹出小提示的手机端浮层控件实例
2015/04/29 Javascript
node.js实现端口转发
2016/04/14 Javascript
jQuery实现的手风琴侧边菜单效果
2017/03/29 jQuery
NodeJs项目中关闭ESLint的方法
2018/08/09 NodeJs
浅谈webpack SplitChunksPlugin实用指南
2018/09/17 Javascript
js实现视图和数据双向绑定的方法分析
2020/02/05 Javascript
javascript实现移动端轮播图
2020/12/09 Javascript
vue3.0中友好使用antdv示例详解
2021/01/05 Vue.js
vite2.0+vue3移动端项目实战详解
2021/03/03 Vue.js
[05:16]《大圣!大圣》——DOTA2新英雄齐天大圣配音李世宏老师专访
2016/12/13 DOTA
[50:28]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 Newbee vs KG
2018/04/01 DOTA
Python判断直线和矩形是否相交的方法
2015/07/14 Python
两个使用Python脚本操作文件的小示例分享
2015/08/27 Python
详解Django rest_framework实现RESTful API
2018/05/24 Python
Python制作动态字符图的实例
2019/01/27 Python
selenium+Chrome滑动验证码破解二(某某网站)
2019/12/17 Python
使用python的pyplot绘制函数实例
2020/02/13 Python
Python基于内置库pytesseract实现图片验证码识别功能
2020/02/24 Python
python实现文件分片上传的接口自动化
2020/11/19 Python
护理学中专毕业生求职信
2013/11/11 职场文书
乡镇消防工作实施方案
2014/03/27 职场文书
人力资源管理专业毕业生自荐书
2014/05/25 职场文书
小学生校园广播稿
2014/09/28 职场文书
社会实践活动报告
2015/02/05 职场文书
2015年党员发展工作总结
2015/05/13 职场文书
2016年党员学习廉政准则心得体会
2016/01/20 职场文书
导游词之秦始皇兵马俑博物馆
2019/09/29 职场文书
安装Ruby和 Rails的详细步骤
2022/04/19 Ruby