Hello MUI集成银联WAP支付

zgzczzw · Mar 14, 2016 · 432fab8 · 432fab8
1 parent f7806ec
commit 432fab8
Show file tree

Hide file tree

Showing 3 changed files with 67 additions and 18 deletions.
diff --git a/examples/hello-mui/examples/beecloud.html b/examples/hello-mui/examples/beecloud.html
@@ -33,6 +33,9 @@
 			textarea{
 				margin-top: 10px;
 			}
+			.mui-btn-block{
+				padding: 8px 5px;
+			}
 		</style>
 	</head>
 
@@ -57,21 +60,24 @@ <h1 class="mui-title">cloud Pay（云端支付）</h1>
 				<div id='ALI_APP' class="mui-btn mui-btn-blue mui-btn-block pay">
 					支付宝钱包
 				</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 id='UN_WEB' class="mui-btn mui-btn-blue mui-btn-block pay">
+					银联在线
+				</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>
 
@@ -86,6 +92,7 @@ <h1 class="mui-title">cloud Pay（云端支付）</h1>
 			document.getElementById("bill_no").innerHTML = beecloud.genBillNo();
 		}) 
 		function beecloudPay(bcChannel) {
+			var _appid = bcChannel=="UN_WEB"?"c37d661d-7e61-49ea-96a5-68c34e83db3b":"44f01a13-965f-4b27-ba9f-da678b47f3f5"
 			/*
 			 * 构建支付参数
 			 * 
@@ -97,13 +104,14 @@ <h1 class="mui-title">cloud Pay（云端支付）</h1>
 			 * bill_timeout: 订单失效时间,必须为非零正整数，单位为秒，必须大于360。选填 
 			 */
 			var payData = {
-				app_id: "44f01a13-965f-4b27-ba9f-da678b47f3f5",
+				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 
+				bill_timeout: 360,
+				return_url: "http://www.dcloud.io/demo/pay"//wap支付成功后的回跳地址
 			};
 			/*
 			 *  发起支付

diff --git a/examples/hello-mui/js/95516.js b/examples/hello-mui/js/95516.js
@@ -0,0 +1,32 @@
+(function() {
+	var headerElem = document.querySelector(".header");
+	if (headerElem) {
+		var backElem = document.getElementById("back-95516");
+		if (backElem) {
+			return;
+		}
+		var css = ".header{position:relative;}#back-95516 {z-index:2000;position: absolute;display: inline-block;color: #333;top: 0;left: 0;width: 44px;height: 44px;}#back-95516:before{border: #fff solid 3px;position: absolute;left: 15px;top: 15px;display: block;content: ' ';background-size: 12px, auto;width: 12px;height: 12px;border-top: none;border-right: none;-webkit-transform: rotate(45deg);transform: rotate(45deg);}";
+		var headElem = document.head || document.getElementsByTagName('head')[0];
+		var styleElem = document.createElement('style');
+		styleElem.type = 'text/css';
+		if (styleElem.styleSheet) {
+			styleElem.styleSheet.cssText = css;
+		} else {
+			styleElem.appendChild(document.createTextNode(css));
+		}
+		headElem.appendChild(styleElem);
+
+		backElem = document.createElement('a');
+		backElem.id = 'back-95516';
+		headerElem.appendChild(backElem);
+		backElem.addEventListener('click', function(e) {
+			plus.webview.currentWebview().close('auto');
+		}, true);
+		document.addEventListener('plusready', function() {
+			plus.key.addEventListener('backbutton', function() {
+				plus.webview.currentWebview().close('auto');
+			})
+		});
+	}
+
+})();
diff --git a/examples/hello-mui/js/beecloud.js b/examples/hello-mui/js/beecloud.js
@@ -19,7 +19,7 @@ beecloud.genBillNo = function() {
 	return billno;
 };
 
-mui.plusReady(function () {
+mui.plusReady(function() {
 	plus.payment.getChannels(function(s) {
 		channels = s;
 	}, function(e) {
@@ -111,6 +111,15 @@ function doPay(payData, cbsuccess, cberror) {
 						paySrc = JSON.stringify(statement);
 					}
 					plus.payment.request(payChannel, paySrc, cbsuccess, cberror);
+				} else if (payData.channel == 'UN_WEB') {
+					var web = plus.webview.create('', "beecloudPay");
+					web.setJsFile('_www/js/95516.js');
+					web.addEventListener('loaded', function() {
+						if (!web.isVisible()) {
+							web.show();
+						}
+					});
+					web.loadData(data.html);
 				}
 			} else {
 				var bcError = {};