Springboot+支付宝沙箱环境 html版

最新推荐文章于 2024-05-14 00:37:50 发布

Dkodak

最新推荐文章于 2024-05-14 00:37:50 发布

阅读量2.8k

点赞数 1

文章标签： springboot+沙箱支付宝 html

本文链接：https://blog.csdn.net/qq_41646484/article/details/90402893

版权

最近写了一个springboot集成支付宝html的

首先自己集成 Thymeleaf

application.properties文件

spring.thymeleaf.prefix=classpath:/templates/
spring.thymeleaf.suffix=.html
spring.thymeleaf.mode=HTML5
spring.webflux.static-path-pattern=classpath:/templates/index.html

pom.xml文件

 <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>

然后自己测试一下有问题自行百度因为这个不是重点重点如下开始测试！！

话不多说首先自己要有蚂蚁金服的开发者账号以及自己去申请沙箱环境。

官网：https://openhome.alipay.com/platform/appDaily.htm

自己先下载官网的demo https://docs.open.alipay.com/194/105201/

然后jar包我自己生成了在本地的maven仓库

然后一个支付宝的基本信息配置公共类。

package com.ht.calffinancing.common.alipay;

import java.io.FileWriter;
import java.io.IOException;

/* *
 *类名：AlipayConfig
 *功能：基础配置类
 *详细：设置帐户有关信息及返回路径
 *修改日期：2017-04-05
 *说明：
 *以下代码只是为了方便商户测试而提供的样例代码，商户可以根据自己网站的需要，按照技术文档编写,并非一定要使用该代码。
 *该代码仅供学习和研究支付宝接口使用，只是提供一个参考。
 */

public class AlipayConfig {

//↓↓↓↓↓↓↓↓↓↓请在这里配置您的基本信息↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

	// 应用ID,您的APPID，收款账号既是您的APPID对应支付宝账号
	public static String app_id = "xxx";

	// 商户私钥，您的PKCS8格式RSA2私钥
    public static String merchant_private_key = "xxxx";

	// 支付宝公钥,查看地址：https://openhome.alipay.com/platform/keyManage.htm 对应APPID下的支付宝公钥。
    public static String alipay_public_key = "xxxxx";

	// 服务器异步通知页面路径  需http://格式的完整路径，不能加?id=123这类自定义参数，必须外网可以正常访问
	public static String notify_url = "http://localhost:8085/alipy/return_url.html";

	// 页面跳转同步通知页面路径 需http://格式的完整路径，不能加?id=123这类自定义参数，必须外网可以正常访问  return_url.jsp
	public static String return_url ="http://localhost:8085/go/return_url";

	// 签名方式
	public static String sign_type = "RSA2";

	// 字符编码格式
	public static String charset = "utf-8";

	// 支付宝网关
	public static String gatewayUrl = "https://openapi.alipaydev.com/gateway.do";

	// 支付宝网关
	public static String log_path = "C:\\";


//↑↑↑↑↑↑↑↑↑↑请在这里配置您的基本信息↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑

    /**
     * 写日志，方便测试（看网站需求，也可以改成把记录存入数据库）
     * @param sWord 要写入日志里的文本内容
     */
    public static void logResult(String sWord) {
        FileWriter writer = null;
        try {
            writer = new FileWriter(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();
                }
            }
        }
    }
}

然后控制层一个访问首页的方法传入根据自己的业务需求去保存


    @RequestMapping("go/applyindex")
    public  String index(BigDecimal tmoney,String val,HttpServletRequest request){
        HttpSession session=request.getSession();
        if (tmoney!=null||val!=null){
            session.setAttribute("tmoney",tmoney);
            session.setAttribute("val",val);
        }
        return "alipy/index.html";
    }

然后index页面具体根据你们自己的业务去做大概的更改，由于只是单机测试所以并没有做的太多验证以及注意一些的别的东西。

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<head>
    <meta charset="UTF-8">
    <title>支付宝电脑网站支付</title>
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.4.0.min.js"></script>
    <script type="text/javascript" src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul, ol {
            list-style: none;
        }

        body {
            font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande",
            sans-serif;
        }

        .tab-head {
            margin-left: 120px;
            margin-bottom: 10px;
        }

        .tab-content {
            clear: left;
            display: none;
        }

        h2 {
            border-bottom: solid #02aaf1 2px;
            width: 200px;
            height: 25px;
            margin: 0;
            float: left;
            text-align: center;
            font-size: 16px;
        }

        .selected {
            color: #FFFFFF;
            background-color: #02aaf1;
        }

        .show {
            clear: left;
            display: block;
        }

        .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>支付宝电脑网站支付体验入口页</h1>
</header>
<div id="main">
    <div id="tabhead" class="tab-head">
        <h2 id="tab1" class="selected" name="tab">付 款</h2>
        <h2 id="tab2" name="tab">交 易 查 询</h2>
        <h2 id="tab3" name="tab">退 款</h2>
        <h2 id="tab4" name="tab">退 款 查 询</h2>
        <h2 id="tab5" name="tab">交 易 关 闭</h2>
    </div>
    <!--action="http://localhost:8085/go/applytest"-->
    <input type="hidden"  th:value="${session.tmoney}" id="tmoney">
    <input type="hidden" th:value="${session.val}" id="val">
    <form name=alipayment  method=post target="_blank" id="applyform">
        <div id="body1" class="show" name="divcontent">
            <dl class="content">
                <dt>商户订单号 ：</dt>
                <dd>
                    <input id="WIDout_trade_no" name="WIDout_trade_no"  disabled="true" />
                </dd>
                <hr class="one_line">
                <dt>订单名称 ：</dt>
                <dd>
                    <input id="WIDsubject" name="WIDsubject"  disabled="true"/>
                </dd>
                <hr class="one_line">
                <dt>付款金额 ：</dt>
                <dd>
                    <input id="WIDtotal_amount" name="WIDtotal_amount"  disabled="true" />
                </dd>
                <hr class="one_line">
                <dt>银行卡号：</dt>
                <dd>
                    <input id="WIDbody" name="WIDbody"  disabled="true"/>
                </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;" id="btn">付 款</button>
						</span> <span class="note-help">如果您点击“付款”按钮，即表示您同意该次的执行操作。</span>
                </dd>
            </dl>
        </div>
    </form>
    <form name=tradequery action=alipay.trade.query.jsp method=post
          target="_blank">
        <div id="body2" class="tab-content" name="divcontent">
            <dl class="content">
                <dt>商户订单号 ：</dt>
                <dd>
                    <input id="WIDTQout_trade_no" name="WIDTQout_trade_no" />
                </dd>
                <hr class="one_line">
                <dt>支付宝交易号 ：</dt>
                <dd>
                    <input id="WIDTQtrade_no" name="WIDTQtrade_no" />
                </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>
    <form name=traderefund action=alipay.trade.refund.jsp method=post
          target="_blank">
        <div id="body3" class="tab-content" name="divcontent">
            <dl class="content">
                <dt>商户订单号 ：</dt>
                <dd>
                    <input id="WIDTRout_trade_no" name="WIDTRout_trade_no" />
                </dd>
                <hr class="one_line">
                <dt>支付宝交易号 ：</dt>
                <dd>
                    <input id="WIDTRtrade_no" name="WIDTRtrade_no" />
                </dd>
                <hr class="one_line">
                <dt>退款金额 ：</dt>
                <dd>
                    <input id="WIDTRrefund_amount" name="WIDTRrefund_amount" />
                </dd>
                <hr class="one_line">
                <dt>退款原因 ：</dt>
                <dd>
                    <input id="WIDTRrefund_reason" name="WIDTRrefund_reason" />
                </dd>
                <hr class="one_line">
                <dt>退款请求号 ：</dt>
                <dd>
                    <input id="WIDTRout_request_no" name="WIDTRout_request_no" />
                </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>
    <form name=traderefundquery
          action=alipay.trade.fastpay.refund.query.jsp method=post
          target="_blank">
        <div id="body4" class="tab-content" name="divcontent">
            <dl class="content">
                <dt>商户订单号 ：</dt>
                <dd>
                    <input id="WIDRQout_trade_no" name="WIDRQout_trade_no" />
                </dd>
                <hr class="one_line">
                <dt>支付宝交易号 ：</dt>
                <dd>
                    <input id="WIDRQtrade_no" name="WIDRQtrade_no" />
                </dd>
                <hr class="one_line">
                <dt>退款请求号 ：</dt>
                <dd>
                    <input id="WIDRQout_request_no" name="WIDRQout_request_no" />
                </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>
    <form name=tradeclose action=alipay.trade.close.jsp method=post
          target="_blank">
        <div id="body5" class="tab-content" name="divcontent">
            <dl class="content">
                <dt>商户订单号 ：</dt>
                <dd>
                    <input id="WIDTCout_trade_no" name="WIDTCout_trade_no" />
                </dd>
                <hr class="one_line">
                <dt>支付宝交易号 ：</dt>
                <dd>
                    <input id="WIDTCtrade_no" name="WIDTCtrade_no" />
                </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 type="text/javascript" src="http://localhost:8085/static/axios.js"></script>-->

<script language="javascript">
    var tabs = document.getElementsByName('tab');
    var contents = document.getElementsByName('divcontent');

    (function changeTab(tab) {
        for(var i = 0, len = tabs.length; i < len; i++) {
            tabs[i].onmouseover = showTab;
        }
    })();

    function showTab() {
        for(var i = 0, len = tabs.length; i < len; i++) {
            if(tabs[i] === this) {
                tabs[i].className = 'selected';
                contents[i].className = 'show';
            } else {
                tabs[i].className = '';
                contents[i].className = 'tab-content';
            }
        }
    }

    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";
        //tmoney获取头部隐藏框的值
        document.getElementById("WIDtotal_amount").value = $("#tmoney").val();
// 		document.getElementById("").value = "测试";
        //银行卡号
        document.getElementById("WIDbody").value =$("#val").val();

    }
    GetDateNow();
</script>
<script type="text/javascript">
    // var  result="";
    $("#btn").click(function () {
        $.post("http://localhost:8085/go/applytest",$('#applyform').serialize(),function (data) {
            // result=data;
            window.location.href=data;
            // console.log(data);
            // $("#main").hide();
            // $("#hiddenapply").show();


            //axios写法
            // const newTab = window.open();
            // const div = document.createElement('div');
            // div.innerHTML =data;
            // newTab.document.body.appendChild()
            // newTab.document.forms.alipaysubmit.submit();

        },'html')//
    });


</script>
</html>

然后进入控制层支付宝得到你的参数会自动响应一个页面

@RequestMapping(value = "/go/applytest", produces = "text/html; charset=UTF-8",method= RequestMethod.POST)
    @ResponseBody
    public  void    applytest(HttpServletRequest request, HttpServletResponse response,String WIDout_trade_no, BigDecimal WIDtotal_amount,String WIDbody) throws IOException, AlipayApiException {
        //获得初始化的AlipayClient
        PrintWriter out = response.getWriter();
        AlipayClient alipayClient = new DefaultAlipayClient(AlipayConfig.gatewayUrl, AlipayConfig.app_id, AlipayConfig.merchant_private_key, "json", AlipayConfig.charset, AlipayConfig.alipay_public_key, AlipayConfig.sign_type);
        //设置请求参数
        AlipayTradePagePayRequest alipayRequest = new AlipayTradePagePayRequest();
        alipayRequest.setReturnUrl(AlipayConfig.return_url);
        alipayRequest.setNotifyUrl(AlipayConfig.notify_url);
        HttpSession session=request.getSession();
       
        String tmoney="";
        String val="";
        String ddh=(int)((Math.random()*99999)+100000)+"";
        System.out.println(tmoney+"这是跳转的"+val+"ddh"+ddh);
        //商户订单号，商户网站订单系统中唯一订单号，必填
        String out_trade_no = ddh;
        //付款金额，必填
        String total_amount = tmoney;
        //订单名称，必填
        String subject = "个人充值";
        //商品描述，可空
        String body ="余额充值";
        // 该笔订单允许的最晚付款时间，逾期将关闭交易。取值范围：1m～15d。m-分钟，h-小时，d-天，1c-当天（1c-当天的情况下，无论交易何时创建，都在0点关闭）。 该参数数值不接受小数点， 如 1.5h，可转换为 90m。
//        String timeout_express = "5m";
        alipayRequest.setBizContent("{\"out_trade_no\":\""+ out_trade_no +"\","
                + "\"total_amount\":\""+ total_amount +"\","
                + "\"subject\":\""+ subject +"\","
                + "\"body\":\""+ body +"\","
//                + "\"timeout_express\":\""+timeout_express +"\","
                + "\"product_code\":\"FAST_INSTANT_TRADE_PAY\"}");

        //请求参数可查阅【电脑网站支付的API文档-alipay.trade.page.pay-请求参数】章节
        String url = alipayClient.pageExecute(alipayRequest,"get").getBody();
        System.out.println(url);
        //输出

//        request.setAttribute("result",result);
//        response.setContentType("text/html;charset=utf-8");
//        out.print(doc.outerHtml());
//      return result;
        out.print(url);

    }

然后还有2个控制器的方法也就是成功返回后和异步返回后的结果

然后return到你所想去的页面。

然后异步跟同步都差不多不过还是要根据你具体的业务去做处理。

Dkodak

关注

1
点赞
踩
11

收藏

觉得还不错? 一键收藏
3
评论
Springboot+支付宝沙箱环境 html版

最近写了一个springboot集成支付宝html的首先自己集成 Thymeleaf application.properties文件spring.thymeleaf.prefix=classpath:/templates/spring.thymeleaf.suffix=.htmlspring.thymeleaf.mode=HTML5spring.webflux...
复制链接

扫一扫