支付寶H5支付demo

支付寶H5支付javascript

首先咱們必須註冊一個支付寶應用（本案例就直接用支付寶的沙箱環境，這個沙箱也就是支付寶提供給開發者的一個測試環境）css

登陸地址：https://open.alipay.com/platform/home.htmhtml

一、怎麼註冊一個支付寶應用？看圖（至於應用裏面須要的資料你就跟着填就ok了，我就很少講了，關於公鑰祕鑰這些，支付寶也有它本身的工具自動生成）java

二、怎麼獲取沙箱環境？（看圖）css3

就這樣，支付寶的基本配置咱們都能get到了，下面開始寫代碼吧！angularjs

三、思路描述web

支付寶的h5支付比微信的h5支付簡單不少，下面先跟你們看看項目文件數量吧ajax

就7個文件左右就能夠實現支付了，是否是很簡單呢？（下一篇是微信h5就沒有那麼簡單了）數據庫

接着我說說裏面每一個文件他們的做用後再看代碼吧！！！express

AlipayConfig.java 　　　----------------------------用於存儲支付寶的相關配置信息

AlinotifyServlet.java　　 ----------------------------用於支付後，返回的結果，接着作你的對應業務的

AlipayServlet.java　　　----------------------------用於實現支付操做

logFile.java　　　　　　----------------------------用於打印日誌

Constants.java　　　　 ----------------------------用於存儲常量

index.jsp　　　　　　　----------------------------用於用戶發起支付請求

return_jsp.jsp　　　　　---------------------------用於支付後返回的頁面

好，如今開始代碼展現：

首先要配置AlipayConfig.java （這些參數我如今用的都是沙箱環境的）

package fe.client.pay.alipay.config; import fe.client.pay.tool.Constants; public class AlipayConfig { // 商戶appid
    public static String APPID = "2017092077552049"; // 私鑰 pkcs8格式的
    public static String RSA_PRIVATE_KEY = "greterthhoihrhigfdhouiihgfdooihrroihhigdshgfdfoihgdhgfdkjlnfdbknunifdhugfhidfhglkfdvkjlfilhfdiohrewiouihvfbkjnvfdbkjncdhkjoihfdi3uy9283hjdofhgghnxociby98knlknsdkljfsdlkfsdjsdjoflsdjfsldgfjsdf"; // 服務器異步通知頁面路徑 需http://或者https://格式的完整路徑，不能加?id=123這類自定義參數，必須外網能夠正常訪問
    public static String notify_url = "http://"+Constants.SERVER_ADDRESS+"/goshop/notify_url.jsp"; // 頁面跳轉同步通知頁面路徑 需http://或者https://格式的完整路徑，不能加?id=123這類自定義參數，必須外網能夠正常訪問 商戶能夠自定義同步跳轉地址
    public static String return_url = "http://"+Constants.SERVER_ADDRESS+"/goshop/return_url.jsp"; // 請求網關地址
    public static String URL = "https://openapi.alipaydev.com/gateway.do"; // 編碼
    public static String CHARSET = "UTF-8"; // 返回格式
    public static String FORMAT = "json"; // 支付寶公鑰
    public static String ALIPAY_PUBLIC_KEY = "qazwsxdedcfrfvgytghbnujikfgvbbyujikjgfgfiuouyfugbgikbnojopih"; // 日誌記錄目錄
    public static String log_path = "/log"; // RSA2
    public static String SIGNTYPE = "RSA2"; }

Constants.java

package fe.client.pay.tool; /** * 該類專門用於存儲項目中用到的常量類 * ClassName: Constants * @Description: TODO * @author 鄺梓榮 * @date 2018-11-21 */
public class Constants { //服務器地址 
    public final static String SERVER_ADDRESS = "127.0.0.1"; // public final static String SERVER_ADDRESS = "www.wigoule.com"; //上傳時讀到服務器內存中設定的限制(與服務器配置成正比 與同時上傳的人數成反比關係)
    public final static int SIZE_THRESHOLD = 64*1024; //3des加密24字節祕鑰
    public final static byte[] keyBytes = {0x11, 0x22, 0x4F, 0x58, (byte)0x88, 0x10, 0x40, 0x38 , 0x28, 0x25, 0x79, 0x51, (byte)0xCB, (byte)0xDD, 0x55, 0x66 , 0x77, 0x29, 0x74, (byte)0x98, 0x30, 0x40, 0x36, (byte)0xE2}; }

logFile.java

package fe.client.pay.alipay.util; import java.io.FileWriter; import java.io.IOException; import fe.client.pay.alipay.config.AlipayConfig; public class logFile { /** * 寫日誌，方便測試（看網站需求，也能夠改爲把記錄存入數據庫） * @param sWord 要寫入日誌裏的文本內容 */
    public static void logResult(String sWord) { FileWriter writer = null; try { writer = new FileWriter(AlipayConfig.log_path + "alipay_log_" + System.currentTimeMillis()+".txt"); writer.write(sWord); } catch (Exception e) { e.printStackTrace(); } finally { if (writer != null) { try { writer.close(); } catch (IOException e) { e.printStackTrace(); } } } } }

AlipayServlet.java

package fe.client.pay.alipay.sevice; import java.io.IOException; import java.net.URLDecoder; import java.net.URLEncoder; import fe.client.pay.alipay.config.AlipayConfig; import fe.client.pay.tool.Constants; import fe.client.pay.tool.NumberTool; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import org.apache.log4j.Logger; import com.alipay.api.AlipayApiException; import com.alipay.api.AlipayClient; import com.alipay.api.DefaultAlipayClient; import com.alipay.api.domain.AlipayTradeWapPayModel; import com.alipay.api.request.AlipayTradeWapPayRequest; import fe.project.ProjectCommonUtil; @WebServlet(name = "alipayServlet", urlPatterns = "/alipayServlet") public class AlipayServlet extends HttpServlet { private static final long serialVersionUID = 1L; private static final Logger logger = Logger.getLogger(AlipayServlet.class); ProjectCommonUtil util=new ProjectCommonUtil(); public void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { super.service(request, response); } public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException{ doPost(request, response); } /** * 商品訂單支付 */
    public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException{ String notifyUrl = "http://"+"2ec17585.ngrok.io"+"/alinotifyServlet"; String returnUrl = "http://"+"2ec17585.ngrok.io"+"/zhyq/client/alipay/jsp/return_jsp.jsp"; try { Pay(notifyUrl,returnUrl,request,response); } catch (Exception e) { // TODO Auto-generated catch block
 e.printStackTrace(); } } /** * 支付寶支付接口 * @Description: TODO * @param @return * @param @throws Exception * @return String * @throws * @author 鄺梓榮 * @date 2018-11-19 */
    public String Pay(String notifyUrl, String returnUrl,HttpServletRequest request, HttpServletResponse response) throws Exception { request.setCharacterEncoding("UTF-8"); // 付款金額，必填
        String total_amount=new String(request.getParameter("money").getBytes("ISO-8859-1"),"UTF-8"); //自定義參數，可空
        String passback_params = new String(request.getParameter("orderIds").getBytes("ISO-8859-1"),"UTF-8"); // 商戶訂單號，商戶網站訂單系統中惟一訂單號，必填
        String out_trade_no = NumberTool.getCurrTime(); // 商品描述，可空
        String body = "訂單支付"; // 訂單名稱，必填
        String subject = "購樂網商品支付"; // 超時時間 可空
       String timeout_express="2m"; // 銷售產品碼 必填
        String product_code="QUICK_WAP_WAY"; // SDK 公共請求類，包含公共請求參數，以及封裝了簽名與驗籤，開發者無需關注簽名與驗籤 //調用RSA簽名方式
        AlipayClient client = new DefaultAlipayClient(AlipayConfig.URL, AlipayConfig.APPID, AlipayConfig.RSA_PRIVATE_KEY, AlipayConfig.FORMAT, AlipayConfig.CHARSET, AlipayConfig.ALIPAY_PUBLIC_KEY,AlipayConfig.SIGNTYPE); AlipayTradeWapPayRequest alipay_request=new AlipayTradeWapPayRequest(); // 封裝請求支付信息
        AlipayTradeWapPayModel model = new AlipayTradeWapPayModel(); model.setOutTradeNo(out_trade_no); model.setSubject(subject); model.setTotalAmount(total_amount); model.setBody(body); model.setTimeoutExpress(timeout_express); model.setProductCode(product_code); model.setPassbackParams(URLEncoder.encode(passback_params,"UTF-8")); alipay_request.setBizModel(model); // 設置異步通知地址
 alipay_request.setNotifyUrl(notifyUrl); // 設置同步地址
 alipay_request.setReturnUrl(returnUrl); // form表單生產
        String form = ""; try { // 調用SDK生成表單
            form = client.pageExecute(alipay_request).getBody(); response.setContentType("text/html;charset=" + AlipayConfig.CHARSET); response.getWriter().write(form);//直接將完整的表單html輸出到頁面 
 response.getWriter().flush(); response.getWriter().close(); } catch (AlipayApiException e) { // TODO Auto-generated catch block
 e.printStackTrace(); } return null; } }

AlinotifyServlet.java

package fe.client.pay.alipay.sevice; import java.io.IOException; import java.io.PrintWriter; import java.net.URLDecoder; import java.net.URLEncoder; import java.util.HashMap; import java.util.Iterator; import java.util.Map; import fe.client.pay.alipay.config.AlipayConfig; import fe.client.pay.tool.Constants; import fe.client.pay.tool.NumberTool; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import org.apache.log4j.Logger; import com.alipay.api.AlipayApiException; import com.alipay.api.AlipayClient; import com.alipay.api.DefaultAlipayClient; import com.alipay.api.domain.AlipayTradeWapPayModel; import com.alipay.api.internal.util.AlipaySignature; import com.alipay.api.request.AlipayTradeWapPayRequest; import fe.dao.Dao; import fe.project.ProjectCommonUtil; import fe.res.ResourceManage; @WebServlet(name = "alinotifyServlet", urlPatterns = "/alinotifyServlet") public class AlinotifyServlet extends HttpServlet { private static final long serialVersionUID = 1L; private static final Logger logger = Logger.getLogger(AlinotifyServlet.class); ProjectCommonUtil util=new ProjectCommonUtil(); public void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { super.service(request, response); } public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException{ doPost(request, response); } /** * 商品訂單支付 */
    public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException{ try { Goods(request, response); } catch (Exception e) { // TODO Auto-generated catch block
 e.printStackTrace(); } } /** * 處理商品訂單 * @throws Exception */
    public void Goods(HttpServletRequest request, HttpServletResponse response) throws Exception { //獲取支付寶POST過來反饋信息
        Map<String,String> params = new HashMap<String,String>(); Map requestParams = request.getParameterMap(); for (Iterator iter = requestParams.keySet().iterator(); iter.hasNext();) { String name = (String) iter.next(); String[] values = (String[]) requestParams.get(name); String valueStr = ""; for (int i = 0; i < values.length; i++) { valueStr = (i == values.length - 1) ? valueStr + values[i] : valueStr + values[i] + ","; } //亂碼解決，這段代碼在出現亂碼時使用。若是mysign和sign不相等也能夠使用這段代碼轉化 //valueStr = new String(valueStr.getBytes("ISO-8859-1"), "gbk");
            params.put(name, valueStr); } //獲取支付寶的通知返回參數，可參考技術文檔中頁面跳轉同步通知參數列表(如下僅供參考)//
            //商戶訂單號
            String out_trade_no = new String(request.getParameter("out_trade_no").getBytes("ISO-8859-1"),"UTF-8"); //支付寶交易號
            String trade_no = new String(request.getParameter("trade_no").getBytes("ISO-8859-1"),"UTF-8"); //交易狀態
            String trade_status = new String(request.getParameter("trade_status").getBytes("ISO-8859-1"),"UTF-8"); System.out.println("==================================================================================="); System.out.println("000000000000000000000000000000000000000000000000====="+trade_status); System.out.println("==================================================================================="); //獲取支付寶的通知返回參數，可參考技術文檔中頁面跳轉同步通知參數列表(以上僅供參考)//
            //計算得出通知驗證結果 //boolean AlipaySignature.rsaCheckV1(Map<String, String> params, String publicKey, String charset, String sign_type)
            boolean verify_result = AlipaySignature.rsaCheckV1(params, AlipayConfig.ALIPAY_PUBLIC_KEY, AlipayConfig.CHARSET, "RSA2"); PrintWriter out = response.getWriter(); if(verify_result){//驗證成功
                //////////////////////////////////////////////////////////////////////////////////////////                 //交易狀態TRADE_FINISHED的通知觸發條件是商戶簽約的產品不支持退款功能的前提下，買家付款成功；或者，商戶簽約的產品支持退款功能的前提下，交易已經成功而且已經超過可退款期限。 //狀態TRADE_SUCCESS的通知觸發條件是商戶簽約的產品支持退款功能的前提下，買家付款成功
                if(trade_status.equals("TRADE_FINISHED")){ //判斷該筆訂單是否在商戶網站中已經作過處理 //若是沒有作過處理，根據訂單號（out_trade_no）在商戶網站的訂單系統中查到該筆訂單的詳細，並執行商戶的業務程序 //請務必判斷請求時的total_fee、seller_id與通知時獲取的total_fee、seller_id爲一致的
                } else if (trade_status.equals("TRADE_SUCCESS")){ String orderIds = (String) params.get("passback_params"); String[] orderId = orderIds.split(","); for(int i=0; i<orderId.length; i++){ // Order o = orderService.getOrder(Integer.parseInt(orderId[i])); // o.setStatus("1"); // orderService.updateOrder(o);
 } } out.flush(); out.println("success");    //請不要修改或刪除
                //////////////////////////////////////////////////////////////////////////////////////////             }else{//驗證失敗
                out.println("fail"); } } }

index.jsp吧（這個頁面其中有不少其餘引入的東西能夠不用的，由於頁面是我直接複製一個項目的頁面改一下body，我就懶得改上面了）

<%@ page contentType="text/html; charset=UTF-8" language="java" errorPage="" %>
<jsp:directive.page import="fe.assets.FixedAssetsReport"/>
<jsp:directive.page import="fe.zhyq.asset.service.AssetReportService"/>
<jsp:directive.page import="fe.dao.DataTable"/>
<jsp:directive.page import="fe.dao.FieldSet"/>
<jsp:directive.page import="fe.datapool.DataPool"/>
<jsp:directive.page import="fe.res.ResourceManage"/>
<jsp:directive.page import="fe.sys.User"/>
<jsp:directive.page import="fe.util.HtmlFormat"/>
<jsp:directive.page import="java.util.Date"/>
<jsp:directive.page import="java.util.Iterator"/>
<!DOCTYPE html>
<html>
<head>
    <jsp:include flush="true" page="/common/header39.jsp"/>
    <script type='text/javascript' src='/js39/flyrise.report.merge.js'></script>
    <link rel="stylesheet" type="text/css" href="/css39/bg_newsample_blue.css"/>
    <link rel="stylesheet" type="text/css" href="/css39/report.css"/>
    <script type="text/javascript" src="/js39/flyrise.organizeSelecter.js"></script>
    
    <script type="text/javascript" charset="utf-8" src="/js39/tag/flyrise.pagetag.js"></script>
    <script type="text/javascript" charset="utf-8" src="/js39/flyrise.feajax.js"></script>
    <script src="/js39/angularjs/angular.min.js"></script>
    <script src="/zhyq/js/syspublic.js"></script>
    
    
    <style type="text/css">
        *{ margin:0; padding:0; } ul,ol{ list-style:none; } body{ font-family: "Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif; } .hidden{ display:none; } .new-btn-login-sp{ padding: 1px; display: inline-block; width: 75%; } .new-btn-login { background-color: #02aaf1; color: #FFFFFF; font-weight: bold; border: none; width: 100%; height: 30px; border-radius: 5px; font-size: 16px; } #main{ width:100%; margin:0 auto; font-size:14px; } .red-star{ color:#f00; width:10px; display:inline-block; } .null-star{ color:#fff; } .content{ margin-top:5px; } .content dt{ width:100px; display:inline-block; float: left; margin-left: 20px; color: #666; font-size: 13px; margin-top: 8px; } .content dd{ margin-left:120px; margin-bottom:5px; } .content dd input { width: 85%; height: 28px; border: 0; -webkit-border-radius: 0; -webkit-appearance: none; } #foot{ margin-top:10px; position: absolute; bottom: 15px; width: 100%; } .foot-ul{ width: 100%; } .foot-ul li { width: 100%; text-align:center; color: #666; } .note-help { color: #999999; font-size: 12px; line-height: 130%; margin-top: 5px; width: 100%; display: block; } #btn-dd{ margin: 20px; text-align: center; } .foot-ul{ width: 100%; } .one_line{ display: block; height: 1px; border: 0; border-top: 1px solid #eeeeee; width: 100%; margin-left: 20px; } .am-header { display: -webkit-box; display: -ms-flexbox; display: box; width: 100%; position: relative; padding: 7px 0; -webkit-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; background: #1D222D; height: 50px; text-align: center; -webkit-box-pack: center; -ms-flex-pack: center; box-pack: center; -webkit-box-align: center; -ms-flex-align: center; box-align: center; } .am-header h1 { -webkit-box-flex: 1; -ms-flex: 1; box-flex: 1; line-height: 18px; text-align: center; font-size: 18px; font-weight: 300; color: #fff; } </style>
</head>
<body ng-app="zhyq_reportproject_app" ng-controller="zhyq_reportproject_controller" style="margin:0px; overflow:hidden;" class="report-tab-box">
<div id="main">
        <form name=alipayment action='/alipayServlet' method='post' target="_blank">
            <div id="body" style="clear:left">
                <dl class="content">
                    <dt>商戶訂單號：</dt>
                    <dd>
                        <input id="orderIds" name="orderIds" />
                    </dd>
                    <hr class="one_line">
                    <dt>訂單名稱：</dt>
                    <dd>
                        <input id="WIDsubject" name="WIDsubject" />
                    </dd>
                    <hr class="one_line">
                    <dt>付款金額：</dt>
                    <dd>
                        <input id="money" name="money" />
                    </dd>
                    <hr class="one_line"/>
                    <dt>商品描述：</dt>
                    <dd>
                        <input id="WIDbody" name="WIDbody" />
                    </dd>
                    <hr class="one_line">
                    <dt></dt>
                    <dd id="btn-dd">
                        <span class="new-btn-login-sp">
                            <button class="new-btn-login" type="submit" style="text-align:center;">確 認</button>
                        </span>
                        <span class="note-help">若是您點擊「確認」按鈕，即表示您贊成該次的執行操做。</span>
                    </dd>
                </dl>
            </div>
        </form>
        <div id="foot">
            <ul class="foot-ul">
                <li> 支付寶版權全部 2015-2018 ALIPAY.COM </li>
            </ul>
        </div>
    </div>
<script type="text/javascript"> function GetDateNow() { var vNow = new Date(); var sNow = ""; sNow += String(vNow.getFullYear()); sNow += String(vNow.getMonth() + 1); sNow += String(vNow.getDate()); sNow += String(vNow.getHours()); sNow += String(vNow.getMinutes()); sNow += String(vNow.getSeconds()); sNow += String(vNow.getMilliseconds()); document.getElementById("orderIds").value = sNow; document.getElementById("WIDsubject").value = "手機網站支付測試商品"; document.getElementById("money").value = "0.01"; document.getElementById("WIDbody").value = "購買測試商品0.01元"; } GetDateNow(); </script>
</body>
</html>

返回頁面就不展現代碼了，反正什麼均可以

至於包，要引入支付寶的兩個sdk包

最後！總結！！！

若是你仍是以爲有點複雜，那我直接告訴你改哪些地方就能夠直接運行吧！

支付包H5支付的就說到這裏吧，但願你們多多支持，

有不懂的，或者想要源碼的能夠點擊QQ在線聯繫找我喔

下一篇（微信H5支付demo）