1.安裝插件css
ionic plugin add https://github.com/mrwutong/cordova-qdc-wxpay.githtml
2.代碼git
controller.jsangularjs
1 angular.module('starter.controllers', []).controller('MyCtrl', function($scope,PayService) { 2 $scope.wxpaytest= function () { 3 //參數說明:格式爲JSON格式 4 //cb_success:調用成功回調方法 5 //cb_failure:調用失敗回調方法 6 try { 7 PayService.getJson().then(function(data){ 8 if(data){ 9 if(data.status=="SUCCESS"){ 10 var json = { 11 appid: data.appid, 12 noncestr: data.noncestr, 13 package: data.package, 14 partnerid: data.partnerid, 15 prepayid: data.prepayid, 16 timestamp: data.timestamp, 17 sign: data.sign 18 } 19 wxpay.payment(json, function(msg){ 20 var json =JSON.parse(msg); 21 if(json.code==0){ 22 alert("支付成功返回頁面"); 23 } 24 }, function(error){ 25 var json =JSON.parse(error); 26 if(json.code ==-2){ 27 alert("用戶不支付了,點擊取消,返回APP"); 28 } 29 }) 30 } 31 else{ 32 alert("失敗了"); 33 } 34 } 35 }); 36 }catch(ex){ 37 alert(ex); 38 } 39 } 40 41 42 });
services.jsgithub
1 angular.module("starter.services",[]) 2 .factory("PayService",function($q,$http){ 3 return { 4 getJson: function() 5 { 6 var r = $q.defer(); 7 8 $http.get("http://服務發佈IP地址/ailpay.ashx?method=Unified").success(function (data) { 9 r.resolve(data); 10 }).error(function (er) { 11 r.resolve(!1); 12 }); 13 return r.promise; 14 } 15 } 16 });
index.htmljson
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> 6 <title></title> 7 8 <link href="lib/ionic/css/ionic.css" rel="stylesheet"> 9 <link href="css/style.css" rel="stylesheet"> 10 11 <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above 12 <link href="css/ionic.app.css" rel="stylesheet"> 13 --> 14 15 <!-- ionic/angularjs js --> 16 <script src="lib/ionic/js/ionic.bundle.js"></script> 17 18 <!-- cordova script (this will be a 404 during development) --> 19 <script src="cordova.js"></script> 20 21 <!-- your app's js --> 22 <script src="js/app.js"></script> 23 <script src="js/controllers.js"></script> 24 <script src="js/services.js"></script> 25 </head> 26 <body ng-app="starter"> 27 28 <ion-pane> 29 <ion-header-bar class="bar-stable"> 30 <h1 class="title">支付測試</h1> 31 </ion-header-bar> 32 <ion-content> 33 <div ng-controller="MyCtrl"> 34 35 <button class="button button-block button-positive" ng-click="alipaytest()">支付寶支付</button> 36 37 <button class="button button-block button-positive" ng-click="wxpaytest()">微信支付</button> 38 39 </div> 40 </ion-content> 41 </ion-pane> 42 </body> 43 </html>
服務端代碼:gulp
1 public void GetUnifiedOrder(HttpContext context) 2 { 5 string callback = context.Request["callback"] == null ? "JSON_CALLBACK" : context.Request["callback"].ToString(); 6 string body = context.Request["body"] == null ? "body" : context.Request["body"].ToString(); 7 string attach = context.Request["attach"] == null ? "測試系統-支付平臺" : context.Request["attach"].ToString(); 8 string totalFee = context.Request["totalFee"] == null ? "1" : context.Request["totalFee"].ToString(); 9 string goods_tag = context.Request["goodstag"] == null ? "" : context.Request["goodstag"].ToString(); 10 string productId = context.Request["productId"] == null ? "" : context.Request["productId"].ToString(); 11 WxPayData data = new WxPayData(); 12 data.SetValue("body", body);//商品描述 13 data.SetValue("attach", attach);//附加數據 14 data.SetValue("out_trade_no", WxPayApi.GenerateOutTradeNo()); 15 data.SetValue("total_fee", totalFee);//總金額 16 data.SetValue("time_start", DateTime.Now.ToString("yyyyMMddHHmmss"));//交易起始時間 17 data.SetValue("time_expire", DateTime.Now.AddMinutes(10).ToString("yyyyMMddHHmmss"));//交易結束時間 19 data.SetValue("trade_type", "APP");//交易類型 26 27 WxPayData result = WxPayApi.UnifiedOrderApp(data);//調用統一下單接口 28 string json = "NO"; 29 if (result.GetValue("return_code").ToString() == "SUCCESS") 30 { 31 string prepay_id = result.GetValue("prepay_id").ToString();//得到統一下單接口返回prepay_id 32 33 string noce_str = Guid.NewGuid().ToString().Replace("-", ""); 34 var timestamp = WxPayApi.GenerateTimeStamp(); 35 WxPayData dataReq = new WxPayData(); 36 37 dataReq.SetValue("appid", "APP申請的Key");// 38 dataReq.SetValue("partnerid", "APP申請的商戶號");//商戶號 39 dataReq.SetValue("noncestr", noce_str);//隨機字符串 40 dataReq.SetValue("package", "Sign=WXPay"); 41 dataReq.SetValue("prepayid", prepay_id); 42 dataReq.SetValue("timestamp", timestamp); 50 var sign = dataReq.MakeSignApp(); 62 context.Response.Write("{\"status\":\"SUCCESS\",\"appid\":\"" + "APP申請的Key" + "\",\"partnerid\":\"" 63 + "APP申請的商戶號" + "\",\"noncestr\":\"" + noce_str + "\",\"package\":\"" + "Sign=WXPay" 64 + "\",\"prepayid\":\"" + prepay_id + "\",\"timestamp\":\"" + timestamp + "\",\"sign\":\"" + sign + "\"}"); 65 } 66 else { 67 WxLog.Info("Faile", result.GetValue("return_msg").ToString()); 68 context.Response.Write(callback + "({\"status\":\"Faile\"})"); 69 } 73 }
效果圖:promise