支付寶H5支付

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

登入地址：https://open.alipay.com/platform/home.htm

1、怎麼註冊一個支付寶應用？看圖（至於應用裡面需要的資料你就跟著填就ok了，我就不多講了，關於公鑰祕鑰這些，支付寶也有它自己的工具自動生成）

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

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

3、思路描述

支付寶的h5支付比微信的h5支付簡單很多，下面先跟大家看看專案檔案數量吧

就7個檔案左右就可以實現支付了，是不是很簡單呢？（下一篇是微信h5就沒有那麼簡單了）

接著我說說裡面每個檔案他們的作用後再看程式碼吧！！！

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）