JavaWeb网站对接支付宝接口(商家版超详细!)

经过了两天的倒腾,终于让我成功让网站接入支付宝接口了,身为一名小白,属实不易,接下来我们进入正题!

沙箱测试类似的,沙箱测试则生成模拟的APPID给你,也有测试的一些密钥,付款时需要下载沙箱版支付宝,登录用户账号来付款。

1.先创建项目和前端支付界面

<%@ page language="java" contentType="text/html; charset=utf-8"
         pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>支付宝网站支付</title>
    <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>
    </div>
    <form name=alipayment action=pay method=post
          target="_blank">
        <div id="body1" class="show" name="divcontent">
            <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>
</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";
    }
    GetDateNow();
</script>
</html>

2.进入支付宝开放平台

我们需要在这里创建应用并上线(上线指的是审核你网站信息),俗话说也就是登记我们的应用信息,然后支付宝会给你网站编个号(APPID),这个appid非常重要,后续步骤我们会用到。

开放平台链接:支付宝开放平台 (alipay.com)  

进入主页后,点右上角登录然后在主页下方找到这个网页/移动应用开发,点进去。

然后会进入到这个界面,填写我们网站相关的信息,注意这里需要你登录的支付宝账户认证成为商家。选网页应用,然后填写域名(如果没有可以乱填,好像也通过审核,后面还可以改)

创建完了就去控制台查看,并将他上线,得到APPID

3.生成一个密钥

下载一个支付宝生成密钥的客户端:密钥工具下载 - 支付宝文档中心 (alipay.com)

下载完打开生成密钥,点击旁边的打开文件位置可以找到历史生成的密钥

4.绑定支付产品

然后我们去控制台点开之前我们创建的应用右边的详情

进去后点击绑定产品,我们绑定一个电脑网站支付的产品

5.生成支付宝公钥

支付宝公钥是,在你提供刚我们生成密钥中的应用公钥后,支付宝生成给你的支付宝公钥,这个也很重要,后面要用到,记下。还有下面的支付宝网关地址,也记下!后面需要拿来填写。

点设置,按步骤操作即可,其他可以不用管先。

6.编写请求到支付宝支付界面的相关代码

1)AppUtil

按注解提示填即可,需要说一下的是,我们测试需要一个能访问的网址才行,在return_url和notify_url中需要用到,这里填写时直接网址加/getreturn,这个getreturn是同步通知,用于校验支付宝返回的信息,校验相应的密钥。

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

    // 商户私钥,您的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://fwnytt.natappfree.cc/getnotify";

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

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

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

    // 支付宝网关,注意这些使用的是沙箱的支付宝网关,与正常网关的区别是多了dev
    public static String gatewayUrl = "https://openapi.alipay.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();
                }
            }
        }
    }
}

网址我们可以到NETAPP中获取:NATAPP -

网站上有相应的教程教你如何进行内网穿透,然后得到一个域名。NATAPP1分钟快速新手图文教程 - NATAPP-内网穿透 基于ngrok的国内高速内网映射工具

2)PayContrller

用于处理支付请求的,也就是点击支付按钮后,会提交到此

@Controller
public class PayController {
    @Resource
    private AlipayClient alipayClient;
    @Resource
    private AlipayTradePagePayRequest alipayTradePagePayRequest;


    //处理支付请求
    //1.接收页面传过来的数据:订单号,金额,名称,商品描述  表单中的name值=参数名
    @RequestMapping("/pay")
    public void pay(String WIDout_trade_no, String WIDsubject, String WIDtotal_amount, String WIDbody, HttpServletResponse response)
         throws AlipayApiException, IOException {
        //2.获得支付的客户端AlipayClient,和配置支付信息的对象AlipayTradePagePayRequest
        //3.设置响应的地址(支付宝返回给商户的响应地址)
        alipayTradePagePayRequest.setNotifyUrl(AppUtil.notify_url);
        alipayTradePagePayRequest.setReturnUrl(AppUtil.return_url);
        //4.设置请求的参数(传递给支付宝的数据)
        alipayTradePagePayRequest.setBizContent(
                "{\"out_trade_no\":\""+ WIDout_trade_no +"\","
                + "\"total_amount\":\""+ WIDtotal_amount +"\","
                + "\"subject\":\""+ WIDsubject +"\","
                + "\"body\":\""+ WIDbody +"\","
                + "\"product_code\":\"FAST_INSTANT_TRADE_PAY\"}");
        //5.发送请求
        String result = alipayClient.pageExecute(alipayTradePagePayRequest).getBody();
        //6.将响应结果返回给前端
        response.setContentType("text/html;charset=utf-8");
        response.getWriter().println(result);
    }
}

3)ReturnController

此处也就是1)中所说的getreturn是同步通知,用于校验支付宝返回的信息,校验相应的密钥。

@Controller
public class ReturnController {
    @RequestMapping("/getreturn")
    public void getreturn(HttpServletRequest request, HttpServletResponse response) throws AlipayApiException, IOException {
        //获取支付宝GET过来反馈信息
        Map<String,String> params = new HashMap<String,String>();
        Map<String,String[]> requestParams = request.getParameterMap();
        Iterator<String> iter = requestParams.keySet().iterator();
        while(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] + ",";
            }
            //乱码解决,这段代码在出现乱码时使用
            //valueStr = new String(valueStr.getBytes("ISO-8859-1"), "utf-8");
            params.put(name, valueStr);
        }

        //RSA2验证
        boolean signVerified = AlipaySignature.rsaCheckV1(params, AppUtil.alipay_public_key, AppUtil.charset, AppUtil.sign_type); //调用SDK验证签名
        response.setContentType("text/html;charset=utf-8");
        PrintWriter out = response.getWriter();
        //——请在这里编写您的程序(以下代码仅作参考)——
        if(signVerified) {
            //商户订单号
            String out_trade_no = request.getParameter("out_trade_no");
            //支付宝交易号
            String trade_no = request.getParameter("trade_no");
            //付款金额
            String total_amount = request.getParameter("total_amount");
            out.println("trade_no:"+trade_no+"<br/>out_trade_no:"+out_trade_no+"<br/>total_amount:"+total_amount);
            out.println("验签成功!");
        }else {
            out.println("验签失败!");
        }
    }
}

4)BeanUtil

@Configuration
public class BeanUtil {
    //创建支付宝所需要的对象
    @Bean
    public AlipayClient alipayClient(){
        return new DefaultAlipayClient(AppUtil.gatewayUrl,AppUtil.app_id,AppUtil.merchant_private_key,"json",AppUtil.charset,
                AppUtil.alipay_public_key,AppUtil.sign_type);
    }

    @Bean    //支付信息的配置
    public AlipayTradePagePayRequest  alipayTradePagePayRequest(){
        return  new AlipayTradePagePayRequest();
    }


}

5)启动项

@SpringBootApplication
public class Begin {
    public static void main(String[] args) {
        SpringApplication.run(Begin.class,args);
    }

}

6)目录结构

7)pom.xml

<?xml version="1.0" encoding="UTF-8"?>

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
  <modelVersion>4.0.0</modelVersion>

  <groupId>org.example</groupId>
  <artifactId>zhifubaodemo</artifactId>
  <version>1.0-SNAPSHOT</version>
  <packaging>war</packaging>

  <name>zhifubaodemo Maven Webapp</name>
  <!-- FIXME change it to the project's website -->
  <url>http://www.example.com</url>

  <properties>
    <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
    <maven.compiler.source>1.7</maven.compiler.source>
    <maven.compiler.target>1.7</maven.compiler.target>
  </properties>

  <parent>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-parent</artifactId>
    <version>2.3.3.RELEASE</version>
    <relativePath/> <!-- lookup parent from repository -->
  </parent>

  <dependencies>
    <!--springBoot依赖包-->
    <dependency>
      <groupId>org.springframework.boot</groupId>
      <artifactId>spring-boot-starter-web</artifactId>
    </dependency>

    <!-- 支付功能SDK -->
    <dependency>
      <groupId>com.alipay.sdk</groupId>
      <artifactId>alipay-sdk-java</artifactId>
      <version>4.38.212.ALL</version>
    </dependency>
    
    <!--springBoot支持jsp-->
    <dependency>
      <groupId>org.apache.tomcat.embed</groupId>
      <artifactId>tomcat-embed-jasper</artifactId>
      <scope>provided</scope>
    </dependency>

<!--    <dependency>-->
<!--      <groupId>com.alipay.sdk</groupId>-->
<!--      <artifactId>alipay-sdk-java</artifactId>-->
<!--      <version>4.10.124.ALL</version>-->
<!--    </dependency>-->

    <dependency>
      <groupId>org.example</groupId>
      <artifactId>zhifubaodemo</artifactId>
      <version>1.0-SNAPSHOT</version>
    </dependency>
  </dependencies>

  <build>
    <finalName>zhifubaodemo</finalName>
    <pluginManagement><!-- lock down plugins versions to avoid using Maven defaults (may be moved to parent pom) -->
      <plugins>
        <plugin>
          <artifactId>maven-clean-plugin</artifactId>
          <version>3.1.0</version>
        </plugin>
        <!-- see http://maven.apache.org/ref/current/maven-core/default-bindings.html#Plugin_bindings_for_war_packaging -->
        <plugin>
          <artifactId>maven-resources-plugin</artifactId>
          <version>3.0.2</version>
        </plugin>
        <plugin>
          <artifactId>maven-compiler-plugin</artifactId>
          <version>3.8.0</version>
        </plugin>
        <plugin>
          <artifactId>maven-surefire-plugin</artifactId>
          <version>2.22.1</version>
        </plugin>
        <plugin>
          <artifactId>maven-war-plugin</artifactId>
          <version>3.2.2</version>
        </plugin>
        <plugin>
          <artifactId>maven-install-plugin</artifactId>
          <version>2.5.2</version>
        </plugin>
        <plugin>
          <artifactId>maven-deploy-plugin</artifactId>
          <version>2.8.2</version>
        </plugin>
      </plugins>
    </pluginManagement>
  </build>
</project>

7.测试

1)

先启动NETAPP下载的小应用,进去填写:

 natapp -authtoken=9ab6b9040a624f40

等于后面填写你隧道的authtoken

2)

启动后,得到的网址修改到AppUtil中,前后不能有空格,然后启动项目。

3)

在网页中输入获取到的网址,就进入到我们一开始写的前端界面啦,点付款就能跳转到支付宝支付界面啦。

8.常见错误

1.SDK版本过低,好像需要用到4.35以上的

2.支付宝网关地址不对,应填写:

https://openapi.alipay.com/gateway.do

有疑问欢迎提问!

        在校大学生一枚,小白第一次写文章,有不足的地方请指正补充,我在更新SDK时遇到不少问题,如果有人需要,我再出一个教程,如果没能认证商家需要在沙箱测试的,其实也简单,需要沙箱测试版教程的欢迎提出。

希望大家多多支持!

Javaweb是一个基于Java技术的Web开发框架,它结合了Java语言的强大特性和Web开发的灵活性,使开发人员能够快速构建高性能、高可靠性的Web应用程序。 在javaweb开发中,MVC架构被广泛应用:M代表Model(数据模型),是应用程序中处理数据的部分,V代表View(视图),是应用程序中呈现数据的部分,C代表Controller(控制器),是应用程序中协调Model和View之间交互的部分,实现了将业务逻辑和用户界面分离的目的。 在实现增删改查功能时,首先需要对数据模型进行设计并编写相应的Java类,用于映射数据库中的表。同时,在控制器中编写相应的方法,处理用户请求,并实现对数据模型的操作,例如添加、删除、修改和查询等操作。在视图中,需要开发者编写相应的页面,实现用户操作界面。其中,JSP和Servlet是实现控制器和视图的两种主要方式。 对于添加功能,在视图中,需要编写一个表单,用于接收用户输入的数据;在控制器中,在相应的方法中,对表单数据进行验证和存储操作;最后,应该向用户显示添加成功的消息或跳转到相应的页面。 对于删除功能,用户需要提供要删除的数据ID。在控制器中,需要对相应的数据进行删除操作,最后通知用户成功删除或者跳转到相应的页面。 对于修改功能,用户需要提供要修改的数据ID,在视图中提供修改相应数据的表单。在控制器中,需要对接收到的数据进行验证,并对相应的数据进行修改操作。最后通知用户修改成功或跳转到相应的页面。 对于查询功能,需要根据用户提供的查询条件在数据模型中进行查询,在控制器中将查询结果返回给视图展示给用户。 总之,在实现增删改查功能时,需要清晰的MVC架构,合理的设计数据模型和操作方法,并编写相应的视图页面,最后实现对控制器和模型的交互操作,从而达到实现增删改查功能的目的。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值