Mui框架支持微信支付寶支付源代碼
<!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" />
<script type="text/javascript" src="js/mui.min.js"></script>
<script type="text/javascript" charset="utf-8">
mui.init();
</script>
<style type="text/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: 0;
font-size:16px;
width:30%;
outline:none;
text-align:center;
}
</style>
</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 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>
<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>
</body>
</html>
/**引入js/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) {
console.log("s",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);
}
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;
cberror(error);
}
});
}
相關文章
- 1. MUI 支付案例（支付寶/微信）
- 2. MUI 框架微信支付
- 3. MUI 微信支付代碼
- 4. Dcloud中mui 微信支付和支付寶支付接口完美實現付款代碼（PHP支付寶demo）
- 5. 支付寶 微信支付
- 6. 微信，支付寶支付
- 7. 微信、支付寶支付
- 8. 支付寶 微信支付
- 9. vue 微信支付 支付寶支付
- 10. 微信支付+支付寶支付
- 更多相關文章...
- • R 繪圖 - 中文支持 - R 語言教程
- • SVN分支 - SVN 教程
- • IntelliJ IDEA代碼格式化設置
- • IntelliJ IDEA安裝代碼格式化插件
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. MUI 支付案例（支付寶/微信）
- 2. MUI 框架微信支付
- 3. MUI 微信支付代碼
- 4. Dcloud中mui 微信支付和支付寶支付接口完美實現付款代碼（PHP支付寶demo）
- 5. 支付寶 微信支付
- 6. 微信，支付寶支付
- 7. 微信、支付寶支付
- 8. 支付寶 微信支付
- 9. vue 微信支付 支付寶支付
- 10. 微信支付+支付寶支付