支付宝H5支付_h5支付宝支付功能前端怎么实现

作者：菜鸟追梦旅行 | 2024-06-10 21:08:39

踩

h5支付宝支付功能前端怎么实现

支付宝H5支付

一、前期准备

1、去蚂蚁金服开放平台 https://open.alipay.com/platform/manageHome.htm，登录。

2、选择开发者中心–>网站&移动应用

在这里插入图片描述

3、选择支付接入

在这里插入图片描述 ### 4、创建应用

5、生成秘钥：官网地址

在这里插入图片描述
第一步：生成 RSA 密钥
第二步：上传应用公钥并获取支付宝公钥
https://open.alipay.com/dev/workspace/key-manage

开发代码中要使用到支付宝公钥和商户应用私钥。

二、搭建和配置开发环境

服务端sdk
这里是java，maven项目，选择需要的依赖。

 <dependency>
            <groupId>com.alipay.sdk</groupId>
            <artifactId>alipay-sdk-java</artifactId>
            <version>3.4.49.ALL</version>
  </dependency>
1
2
3
4
5

三、调用接口

手机网站支付产品包含两类API：
页面跳转类：需要从前端页面以Form表单的形式发起请求，浏览器会自动跳转至支付宝的相关页面（一般是收银台或签约页面），用户在该页面完成相关业务操作后再回跳到商户指定页面。例如本产品中的手机网站支付接口alipay.trade.wap.pay。
系统调用类：直接从服务端发起HTTP请求，支付宝会同步返回请求结果。例如本产品中的交易查询等配套API。

我这里是采用的是页面跳转类。
在这里插入图片描述

java代码：

//#HTTPS请求地址: alipay_gatewayUrl= https://openapi.alipay.com/gateway.do
//应用id： app_id
//私钥： merchant_private_key
//#字符编码格式: alipay_charset=utf-8
//公钥：alipay_public_key
// #签名方式: alipay_sign_type=RSA2

 public  Map<String, String>  aliPayH5() throws AlipayApiException {
        Map<String, String> resultMap = new HashMap<>();
        AlipayClient alipayClient = new DefaultAlipayClient(gatewayUrl, app_id, merchant_private_key, "json", charset, alipay_public_key, sign_type);
        AlipayTradeWapPayRequest alipayRequest = new AlipayTradeWapPayRequest();//创建API对应的request类
        //设置回调地址
        alipayRequest.setNotifyUrl(alipay_h5_notify_url);
        alipayRequest.setReturnUrl(return_url);
        Map<String,Object> map=new HashMap<>();
        map.put("out_trade_no",orderNo());     //商户订单号

        //订单总金额（元，保留2位小数）
        BigDecimal fee = new BigDecimal(orderFee).divide(new BigDecimal(100),2, RoundingMode.HALF_UP);
        map.put("total_amount" , fee);

        //订单标题
         map.put("subject", "预约订单:" + bizOrder.getOrderNo());

        //该笔订单允许的最晚付款时间，m-分钟，h-小时，d-天，1c-当天
        map.put("timeout_express","5m");
        //把订单信息转换为json对象的字符串
        String postdata = JSONObject.fromObject(map).toString();
        alipayRequest.setBizContent(postdata);
        String form = alipayClient.pageExecute(alipayRequest).getBody(); //调用SDK生成表单
        resultMap.put("form",form);
        return resultMap;

    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

这里就可以拿到form，包含自动提交的脚本。

官方文档是后端直接响应如下：

public void doPost(HttpServletRequest httpRequest,
HttpServletResponse httpResponse) throws ServletException, IOException {
AlipayClient alipayClient = new DefaultAlipayClient("https://openapi.alipay.com/gateway.do", APP_ID, APP_PRIVATE_KEY, "json", CHARSET, ALIPAY_PUBLIC_KEY, "RSA2"); //获得初始化的AlipayClient
AlipayTradeWapPayRequest alipayRequest = new AlipayTradeWapPayRequest();//创建API对应的request
alipayRequest.setReturnUrl("http://domain.com/CallBack/return_url.jsp");
alipayRequest.setNotifyUrl("http://domain.com/CallBack/notify_url.jsp");//在公共参数中设置回跳和通知地址
alipayRequest.setBizContent("{" +
" \"out_trade_no\":\"20150320010101002\"," +
" \"total_amount\":\"88.88\"," +
" \"subject\":\"Iphone6 16G\"," +
" \"product_code\":\"QUICK_WAP_PAY\"" +
" }");//填充业务参数
String form="";
try {
form = alipayClient.pageExecute(alipayRequest).getBody(); //调用SDK生成表单
} catch (AlipayApiException e) {
e.printStackTrace();
}
httpResponse.setContentType("text/html;charset=" + CHARSET);
httpResponse.getWriter().write(form);//直接将完整的表单html输出到页面
httpResponse.getWriter().flush();
httpResponse.getWriter().close();
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

因为项目是前后端分离，用了ajax渲染的。如下：

$("#payform").html(form);//这里的payform 是支付页面的<div id="payform"></div>

注意： 这个form自带自动提交的脚本，提交的是页面第一个form，从foms[0].submit可以看出。故可以将<div id="payform"></div>放的<body>标签下面来确保提交的是第一个form。

1
2
3
4

此时，即可打开支付宝登录页面。在手机端访问可以打开支付宝客户端。

后面要做的就是支付回调，支付回调主要做的是保存支付流水，处理自己支付完成的业务逻辑。

四、java代码

github 地址

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/菜鸟追梦旅行/article/detail/700364