微信小程序实现支付宝支付——web-view实现-Toy模板网

这篇具有很好参考价值的文章主要介绍了微信小程序实现支付宝支付——web-view实现。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

效果图

前言

由于使用到的微信小程序需要实现支付功能，而微信支付的申请手续较为繁琐，所以使用了支付宝支付，但是微信小程序正常情况不支持支付宝支付，所以我使用了web-view内嵌了支付宝的h5支付。

1.Springboot支付宝沙箱支付：

不会使用支付宝沙箱支付的同学可以看这篇文章Springboot支付宝沙箱支付

#支付宝环境
alipay:
  url: https://openapi.alipaydev.com/gateway.do
  app_id: 商户号
  app_private_id: 商户私钥
  format: json
  charset: UTF-8 
  alipay_public_key: 商户公钥
  sign_type: RSA2
  return_url: 支付完成后的地址
  notify_url: 回调地址


    @RequestMapping("/paytest")
    @IgnoreAuth
    public   void   alipay (HttpServletRequest httpRequest,
                            HttpServletResponse httpResponse)   throws IOException {



        //获得初始化的AlipayClient
        AlipayClient alipayClient =  new DefaultAlipayClient( Constant.URL , Constant.APP_ID, Constant.APP_PRIVATE_KEY, Constant.FORMAT,
                Constant.CHARSET, Constant.ALIPAY_PUBLIC_KEY, Constant.SIGN_TYPE);
        //创建API对应的request
        AlipayTradePagePayRequest alipayRequest =  new  AlipayTradePagePayRequest();
        alipayRequest.setReturnUrl(Constant.RETURNURL);
        //在公共参数中设置回跳和通知地址
        alipayRequest.setNotifyUrl(Constant.NOTIFYURL);
        String outTradeNo = RandomUtil.randomNumbers(15);
        String totalAmount = "88.8";
        alipayRequest.setBizContent( "{"  +
                "    \"out_trade_no\":\""+outTradeNo+"\","  +
                "    \"product_code\":\"FAST_INSTANT_TRADE_PAY\","  +
                "    \"total_amount\":"+totalAmount+","  +
                "    \"subject\":\"Iphone6 16G\","  +
                "    \"body\":\"Iphone6 16G\","  +
//                "    \"passback_params\":\"merchantBizType%3d3C%26merchantBizNo%3d2016010101111\","  +
                "    \"extend_params\":{"  +
                "    \"sys_service_provider_id\":\"2088511833207846\""  +
                "    }" +
                "  }" );
        //填充业务参数
        String form= "" ;
        try  {
            //调用SDK生成表单
            form = alipayClient.pageExecute(alipayRequest).getBody();
        }  catch  (AlipayApiException e) {
            e.printStackTrace();
        }
        httpResponse.setContentType( "text/html;charset="  +  Constant.CHARSET);
        //直接将完整的表单html输出到页面
        httpResponse.getWriter().write(form);
        httpResponse.getWriter().flush();
        httpResponse.getWriter().close();
    }

2.小程序拉起支付

代码如下：

<web-view src="http://localhost:8080/back/app/alipay/paytest" > </web-view>

到此处小程序可以完成支付，但是却无法返回到小程序目标界面，只能到返回return_url的web界面

3.web界面返回小程序

我们可以通过访问一个使微信小程序重定向的h5界面，来让小程序返回到目标界面

代码如下：

<!-- h5端 HTML和JS -->
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
<script>
     wx.miniProgram.redirectTo({
     //url 为小程序的目标界面
      url:"/pages/inner/index?source=123"
     })

</script>