支付寶掃碼支付

1、支付寶的文檔比較容易看,主要是有相應的DEMO,我這裏看的DEMO是 JAVA-UTF-8版本。


2、導入DEMO,在com.alipay.config中填入對應的partner和key(在對應的商戶後臺獲取)就可以直接運行了解支付流程了。


3、改寫:我這邊使用的是springmvc+mybatis。商品發起購買(走支付寶支付)、跳轉到支付寶、支付寶回調支付狀態。

四、實現:

1、商品發起購買請求(將DEMO中的頁面直接拿過來用了)。

[javascript] view plain copy 派生到我的代碼片
  1. <body>  
  2.     <div class="header">  
  3.         <div class="container black">  
  4.             <div class="qrcode">  
  5.                 <div class="littlecode">  
  6.                     <img width="16px" src="img/little_qrcode.jpg" id="licode">  
  7.                     <div class="showqrs" id="showqrs">  
  8.                         <div class="shtoparrow"></div>  
  9.                         <div class="guanzhuqr">  
  10.                             <img src="img/guanzhu_qrcode.png" width="80">  
  11.                             <div class="shmsg" style="margin-top:5px;">  
  12.                             請掃碼關注  
  13.                             </div>  
  14.                             <div class="shmsg" style="margin-bottom:5px;">  
  15.                                 接收重要信息  
  16.                             </div>  
  17.                         </div>  
  18.                     </div>  
  19.                 </div>        
  20.             </div>  
  21.         </div>  
  22.         <div class="container">  
  23.             <div class="nav">  
  24.                 <a href="https://www.alipay.com/" class="logo"><img src="img/alipay_logo.png" height="30px"></a>  
  25.                 <span class="divier"></span>  
  26.                 <a href="http://open.alipay.com/platform/home.htm" class="open" target="_blank">開放平臺</a>  
  27.                 <ul class="navbar">  
  28.                     <li><a href="https://doc.open.alipay.com/doc2/detail?treeId=62&articleId=103566&docType=1" target="_blank">在線文檔</a></li>  
  29.                     <li><a href="https://cschannel.alipay.com/portal.htm?sourceId=213" target="_blank">技術支持</a></li>  
  30.                 </ul>  
  31.             </div>  
  32.         </div>  
  33.         <div class="container blue">  
  34.             <div class="title">支付寶即時到賬(create_direct_pay_by_user)</div>  
  35.         </div>  
  36.     </div>  
  37.     <div class="content">  
  38.         <%-- <form action="${ctx}/aliPay/open" class="alipayform" method="POST" target="_blank"> --%>  
  39.             <div class="element" style="margin-top:60px;">  
  40.                 <div class="legend">支付寶即時到賬交易接口快速通道 </div>  
  41.             </div>  
  42.             <div class="element">  
  43.                 <div class="etitle">商戶訂單號:</div>  
  44.                 <div class="einput"><input type="text" name="WIDout_trade_no" id="out_trade_no"></div>  
  45.                 <br>  
  46.                 <div class="mark">注意:商戶訂單號(out_trade_no).必填(建議是英文字母和數字,不能含有特殊字符)</div>  
  47.             </div>  
  48.               
  49.             <div class="element">  
  50.                 <div class="etitle">商品名稱:</div>  
  51.                 <div class="einput"><input type="text" name="WIDsubject" id="WIDsubject" value="test商品123"></div>  
  52.                 <br>  
  53.                 <div class="mark">注意:產品名稱(subject),必填(建議中文,英文,數字,不能含有特殊字符)</div>  
  54.             </div>  
  55.             <div class="element">  
  56.                 <div class="etitle">付款金額:</div>  
  57.                 <div class="einput"><input type="text" name="WIDtotal_fee" id="WIDtotal_fee" value="0.01"></div>  
  58.                 <br>  
  59.                 <div class="mark">注意:付款金額(total_fee),必填(格式如:1.00,請精確到分)</div>  
  60.             </div>  
  61.             <div class="element">  
  62.                 <div class="etitle">商品描述:</div>  
  63.                 <div class="einput"><input type="text" name="WIDbody" id="WIDbody" value="即時到賬測試"></div>  
  64.                 <br>  
  65.                 <div class="mark">注意:商品描述(body),選填(建議中文,英文,數字,不能含有特殊字符)</div>  
  66.             </div>  
  67.             <div class="element">  
  68.                 <input type="button" class="alisubmit" id="sbumitBtn" value ="確認支付">  
  69.             </div>  
  70.     </div>  
  71.     <div id="returnAli"></div>  
  72.     <div class="footer">  
  73.         <p class="footer-sub">  
  74.             <a href="http://ab.alipay.com/i/index.htm" target="_blank">關於支付寶</a><span>|</span>  
  75.             <a href="https://e.alipay.com/index.htm" target="_blank">商家中心</a><span>|</span>  
  76.             <a href="https://job.alibaba.com/zhaopin/index.htm" target="_blank">誠徵英才</a><span>|</span>  
  77.             <a href="http://ab.alipay.com/i/lianxi.htm" target="_blank">聯繫我們</a><span>|</span>  
  78.             <a href="#" id="international" target="_blank">International Business</a><span>|</span>  
  79.             <a href="http://ab.alipay.com/i/jieshao.htm#en" target="_blank">About Alipay</a>  
  80.             <br>  
  81.              <span>支付寶版權所有</span>  
  82.             <span class="footer-date">2004-2016</span>  
  83.             <span><a href="http://fun.alipay.com/certificate/jyxkz.htm" target="_blank">ICP證:滬B2-20150087</a></span>  
  84.         </p>  
  85.   
  86.              
  87.     </div>  
  88. </body>  

2、點擊確認支付之後,這裏通過ajax請求後臺,將返回的一段html代碼直接放到上面的<div id="returnALi"></div>中,這個表單會自動提交。
[javascript] view plain copy 派生到我的代碼片
  1. $(function (){  
  2.     $("#sbumitBtn").on('click'function(){  
  3.         $.ajax({  
  4.             type : "post",  
  5.             data : {  
  6.                 WIDout_trade_no : $('#out_trade_no').val(),  
  7.                 WIDsubject : $('#WIDsubject').val(),  
  8.                 WIDtotal_fee : $('#WIDtotal_fee').val(),  
  9.                 WIDbody : $('#WIDbody').val()  
  10.             },  
  11.             url : "${ctx}/aliPay/open",  
  12.             success : function(data) {  
  13.                 $('#returnAli').append(data.sHtmlText);  
  14.             },  
  15.             error : function(da){  
  16.             }  
  17.         });  
  18.     })  
  19.       
  20. });  

3、後臺controller中,基本是將demo中的alipayapi.jsp直接拿來用了,不同的是,參數的傳遞是自己定義的,返回方式符合apringmvc要求,並且根據業務需求保存了狀態爲未支付的訂單信息。
[javascript] view plain copy 派生到我的代碼片
  1. @RequestMapping("open")  
  2. public ResponseEntity<HttpEntity> open(Model model, String WIDout_trade_no, String WIDsubject, String WIDtotal_fee,  
  3.         String WIDbody) {  
  4.   
  5.     //////////////////////////////////// 請求參數//////////////////////////////////////  
  6.   
  7.     // 商戶訂單號,商戶網站訂單系統中唯一訂單號,必填  
  8.     String out_trade_no = WIDout_trade_no;  
  9.     // 訂單名稱,必填  
  10.     String subject = WIDsubject;  
  11.     // 付款金額,必填  
  12.     String total_fee = WIDtotal_fee;  
  13.     // 商品描述,可空  
  14.     String body = WIDbody;  
  15.   
  16.     // 把請求參數打包成數組  
  17.     Map<String, String> sParaTemp = new HashMap<String, String>();  
  18.     sParaTemp.put("service", AlipayConfig.service);  
  19.     sParaTemp.put("partner", AlipayConfig.partner);  
  20.     sParaTemp.put("seller_id", AlipayConfig.seller_id);  
  21.     sParaTemp.put("_input_charset", AlipayConfig.input_charset);  
  22.     sParaTemp.put("payment_type", AlipayConfig.payment_type);  
  23.     sParaTemp.put("notify_url", AlipayConfig.notify_url);  
  24.     sParaTemp.put("return_url", AlipayConfig.return_url);  
  25.     sParaTemp.put("anti_phishing_key", AlipayConfig.anti_phishing_key);  
  26.     sParaTemp.put("exter_invoke_ip", AlipayConfig.exter_invoke_ip);  
  27.     sParaTemp.put("out_trade_no", out_trade_no);  
  28.     sParaTemp.put("subject", subject);  
  29.     sParaTemp.put("total_fee", total_fee);  
  30.     sParaTemp.put("body", body);  
  31.     // 其他業務參數根據在線開發文檔,添加參數.文檔地址:https://doc.open.alipay.com/doc2/detail.htm?spm=a219a.7629140.0.0.O9yorI&treeId=62&articleId=103740&docType=1  
  32.     // 如sParaTemp.put("參數名","參數值");  
  33.   
  34.     // 建立請求  
  35.     String sHtmlText = AlipaySubmit.buildRequest(sParaTemp, "get""確認");  
  36.     model.addAttribute("sHtmlText", sHtmlText);  
  37.   
  38.     // 保存支付記錄  
  39.     hysWebMeetingAliService.insertSelective(sParaTemp);  
  40.     return new ResponseEntity(model, HttpStatus.OK);  
  41. }  

4、回調:也是直接將DEMO中的notify_url.jsp中的java代碼拿來稍微做了修改和加上業務代碼(修改狀態等);

[javascript] view plain copy 派生到我的代碼片
  1. @RequestMapping("notify")  
  2. @ResponseBody  
  3. public String notify(HttpServletRequest request){  
  4.     //獲取支付寶POST過來反饋信息  
  5.     Map<String,String> params = new HashMap<String,String>();  
  6.     Map requestParams = request.getParameterMap();  
  7.     for (Iterator iter = requestParams.keySet().iterator(); iter.hasNext();) {  
  8.         String name = (String) iter.next();  
  9.         String[] values = (String[]) requestParams.get(name);  
  10.         String valueStr = "";  
  11.         for (int i = 0; i < values.length; i++) {  
  12.             valueStr = (i == values.length - 1) ? valueStr + values[i]  
  13.                     : valueStr + values[i] + ",";  
  14.         }  
  15.         //亂碼解決,這段代碼在出現亂碼時使用。如果mysign和sign不相等也可以使用這段代碼轉化  
  16.         //valueStr = new String(valueStr.getBytes("ISO-8859-1"), "gbk");  
  17.         params.put(name, valueStr);  
  18.     }  
  19.       
  20.     //獲取支付寶的通知返回參數,可參考技術文檔中頁面跳轉同步通知參數列表(以下僅供參考)//  
  21.     //商戶訂單號  
  22.   
  23.     String out_trade_no = request.getParameter("out_trade_no");  
  24.   
  25.     //支付寶交易號  
  26.   
  27.     String trade_no = request.getParameter("trade_no");  
  28.   
  29.     //交易狀態  
  30.     String trade_status = request.getParameter("trade_status");  
  31.   
  32.     //獲取支付寶的通知返回參數,可參考技術文檔中頁面跳轉同步通知參數列表(以上僅供參考)//  
  33.   
  34.     if(AlipayNotify.verify(params)){//驗證成功  
  35.         //////////////////////////////////////////////////////////////////////////////////////////  
  36.         //請在這裏加上商戶的業務邏輯程序代碼  
  37.   
  38.         //——請根據您的業務邏輯來編寫程序(以下代碼僅作參考)——  
  39.         boolean flg = false;  
  40.         if(trade_status.equals("TRADE_FINISHED")){  
  41.             //判斷該筆訂單是否在商戶網站中已經做過處理  
  42.                 //如果沒有做過處理,根據訂單號(out_trade_no)在商戶網站的訂單系統中查到該筆訂單的詳細,並執行商戶的業務程序  
  43.                 //請務必判斷請求時的total_fee、seller_id與通知時獲取的total_fee、seller_id爲一致的  
  44.                 //如果有做過處理,不執行商戶的業務程序  
  45.                   
  46.             //注意:  
  47.             //退款日期超過可退款期限後(如三個月可退款),支付寶系統發送該交易狀態通知  
  48.         } else if (trade_status.equals("TRADE_SUCCESS")){  
  49.             //判斷該筆訂單是否在商戶網站中已經做過處理  
  50.                 //如果沒有做過處理,根據訂單號(out_trade_no)在商戶網站的訂單系統中查到該筆訂單的詳細,並執行商戶的業務程序  
  51.                 //請務必判斷請求時的total_fee、seller_id與通知時獲取的total_fee、seller_id爲一致的  
  52.                 //如果有做過處理,不執行商戶的業務程序  
  53.                   
  54.             //注意:  
  55.             //付款完成後,支付寶系統發送該交易狀態通知  
  56.               
  57.             //根據訂單號將訂單狀態和支付寶記錄表中狀態都改爲已支付  
  58.             flg = hysWebMeetingAliService.changeOrderAndAliStatusSuccess(out_trade_no);  
  59.               
  60.         }  
  61.   
  62.         //——請根據您的業務邏輯來編寫程序(以上代碼僅作參考)——  
  63.               
  64.         //out.print("success"); //請不要修改或刪除  
  65.         if(flg){  
  66.             return "success";  
  67.         }else{  
  68.             return "fail";  
  69.         }  
  70.   
  71.         //////////////////////////////////////////////////////////////////////////////////////////  
  72.     }else{//驗證失敗  
  73.         //out.print("fail");  
  74.         return "fail";  
  75.     }  
  76. }  


5、return_url:頁面跳轉同步通知頁面路徑,就是支付成功後,支付寶回跳的一個頁面。“需http://格式的完整路徑,不能加?id=123這類自定義參數,必須外網可以正常訪問”,支付寶明確規定了回跳的頁面後面不能自定義參數,那麼有的我們就是根據一些類型去判斷跳轉的就有點麻煩了。我這裏做了一個取巧的做法:先把return_url.jsp中的java代碼也直接搬過來,略做修改(換成springmvc的方式),我的回跳地址就是IP/aliPay/returnUrl,然後再new ModelAndView("redirect:/meeting/info")進行重定向到我們想到的url中,(參數問題看下文總結第4點吧)。

[javascript] view plain copy 派生到我的代碼片
  1.     @RequestMapping("returnUrl")  
  2.     public ModelAndView returnUrl(HttpServletRequest request){  
  3.         ModelAndView mv = new ModelAndView("redirect:/meeting/info");  
  4.           
  5.         //獲取支付寶GET過來反饋信息  
  6.         Map<String,String> params = new HashMap<String,String>();  
  7.         Map requestParams = request.getParameterMap();  
  8.         for (Iterator iter = requestParams.keySet().iterator(); iter.hasNext();) {  
  9.             String name = (String) iter.next();  
  10.             String[] values = (String[]) requestParams.get(name);  
  11.             String valueStr = "";  
  12.             for (int i = 0; i < values.length; i++) {  
  13.                 valueStr = (i == values.length - 1) ? valueStr + values[i]  
  14.                         : valueStr + values[i] + ",";  
  15.             }  
  16.             //亂碼解決,這段代碼在出現亂碼時使用。如果mysign和sign不相等也可以使用這段代碼轉化  
  17.             //valueStr = new String(valueStr.getBytes("ISO-8859-1"), "utf-8");  
  18.             params.put(name, valueStr);  
  19.         }  
  20.           
  21.         //獲取支付寶的通知返回參數,可參考技術文檔中頁面跳轉同步通知參數列表(以下僅供參考)//  
  22.         //商戶訂單號  
  23.   
  24.         String out_trade_no = request.getParameter("out_trade_no");  
  25.   
  26.         //支付寶交易號  
  27.   
  28.         String trade_no = request.getParameter("trade_no");  
  29.   
  30.         //交易狀態  
  31.         String trade_status = request.getParameter("trade_status");  
  32.           
  33.         <span style="color:#ff0000;">String meetingId = request.getParameter("extra_common_param");  
  34.         mv.addObject("meetingId", meetingId);</span>  
  35.   
  36.         //獲取支付寶的通知返回參數,可參考技術文檔中頁面跳轉同步通知參數列表(以上僅供參考)//  
  37.           
  38.         //計算得出通知驗證結果  
  39.         boolean verify_result = AlipayNotify.verify(params);  
  40.           
  41.         if(verify_result){//驗證成功  
  42.             //////////////////////////////////////////////////////////////////////////////////////////  
  43.             //請在這裏加上商戶的業務邏輯程序代碼  
  44.   
  45.             //——請根據您的業務邏輯來編寫程序(以下代碼僅作參考)——  
  46.             if(trade_status.equals("TRADE_FINISHED") || trade_status.equals("TRADE_SUCCESS")){  
  47.                 //判斷該筆訂單是否在商戶網站中已經做過處理  
  48.                     //如果沒有做過處理,根據訂單號(out_trade_no)在商戶網站的訂單系統中查到該筆訂單的詳細,並執行商戶的業務程序  
  49.                     //如果有做過處理,不執行商戶的業務程序  
  50.             }  
  51.               
  52.             //該頁面可做頁面美工編輯  
  53. //          out.println("驗證成功<br />");  
  54.             //——請根據您的業務邏輯來編寫程序(以上代碼僅作參考)——  
  55.   
  56.             //////////////////////////////////////////////////////////////////////////////////////////  
  57.         }else{  
  58.             //該頁面可做頁面美工編輯  
  59. //          out.println("驗證失敗");  
  60.         }  
  61.           
  62.         return mv;  
  63.     }  


五、總結:

1、支付寶集成比較簡答,稍微看下DEMO,跑一下了解了流程就比較容易了。

2、調試的時候,特別是回調,要把項目部署到能夠外網訪問的服務器上。

3、我沒有遇到上面莫名其妙的問題,如果遇到了的話,可以聯繫我,或者看下Eclipse遠程debug這篇文章,進行問題的跟蹤。

4、做頁面跳轉同步通知頁面路徑時,需要傳遞參數怎麼辦,我一開始是自定義了一個參數,可是沒有取到,然後我看到DEMO中有一句註釋是這麼寫的:

[javascript] view plain copy 派生到我的代碼片
  1. // 其他業務參數根據在線開發文檔,添加參數.文檔地址:https://doc.open.alipay.com/doc2/detail.htm?spm=a219a.7629140.0.0.O9yorI&treeId=62&articleId=103740&docType=1  
所以我打開看了之後,選擇了公用回傳參數extra_common_param,我自己知道這個字段對於我來說是什麼含義。不過也要注意,人家說明了:
[javascript] view plain copy 派生到我的代碼片
  1. 參數body(商品描述)、subject(商品名稱)、extra_common_param(公用回傳參數)不能包含特殊字符(如:#、%、&、+)、敏感詞彙,也不能使用外國文字(旺旺不支持的外文,如:韓文、泰語、藏文、蒙古文、阿拉伯語);  

open方法中設值:
[javascript] view plain copy 派生到我的代碼片
  1. sParaTemp.put("extra_common_param", meetingId);  


returnUrl方法中取值,並作爲重定向參數:
[javascript] view plain copy 派生到我的代碼片
  1. String meetingId = request.getParameter("extra_common_param");  
  2.         mv.addObject("meetingId", meetingId);  
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章