支付寶支付--沙箱支付教程+案例 | PC端網站支付(超級詳細版本)

1、什麼是沙箱環境

螞蟻沙箱環境 (Beta) 是協助開發者進行接口功能開發及主要功能聯調的輔助環境。javascript

沙箱環境模擬了開放平臺部分產品的主要功能和主要邏輯。在開發者應用上線審覈前,開發者能夠根據自身需求,先在沙箱環境中瞭解、組合和調試各類開放接口,進行開發調試工做,從而幫助開發者在應用上線審覈完成後,能更快速、更順利的完成線上調試和驗收。css

注意:html

  • 因爲沙箱爲模擬環境,在沙箱完成接口開發及主要功能調試後,請務必在螞蟻正式環境進行完整的功能驗收測試。全部返回碼及業務邏輯以正式環境爲準。
  • 爲保證沙箱穩定,沙箱環境測試數據會進行按期數據清理。Beta 測試階段每週日中午 12 點至每週一中午 12點爲維護時間,在此時間內沙箱環境部分功能可能不可用,敬請諒解。
  • 請勿在沙箱進行壓力測試,以避免觸發相應的限流措施,致使沒法正常使用沙箱環境。
  • 沙箱支持的各個開放產品,沙箱使用的特別說明請參見各產品的快速接入文檔章節。

以上內容來自沙箱支付官網介紹java

2、如何快速使用沙箱環境

一、百度搜索支付寶沙箱環境

支付寶支付--沙箱支付教程+案例 | PC端網站支付(超級詳細版本)

你也能夠直接點擊此連接:沙箱環境地址web

二、點擊沙箱環境

支付寶支付--沙箱支付教程+案例 | PC端網站支付(超級詳細版本)

若是你未登陸的話首先會跳轉到登陸界面,使用支付寶掃碼完成登陸便可。未進行認證的帳號還須要完成身份認證spring

完成以上步驟後進入下圖所示的頁面,選擇服務對象。若是是我的的話選擇自研開發服務便可。sql

支付寶支付--沙箱支付教程+案例 | PC端網站支付(超級詳細版本)

最後,檢查沙箱帳號中賣家和買家帳號是否已經生成。數據庫

支付寶支付--沙箱支付教程+案例 | PC端網站支付(超級詳細版本)
支付寶支付--沙箱支付教程+案例 | PC端網站支付(超級詳細版本)

三、生成RSA祕鑰

點擊沙箱應用 - 》信息配置 - 》必看部分 - 》設置express

在這裏插入圖片描述
這裏選擇公鑰,生成方式使用支付寶祕鑰生成器,工具下載和具體操做請看:https://opendocs.alipay.com/open/291/106097/apache

支付寶支付--沙箱支付教程+案例 | PC端網站支付(超級詳細版本)
使用支付寶祕鑰生成器生成公鑰時注意如下幾點:

在這裏插入圖片描述

四、設置應用網關、生成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」下載框架源碼。

完成項目基本框架搭建之後,就能夠集成支付模塊了,具體操做以下:

  1. 在src目錄下新建 com.alipay.config 包並把步驟5中下載項目src.com.alipay.config包中的 AlipayConfig.java 複製到此包路徑下。
  2. 在src目錄下新建 com.alipay.util 包並把步驟5中下載項目的 src.com.alipay.util 包中的logFile.java 複製到此包路徑下。
  3. 將步驟5下載的項目中WebContent\WEB-INF\lib文件夾下的全部jar包放到此項目的WebContent\WEB-INF\lib下。
  4. 將下圖中選中的文件複製到 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>

看到此圖就說明集成成功了哦!

支付寶支付--沙箱支付教程+案例 | PC端網站支付(超級詳細版本)

七、修改配置文件,編寫測試案例(重要)

接下來是實現支付的重要步驟,修改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),跳轉到訂單詳情頁面:

在這裏插入圖片描述

繼續點擊確認付款,輸入支付密碼等待支付完成

在這裏插入圖片描述

出現上圖界面,說明支付成功,等待幾秒後跳轉到首頁面,點擊查看全部訂單信息能夠查詢到全部訂單。這裏只作簡單展現。

在這裏插入圖片描述

3、 結束語

以上就是支付寶PC端完成支付功能的全部教程了,若是你有疑問請在後臺私信,下載本教程源碼請在公衆號【C you again】回覆「Alipay」。另外,因博主技術有限,文章中可能有不妥之處,歡迎交流。歡迎各位大佬轉載本文章,轉載時註明出處!製做不易,若是文章對你有幫助,記得一鍵三連!

相關文章
相關標籤/搜索