在看這篇文章之前，希望你先看上一篇文章支付寶支付（一）—H5手機網站支付2.0（alipay.trade.wap.pay） ，涉及到的部分准備工作這里就不再重復了，有疑問的看上一篇文章或者查閱官方文檔。
一、PC收銀台產品介紹
這篇文章我們先來介紹一下支付寶Page支付（也叫作電腦網站支付）。
電腦網站支付產品幫助用戶在商家 PC 網站購買商品支付時，跳轉到支付寶 PC 網站收銀台完成付款。 交易資金直接打入商家支付寶賬戶，實時到賬。
用戶可以通過輸入支付寶賬號、密碼完成支付。也可以通過支付寶APP掃碼完成支付。
用戶交易款項即時到賬，提供退款、資金分賬、對賬等配套服務。
1、應用場景
以下流程僅供參考，開發者可根據自身網站進行調整：
步驟1：買家在商戶網站選擇需購買的商品，填寫訂單信息后，點擊立即購買，如下圖所示。
步驟2：網頁跳轉到支付寶收銀台頁面，此時有兩種付款方式供用戶選擇：
-
用戶可以使用支付寶 APP 掃一掃屏幕二維碼，待手機提示付款后選擇支付工具輸入密碼即可完成支付，如圖1所示；
-
如果不使用手機支付，也可以點擊圖 1 頁面右側的 登錄賬戶付款，輸入支付寶賬號和支付密碼登錄 PC 收銀台，如圖 2 所示。
步驟3：用戶選擇付款方式，輸入支付密碼后點擊 確認付款，跳轉到付款成功頁后則表示付款成功。
例如我們常用的優酷網頁版購買會員即可以使用電腦網站支付，露出前置支付寶二維碼掃碼支付，開發者可以自行前往體驗。
2、准入條件
-
企業支付寶賬戶或個體工商戶均可申請，
-
提供真實有效的營業執照，且支付寶賬戶名稱需與營業執照主體一致；
-
提供能正常訪問的網站地址且頁面顯示完整，且頁面有完整商品和價格信息；
-
網站通過ICP備案，有明確的運營內容與完整的商品和價格信息。
注意： 團購類網站不支持個體商家簽約。
3、計費模式
電腦網站支付的簽約費率如下表所示：
| 服務名稱 | 費率 | 服務期限 |
| 單筆費率 | 0.6% | 1年 |
4、使用說明
電腦網站支付產品包含的接口和描述如下：
| 接口英文名 | 接口中文名 |
|---|---|
| alipay.trade.page.pay | 統一收單下單並支付頁面接口 |
| alipay.trade.refund | 統一收單交易退款接口 |
| alipay.trade.fastpay.refund.query | 統一收單交易退款查詢接口 |
| alipay.trade.query | 統一收單線下交易查詢接口 |
| alipay.trade.close | 統一收單交易關閉接口 |
| alipay.data.dataservice.bill.downloadurl.query | 查詢對賬單下載地址 |
二、准備工作
還是先上官方文檔入口
前四個步驟這里就不再重復了，有興趣有疑問的查看上一篇文章支付寶支付（一）—H5手機網站支付2.0（alipay.trade.wap.pay）
1、創建應用並獲取APPID
2、配置應用環境
3、配置沙箱環境
4、服務端實現（集成並且配置SDK）
5、調用接口
電腦網站支付產品包含兩類API：
頁面跳轉類：需要從前端頁面以Form表單的形式發起請求，瀏覽器會自動跳轉至支付寶的相關頁面（一般是收銀台或簽約頁面），用戶在該頁面完成相關業務操作后再回跳到商戶指定頁面。例如本產品中的電腦網站支付接口alipay.trade.page.pay。
系統調用類：直接從服務端發起HTTP請求，支付寶會同步返回請求結果。例如本產品中的交易查詢等配套API。
6、調用流程圖
三、服務端具體封裝和操作過程
前三個步驟這里就不再重復了，有興趣有疑問的查看上一篇文章支付寶支付（一）—H5手機網站支付2.0（alipay.trade.wap.pay）
1、將支付寶通用參數獨立配置在一個屬性文件中方便管理
2、讀取配置文件信息
3、加載接入參數並初始化AlipayClient
4、利用sdk封裝page支付代碼
通用模塊，就在demo里面的 AliPayUtil.java 里面
/** * alipay.trade.page.pay：統一收單下單並支付頁面接口（PC場景下單並支付） * @param aliPayMap * @return */ public static String alipayTradePagePay(String out_trade_no, String total_amount){ try { //（1）封裝bizmodel信息 AlipayTradePagePayModel model = new AlipayTradePagePayModel(); model.setOutTradeNo(out_trade_no); model.setSubject("支付寶電腦網站支付"); model.setBody("支付寶電腦網站支付"); model.setProductCode("FAST_INSTANT_TRADE_PAY"); model.setTotalAmount(total_amount); model.setTimeoutExpress(staticAliPayProperties.getAli_timeout_express()); //（2）設置請求參數 AlipayTradePagePayRequest alipayRequest = new AlipayTradePagePayRequest(); alipayRequest.setReturnUrl(staticAliPayProperties.getAli_return_url()); alipayRequest.setNotifyUrl(staticAliPayProperties.getAli_notify_url()); alipayRequest.setBizModel(model); //（3）請求 String form = alipayClient.pageExecute(alipayRequest).getBody(); System.out.println("*********************\n返回結果為："+form); return form; } catch (AlipayApiException e) { e.printStackTrace(); return null; } }
PC電腦網站支付和H5手機網站支付的區別重點看我標黃部分
5、模擬支付請求
步驟1：控制層 AliPayController.java 寫請求方法 alipayTradePagePay
步驟2：調取的接口和實現類
注意：
（1）這里我隨機生成了商戶訂單號 out_trade_no，交易金額 total_amount 寫死了，正常業務處理中，我們是根據你的業務實際情況處理
（2）里面涉及到的其他的工具類，最后的demo里面會提供。當然，你也可以自己隨機商城，保持不重復的原則即可
（3）實際操作中，在調取之前，我們需要處理具體的業務邏輯，因為本文只總結支付寶相關的，就不補充了。例如：訂單金額計算處理；商戶訂單和支付寶訂單的關聯和存儲，商戶訂單和支付寶訂單可能是多對一的關系；支付寶訂單需要保存，因為在回調的時候你需要根據支付寶訂單的 out_trade_no 識別支付寶通知的訂單結果；你可以把它存儲在redis或者持久化到數據庫中。
步驟3：模擬支付請求
這里，我是寫了一個html頁面，通過前端請求到后台調取控制層方法模擬實際支付請求的
對於返回的form內容處理方式有多種，這里繼續采取前端處理模式，其他的不做過多說明了，有興趣的看上一篇文章。
6、運行查看測試結果
點擊“統一收單下單並支付頁面”按鈕，其他按鈕功能開發后面有時間會發博文介紹，不過demo里面已經有了，你也可以自己先測試，請求后控制台日志顯示
詳細form內容如下：
<form name="punchout_form" method="post" action="https://openapi.alipaydev.com/gateway.do?charset=utf-8&method=alipay.trade.page.pay&sign=Rj41eaOzYORHmEar8Z%2Fgcc6BLxb%2Buz55KTgKCNfEV3dklhz%2BkvYapS6ZZgLzs1NwO67P7dUz1%2Fv0cvD9%2FrhFiqSC9L4EGI%2Bd7j7TI%2FCEMrbrY8je656YWWT8cH7st8Oh0gtMqGeuAw4UwKIy%2FjBOsTPZXGmQVabLx%2FNLpYE%2BNFJ0%2BGjt%2FOVdjLiEP%2F7swlnTQBVk8%2BVkn1A5UgbaD%2BKWLIoI58%2BeD0sY70BHA%2FB%2Bwh7RUBSfzuDwWC%2FjW%2B%2BXDdcRq4yrifGqzGvaYw%2Fx4lMkdpuuAYzW7F82UZoe7JssHikRFS41b9wy5NA7fnoJoQTjbVBkbKoNFaa2e81ZyrrPUQ%3D%3D&return_url=http%3A%2F%2Ftrt.wgzvip.com%2Fapi%2FaliReturnPay%2FreturnPaySynchronization¬ify_url=http%3A%2F%2Ftrt.wgzvip.com%2Fapi%2FaliReturnPay%2FreturnPayAsynchronous&version=1.0&app_id=2021000116673834&sign_type=RSA2×tamp=2020-08-03+18%3A05%3A37&alipay_sdk=alipay-sdk-java-3.3.87.ALL&format=json"> <input type="hidden" name="biz_content" value="{"body":"支付寶電腦網站支付","out_trade_no":"20200803180537168772054","product_code":"FAST_INSTANT_TRADE_PAY","subject":"支付寶電腦網站支付","timeout_express":"30m","total_amount":"0.01"}"> <input type="submit" value="立即支付" style="display:none" > </form> <script>document.forms[0].submit();</script>
我們可以很清楚的看到，支付寶返回的是一個form表單的內容，我們在前端接收后按照上面前端的處理方法處理后，發現點擊“統一收單下單並支付頁面”按鈕之后，直接跳到了支付寶下面頁面，按照以下步驟操作就行
方式一：沙箱錢包掃描二維碼支付
方拾二：賬號密碼登錄支付
四、同異步結果處理
這部分處理與H5手機網站支付一樣，不再重復啰嗦了，有疑問的查看上一篇文章支付寶支付（一）—H5手機網站支付2.0（alipay.trade.wap.pay）
五、demo示例下載
查看上一篇文章支付寶支付（一）—H5手機網站支付2.0（alipay.trade.wap.pay）