zoukankan      html  css  js  c++  java
  • 项目中微信公众号调取支付控件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>
    

      

  • 相关阅读:
    前端学习资源
    CSS样式属性单词之Left
    CSS 解决 a标签去掉下划线 text-decoration: none无效 的解决方案
    CSS二级菜单
    position属性absolute与relative 详解
    CSS行高——line-height
    VS code注释快捷键
    CSS padding margin border属性详解
    block(块级元素)和 inline(内联元素) 的区别
    css(float浮动和clear清除)
  • 原文地址:https://www.cnblogs.com/ryans/p/7071374.html
Copyright © 2011-2022 走看看