项目中微信公众号调取支付控件demo

Posted 2020-09-24

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了项目中微信公众号调取支付控件demo相关的知识，希望对你有一定的参考价值。

微信支付官方文档：https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=7_7&index=6

前端代码demo (JSP页面)：

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
	<title>订单支付</title>
	<link rel="stylesheet" href="//cdn.bootcss.com/weui/1.1.1/style/weui.min.css">
	<script type="text/javascript" src="//cdn.bootcss.com/jquery/3.1.1/jquery.js"></script>
	<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=PDzweVAQXotI9pGAyDjzeQWN3U66LS2S&s=1"></script>
	<link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
	<link rel="stylesheet" href="../css/myedit.css" />
</head>
<body ontouchstart >
	<input id="openId"  type="hidden"  value="${eaporLoginOpenId }"/>
	<span>openId:</span><span id="o"></span>
	<a   class="weui-btn weui-btn_plain-default" style="margin-top:100px;">0.01元</a>
	 <a id="pay"  class="weui-btn  weui-btn_primary">立即支付</a>
	 <p id="sr"></p>
	 <script>
		function onBridgeReady(a){
	 	   var result = JSON.parse(a);
	 	   WeixinJSBridge.invoke(
	 	       ‘getBrandWCPayRequest‘, {
	 	           "appId":String(result.appId),//公众号名称，由商户传入     
	 	           "timeStamp":String(result.timeStamp),//时间戳，自1970年以来的秒数     
	 	           "nonceStr":String(result.nonceStr),//随机串     
	 	           "package":String(result.packages),     
	 	           "signType":String(result.signType),//"MD5"//微信签名方式：     
	 	           "paySign":String(result.paySign)//微信签名 
	 	       },
	 	       function(res){    
	 	          if (res.err_msg == "get_brand_wcpay_request:ok") {
                      //alert("微信支付成功!");
                      window.location="wx_payResult.jsp";
                  } /* else if (res.err_msg == "get_brand_wcpay_request:cancel") {
                      alert("用户取消支付!");
                  } else {
                      alert(res.err_msg);
                      alert("支付失败!");
                  } */
	 	            // 使用以上方式判断前端返回,微信团队郑重提示：res.err_msg将在用户支付成功后返回    ok，但并不保证它绝对可靠。 
	 	       }
	 	   ); 
	 	}
		
	 $(function(){
		 $(‘#o‘).html($(‘#openId‘).val());
	 });
	 
 	$(‘#pay‘).on(‘click‘,function(){
 		$.ajax({
 			type:‘post‘,
 			url:‘../../netTestPay/first‘,
 			data:{body:‘酒店房间预订单‘,total_fee:1,out_trade_no:String(new Date().getTime()),openId:$(‘#openId‘).val()},
 			dataType:‘json‘,
 			success:function(result){
 				 if (typeof WeixinJSBridge == "undefined"){
	 		 	   if( document.addEventListener ){
	 		 	       document.addEventListener(‘WeixinJSBridgeReady‘, onBridgeReady, false);
	 		 	   }else if (document.attachEvent){
	 		 	       document.attachEvent(‘WeixinJSBridgeReady‘, onBridgeReady); 
	 		 	       document.attachEvent(‘onWeixinJSBridgeReady‘, onBridgeReady);
	 		 	   }
	 		 	}else{
	 		 	   onBridgeReady(JSON.stringify(result));
	 		 	 $(‘#sr‘).html(JSON.stringify(result));
	 		 	} 
 			}
 		});
 	});
	 </script>
</body>
</html>

以上是关于项目中微信公众号调取支付控件demo的主要内容，如果未能解决你的问题，请参考以下文章

支付如何调取第三方的sdk--收银台页面描述