支付宝手机网站支付对接

开发指导地址：https://open.alipay.com/api/detail?code=I1080300001000041949

创建应用并设置公司钥等信息

获取appid等信息

 

 

参数说明：

　　notifyUrl：异步回调地址，支付完成后调用自开发系统的接口地址

　　returnUrl：同步回调地址，支付宝支付接口同步回调地址，结果不一定准确，业务处理需以异步回调为准

　　returnPage：自己定义的一个网页，本环境是自己做的内网穿透，端口绑定了，在returnUrl中重定向到此页面

属性配置类：

@Component("alipayProperties")
@ConfigurationProperties(prefix = "pay.alipay")
public class AlipayProperties {
    @NotBlank(message = "支付宝网关为空")
    private String gateway;
    @NotBlank(message = "appId为空")
    private String appId;
    @NotBlank(message = "收款账号为空")
    private String sellerId;
    @NotBlank(message = "应用私钥为空")
    private String appPriKey;
    @NotBlank(message = "支付宝公钥为空")
    private String aliPubKey;
    @NotBlank(message = "异步通知地址为空")
    private String notifyUrl;
    @NotBlank(message = "同步通知地址为空")
    private String returnUrl;
    @NotBlank(message = "同步通知页面路径")
    private String returnPage;
    @NotBlank(message = "format为空")
    private String format;
    @NotBlank(message = "签名类型为空")
    private String signType;
    @NotBlank(message = "字符集为空")
    private String charset;

}

生产单例的客户端：

@Bean("alipayClient")
public AlipayClient alipayClient() {
    String validResult = JSR303Validator.doAllValidate(alipayProperties);
    if (!StringUtils.equals(validResult, CommConstant.PARAM_VALID_SUCCESS)) {
        log.error("支付宝支付参数配置错误：{}", validResult);
        throw new RuntimeException("支付宝支付参数配置错误" + validResult);
    }
    return new DefaultAlipayClient(
            alipayProperties.getGateway(),
            alipayProperties.getAppId(),
            alipayProperties.getAppPriKey(),
            alipayProperties.getFormat(),
            alipayProperties.getCharset(),
            alipayProperties.getAliPubKey(),
            alipayProperties.getSignType());
}

后台发送支付请求：

public AlipayResponse wapPay(String orderId, AlipayClient alipayClient, String bizContent) {
    AlipayTradeWapPayResponse payResponse = null;
    AlipayTradeWapPayRequest request = new AlipayTradeWapPayRequest();
    request.setNotifyUrl(alipayProperties.getNotifyUrl());
    request.setReturnUrl(alipayProperties.getReturnUrl());
    request.setBizContent(bizContent);
    try {
        //调用渠道方法
        payResponse = alipayClient.pageExecute(request);
    } catch (Exception e) {
        log.error("{}支付异常", orderId);
        e.printStackTrace();
    }
    return payResponse;
}

获取响应信息：响应信息是带有支付信息的form表单字符串，返到页面进行处理

if (payResponse == null) {
    log.error("{}支付失败: 支付结果不明确", orderId);
    CodeMsg.CHANNEL_RESULT_VAGUE.fillResponse(response);
} else {
    responseStr = channelResJson;
    if (payResponse.isSuccess()) {
        log.info("{}支付成功", orderId);
        CodeMsg.SUCCESS.fillResponseWithData(response, payResponse.getBody());
    } else {
        log.error("{}支付失败：{}", orderId, payResponse.getSubMsg());
        CodeMsg.CHANNEL_RETURN_ERR.fillResponse(response, payResponse.getSubMsg());
    }
}

前端页面处理（VUE）：
获取响应结果并转发：

orderApi.paySaleOrder({
                 orderId: this.order.orderId
}).then(res => {
         if (this.order.payMethod === '02') { //支付宝支付
             if("SUCCESS" === res.code){
                 this.$router.push({
                         name: 'payment/alipay',
                         params: {
                     orderId: this.order.orderId,
                             aliPayForm: res.serviceData
                 }
         })
             }
         }
}).catch(err => {
                 Toast.fail("订单支付失败")
         })
转发的页面：

<template>
    <div>
        <div class="payForm" v-html="payForm"></div>
        <van-nav-bar title="支付宝支付" />
        <div class="result">
            <van-icon v-if="isSuccess" name="success" size="80" color="green" />
            <van-icon v-if="!isSuccess" name="circle" size="80" color="red" /><br>
            <span>{{result}}</span>
        </div>
    </div>
</template>
页面参数：

data(){
              return{
                      payForm: '',
                      result: '待支付',
                      isSuccess: false,
                      orderId: '',
                      count: 5
}
          },

初始化页面方法

initPage() {
    console.log(this.$route)
    var payInfo = this.$route.params.aliPayForm;
    this.orderId = this.$route.params.orderId;
    if(typeof payInfo == 'string' && payInfo.length ){
        this.payForm = payInfo
        this.$nextTick(()=>{
                document.forms[0].submit()
        })
    }else{
        Toast.fail("支付表单生成失败");
    }

}