螞蟻沙箱環境 (Beta) 是協助開發者進行接口功能開發及主要功能聯調的輔助環境。javascript
沙箱環境模擬了開放平臺部分產品的主要功能和主要邏輯。在開發者應用上線審覈前,開發者能夠根據自身需求,先在沙箱環境中瞭解、組合和調試各類開放接口,進行開發調試工做,從而幫助開發者在應用上線審覈完成後,能更快速、更順利的完成線上調試和驗收。css
注意:html
以上內容來自沙箱支付官網介紹java
你也能夠直接點擊此連接:沙箱環境地址web
若是你未登陸的話首先會跳轉到登陸界面,使用支付寶掃碼完成登陸便可。未進行認證的帳號還須要完成身份認證。spring
完成以上步驟後進入下圖所示的頁面,選擇服務對象。若是是我的的話選擇自研開發服務便可。sql
最後,檢查沙箱帳號中賣家和買家帳號是否已經生成。數據庫
點擊沙箱應用 - 》信息配置 - 》必看部分 - 》設置express
這裏選擇公鑰,生成方式使用支付寶祕鑰生成器,工具下載和具體操做請看:https://opendocs.alipay.com/open/291/106097/apache
使用支付寶祕鑰生成器生成公鑰時注意如下幾點:
開發環境:https://openapi.alipay.com/gateway.do
沙箱環境:https://openapi.alipaydev.com/gateway.do (如今用的)
手機網站支付 DEMO下載地址:https://opendocs.alipay.com/open/54/106682,這裏選擇JAVA版。
本次demo使用SSM框架,具體搭建步驟請看博主另外一篇文章:《手把手教你搭建SSM框架(Eclipse版)》,公衆號【C you again】回覆「SSM」下載框架源碼。
完成項目基本框架搭建之後,就能夠集成支付模塊了,具體操做以下:
將下圖中選中的文件複製到 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中能夠看到,須要填寫本身的
// 商戶appid public 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; //訂單Id private 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; } @Override public 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{ @Autowired private IPayMapper payMapper; @Override public void insertOrder(Order order) { // TODO Auto-generated method stub System.out.println(order); payMapper.insertOrder(order); } @Override public List<Order> getOrder() { // TODO Auto-generated method stub return 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 @ResponseBody public class PayController { @Resource private 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() { //格式化日期 pattern SimpleDateFormat 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),跳轉到訂單詳情頁面:
繼續點擊確認付款,輸入支付密碼等待支付完成
出現上圖界面,說明支付成功,等待幾秒後跳轉到首頁面,點擊查看全部訂單信息能夠查詢到全部訂單。這裏只作簡單展現。
以上就是支付寶PC端完成支付功能的全部教程了,若是你有疑問請在後臺私信,下載本教程源碼請在公衆號【C you again】回覆「Alipay」。另外,因博主技術有限,文章中可能有不妥之處,歡迎交流。歡迎各位大佬轉載本文章,轉載時註明出處!製做不易,若是文章對你有幫助,記得一鍵三連!