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背景下的@font face规则
May 04 HTML / CSS
简单总结CSS3中视窗单位Viewport的常见用法
Feb 04 HTML / CSS
详解CSS透明opacity和IE各版本透明度滤镜filter的最准确用法
Dec 20 HTML / CSS
css3实现简单的白云飘动背景特效
Oct 28 HTML / CSS
CSS3 文字动画效果
Nov 12 HTML / CSS
Html5上传图片 移动端、PC端通用代码
Jun 08 HTML / CSS
HTML5中的Article和Section元素认识及使用
Mar 22 HTML / CSS
利用纯html5绘制出来的一款非常漂亮的时钟
Jan 04 HTML / CSS
html5 冒号分隔符对齐的实现
Jul 31 HTML / CSS
使用placeholder属性设置input文本框的提示信息
Feb 19 HTML / CSS
浅析HTML5 meta viewport参数
Oct 28 HTML / CSS
CSS 实现角标效果的完整代码
Jun 28 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
新52大事件
2020/03/03 欧美动漫
CI框架中通过hook的方式实现简单的权限控制
2015/01/07 PHP
Yii CFileCache 获取不到值的原因分析
2017/02/08 PHP
[原创]PHP实现SQL语句格式化功能的方法
2017/07/28 PHP
用js读、写、删除Cookie代码续篇
2014/12/03 Javascript
Node.js和MongoDB实现简单日志分析系统
2015/04/25 Javascript
深入理解jQuery之事件移除
2016/06/02 Javascript
用jQuery向div中添加Html文本内容的简单实现
2016/07/13 Javascript
jQuery+CSS实现简单切换菜单示例
2016/07/27 Javascript
jQuery实现点击某个div打开层,点击其他div关闭层实例分析(阻止冒泡)
2016/11/18 Javascript
BootStrapTable 单选及取值的实现方法
2017/01/10 Javascript
vue.js框架实现表单排序和分页效果
2017/08/09 Javascript
解决IE7中使用jQuery动态操作name问题
2017/08/28 jQuery
react 父组件与子组件之间的值传递的方法
2017/09/14 Javascript
js通过Date对象实现倒计时动画效果
2017/10/27 Javascript
Angular4学习之Angular CLI的安装与使用教程
2018/01/04 Javascript
Vue.js 中的 v-model 指令及绑定表单元素的方法
2018/12/03 Javascript
JS实现简易留言板特效
2019/12/23 Javascript
js中switch语句的学习笔记
2020/03/25 Javascript
用Python制作在地图上模拟瘟疫扩散的Gif图
2015/03/31 Python
Python实现Sqlite将字段当做索引进行查询的方法
2016/07/21 Python
解决Python 使用h5py加载文件,看不到keys()的问题
2019/02/08 Python
python hash每次调用结果不同的原因
2019/11/21 Python
Python object类中的特殊方法代码讲解
2020/03/06 Python
基于python实现操作git过程代码解析
2020/07/27 Python
详解pycharm的python包opencv(cv2)无代码提示问题的解决
2021/01/29 Python
Pytorch如何切换 cpu和gpu的使用详解
2021/03/01 Python
详解FireFox下Canvas使用图像合成绘制SVG的Bug
2019/07/10 HTML / CSS
大学毕业生通用自荐信范文
2013/10/31 职场文书
英语演讲稿范文
2014/01/03 职场文书
运动会800米加油稿
2014/02/22 职场文书
新书发布会策划方案
2014/06/09 职场文书
病人写给医生的感谢信
2015/01/23 职场文书
总经理司机岗位职责
2015/04/10 职场文书
bose降噪耳机音能消除人声吗
2022/04/19 数码科技
python 单机五子棋对战游戏
2022/04/28 Python