支付宝沙箱模拟支付,退款等

1,986 阅读12分钟

支付宝沙箱模拟支付,退款,关闭订单,查询订单等

一、准备

从里面注册申请就可以。
沙箱网址:open.alipay.com/platform/ap…
生成密钥网址:miniu.alipay.com/keytool/cre…

写代码需要用到的是APPID应用私钥(也就是商户私钥)支付宝公钥

支付宝公钥需要从生成密钥网址复制应用公钥到图写入,然后保存,再次点击查看就能看到支付宝公钥
在这里插入图片描述
在这里插入图片描述

项目目录

在这里插入图片描述

二、代码

引入po依赖

<!--thymeleaf模板引擎依赖-->
        <dependency>
            <groupId>org.thymeleaf</groupId>
            <artifactId>thymeleaf-spring5</artifactId>
        </dependency>
        <dependency>
            <groupId>org.thymeleaf.extras</groupId>
            <artifactId>thymeleaf-extras-java8time</artifactId>
        </dependency>

        <!--沙箱支付的依赖-->
        <dependency>
            <groupId>com.alipay.sdk</groupId>
            <artifactId>alipay-sdk-java</artifactId>
            <version>3.0.0</version>
        </dependency>

yml配置

server:
  port: 8080
  compression:
    enabled: true

spring:
  mvc:
    static-path-pattern: /static/**

废话不说直接上代码

config配置文件

变量配置
app_idAPPID
merchant_private_key商户私钥
alipay_public_key支付宝公钥
notify_url服务器异步通知页面路径 ,需要时外网路径
return_url页面跳转同步通知页面路径,同上
sign_type签名方式
charset字符编码格式
gatewayUrl支付宝网关,这里写沙箱的网关就可
log_path打印日志路径
package com.ly.pay.config;

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

/**
 * @Author: xky
 * @Catalogue: com.ly.pay.config
 * @Date: 2021/5/27 19:44
 */
public class AlipayConfig {

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

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

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

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

    // 服务器异步通知页面路径  需http://格式的完整路径,不能加?id=123这类自定义参数,必须外网可以正常访问
    public static String notify_url = "http://商户网关地址/alipay/pay1";

    // 页面跳转同步通知页面路径 需http://格式的完整路径,不能加?id=123这类自定义参数,必须外网可以正常访问(其实就是支付成功后返回的页面)
    public static String return_url = "http://商户网关地址/alipay/pay2";

    // 签名方式
    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 = "E:\\logs\\";


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

    /**
     * 写日志,方便测试(看网站需求,也可以改成把记录存入数据库)
     *
     * @param sWord 要写入日志里的文本内容
     */
    public static void logResult(String sWord) {
        //写入路径
        File file = new File(log_path);
        //判断路径是否存在,不存在就创建
        if (!file.exists()) {
            System.out.println("目标文件所在路径不存在,准备创建。。。");
            file.mkdirs();
            if (!file.mkdirs()) {
                System.out.println("创建成功");
            } else {
                System.out.println("创建失败,请重试");
            }
        } else {
            System.out.println("文件路径已存在");
        }

        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();
                }
            }
        }
    }
}

controller

接口参考支付宝官方API文档:opendocs.alipay.com/apis/api_1/…
调转前端页面的

package com.ly.pay.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

/**
 * @Author: xky
 * @Catalogue: com.ly.pay.controller
 * @Date: 2022/1/21 15:17
 */
@Controller
@RequestMapping("/view")
public class ViewController {


    /*-------------------- 主页 --------------------*/
    @RequestMapping("/index")
    public String index() {
        return "index";
    }
   /*-------------------- 支付 --------------------*/
    @RequestMapping("/pay")
    public String pay() {
        return "/wappay/pay";
    }

    /*-------------------- 退款 --------------------*/
    @RequestMapping("/refund")
    public String refund() {
        return "/wappay/refund";
    }
    /*-------------------- 退款查询 --------------------*/
    @RequestMapping("/refundquery")
    public String refundquery() {
        return "/wappay/refundquery";
    }

    /*-------------------- 单个查询 --------------------*/
    @RequestMapping("/query")
    public String query() {
        return "/wappay/query";
    }

    /*-------------------- 关闭交易 --------------------*/
    @RequestMapping("/close")
    public String close() {
        return "/wappay/close";
    }
}

调用的接口

package com.ly.pay.controller;

import com.alipay.api.AlipayApiException;
import com.ly.pay.service.AlipayService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;

import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import java.io.IOException;


/**
 * @Author: xky
 * @Catalogue: com.ly.pay.controller
 * @Date: 2021/5/27 19:45
 */
@Controller
@RequestMapping("/alipay")
public class AlipayController {

    @Autowired
    private AlipayService alipayService;

    /**
     *
     * 支付
     *
     * @url TODO
     * @json_param 传入参数
     * @param id       订单编号(唯一)
     * @param name     商品名称
     * @param amount   订单价格
     * @return java.lang.String
     * @return_param 返回参数
     */
    @ResponseBody
    @RequestMapping("/pay")
    public String payController(@RequestParam("WIDout_trade_no") String id, @RequestParam("WIDsubject") String name, @RequestParam("WIDtotal_amount") String amount) throws Exception {
        Integer pay = Integer.valueOf(amount);
        return alipayService.webPagePay(id, name, pay);
    }

    /**
     *
     * 退款
     *
     * @url TODO
     * @json_param 传入参数
     * @param outTradeNo      订单编号
     * @param refundReason    退款原因
     * @param refundAmount    退款原因
     * @param outRequestNo    标识一次退款请求,同一笔交易多次退款需要保证唯一,如需部分退款,则此参数必传
     * @return java.lang.String
     * @return_param 返回参数
     */
    @ResponseBody
    @RequestMapping("/refund")
    public String refund(@RequestParam("WIDout_trade_no")String outTradeNo,  @RequestParam("WIDrefund_reason")String refundReason,  @RequestParam("WIDrefund_amount")Integer refundAmount, @RequestParam("WIDout_request_no")String outRequestNo) throws AlipayApiException {
        Integer pay = Integer.valueOf(refundAmount);
        return alipayService.refund(outTradeNo,refundReason,pay,outRequestNo);
    }


    /**
     * 查询
     *
     * @url TODO
     * @json_param 传入参数
     * @param outTradeNo
     * @return java.lang.String
     * @return_param 返回参数
     */
    @ResponseBody
    @RequestMapping("/query")
    public String query(@RequestParam("WIDout_trade_no")String outTradeNo) throws AlipayApiException {
        return alipayService.query(outTradeNo);
    }

    /**
     *
     * 交易关闭
     *
     * @url TODO
     * @json_param 传入参数
     * @param outTradeNo
     * @return java.lang.String
     * @return_param 返回参数
     */
    @ResponseBody
    @RequestMapping("/close")
    public String close(@RequestParam("WIDout_trade_no")String outTradeNo) throws  AlipayApiException {
        return alipayService.close(outTradeNo);
    }


    /**
     *
     * 退款查询
     *
     * @url TODO
     * @json_param 传入参数
     * @param outTradeNo
     * @param outRequestNo
     * @return java.lang.String
     * @return_param 返回参数
     */
    @ResponseBody
    @RequestMapping("/refundQuery")
    public String refundQuery(@RequestParam("WIDout_trade_no")String outTradeNo,@RequestParam("WIDout_request_no")String outRequestNo) throws AlipayApiException {
        return alipayService.refundQuery(outTradeNo,outRequestNo);
    }

    /**
     * 账单下载
     *
     * @url TODO
     * @json_param 传入参数
     * @param
     * @return java.lang.String
     * @return_param 返回参数
     */
    @ResponseBody
    @RequestMapping("/billDownload")
    public String billDownload() throws AlipayApiException{
        return alipayService.billDownload();
    }
    
/*-------------------- 调用成功 --------------------*/
    @ResponseBody
    @RequestMapping("/pay2")
    public String topay2(HttpServletRequest request) throws AlipayApiException, UnsupportedEncodingException {
        return alipayService.pay2(request);

    }

    /*-------------------- 调用通知 --------------------*/
    @ResponseBody
    @RequestMapping("/pay1")
    public String topay1(HttpServletRequest request) throws AlipayApiException, UnsupportedEncodingException {
        return alipayService.pay1(request);
    }

}

service

package com.ly.pay.service;

import com.alipay.api.AlipayApiException;

import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import java.io.IOException;

/**
 *
 * 支付接口
 *
 * @Author: xky
 * @Catalogue: com.ly.pay.service
 * @Date: 2021/5/27 19:44
 */
public interface AlipayService {

    /**
     * 支付
     * @param outTradeNo    订单编号(唯一)
     * @param subject       商品名称
     * @param totalAmount   订单价格
     */
    String webPagePay(String outTradeNo,String subject,Integer totalAmount) throws Exception;

    /**
     * 退款
     * @param outTradeNo    订单编号
     * @param refundReason  退款原因
     * @param refundAmount  退款金额
     * @param outRequestNo  标识一次退款请求,同一笔交易多次退款需要保证唯一,如需部分退款,则此参数必传
     */
    String refund(String outTradeNo,String refundReason,Integer refundAmount,String outRequestNo) throws AlipayApiException;

    /**
     * 交易查询
     * @param outTradeNo 订单编号(唯一)
     */
    String query(String outTradeNo) throws AlipayApiException;

    /**
     * 交易关闭
     * @param outTradeNo 订单编号(唯一)
     */
    String close(String outTradeNo) throws AlipayApiException;

    /**
     * 退款查询
     * @param outTradeNo 订单编号(唯一)
     * @param outRequestNo 标识一次退款请求,同一笔交易多次退款需要保证唯一,如需部分退款,则此参数必传
     */
    String refundQuery(String outTradeNo,String outRequestNo) throws AlipayApiException;

    /**
     * 账单下载地址
     */
    String billDownload() throws AlipayApiException;

String pay2(HttpServletRequest request) throws AlipayApiException, UnsupportedEncodingException;

    String pay1(HttpServletRequest request) throws AlipayApiException, UnsupportedEncodingException;

}

impl

package com.ly.pay.service.impl;

import cn.hutool.json.JSONObject;
import com.alipay.api.AlipayApiException;
import com.alipay.api.AlipayClient;
import com.alipay.api.DefaultAlipayClient;
import com.alipay.api.request.*;
import com.alipay.api.response.AlipayDataDataserviceBillDownloadurlQueryResponse;
import com.ly.pay.config.AlipayConfig;
import com.ly.pay.service.AlipayService;
import org.springframework.stereotype.Service;

import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import java.io.IOException;
import java.util.UUID;

/**
 * @Author: xky
 * @Catalogue: com.ly.pay.service.impl
 * @Date: 2021/5/27 19:44
 */
@Service("alipayService")
public class AlipayServiceImpI implements AlipayService {
    AlipayClient alipayClient = new DefaultAlipayClient(
            AlipayConfig.gatewayUrl, AlipayConfig.app_id, AlipayConfig.merchant_private_key, "json", AlipayConfig.charset, AlipayConfig.alipay_public_key, AlipayConfig.sign_type);

    /**
     * 支付
     *
     * @param outTradeNo  订单编号(唯一)
     * @param totalAmount 订单价格
     * @param subject     商品名称
     */
    @Override
    public String webPagePay(String outTradeNo, String subject, Integer totalAmount) throws Exception {
        AlipayTradePagePayRequest alipayRequest = new AlipayTradePagePayRequest();
        /** 同步通知,支付完成后,支付成功页面*/
        alipayRequest.setReturnUrl(AlipayConfig.return_url);
        /** 异步通知,支付完成后,需要进行的异步处理*/
        alipayRequest.setNotifyUrl(AlipayConfig.notify_url);

        JSONObject bizContent = new JSONObject();
        bizContent.putOnce("out_trade_no",outTradeNo);
        bizContent.putOnce("total_amount",totalAmount);
        bizContent.putOnce("subject",subject);
        bizContent.putOnce("product_code","FAST_INSTANT_TRADE_PAY");
        alipayRequest.setBizContent(bizContent.toString());
        String result = alipayClient.pageExecute(alipayRequest).getBody();
        //日志
        AlipayConfig.logResult(alipayRequest.getBizContent());
        return result;
    }

    /**
     * 退款
     *
     * @param outTradeNo   订单编号
     * @param refundReason 退款原因
     * @param refundAmount 退款金额
     * @param outRequestNo 标识一次退款请求,同一笔交易多次退款需要保证唯一,如需部分退款,则此参数必传,不传该参数则代表全额退款
     */
    @Override
    public String refund(String outTradeNo, String refundReason, Integer refundAmount, String outRequestNo) throws AlipayApiException {
        AlipayTradeRefundRequest alipayRequest = new AlipayTradeRefundRequest();
        JSONObject bizContent = new JSONObject();
        bizContent.putOnce("out_trade_no",outTradeNo);
        bizContent.putOnce("refund_amount",refundAmount);
        bizContent.putOnce("refund_reason",refundReason);
        bizContent.putOnce("out_request_no",outRequestNo);
        alipayRequest.setBizContent(bizContent.toString());
        String result = alipayClient.execute(alipayRequest).getBody();

        //日志
        AlipayConfig.logResult(alipayRequest.getBizContent());
        return result;
    }

    /**
     * 交易查询--指定
     *
     * @param outTradeNo 订单编号(唯一)
     */
    @Override
    public String query(String outTradeNo) throws AlipayApiException {
        AlipayTradeQueryRequest alipayRequest = new AlipayTradeQueryRequest();
        JSONObject bizContent = new JSONObject();
        bizContent.putOnce("out_trade_no",outTradeNo);
        bizContent.putOnce("trade_no","");
        alipayRequest.setBizContent(bizContent.toString());
        //转换格式
        String result = alipayClient.execute(alipayRequest).getBody();
        return result;
    }


    /**
     * 交易关闭
     *
     * @param outTradeNo 订单编号(唯一)
     */
    @Override
    public String close(String outTradeNo) throws AlipayApiException {
        AlipayTradeCloseRequest alipayRequest = new AlipayTradeCloseRequest();
        JSONObject bizContent = new JSONObject();
        bizContent.putOnce("out_trade_no",outTradeNo);
        bizContent.putOnce("trade_no","");
        alipayRequest.setBizContent(bizContent.toString());
        String result = alipayClient.execute(alipayRequest).getBody();
        return result;
    }

    /**
     * 退款查询
     *
     * @param outTradeNo   订单编号(唯一)
     * @param outRequestNo 标识一次退款请求,同一笔交易多次退款需要保证唯一,如需部分退款,则此参数必传
     */
    @Override
    public String refundQuery(String outTradeNo, String outRequestNo) throws AlipayApiException {
        AlipayTradeFastpayRefundQueryRequest alipayRequest = new AlipayTradeFastpayRefundQueryRequest();
        JSONObject bizContent = new JSONObject();
        bizContent.putOnce("out_trade_no",outTradeNo);
        bizContent.putOnce("out_request_no",outRequestNo);
        alipayRequest.setBizContent(bizContent.toString());
        //格式转换
        String result = alipayClient.execute(alipayRequest).getBody();
        return result;
    }

    /**
     * 账单下载地址
     *
     */
    @Override
    public String billDownload() throws AlipayApiException {
        AlipayDataDataserviceBillDownloadurlQueryRequest alipayRequest = new AlipayDataDataserviceBillDownloadurlQueryRequest();
        JSONObject bizContent = new JSONObject();
        bizContent.putOnce("bill_type","trade");
        bizContent.putOnce("bill_date","2022-01-20");
        alipayRequest.setBizContent(bizContent.toString());
        String result = alipayClient.execute(alipayRequest).getBody();
        return result;
    }
    @Override
    public String pay2(HttpServletRequest request) throws AlipayApiException, UnsupportedEncodingException {
        //获取支付宝GET过来反馈信息
        Map<String,String> params = new HashMap<String,String>();
        Map requestParams = request.getParameterMap();
        for (Iterator iter = requestParams.keySet().iterator(); iter.hasNext();) {
            String name = (String) iter.next();
            String[] values = (String[]) requestParams.get(name);
            String valueStr = "";
            for (int i = 0; i < values.length; i++) {
                valueStr = (i == values.length - 1) ? valueStr + values[i]
                        : valueStr + values[i] + ",";
            }
            //乱码解决,这段代码在出现乱码时使用。如果mysign和sign不相等也可以使用这段代码转化
            valueStr = new String(valueStr.getBytes("ISO-8859-1"), "utf-8");
            params.put(name, valueStr);
        }
        //获取支付宝的通知返回参数,可参考技术文档中页面跳转同步通知参数列表(以下仅供参考)//
        //支付宝交易号
        String trade_no = new String(request.getParameter("trade_no").getBytes("ISO-8859-1"),"UTF-8");
        //获取支付宝的通知返回参数,可参考技术文档中页面跳转同步通知参数列表(以上仅供参考)//
        //计算得出通知验证结果
        //boolean AlipaySignature.rsaCheckV1(Map<String, String> params, String publicKey, String charset, String sign_type)
        boolean verify_result = AlipaySignature.rsaCheckV1(params, AlipayConfig.alipay_public_key, AlipayConfig.charset, "RSA2");
        if(verify_result){//验证成功
            return "调用成功";
        }else{
            return "调用失败";
        }
    }

    @Override
    public String pay1(HttpServletRequest request) throws AlipayApiException, UnsupportedEncodingException {
        //获取支付宝POST过来反馈信息
        Map<String,String> params = new HashMap<String,String>();
        Map requestParams = request.getParameterMap();
        for (Iterator iter = requestParams.keySet().iterator(); iter.hasNext();) {
            String name = (String) iter.next();
            String[] values = (String[]) requestParams.get(name);
            String valueStr = "";
            for (int i = 0; i < values.length; i++) {
                valueStr = (i == values.length - 1) ? valueStr + values[i]
                        : valueStr + values[i] + ",";
            }
            //乱码解决,这段代码在出现乱码时使用。如果mysign和sign不相等也可以使用这段代码转化
            //valueStr = new String(valueStr.getBytes("ISO-8859-1"), "gbk");
            params.put(name, valueStr);
        }
        //获取支付宝的通知返回参数,可参考技术文档中页面跳转同步通知参数列表(以下仅供参考)//
        //商户订单号

        String out_trade_no = new String(request.getParameter("out_trade_no").getBytes("ISO-8859-1"),"UTF-8");
        //支付宝交易号

        String trade_no = new String(request.getParameter("trade_no").getBytes("ISO-8859-1"),"UTF-8");

        //交易状态
        String trade_status = new String(request.getParameter("trade_status").getBytes("ISO-8859-1"),"UTF-8");

        //获取支付宝的通知返回参数,可参考技术文档中页面跳转同步通知参数列表(以上仅供参考)//
        //计算得出通知验证结果
        //boolean AlipaySignature.rsaCheckV1(Map<String, String> params, String publicKey, String charset, String sign_type)
        boolean verify_result = AlipaySignature.rsaCheckV1(params, AlipayConfig.alipay_public_key, AlipayConfig.charset, "RSA2");
        if(verify_result){//验证成功
            //
            //请在这里加上商户的业务逻辑程序代码
            //——请根据您的业务逻辑来编写程序(以下代码仅作参考)——

            if(trade_status.equals("TRADE_FINISHED")){
                //判断该笔订单是否在商户网站中已经做过处理
                //如果没有做过处理,根据订单号(out_trade_no)在商户网站的订单系统中查到该笔订单的详细,并执行商户的业务程序
                //请务必判断请求时的total_fee、seller_id与通知时获取的total_fee、seller_id为一致的
                //如果有做过处理,不执行商户的业务程序

                //注意:
                //如果签约的是可退款协议,退款日期超过可退款期限后(如三个月可退款),支付宝系统发送该交易状态通知
                //如果没有签约可退款协议,那么付款完成后,支付宝系统发送该交易状态通知。
            } else if (trade_status.equals("TRADE_SUCCESS")){
                //判断该笔订单是否在商户网站中已经做过处理
                //如果没有做过处理,根据订单号(out_trade_no)在商户网站的订单系统中查到该笔订单的详细,并执行商户的业务程序
                //请务必判断请求时的total_fee、seller_id与通知时获取的total_fee、seller_id为一致的
                //如果有做过处理,不执行商户的业务程序

                //注意:
                //如果签约的是可退款协议,那么付款完成后,支付宝系统发送该交易状态通知。
            }
            //——请根据您的业务逻辑来编写程序(以上代码仅作参考)——
            return "通知成功";

            //
        }else {//验证失败

            return "通知失败";
        }
    }
     
}

css样式

ap.css

*{
    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;
}

html

前端页面参考:opendocs.alipay.com/open/203/10…

订单号,名称,金额都是自己定义的,实现简单的付款,可以自己完善,让这些有购买单物品来传值

主页面–index.html

<!DOCTYPE html>
<html>
<head>
    <title>支付宝手机网站支付接口2.0</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link rel="stylesheet" href="../static/ap.css" type="text/css" />
</head>
<body text=#000000 bgColor="#ffffff" leftMargin=0 topMargin=4>
<header class="am-header">
    <h1>支付宝手机网站支付2.0接口</h1>
</header>
<div id="main">
    <div id="body" style="clear:left">
        <dl class="content">
            <dt></dt>
            <dd id="btn-dd">
                        <span class="new-btn-login-sp">
                            <button class="new-btn-login" style="text-align:center;" onclick="window.open('/view/pay')">支付</button>
                        </span>
            </dd>
            <dt></dt>
            <dd id="btn-dd">
                        <span class="new-btn-login-sp">
                            <button class="new-btn-login" style="text-align:center;" onclick="window.open('/view/close')">关闭订单</button>
                        </span>
            </dd>
            <dt></dt>
            <dd id="btn-dd">
                        <span class="new-btn-login-sp">
                            <button class="new-btn-login" style="text-align:center;" onclick="window.open('/view/query')">订单查询</button>
                        </span>
            </dd>
            <dt></dt>
            <dd id="btn-dd">
                        <span class="new-btn-login-sp">
                            <button class="new-btn-login" style="text-align:center;" onclick="window.open('/view/refund')">订单退款</button>
                        </span>
            </dd>
            <dt></dt>
            <dd id="btn-dd">
                        <span class="new-btn-login-sp">
                            <button class="new-btn-login" style="text-align:center;" onclick="window.open('/view/refundquery')">订单退款查询</button>
                        </span>
            </dd>
            <dt></dt>
            <dd id="btn-dd">
                        <span class="new-btn-login-sp">
                            <button class="new-btn-login" style="text-align:center;" onclick="window.open('/alipay/billDownload')">账单下载</button>
                        </span>
            </dd>
        </dl>
    </div>
    <div id="foot">
        <ul class="foot-ul">
            <li>
                支付宝版权所有 2015-2018 ALIPAY.COM
            </li>
        </ul>
    </div>
</div>
</body>
</html>

close.html

<!DOCTYPE html>
<html>
<head>
    <title>支付宝手机网站alipay.trade.close(统一收单交易关闭接口)</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link rel="stylesheet" href="../../static/ap.css" type="text/css"/>
</head>
<body text=#000000 bgColor="#ffffff" leftMargin=0 topMargin=4>
<header class="am-header">
    <h1>支付宝手机网站交易关闭接口(接口名:alipay.trade.close )</h1>
</header>
<div id="main">
    <form name=alipayment action='/alipay/close' 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"/>
                </dd>
                <hr class="one_line">
                <dt>支付宝交易号:</dt>
                <dd>
                    <input id="WIDtrade_no" name="WIDtrade_no"/>
                </dd>
                <hr class="one_line">
                <dt></dt>
                <dd>
                    <span style="line-height: 28px; color:red;">注意:商户订单号和支付宝交易号不能同时为空。 trade_no、  out_trade_no如果同时存在优先取trade_no</span>
                </dd>
                <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>
</html>

downloadurl.html

<!DOCTYPE html>
<html>
<head>
    <title>alipay.data.dataservice.bill.downloadurl.query(查询对账单下载地址)</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link rel="stylesheet" href="../../static/ap.css" type="text/css"/>

</head>
<body text=#000000 bgColor="#ffffff" leftMargin=0 topMargin=4>
<header class="am-header">
    <h1>支付宝手机网站查询对账单下载地址(接口名:alipay.data.dataservice.bill.downloadurl.query)</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="WIDbill_type" name="WIDbill_type" value="trade"/>
                </dd>
                <hr class="one_line">
                <dt>账单时间:</dt>
                <dd>
                    <input id="WIDbill_date" name="WIDbill_date"/>
                </dd>
                <hr class="one_line">
                <dt></dt>
                <dd>
                    <span style="line-height: 28px; color:red;">注意:账单类型和账单时间不能为空!账单时间:日账单格式为yyyy-MM-dd,月账单格式为yyyy-MM。</span>
                </dd>
                <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>
</html>

pay.html

<!DOCTYPE html>
<html>
<head>
    <title>支付宝手机网站支付接口</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link rel="stylesheet" href="../../static/ap.css" type="text/css"/>
</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='/alipay/pay' 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"/>
                </dd>
                <hr class="one_line">
                <dt>订单名称:</dt>
                <dd>
                    <input id="WIDsubject" name="WIDsubject"/>
                </dd>
                <hr class="one_line">
                <dt>付款金额:</dt>
                <dd>
                    <input id="WIDtotal_amount" name="WIDtotal_amount"/>
                </dd>
                <hr class="one_line"/>
                <dt>商品描述:</dt>
                <dd>
                    <input id="WIDbody" name="WIDbody"/>
                </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 = "100";
        document.getElementById("WIDbody").value = "购买测试商品100元";
    }

    GetDateNow();
</script>
</html>

query.html

<!DOCTYPE html>
<html>
<head>
    <title>支付宝手机网站alipay.trade.query (统一收单线下交易查询)</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link rel="stylesheet" href="../../static/ap.css" type="text/css"/>
</head>

<body text=#000000 bgColor="#ffffff" leftMargin=0 topMargin=4>
<header class="am-header">
    <h1>支付宝手机网站alipay.trade.query (统一收单线下交易查询)</h1>
</header>
<div id="main">
    <form name=alipayment action='/alipay/query' 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"/>
                </dd>
                <hr class="one_line">
                <dt>支付宝交易号:</dt>
                <dd>
                    <input id="WIDtrade_no" name="WIDtrade_no"/>
                </dd>
                <hr class="one_line">
                <dt></dt>
                <dd>
                    <span style="line-height: 28px; color:red;">注意:商户订单号和支付宝交易号不能同时为空。 trade_no、  out_trade_no如果同时存在优先取trade_no</span>
                </dd>
                <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>
</html>

refund.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>支付宝手机网站alipay.trade.refund (统一收单交易退款接口)</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link rel="stylesheet" href="../../static/ap.css" type="text/css"/>
</head>
<body text=#000000 bgColor="#ffffff" leftMargin=0 topMargin=4>
<header class="am-header">
    <h1>支付宝手机网站alipay.trade.refund (统一收单交易退款接口)</h1>
</header>
<div id="main">
    <form name=alipayment action='/alipay/refund' 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"/>
                </dd>
                <hr class="one_line">
                <dt>支付宝交易号:</dt>
                <dd>
                    <input id="WIDtrade_no" name="WIDtrade_no"/>
                </dd>
                <hr class="one_line">
                <dt></dt>
                <dd>
                    <span style="line-height: 28px; color:red;">注意:商户订单号和支付宝交易号不能同时为空。 trade_no、  out_trade_no如果同时存在优先取trade_no</span>
                </dd>
                <hr class="one_line">
                <dt>退款金额:</dt>
                <dd>
                    <input id="WIDrefund_amount" name="WIDrefund_amount"/>
                </dd>
                <hr class="one_line">
                <dt>退款原因:</dt>
                <dd>
                    <input id="WIDrefund_reason" name="WIDrefund_reason"/>
                </dd>
                <hr class="one_line">
                <dt>退款单号:</dt>
                <dd>
                    <input id="WIDout_request_no" name="WIDout_request_no"/>
                </dd>
                <hr class="one_line">
                <dt></dt>
                <dd>
                    <span style="line-height: 28px; color:red;">注意:如是部分退款,则参数退款单号(out_request_no)必传。</span>
                </dd>
                <hr class="one_line">
                <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>
</html>

refundquery.html

<!DOCTYPE html>
<html>
<head>
    <title>支付宝手机网站交易退款查询 (alipay.trade.fastpay.refund.query)</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link rel="stylesheet" href="../../static/ap.css" type="text/css"/>
</head>
<body text=#000000 bgColor="#ffffff" leftMargin=0 topMargin=4>
<header class="am-header">
    <h1>支付宝手机网站交易退款查询 (alipay.trade.fastpay.refund.query)</h1>
</header>
<div id="main">
    <form name=alipayment action='/alipay/refundQuery' method=post target="_blank">
        <div id="body" style="clear:left">
            <dl class="content">
                <dt>退款请求号:</dt>
                <dd>
                    <input id="WIDout_request_no" name="WIDout_request_no"/>
                </dd>
                <dt>商户订单号:</dt>
                <dd>
                    <input id="WIDout_trade_no" name="WIDout_trade_no"/>
                </dd>
                <hr class="one_line">
                <dt>支付宝交易号:</dt>
                <dd>
                    <input id="WIDtrade_no" name="WIDtrade_no"/>
                </dd>
                <hr class="one_line">
                <dt></dt>
                <dd>
                    <span style="line-height: 28px; color:red;">注意:退款请求号值(必传)商户订单号和支付宝交易号不能同时为空。 trade_no、  out_trade_no如果同时存在优先取trade_no</span>
                </dd>
                <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>
</html>