MUI 支付案例（支付宝/微信）
首先说明一下，本文借鉴了多位博主的文章，所以会看到很多一样的代码。
写这篇博客主要目的是为了便于后期查看（不好之处，敬请留言吐槽），案例经本人测试，是可以使用的。
先上效果图
前端HTML代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>支付</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link rel="stylesheet" href="css/mui.min.css" />
<link rel="stylesheet" href="css/pay.css" />
</head> <body>
<hrader class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">第三方支付</h1>
</hrader>
<div class="mui-content">
支付金额：
<input id="jine" type="number" value="0.01" /> 元
<div class="top oauth-area" id="testLogin">
<input type="button" id="wxpay" class="weixin pay" value="微信支付" />
<input type="button" id="alipay" class="zhifubao pay" value="支付宝支付" />
</div>
</div>
<ul class="mui-table-view">
<li class="mui-table-view-cell"> 支付方式: <span id="channel"></span> </li>
<li class="mui-table-view-cell"> 订单号: <span id="bill_no"></span> </li>
<li class="mui-table-view-cell"> 支付金额: <span id="total_fee"></span> </li>
<li class="mui-table-view-cell"> 支付状态:<span id="status"></span> </li>
<textarea name="" id="status_msg" cols="20" rows="5"></textarea>
</ul>
</body>
</html>
<script type="text/javascript" src="js/mui.min.js"></script>
<script type="text/javascript" src="js/beecloud.js"></script>
<script>
mui.init({
swipeBack: true //启用右滑关闭功能
});
mui('.mui-content').on('tap', '.pay', function() { // 获取 点击效果微信还是支付平台
var channel_id = null;
switch(this.id) {
case 'alipay':
channel_id = 'ALI_APP';
break;
case 'wxpay':
channel_id = 'WX_APP';
break;
default:
break;
}
beecloudPay(channel_id);
document.getElementById("channel").innerHTML = channel_id;
document.getElementById("total_fee").innerHTML = document.getElementById('jine').value;
document.getElementById("bill_no").innerHTML = beecloud.genBillNo();
}) function beecloudPay(bcChannel) {
//因DCloud尚未申请银联账号，故支付宝、微信使用的是DCloud的appid，银联暂时使用BeeCloud的appid，开发者这里无需判断，直接写一个appid即可；
var _appid = bcChannel == "UN_WEB" ? "c37d661d-7e61-49ea-96a5-68c34e83db3b" : "44f01a13-965f-4b27-ba9f-da678b47f3f5"
/*
* 构建支付参数
* app_id: BeeCloud控制台上创建的APP的appid，必填
* title: 订单标题，32个字节，最长支持16个汉字；必填
* total_fee: 支付金额，以分为单位，大于0的整数，必填
* bill_no: 订单号，8~32位数字和/或字母组合,确保在商户系统中唯一，必填
* optional: 扩展参数,可以传入任意数量的key/value对来补充对业务逻辑的需求;此参数会在webhook回调中返回; 选填
* bill_timeout: 订单失效时间,必须为非零正整数，单位为秒，必须大于360。选填
*/
var payData = {
app_id: _appid,
channel: bcChannel,
title: "DCloud项目捐赠",
total_fee: document.getElementById('jine').value * 100,
bill_no: beecloud.genBillNo(),
optional: {
'uerId': 'beecloud',
'phone': '4006280728'
},
bill_timeout: 360,
return_url: "http://www.dcloud.io/demo/pay" //wap支付成功后的回跳地址
};
/* 发起支付
* payData: 支付参数
* cbsuccess: 支付成功回调
* cberror: 支付失败回调
*/
beecloud.payReq(payData, function(result) {
document.getElementById("status").innerHTML = 'success';
document.getElementById("status").style.color = 'green'
document.getElementById("status_msg").innerHTML = "-------- 支付成功 --------" + "\n感谢您的支持,我们会继续努力完善产品";
console.log(result);
}, function(e) {
document.getElementById("status").innerHTML = 'failed';
document.getElementById("status").style.color = 'red'
document.getElementById("status_msg").innerHTML = "-------- 支付失败 --------\n" + "错误码：" + e.code + '\n' + e.message;
});
}
</script>
beecloud.js
var beecloud = {}; //定义一个beecloud对象
var channels = null;
var w = null;
/**
* 定义一个支付通道payReq
* data 回调参数
* cbsuccess 成功回调返回的函数信息
* cberror 失败返回的信息
* */
beecloud.payReq = function(data, cbsuccess, cberror) {
doPay(data, cbsuccess, cberror);
};
// 定义一个随机函数 对象的商品信息订单号
beecloud.genBillNo = function() {
var d = new Date();
var vYear = d.getFullYear();
var vMon = d.getMonth() + 1;
var vDay = d.getDate();
var h = d.getHours();
var m = d.getMinutes();
var se = d.getSeconds();
var ms = d.getMilliseconds();
var rnadom = Math.floor(Math.random() * 100000000 + 10000000).toString();
billno = "" + vYear + (vMon < 10 ? "0" + vMon : vMon) + (vDay < 10 ? "0" + vDay : vDay) + (h < 10 ? "0" + h : h) + (m < 10 ? "0" + m : m) + (se < 10 ? "0" + se : se) + ms;
return billno + rnadom;
};
mui.plusReady(function() {
//配置业务支持的支付通道，支付需要服务端支持，在BeeCloud上支持支付宝支付和微信支付；
var support_channel = ['alipay', 'wxpay'];
plus.payment.getChannels(function(s) {
channels = s; // 支付跳转授权第三方成功回调信息
}, function(e) {
console.log("获取支付渠道信权限失败:" + e.message);
});
});
//
function getRandomHost() {
var hosts = ['https://apibj.beecloud.cn',
'https://apihz.beecloud.cn',
'https://apisz.beecloud.cn',
'https://apiqd.beecloud.cn'
];
return "" + hosts[parseInt(3 * Math.random())] + "/2/rest/app/bill";
}
/**
* 获取支付通道
*
*/
function getPayChannel(bc_channel) {
var dc_channel_id = '';
switch(bc_channel) {
case 'ALI_APP':
dc_channel_id = 'alipay';
break;
case 'WX_APP':
dc_channel_id = 'wxpay';
break;
default:
break;
}
for(var i in channels) {
if(channels[i].id == dc_channel_id) {
return channels[i];
}
}
return null;
}
/***
*
* 支付回调函数
*
*
*/
function doPay(payData, cbsuccess, cberror) {
if(w) return;
w = plus.nativeUI.showWaiting();
mui.ajax(getRandomHost(), {
data: JSON.stringify(payData),
type: 'post',
dataType: 'json',
contentType: "application/json",
success: function(data) {
w.close();
w = null;
var paySrc = '';
if(data.result_code == 0) {
var payChannel = getPayChannel(payData.channel);
if(payChannel) {
if(payChannel.id === 'alipay') {
paySrc = data.order_string;
} else if(payChannel.id === 'wxpay') {
var statement = {};
statement.appid = data.app_id;
statement.noncestr = data.nonce_str;
statement.package = data.package;
statement.partnerid = data.partner_id;
statement.prepayid = data.prepay_id;
statement.timestamp = parseInt(data.timestamp);
statement.sign = data.pay_sign;
paySrc = JSON.stringify(statement);
}
//mui.toast("paySrc:" + paySrc);
plus.payment.request(payChannel, paySrc, cbsuccess, cberror);
} else if(payData.channel == 'UN_WEB') {
//银联在线支付
var web = plus.webview.create('', "beecloudPay");
//注入JS，解决银联界面返回的问题
web.setJsFile('_www/js/95516.js');
web.addEventListener('loaded', function() {
if(!web.isVisible()) {
web.show();
}
});
web.loadData(data.html);
}
} else {
var bcError = {};
bcError.code = data.result_code;
bcError.message = data.result_msg + ":" + data.err_detail;
cberror(bcError);
}
},
error: function(xhr, errorType, error) {
w.close();
w = null;
var bcError = {};
bcError.code = -1;
bcError.message = errorType + ":" + xhr.responseText;;
cberror(bcError);
}
});
}
pay.css
.mui-content {
text-align: center;
margin-top: 40px;
margin-bottom: 40px;
}
.top {
margin-top: 40px;
}
.weixin {
width: 200px;
height: 50px;
background: url(img/icon-weixin.png) 10px center no-repeat;
background-size: 20%;
padding: 30px;
border-radius: 8px;
padding-left: 30px;
margin-bottom: 20px!important;
}
.zhifubao {
width: 200px;
height: 50px;
background: url(img/alipay.jpg) 10px center no-repeat;
background-size: 20%;
padding-left: 30px;
}
#jine {
-webkit-user-select: text;
text-align: right;
padding: 0 1em;
border: 0px;
border-bottom: 1px solid #ECB100;
border-radius:;
font-size: 16px;
width: 30%;
outline: none;
text-align: center;
}
MUI 支付案例（支付宝/微信）的更多相关文章
- JavaWEB后端支付银联,支付宝,微信对接
注:本文来源于:< JavaWEB后端支付银联,支付宝,微信对接 > JavaWEB后端支付银联,支付宝,微信对接 标签(空格分隔): java 项目概述 最近项目需要后端打通支付,所 ...
- 移动支付--银联,支付宝,微信(android)
在这个移动互联网快速发展的时代,手机已经成为人们生活或者出行之中必不可少的设备了,如今非常多城市的商户都能够採用支付宝,微信支付了.人们出门仅仅须要随身携带带手机.不用带大量现金就能够放心购物了.如今 ...
- iOS开发集成支付宝支付、支付宝&微信支付
支付宝支付: 参考链接:https://www.jianshu.com/p/60175e525c0e https://blog.csdn.net/zhonggaorong/article/detail ...
- apicloud含有微信支付。支付宝支付和苹果内购的代码
apicloud含有微信支付.支付宝支付和苹果内购的代码 <!DOCTYPE html> <html> <head> <meta charset=" ...
- 重学 Java 设计模式：实战桥接模式(多支付渠道「微信、支付宝」与多支付模式「刷脸、指纹」场景)
作者:小傅哥 博客:https://bugstack.cn - 编写系列原创专题文章 沉淀.分享.成长,让自己和他人都能有所收获! 一.前言 为什么你的代码那么多ifelse 同类的业务.同样的功能, ...
- iOS----支付（微信支付、支付宝支付、银联支付控件集成支付）（转）
资料 支付宝 //文档idk都包含了安卓.iOS版 银 联 银联官网资料 Demo Demo给了一个订单号,做测试使用,若出现支付失败什么的,可能是已经被别人给支付了,或者是服务器订单过期了 ~ 一. ...
- iOS 支付(含支付宝、银联、微信)
资料 支付宝 //文档idk都包含了安卓.iOS版 银 联 银联官网资料 Demo Demo给了一个订单号,做测试使用,若出现支付失败什么的,可能是已经被别人给支付了,或者是服务器订单过期了 ~ 一. ...
- 微信APP支付，支付宝APP支付demo
最近公司新开发的APP中,需要集成微信支付和支付宝支付,2个平台申请的都是APP支付.这是个人第一次单独的,完整的做完2个平台的支付. 这里我主要用到了2个接口:支付接口,订单查询接口,虽然2个平台的 ...
- APIcloud制作APP 微信支付与支付宝支付
首先要在云端绑定相应模块如alipay和wxpay其次编写代码. 配置区域 var cfg = { webName:'',//APP名字 payDebug:true, isUseWxPay:true, ...
随机推荐
- logback 和 log4j对比，及相关配置
Logback 一.logback的介绍 Logback是由log4j创始人设计的又一个开源日志组件.logback当前分成三个模块:logback-core,logback- classic和log ...
- 怎么理解linux的平均负载及平均负载高后的排查工具
什么是平均负载 平均负载可以对于我们来说及熟悉又陌生,但我们问平均负载是什么,但大部分人都回答说平均负载不就是单位时间内CPU使用率吗?其实并不是这样的,如果可以的话,可以 man uptime 来了 ...
- LODOP设置纸张无效问题
有的打印机不支持自定义纸张,或不支持当前设置的纸张尺寸,会造成纸张尺寸和代码里设置的尺寸不一致的情况.现象:1.代码一样,纸张语句设置正确,有的打印机纸张正常,有的打印机不正常.2.代码一样,纸张语句 ...
- mysql表如何使用redis保存？
mysql表: userid username password email 9 Lisi 111111 lisi@163.com 对应redis存储: 127.0.0.1:6379> set ...
- 关于C++的智能指针
一句话概括:当类中有指针成员时,可以使用智能指针实现对象共享:智能指针通过引用计数实现,即对指向同一对象的指针计数:智能指针的使用可以方便/安全地控制对象的生命周期,对指针进行自动销毁. 当类中有指针 ...
- 大周末的不休息，继续学习pandas吧，pandas你该这么学，No.7
其实,写文章真的挺难的 每天抽点时间,写写文采飘逸的文章 坚持个几年,成为称霸一方的大佬 坚持就会成功吧~ 最近碰到瓶颈了, 一直找不到好的运营公众号的方式(好想有人指导唉~,对了,橡皮擦有个100多 ...
- Spring mybatis源码篇章-动态SQL节点源码深入
通过阅读源码对实现机制进行了解有利于陶冶情操,承接前文Spring mybatis源码篇章-动态SQL基础语法以及原理 前话 前文描述到通过mybatis默认的解析驱动类org.apache.ibat ...
- JS数据拷贝
JS的拷贝可分为浅拷贝和深拷贝: 浅拷贝:如果数组元素是基本类型,就会拷贝一份,互不影响,而如果是对象或者数组,就会只拷贝对象和数组的引用,这样我们无论在新旧数组进行了修改,两者都会发生变化. 深拷贝 ...
- Is It A Tree? POJ - 1308（并查集判树）
Problem Description A tree is a well-known data structure that is either empty (null, void, nothing) ...
- CSP/NOIP c++常用模板
蒟蒻目前还是提高组选手,模板将会持续更新! 目录: 线段树 对拍 exgcd st 树状数组 树剖 dijsktra spfa tarjan 匈牙利 埃筛 差分树状数组 dinic 快速幂取余 Exg ...