经过了两天的倒腾,终于让我成功让网站接入支付宝接口了,身为一名小白,属实不易,接下来我们进入正题!
沙箱测试类似的,沙箱测试则生成模拟的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时遇到不少问题,如果有人需要,我再出一个教程,如果没能认证商家需要在沙箱测试的,其实也简单,需要沙箱测试版教程的欢迎提出。
希望大家多多支持!