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, ...
随机推荐
- SQL-W3School-高级：SQL BETWEEN 操作符
ylbtech-SQL-W3School-高级:SQL BETWEEN 操作符 1.返回顶部 1. BETWEEN 操作符在 WHERE 子句中使用,作用是选取介于两个值之间的数据范围. BETWEE ...
- smarty {for}{forelse}
{for} {for}{forelse}用于创建一个简单的循环. 下面的几种方式都是支持的: {for $var=$start to $end}步长1的简单循环. {for $var=$start t ...
- SpringBoot 部署到Linux开机自启动和运行
前文 SpringBoot是一个强大的微服务框架,通常都是打包项目成Jar包,并部署到服务器上,本文以Linux服务器部署为主 开机自启动 博文:<https://www.cnblogs.com ...
- 阶段5 3.微服务项目【学成在线】_day05 消息中间件RabbitMQ_7.RabbitMQ研究-工作模式-工作队列模式
RabbitMQ有以下几种工作模式 : 1.Work queues 2.Publish/Subscribe 3.Routing 4.Topics 5.Header 6.RPC 1.Work queue ...
- 阶段5 3.微服务项目【学成在线】_day01 搭建环境 CMS服务端开发_01-项目概述-功能构架-项目背景
这个就是博学谷下的 在线教育平台
- 通过举例了解java中的流
Java流结构介绍: Java所有的流类位于java.io包中,都分别继承字以下四种抽象流类型. 字节流 字符流 输入流 InputStream Reader 输出流 OutputStream W ...
- JDBC获得DB2表结构并且将表中数据脱敏后转移的程序示例
完整项目地址:https://github.com/zifeiy/totomi 代码示例: import java.io.File; import java.io.FileInputStream; i ...
- Ubuntu+Django+uWSGI+Nginx部署Django项目
安装uWSGI,pip依据自己要使用的python版本自行选择,python2.x版本使用pip进行安装,python3.x版本使用pip3进行安装 pip install uwsgi 配置uWSGI ...
- WhatsApp Group vs WhatsApp Broadcast for Business
WhatsApp Group vs WhatsApp Broadcast for Business By Iaroslav Kudritskiy If you've read our Ultimate ...
- ADRMS与office的整合(一)
因为微软之前针对客户的RMS加密服务是一种免费的测试服务,虽然用户很多但实质上还是一种“测试服务”. 后来微软把这个服务商业化了,需要继续使用的话需要打下这个补丁 https://support.mi ...