支付寶支付--沙箱支付教程+案例 | PC端網站支付（超級詳細版本）
文章目錄
javascript
-
- 一、百度搜索支付寶沙箱環境
- 二、點擊沙箱環境
- 三、生成RSA祕鑰
- 四、設置應用網關、生成AES密鑰
- 五、下載手機網站支付 DEMO
- 六、建立Web項目，集成支付
- 七、修改配置文件，編寫測試案例（重要）
- 八、查看效果
- 1、什麼是沙箱環境
- 2、如何快速使用沙箱環境
- 3、 結束語
1、什麼是沙箱環境
螞蟻沙箱環境 (Beta) 是協助開發者進行接口功能開發及主要功能聯調的輔助環境。css
沙箱環境模擬了開放平臺部分產品的主要功能和主要邏輯。在開發者應用上線審覈前，開發者能夠根據自身需求，先在沙箱環境中瞭解、組合和調試各類開放接口，進行開發調試工做，從而幫助開發者在應用上線審覈完成後，能更快速、更順利的完成線上調試和驗收。html
注意：java
- 因爲沙箱爲模擬環境，在沙箱完成接口開發及主要功能調試後，請務必在螞蟻正式環境進行完整的功能驗收測試。全部返回碼及業務邏輯以正式環境爲準。
- 爲保證沙箱穩定，沙箱環境測試數據會進行按期數據清理。Beta 測試階段每週日中午 12 點至每週一中午 12點爲維護時間，在此時間內沙箱環境部分功能可能不可用，敬請諒解。
- 請勿在沙箱進行壓力測試，以避免觸發相應的限流措施，致使沒法正常使用沙箱環境。
- 沙箱支持的各個開放產品，沙箱使用的特別說明請參見各產品的快速接入文檔章節。
以上內容來自沙箱支付官網介紹web
2、如何快速使用沙箱環境
一、百度搜索支付寶沙箱環境
你也能夠直接點擊此連接：沙箱環境地址spring
二、點擊沙箱環境
若是你未登陸的話首先會跳轉到登陸界面，使用支付寶掃碼完成登陸便可。未進行認證的帳號還須要完成身份認證。sql
完成以上步驟後進入下圖所示的頁面，選擇服務對象。若是是我的的話選擇自研開發服務便可。數據庫
最後，檢查沙箱帳號中賣家和買家帳號是否已經生成。express
三、生成RSA祕鑰
點擊沙箱應用 - 》信息配置 - 》必看部分 - 》設置apache
這裏選擇公鑰，生成方式使用支付寶祕鑰生成器，工具下載和具體操做請看：https://opendocs.alipay.com/open/291/106097/
使用支付寶祕鑰生成器生成公鑰時注意如下幾點：
四、設置應用網關、生成AES密鑰
開發環境：https://openapi.alipay.com/gateway.do
沙箱環境：https://openapi.alipaydev.com/gateway.do （如今用的）
五、下載手機網站支付 DEMO
手機網站支付 DEMO下載地址：https://opendocs.alipay.com/open/54/106682，這裏選擇JAVA版。
六、建立Web項目，集成支付
本次demo使用SSM框架，具體搭建步驟請看博主另外一篇文章：《手把手教你搭建SSM框架（Eclipse版）》，公衆號【C you again】回覆「SSM」下載框架源碼。
完成項目基本框架搭建之後，就能夠集成支付模塊了，具體操做以下：
- 在src目錄下新建 com.alipay.config 包並把步驟5中下載項目src.com.alipay.config包中的 AlipayConfig.java 複製到此包路徑下。
- 在src目錄下新建 com.alipay.util 包並把步驟5中下載項目的 src.com.alipay.util 包中的logFile.java 複製到此包路徑下。
- 將步驟5下載的項目中WebContent\WEB-INF\lib文件夾下的全部jar包放到此項目的WebContent\WEB-INF\lib下。
- 將下圖中選中的文件複製到 WebContent 目錄下。
完成以上四步後就能夠啓動項目進行測試了，訪問地址：http://localhost:8080//ssmDemo/index.html，若是發現訪問jsp頁面正常，而html頁面出現404時，在web.xml中添加如下代碼便可：
<servlet-mapping> <servlet-name>default</servlet-name> <url-pattern>*.html</url-pattern> <url-pattern>*.css</url-pattern> <url-pattern>*.js</url-pattern> </servlet-mapping>
看到此圖就說明集成成功了哦！
七、修改配置文件，編寫測試案例（重要）
接下來是實現支付的重要步驟，修改com.alipay.config下的 AlipayConfig.java
商戶ID在步驟3中能夠看到，須要填寫本身的
// 商戶appidpublic static String APPID = "此處填寫商戶ID";
此處的值在完成步驟3時已經得到，點擊 打開祕鑰文件路徑 可看到
// 私鑰 pkcs8格式的public static String RSA_PRIVATE_KEY = "此處填寫應用祕鑰";
服務器異步通知頁面配成咱們本身的項目路徑便可
// 服務器異步通知頁面路徑 需http://或者https://格式的完整路徑，不能加?id=123這類自定義參數，必須外網能夠正常訪問public static String notify_url = "http://localhost:8080/ssmDemo/notify_url.jsp";
頁面跳轉同步通知頁面路徑也配成咱們本身的項目路徑便可，表示支付完成以後要作的事（例如：將訂單信息寫入數據庫）
// 頁面跳轉同步通知頁面路徑 需http://或者https://格式的完整路徑，不能加?id=123這類自定義參數，必須外網能夠正常訪問 商戶能夠自定義同步跳轉地址public static String return_url = "http://localhost:8080/ssmDemo/complete";
請求網關地址修改成沙箱環境網關
// 請求網關地址public static String URL = "https://openapi.alipaydev.com/gateway.do";
支付寶公鑰在完成步驟3時已經得到，注意不是應用公鑰
如上圖，點擊查看便可得到支付寶公鑰：
// 支付寶公鑰public static String ALIPAY_PUBLIC_KEY = "須要換成本身的支付寶公鑰";
到這裏配置就完成了，接下來開始編寫測試案例。
在WebContent下新建 payDemo.html
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>支付寶支付案例</title></head><style>.main{width: 600px;height: 350px;border: solid 2px black;position: absolute; top: 50%;left: 50%;margin-top: -175px;margin-left: -300px;padding: 20px;float: left;}.title{width: 100%;font-size: 20px;font-weight: bold;text-align: center;margin-bottom: 20px;}.row{width: 51%;margin-top: 20px;float: left;margin-left: 20%;}.row input{width: 70%;height: 30px;float: left;display: block;box-sizing: border-box;}.row label{width: 30%;display: block;float: left;}.row button{float: left;height: 30px;}.row .left{width: 20%;margin: 0 4% 0 30%;}.row .right{width: 46%;}</style><script>
window.onload=function(){randomShopId(); //隨機產生商品Id}function randomShopId(){var shopId="cya_"+new Date().getTime();var shop=document.getElementById('shop-id');
shop.value=shopId }function reload(){
location.reload()}</script><body><div class="main"><div class="title">支付寶 網站支付案例，公衆號【C you again】做品</div><form method="post" action="/ssmDemo/pay"><div class="row"><label>訂單ID：</label><input readonly="readonly" name="orderId" id="shop-id"/></div><div class="row"><label>商品名稱：</label><input name="shopName" placeholder="請輸入商品名稱" /></div><div class="row"><label>商品價格：</label><input name="shopPrice" placeholder="請輸入商品價格" /></div><div class="row"><label>商品描述：</label><input name="orderDesc" placeholder="請輸入商品描述" /></div><div class="row"><button onclick="reload()" class="left" type="button">重置</button><button class="right" type="submit">去購買</button></div></form><div style="width:100%;margin-left: 20%;padding:20px 0;float:left;"><a style="display:block;float:left;" href="getOrders">查看全部訂單信息</a></div></div></body></html>
在 com.cya.entity 包下新建 Order.java 類
package com.cya.entity;public class Order {private String orderId; //訂單Idprivate String shopName; //商品名稱private Double shopPrice; //商品價格private String orderTime; //下單時間private String orderDesc; //商品描述public String getOrderId() {return orderId;}public void setOrderId(String orderId) {this.orderId = orderId;}public String getShopName() {return shopName;}public void setShopName(String shopName) {this.shopName = shopName;}public Double getShopPrice() {return shopPrice;}public void setShopPrice(Double shopPrice) {this.shopPrice = shopPrice;}public String getOrderTime() {return orderTime;}public void setOrderTime(String orderTime) {this.orderTime = orderTime;}public String getOrderDesc() {return orderDesc;}public void setOrderDesc(String orderDesc) {this.orderDesc = orderDesc;}@Overridepublic String toString() {return "Order [orderId=" + orderId + ", shopName=" + shopName + ", shopPrice=" + shopPrice + ", orderTime="+ orderTime + ", orderDesc=" + orderDesc + "]";}}
在test數據庫中新建order表
在 com.cya.mapper包下新建 IPayMapper.java 接口
package com.cya.mapper;import java.util.List;import com.cya.entity.Order;import com.cya.entity.Person;public interface IPayMapper {public void insertOrder(Order order);public List<Order> getOrder();}
在 com.cya.mapper包下新建 IPayMapper.xml文件
<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd" ><mapper namespace="com.cya.mapper.IPayMapper">
<sql id="orderColumns">
o.order_id AS "orderId",
o.shop_name AS "shopName",
o.shop_price AS "shopPrice",
o.order_time AS "orderTime",
o.order_desc AS "orderDesc" </sql>
<select id="getOrder" resultType="com.cya.entity.Order"> select <include refid="orderColumns"></include> from `order` as o </select>
<insert id="insertOrder" parameterType="com.cya.entity.Order">
insert into `order`(order_id,shop_name,shop_price,order_time,order_desc)
values(#{orderId},#{shopName},#{shopPrice},#{orderTime},#{orderDesc}) </insert></mapper>
在 com.cya.service包下新建 IPayService.java接口
package com.cya.service;import java.util.List;import com.cya.entity.Order;import com.cya.entity.Person;public interface IPayService {public void insertOrder(Order order);public List<Order> getOrder();}
在 com.cya.service.impl包下新建 IPayService.java接口的實現類 PayServiceImpl.java
package com.cya.service.impl;import java.util.List;import org.springframework.beans.factory.annotation.Autowired;import org.springframework.stereotype.Service;import com.cya.entity.Order;import com.cya.entity.Person;import com.cya.mapper.IPayMapper;import com.cya.mapper.IPersonMapper;import com.cya.service.IPayService;import com.cya.service.IPersonService;@Service()public class PayServiceImpl implements IPayService{@Autowiredprivate IPayMapper payMapper;@Overridepublic void insertOrder(Order order) {// TODO Auto-generated method stub
System.out.println(order);
payMapper.insertOrder(order);}@Overridepublic List<Order> getOrder() {// TODO Auto-generated method stubreturn payMapper.getOrder();}}
在 com.cya.controller 包下新建 PayController.java 類
package com.cya.controller;import java.io.IOException;import java.text.SimpleDateFormat;import java.util.Date;import java.util.List;import javax.annotation.Resource;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import javax.servlet.http.HttpSession;import org.springframework.http.HttpRequest;import org.springframework.stereotype.Controller;import org.springframework.web.bind.annotation.RequestMapping;import org.springframework.web.bind.annotation.ResponseBody;import com.cya.entity.Order;import com.cya.entity.Person;import com.cya.service.IPayService;import com.sun.org.apache.bcel.internal.generic.NEW;@Controller@ResponseBodypublic class PayController {@Resourceprivate IPayService payService;@RequestMapping("pay")public void pay( HttpServletRequest request, HttpServletResponse response) {
String orderId=""; //訂單ID
String shopName="無名商品"; //商品名稱
Double shopPrice=0.0; //商品價格
String orderDesc="暫無描述"; //商品描述if(request.getParameter("orderId") != null && !request.getParameter("orderId").equals("")) {
orderId=request.getParameter("orderId");}if(request.getParameter("shopName") != null && !request.getParameter("shopName").equals("")) {
shopName=request.getParameter("shopName");}if(request.getParameter("shopPrice") != null && !request.getParameter("shopPrice").equals("")) {
shopPrice=Double.valueOf(request.getParameter("shopPrice"));}if(request.getParameter("orderDesc") != null && !request.getParameter("orderDesc").equals("")) {
orderDesc=request.getParameter("orderDesc");}//建立訂單對象，設置相關數據
Order order=new Order();
order.setOrderId(orderId);
order.setShopName(shopName);
order.setShopPrice(shopPrice);
order.setOrderTime(getNowTime());
order.setOrderDesc(orderDesc);//把訂單信息保存到httpSession中
HttpSession httpSession=request.getSession();
httpSession.setAttribute("order", order);//跳轉到支付頁面try {
System.out.println("re:"+request.getSession().getAttribute("order"));
response.sendRedirect(request.getContextPath()+"/wappay/pay.jsp");} catch (IOException e) {// TODO Auto-generated catch block
e.printStackTrace();}}//完成支付，寫入數據庫@RequestMapping("complete")public void complete(HttpServletRequest request, HttpServletResponse response) {
//從session中獲取定點信息
Order order=(Order)request.getSession().getAttribute("order");try {//將數據插入到訂單表中
payService.insertOrder(order);
response.sendRedirect(request.getContextPath()+"/payDemo.html");} catch (Exception e) {// TODO: handle exception
e.printStackTrace();}}//獲取全部訂單@RequestMapping("getOrders")public List<Order> getOrders(){
List<Order>orders=payService.getOrder();
System.out.println("orders"+orders);return orders;}public String getNowTime() {//格式化日期 patternSimpleDateFormat formatter = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");//HH24小時制、hh12小時制String eventDate;eventDate = formatter.format(new Date());return eventDate;}}
修改WebContent/wappay/pay.jsp頁面
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@page import="com.alipay.config.AlipayConfig" %>
<%@page import="com.alipay.api.AlipayClient"%>
<%@page import="com.alipay.api.DefaultAlipayClient"%>
<%@page import="com.alipay.api.AlipayApiException"%>
<%@page import="com.alipay.api.response.AlipayTradeWapPayResponse"%>
<%@page import="com.alipay.api.request.AlipayTradeWapPayRequest"%>
<%@page import="com.alipay.api.domain.AlipayTradeWapPayModel" %>
<%@page import="com.alipay.api.domain.AlipayTradeCreateModel"%>
<%
/*
新增如下代碼
*/
%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@page import="com.cya.entity.Order"%>
<%
/* *
* 功能：支付寶手機網站支付接口(alipay.trade.wap.pay)接口調試入口頁面
* 版本：2.0
* 修改日期：2016-11-01
* 說明：
* 如下代碼只是爲了方便商戶測試而提供的樣例代碼，商戶能夠根據本身網站的須要，按照技術文檔編寫,並不是必定要使用該代碼。
請確保項目文件有可寫權限，否則打印不了日誌。
*/
%>
<%
if(request.getParameter("WIDout_trade_no")!=null){
// 商戶訂單號，商戶網站訂單系統中惟一訂單號，必填
String out_trade_no = new String(request.getParameter("WIDout_trade_no").getBytes("ISO-8859-1"),"UTF-8");
// 訂單名稱，必填
String subject = new String(request.getParameter("WIDsubject").getBytes("ISO-8859-1"),"UTF-8");
System.out.println(subject);
// 付款金額，必填
String total_amount=new String(request.getParameter("WIDtotal_amount").getBytes("ISO-8859-1"),"UTF-8");
// 商品描述，可空
String body = new String(request.getParameter("WIDbody").getBytes("ISO-8859-1"),"UTF-8");
// 超時時間 可空
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);
alipay_request.setBizModel(model);
// 設置異步通知地址
alipay_request.setNotifyUrl(AlipayConfig.notify_url);
// 設置同步地址
alipay_request.setReturnUrl(AlipayConfig.return_url);
// 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();
}
}
%><!DOCTYPE html><html><head><title>支付寶手機網站支付接口</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><style>*{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 text=#000000 bgColor="#ffffff" leftMargin=0 topMargin=4><header class="am-header"><h1>支付寶手機網站支付接口快速通道(接口名：alipay.trade.wap.pay)</h1></header><div id="main"><form name=alipayment action='' method=post target="_blank"><div id="body" style="clear:left"><dl class="content"><dt>商戶訂單號：</dt><dd><input id="WIDout_trade_no" name="WIDout_trade_no" value="${sessionScope.order.orderId}"/></dd><hr class="one_line"><dt>訂單名稱：</dt><dd><input id="WIDsubject" name="WIDsubject" value="${sessionScope.order.shopName}" /></dd><hr class="one_line"><dt>付款金額：</dt><dd><input id="WIDtotal_amount" name="WIDtotal_amount" value="${sessionScope.order.shopPrice}" /></dd><hr class="one_line"/><dt>商品描述：</dt><dd><input id="WIDbody" name="WIDbody" value="${sessionScope.order.orderDesc}" /></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></body><script language="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("WIDout_trade_no").value = sNow;//document.getElementById("WIDsubject").value = "手機網站支付測試商品";//document.getElementById("WIDtotal_amount").value = "0.01"; // document.getElementById("WIDbody").value = "購買測試商品0.01元";}GetDateNow();</script></html>
配置修改和測試案例完成後，就來看看最終效果吧！
八、查看效果
啓動項目，瀏覽器地址欄訪問：http://localhost:8080/ssmDemo/payDemo.html，若是以上步驟無誤，會顯示以下界面：
輸入：
商品名稱：vivo x9
商品價格：2599.0
商品描述：新品上市，測試用例
點擊去購買效果圖以下：
繼續點擊肯定，跳轉到以下頁面：
選擇支付方式，這裏以瀏覽器支付爲例，輸入帳號和登陸密碼（查看步驟2），跳轉到訂單詳情頁面：
繼續點擊確認付款，輸入支付密碼等待支付完成
出現上圖界面，說明支付成功，等待幾秒後跳轉到首頁面，點擊查看全部訂單信息能夠查詢到全部訂單。這裏只作簡單展現。
3、 結束語
以上就是支付寶PC端完成支付功能的全部教程了，若是你有疑問請在後臺私信，下載本教程源碼請在公衆號【C you again】回覆「Alipay」。另外，因博主技術有限，文章中可能有不妥之處，歡迎交流。歡迎各位大佬轉載本文章，轉載時註明出處！製做不易，若是文章對你有幫助，記得一鍵三連！
相關文章
- 1. 支付寶支付--沙箱支付教程+案例 | PC端網站支付（超級詳細版本）
- 2. 支付寶沙箱支付
- 3. 支付寶——PC端支付
- 4. 支付寶支付-支付寶PC端掃碼支付
- 5. PHP 使用沙箱支付寶支付
- 6. 支付寶沙箱環境中支付
- 7. 支付寶支付之沙箱測試
- 8. SpringBoot集成支付寶沙箱支付
- 9. 支付寶支付接口-沙箱環境-網站支付-Demo測試-Java版
- 10. vue pc支付寶支付
- 更多相關文章...
- • SVN分支 - SVN 教程
- • Git 分支管理 - Git 教程
- • Github 簡明教程
- • Java 8 Stream 教程
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. 支付寶支付--沙箱支付教程+案例 | PC端網站支付（超級詳細版本）
- 2. 支付寶沙箱支付
- 3. 支付寶——PC端支付
- 4. 支付寶支付-支付寶PC端掃碼支付
- 5. PHP 使用沙箱支付寶支付
- 6. 支付寶沙箱環境中支付
- 7. 支付寶支付之沙箱測試
- 8. SpringBoot集成支付寶沙箱支付
- 9. 支付寶支付接口-沙箱環境-網站支付-Demo測試-Java版
- 10. vue pc支付寶支付