如何在微信中接入支付宝支付

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何在微信中接入支付宝支付相关的知识，希望对你有一定的参考价值。

前提：需要一台nginx服务器做反向代理

前言：支付宝支付手机支付一共分4个页面分别为1、输入手机号页面，2、输入验证码页面，3、输入支付密码页面，4、支付结果页面

1、配置nginx服务器为 https://mclient.alipay.com做反向代理,对app和支付宝做反向代理如下，要求支付宝的反向代理后的域名与app的域名为同域。

server {
    listen 80;
    server_name app.domin.com;
    access_log /var/website/app/logs/access.log;
    error_log /var/website/app/logs/error.log;

    location /app {
        proxy_pass http://xxx.xx.xxx.xxx:8080/app;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header REMOTE-HOST $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        client_max_body_size 100m;
    }
    location / {
        proxy_pass https://mclient.alipay.com/;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header REMOTE-HOST $remote_addr;
        client_max_body_size 100m;
    }
}

2、前端需要嵌套一个iframe链接支付宝的反向代理地址，看js部分，对第1、2个页面做前端域名替换因为不涉及到js问题，所以没有做处理，第3、4个页面涉及到js的调用，因为支付宝js的写法导致原本绑定的事件不能执行，第3个页面包含了【确认付款】这几个字，所以以此为判断条件，如果是第三个页面就把一个表单插入到iframe的body中，用js把页面的html提交到本文第5节的地址中去，又这个方法处理后增加一个chuliguo的标志重新返回html，使输入密码的js可以正常执行，第4步同理。

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<c:set var="ctx" value="${ pageContext.request.contextPath }" /> 
<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>支付</title>
    <script src="//cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
    <style>
        .scroll-wrapper{   
          position: fixed;    
          right: 0;    
          bottom: 0;    
          left: 0;   
          top: 0;   
          -webkit-overflow-scrolling: touch;   
          overflow-y: scroll;   
        }   
           
        .scroll-wrapper {   
          height: 100%;   
          width: 100%;   
              border: none;
        }   
        </style>
</head>
<body>
<iframe class="scroll-wrapper" src="${ ctx }/alipay/pay?id=${ id }&type=${ type }">
    
</iframe>
<script>

    var form = "<form id=‘sbform‘ action=‘${ ctx }/alipay/rerender‘ method=‘post‘><input type=‘hidden‘ id=‘submit_html‘ value=‘‘ name=‘html‘></form>";

    function buildRegex() {
        var op = "g";
        return new RegExp("https://mclient.alipay.com", op);
    }


    $(".scroll-wrapper").get(0).onload = function(){
        
        var docuemnt = $("iframe").get(0).contentWindow.document;
        var html = $(docuemnt).find("html").html();
        
        if(html.indexOf("确认付款") > 0 ){            
            if(html.indexOf("chuliguo") < 0){
                $(docuemnt).find("html").find(‘body‘).append($(form));
                $(docuemnt).find("html").find(‘body‘).find(‘#sbform‘).find(‘#submit_html‘).val($(docuemnt).find("html").html());
                $(docuemnt).find("html").find(‘body‘).find(‘#sbform‘).submit();
            }
            
        }else if(html.indexOf("付款结果") > 0 ){
            if(html.indexOf("chuliguo") < 0){
                
                $(docuemnt).find("html").find(‘body‘).append($(form));
                $(docuemnt).find("html").find(‘body‘).find(‘#sbform‘).find(‘#submit_html‘).val($(docuemnt).find("html").html());
                $(docuemnt).find("html").find(‘body‘).find(‘#sbform‘).submit();
                
            }else{
                location.href = $(docuemnt).find("html").find(‘body‘).find(".J-return-link").find("a").attr("href");
            }
        }else{
            html = html.replace(buildRegex(), "http://app.domin.com")
            $(docuemnt).find("html").html(html);
        }
        $("iframe").show();
    }
</script>
</body>
</html>

3、生成支付宝订单的时候把openapi的地址替换成项目中的一个action，其中urlService.getUrl返回的是http://app.domin.com/alipay/middle/

form = form.replace("https://openapi.alipay.com", urlService.getUrl("alipay", "middle", request))

4、表单提交到的本地方法如下，因为上一步中支付宝生成的表单中的地址是https://openapi.alipay.com/gateway.do，上一步替换完了就是app.domin.com/alipay/middle/gateway.do。或者上一步连gateway.do一起替换。不清楚可以此处打断点调试。此方法就是对原本的openapi.alipay的请求做一个中转，返回支付宝给的表单html。这一步不能直接对openapi域名反向代理，因为提交以后支付宝端直接跳转到mclient地址，没有替换域名的机会。此处把mclient.alipay.com替换成项目域名也就是app.domin.com，项目域名根目录第一节中反向代理了mclient.alipay.com

@RequestMapping(value = "middle/gateway.do")
    public void middle(HttpServletRequest request,HttpServletResponse response) throws IOException{
        String queryString = request.getQueryString();
        String biz_content = request.getParameter("biz_content");
        Map<String, String> param = new HashMap<>();
        param.put("biz_content", biz_content);
        String res = HttpUtil.http("https://openapi.alipay.com/gateway.do?" + queryString, param,null);
        res = res.replaceAll("https://mclient.alipay.com", urlService.serverPath(request, ""));
        response.getWriter().write(res);
    }

5、后台需要一个重新渲染支付宝html的方法,把支付宝的地址换成我们反向代理支付宝的地址 ,此代码在输完手机号验证码输入支付密码的页面调用见第2节的说明，因为有的步骤是前台做html中域名替换，导致这一步输入不了密码。处理完成后拼接一个chuliguo的input作为前台判断的标志，防止循环重载此页面。可结合前台代码一起理解这一步的作用。

@RequestMapping(value = "rerender")
    public void rerender(HttpServletRequest request,HttpServletResponse response) throws IOException{
        String html = request.getParameter("html");
        html = html.replaceAll("https://mclient.alipay.com", "http://app.domin.com");
        html += "<input type=‘hidden‘ value=‘chuliguo‘>";
        response.setHeader("X-XSS-Protection", "0");
        
        response.getWriter().write(html);
    }

 


以上是关于如何在微信中接入支付宝支付的主要内容，如果未能解决你的问题，请参考以下文章

企业微信中的应用调起微信支付，支付不成功

微信小程序中如何接入微信支付？

微信h5支付 可以在微信中使用吗

如何在微信内部iframe使用支付宝

个人的网站如何对接支付宝和微信的支付接口？自己的网站急需接入支付接口，有没有大佬指点一下？

微信公众号支付踩坑记