150 lines
5.0 KiB
HTML
150 lines
5.0 KiB
HTML
<!DOCTYPE html>
|
||
<html>
|
||
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
|
||
<title></title>
|
||
<link rel="stylesheet" href="../css/mui.min.css">
|
||
<script src="../js/mui.min.js"></script>
|
||
<script type="text/javascript" charset="utf-8">
|
||
mui.init();
|
||
</script>
|
||
<!--标准mui.css-->
|
||
<style>
|
||
.mui-content-padded {
|
||
padding: 10px;
|
||
}
|
||
body,
|
||
body .mui-content {
|
||
background-color: #fff !important;
|
||
}
|
||
#total {
|
||
-webkit-user-select: text;
|
||
text-align: right;
|
||
padding: 0 1em;
|
||
border: 0px;
|
||
border-bottom: 1px solid #007aff;
|
||
border-radius: 0;
|
||
font-size: 16px;
|
||
width: 30%;
|
||
outline: none;
|
||
}
|
||
textarea{
|
||
margin-top: 10px;
|
||
}
|
||
.mui-btn-block{
|
||
padding: 8px 5px;
|
||
}
|
||
</style>
|
||
</head>
|
||
|
||
<body>
|
||
<header 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">cloud Pay（云端支付）</h1>
|
||
</header>
|
||
<div id="dcontent" class="mui-content">
|
||
<div class="mui-content-padded">
|
||
<p style="text-indent: 22px;">
|
||
这是mui无后端开发示例，集成BeeCloud云支付服务，通过js连接云端支付服务器，实现支付功能的全流程开发。 如下为一个支付示例，为DCloud提供的免费、开源软件进行捐赠吧
|
||
</p>
|
||
<div style="padding: 0 1em;text-align:center">
|
||
捐赠金额：
|
||
<input id="total" type="number" value="1.0" style="text-align:center" /> 元
|
||
</div>
|
||
<div class="mui-content-padded oauth-area">
|
||
<!--探测本机软件，自动显示支付宝和微信支付方式-->
|
||
<!--银联在线一直显示-->
|
||
<div id='UN_WEB' class="mui-btn mui-btn-blue mui-btn-block pay" style="display: none;">
|
||
银联在线
|
||
</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>
|
||
</div>
|
||
</div>
|
||
</body>
|
||
<script src="../js/beecloud.js">
|
||
</script>
|
||
<script type="text/javascript">
|
||
mui('.mui-content-padded').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;
|
||
case 'UN_WEB':
|
||
channel_id = 'UN_WEB';
|
||
break;
|
||
default:
|
||
break;
|
||
}
|
||
beecloudPay(channel_id);
|
||
document.getElementById("channel").innerHTML = channel_id;
|
||
document.getElementById("total_fee").innerHTML = document.getElementById('total').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('total').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>
|
||
|
||
</html> |