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学习之2D转换功能详解
Dec 23 HTML / CSS
CSS3 Backgrounds属性相关介绍
May 11 HTML / CSS
CSS3 透明色 RGBA使用介绍
Aug 06 HTML / CSS
CSS3实现时间轴特效
Nov 02 HTML / CSS
浅谈three.js中的needsUpdate的应用
Nov 12 HTML / CSS
使用HTML5 Canvas API绘制弧线的教程
Mar 22 HTML / CSS
HTML5视频播放插件 video.js介绍
Sep 29 HTML / CSS
用canvas做一个DVD待机动画的实现代码
Apr 12 HTML / CSS
AmazeUI的下载配置与Helloworld的实现
Aug 19 HTML / CSS
boostrap modal 闪现问题的解决方法
Sep 01 HTML / CSS
Html5移动端div固定到底部实现底部导航条的几种方式
Mar 09 HTML / CSS
解决flex布局中子项目尺寸不受flex-shrink限制
May 11 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
PHP 和 MySQL 基础教程(二)
2006/10/09 PHP
php和js如何通过json互相传递数据相关问题探讨
2013/02/26 PHP
Linux Apache PHP Oracle 安装配置(具体操作步骤)
2013/06/17 PHP
destoon实现会员商铺中指定会员或会员组投放广告的方法
2014/08/21 PHP
WordPress中用于获取搜索表单的PHP函数使用解析
2016/01/05 PHP
win平台安装配置Nginx+php+mysql 环境
2016/01/12 PHP
php-fpm添加service服务的例子
2018/04/27 PHP
laravel-admin 实现给grid的列添加行数序号的方法
2019/10/08 PHP
js/jQuery简单实现选项卡功能
2014/01/02 Javascript
Node.js实现批量去除BOM文件头
2014/12/20 Javascript
javascript中mouseover、mouseout使用详解
2015/07/19 Javascript
基于jQuery实现仿搜狐辩论投票动画代码(附源码下载)
2016/02/18 Javascript
jQuery实现图片向左向右切换效果的简单实例
2016/05/18 Javascript
JavaScript判断数组是否存在key的简单实例
2016/08/03 Javascript
解析如何利用iframe标签以及js制作时钟
2016/12/08 Javascript
js获取json中key所对应的value值的简单方法
2020/06/17 Javascript
javascript简单链式调用案例分析
2017/05/10 Javascript
bootstrap table实现x-editable的行单元格编辑及解决数据Empty和支持多样式问题
2017/08/10 Javascript
jQuery中过滤器的基本用法示例
2017/10/11 jQuery
vue2.0在没有dev-server.js下的本地数据配置方法
2018/02/23 Javascript
分析javascript原型及原型链
2018/03/18 Javascript
云服务器部署Node.js项目的方法步骤(小白系列)
2020/03/23 Javascript
vue移动端写的拖拽功能示例代码
2020/09/09 Javascript
Python中的对象,方法,类,实例,函数用法分析
2015/01/15 Python
Python pickle模块用法实例
2015/04/14 Python
python常见数制转换实例分析
2015/05/09 Python
浅谈python socket函数中,send与sendall的区别与使用方法
2017/05/09 Python
解析Python中的eval()、exec()及其相关函数
2017/12/20 Python
10 行 Python 代码教你自动发送短信(不想回复工作邮件妙招)
2018/10/11 Python
使用python3调用wxpy模块监控linux日志并定时发送消息给群组或好友
2019/06/05 Python
keras的三种模型实现与区别说明
2020/07/03 Python
html5 css3 动态气泡按钮实例演示
2012/12/02 HTML / CSS
初中物理教学反思
2014/01/14 职场文书
美丽家庭事迹材料
2014/05/03 职场文书
教师辞职书范文
2015/02/26 职场文书
教师岗位职责范本
2015/04/02 职场文书