微信公众号支付WeixinJSBridge

微信公众号中直接发起支付

此前开发更具官方文档一直在使用,wx.chooseWXPay方法完成支付,WeixinJSBridge最开始开发微信的时候也有使用,但是经常出问题,支付不能发起,当时查找好的文章,基本都在说官方在逐步抛弃改方法,所以后续开发使用了,wx.chooseWXPay,个人感觉次方式繁琐,要进行以下几步:
1、引用js库<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
2、通过config接口注入权限验证配置
3、通过ready接口处理验证
4、之后再微信下单
5、完成自己的支付业务。
(参考链接:https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115
单纯的支付感觉没必要。

最近项目中使用了第三方代收款平台的API接口,和对方对接的时候,在完成对方接口的环境、预下单程序后,在调取微信支付的时候,发现官网的提供的接口是WeixinJSBridge!!!(也许太久不关注信息的更新了尴尬),至此整理一下这点内容。供参考,注:以官方的为准!

1、官方参考地址

https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=7_7&index=6 

2、接口参数说明

在微信浏览器里面打开H5网页中执行JS调起支付。接口输入输出数据格式为JSON。

注意:WeixinJSBridge内置对象在其他浏览器中无效。微信调试工具不支持,会提示函数未定义。

列表中参数名区分大小,大小写错误签名验证会失败。

如图:


 回调函数返回标识



3、Demo实例(来自官方)

注:所需的参数值来自微信的统一下单接口;此参数我使用的是全局参数存取参数值。

function onBridgeReady(){
   WeixinJSBridge.invoke(
       'getBrandWCPayRequest', {
           "appId":"wx2421b1c4370ec43b",     //公众号名称,由商户传入     
           "timeStamp":"1395712654",         //时间戳,自1970年以来的秒数     
           "nonceStr":"e61463f8efa94090b1f366cccfbbb444", //随机串     
           "package":"prepay_id=u802345jgfjsdfgsdg888",     
           "signType":"MD5",         //微信签名方式:     
           "paySign":"70EA570631E4BB79628FBCA90534C63FF7FADD89" //微信签名 
       },
       function(res){     
           if(res.err_msg == "get_brand_wcpay_request:ok" ) {}     // 使用以上方式判断前端返回,微信团队郑重提示:res.err_msg将在用户支付成功后返回    ok,但并不保证它绝对可靠。 
       }
   ); 
}
注:此处是对事件的检测及注册,保证支付环境

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();
}

注:简单尝试修改 onBridgeReady()函数为带参数,为了接收动态指定参数,未成功。之后未深入研究。如果有人修改成功,记得留言给我哦。


另附一份JSP代码共参考:

 WeixinJSBridge.invoke('getBrandWCPayRequest',{
			        "appId" : "<%=appId%>","timeStamp" : "<%=timeStamp%>", "nonceStr" : "<%=nonceStr%>", "package" :
			        "<%=packageValue%>","signType" : "MD5", "paySign" : "<%=paySign%>"
			        },function(res){
			        WeixinJSBridge.log(res.err_msg);
			        // alert(res.err_code + res.err_desc + res.err_msg);
			        if(res.err_msg == "get_brand_wcpay_request:ok"){
			
			       		 window.location.href = "http://wx.umebox.net/wxpay/pay1.jsp?id=<%=keyvalue1%>&Icum=<%=openid%>&ddh=<%=ddh%>";
			
			        	 alert("微信支付成功!");
			
			        }else if(res.err_msg == "get_brand_wcpay_request:cancel"){
			       		 alert("用户取消支付!");
			        }else{
			        	alert("支付失败!");
			        }
	       		});













  • 1
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
要在UniApp中实现微信公众支付的JSAPI支付,可以按照以下步骤进行操作: 1. 首先,确保你已经注册了微信公众号,并且已经获得了微信支付的权限。 2. 在UniApp项目中安装并配置相关插件。可以使用uniapp官方提供的插件或第三方插件,如`uni-app-pay`等。 3. 在需要实现支付的页面中,引入微信公众支付的SDK文件。可以通过在`index.html`文件中添加以下代码来引入: ```html <script src="https://res2.wx.qq.com/open/js/jweixin-1.6.0.js"></script> ``` 4. 在需要调用支付的页面中,编写相关代码来获取支付参数(如`appId`、`timestamp`、`nonceStr`、`package`、`signType`、`paySign`)。 ```javascript // 假设从后端获取到的支付参数为payParams const payParams = { appId: '...', timestamp: '...', nonceStr: '...', package: '...', signType: 'MD5', paySign: '...' }; // 调用微信JSAPI支付 function wxPay() { 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(); } } function onBridgeReady() { WeixinJSBridge.invoke( 'getBrandWCPayRequest', { "appId": payParams.appId, // 公众号ID "timeStamp": payParams.timestamp, // 时间戳 "nonceStr": payParams.nonceStr, // 随机字符串 "package": payParams.package, // 支付参数 "signType": payParams.signType, // 签名类型 "paySign": payParams.paySign // 签名 }, function(res) { if (res.err_msg == "get_brand_wcpay_request:ok") { // 支付成功回调 } else { // 支付失败回调 } } ); } // 调用支付方法 wxPay(); ``` 这样,你就可以在UniApp中实现微信公众支付的JSAPI支付了。记得根据实际情况获取和传递支付参数,并处理支付成功和失败的回调。确保支付接口的安全性和正确性。
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值