Mui框架支持微信支付宝支付源代码

时间 2019-11-20

标签 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);
		}
	});
}