您现在的位置是:网站首页> 编程资料编程资料
h5移动端调用支付宝、微信支付的实现基于HTML5+tracking.js实现刷脸支付功能详解Html5微信支付爬坑之路html5仿支付宝密码框的实现代码
2021-08-30
1050人已围观
简介 这篇文章主要介绍了h5移动端调用支付宝、微信支付的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
公司项目之前已有支付宝支付,现要求增加微信支付,第一次做,摸着石头过河!结果是满意的。
废话就不说了直接上代码:
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,百度各种解决方法,后来发现不是前端问题,有人说打包必须选自有证书,自己试过了不需要,公用证书就可以的。

代码就是这些,可以直接拿去用,测试如果OK,请给点鼓励,谢谢!第一次写博客,写的不好请见谅!
到此这篇关于h5移动端调用支付宝、微信支付的实现的文章就介绍到这了,更多相关h5移动端支付宝微信支付内容请搜索以前的文章或继续浏览下面的相关文章,希望大家以后多多支持!
相关内容
- 使用SVG实现提示框功能的示例代码HTML5 SVG带弹性动画效果的Tooltip提示框
- Html5嵌入钉钉的实现示例html5实现点击弹出图片功能html5 录制mp3音频支持采样率和比特率设置html5表单的required属性使用html5调用摄像头实例代码HTML5页面音频自动播放的实现方式Html5大屏数据可视化开发的实现html实现弹窗的实例HTML5来实现本地文件读取和写入的实现方法HTML 罗盘式时钟的实现HTML5简单实现添加背景音乐的几种方法
- 浅析数据存储的三种方式 cookie sessionstorage localstorage 的异同Html5中localStorage存储JSON数据并读取JSON数据的实现方法详解前端HTML5几种存储方式的总结
- h5页面唤起app如果没安装就跳转下载(iOS和Android)HTML5中外部浏览器唤起微信分享Html5如何唤起百度地图App的方法详解如何通过H5(浏览器/WebView/其他)唤起本地apphtml5唤起app的方法
- html5视频自动横过来自适应页面且点击播放功能的实现HTML5播放实现rtmp流直播使用HTML5加载音频和视频的实现代码Html5 webRTC简单实现视频调用的示例代码HTML5 video循环播放多个视频的方法步骤HTML5 通过Vedio标签实现视频循环播放的示例代码HTML5基于flash实现播放RTMP协议视频的示例代码
- 使用Html5 Stream开发实时监控系统HTML5 WebGL 实现民航客机飞行监控系统基于HTML5 Canvas 实现商场监控实例详解
- HTML5页面嵌入小程序没有返回按钮及返回页面空白的问题微信小程序之html5 canvas绘图并保存到系统相册HTML5 和小程序实现拍照图片旋转、压缩和上传功能基于Jscex +HTML5 Canvas 制作的抽奖小程序HTML5跳转小程序wx-open-launch-weapp的示例代码
- HTML5实现直播间评论滚动效果的代码在HTML里加载摄像头的方法基于HTML代码实现图片碎片化加载功能html5用video标签流式加载的实现HTML5 图片预加载的示例代码传统HTML页面实现模块化加载的方法HTML页面缩小后显示滚动条的示例代码h5页面背景图很长要有滚动条滑动效果的实现html+css实现滚动到元素位置显示加载动画效果
- html5拖拽应用记录及注意点HTML5实现拖拽互动改变元素颜色特效基于Html5实现的react拖拽排序组件示例HTML5拖拽功能实现的拼图游戏html5 拖拽及用 js 实现拖拽功能的示例代码
- 解决html5中的video标签ios系统中无法播放使用的问题html5用video标签流式加载的实现Html5 video标签视频的最佳实践html5自定义video标签的海报与播放按钮功能html5视频媒体标签video的使用方法及完整参数说明详解详解Html5中video标签那些属性和方法
