UDN-企业互联网技术人气社区

板块导航

浏览  : 2194
回复  : 3

[原生js] 微信支付 JS API支付接口详解

[复制链接]
饼干妹妹的头像 楼主
发表于 2017-1-16 13:39:38 | 显示全部楼层 |阅读模式
  本文是对微信支付 JS API支付接口介绍,并附代码实例,在开发过程中具有参考价值,希望能帮助到需要的朋友

  一、JS API支付接口(getBrandWCPayRequest)
  
  微信JS API只能在微信内置浏览器中使用,其他浏览器调用无效。微信提供getBrandWCPayRequest接口供商户前端网页调用,调用之前微信会鉴定商户支付权限,若商户具有调起支付的权限,则将开始支付流程。这里主要介绍支付前的接口调用规则,支付状态消息通知机制请参加下文。接口需要注意:所有传入参数都是字符串类型!
  
  getBrandWCPayRequest参数如下图所示。

QQ截图20170116133438.png
  
  getBrandWCPayRequest返回值如下表所示。
QQ截图20170116133454.png
  
  返回值 说明
  
  err_msg get_brand_wcpay_request:ok  支付成功
  
  get_brand_wcpay_request:cancel 支付过程中用户取消
  
  get_brand_wcpay_request:fail 支付失败
  
  JS API的返回结果 get_brand_wcpay_request:ok 仅在用户成功完成支付时返回。由于前端交互复杂,get_brand_wcpay_request:cancel 或者 get_brand_wcpay_request:fail 可以统一处理为用户遇到错误或者主动放弃,不必细化区分。
  
 二、JS API支付实现
  
  下面代码是微信官方提供的JS API支付demo
  1. <?php
  2. include_once("WxPayHelper.php");
  3. $commonUtil = new CommonUtil();
  4. $wxPayHelper = new WxPayHelper();
  5. $wxPayHelper->setParameter("bank_type", "WX");
  6. $wxPayHelper->setParameter("body", "test");
  7. $wxPayHelper->setParameter("partner", "1900000109");
  8. $wxPayHelper->setParameter("out_trade_no", $commonUtil->create_noncestr());
  9. $wxPayHelper->setParameter("total_fee", "1");
  10. $wxPayHelper->setParameter("fee_type", "1");
  11. $wxPayHelper->setParameter("notify_url", "htttp://www.baidu.com");
  12. $wxPayHelper->setParameter("spbill_create_ip", "127.0.0.1");
  13. $wxPayHelper->setParameter("input_charset", "GBK");
  14. ?>

  15. <html>
  16. <script language="JavaScript">
  17. function callpay()
  18. {
  19. WeixinJSBridge.invoke('getBrandWCPayRequest',<?php echo $wxPayHelper->create_biz_package(); ?>,function(res){
  20. WeixinJSBridge.log(res.err_msg);
  21. alert(res.err_code+res.err_desc+res.err_msg);
  22. });
  23. }
  24. </script>
  25. <body>
  26. <button type="button" onclick="callpay()">wx pay test</button>
  27. </body>
  28. </html>
复制代码

  将其中的微信支付参数修改成自己所申请得到的,然后将网页上传到微信支付目录下,给测试账号回复该网页地址。用户就可以实现一次JS API支付。
  
  三、效果演示
  
  下面是官方DEMO修改后,发起支付的页面图。
 
2016711174545987.png
 
  确认交易:
  
2016711173934164.png

  输入支付密码:
  
2016711175924470.png

  交易成功:
  
2016711180224322.png

  以上就是对微信支付JS API 资料的整理,希望能帮到大家,谢谢支持!

相关帖子

发表于 2017-1-16 13:40:08 | 显示全部楼层
前排支持下
使用道具 举报

回复

发表于 2017-1-16 13:40:08 | 显示全部楼层
前排支持下
使用道具 举报

回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关于我们
联系我们
  • 电话:010-86393388
  • 邮件:udn@yonyou.com
  • 地址:北京市海淀区北清路68号
移动客户端下载
关注我们
  • 微信公众号:yonyouudn
  • 扫描右侧二维码关注我们
  • 专注企业互联网的技术社区
版权所有:用友网络科技股份有限公司82041 京ICP备05007539号-11 京公网网备安1101080209224 Powered by Discuz!
快速回复 返回列表 返回顶部