微信公众号H5支付接口调用方法


Posted in Javascript onJanuary 10, 2019

本文实例为大家分享了 微信内H5调用支付接口的具体代码,供大家参考,具体内容如下

官方文档地址

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>微信公众号H5接口调用</title>
  <script src='./js/md5.js'></script>
</head>
<body>
  <script>
    // 判断微信版本是否在5.0以上
    // window.navigator.userAgent 属性包含了浏览器类型,版本,操作系统类型,浏览器引擎等信息
    var ua = window.navigator.userAgent.toLowerCase()
    // 通过正则表达式匹配 ua 中是否含有 MicroMessenger 字符串
    if (ua.match(/MicroMessenger/i) != 'micromessenger') {
      return false
    }

    var appId = 'wx123456789'
    // 微信H5接口调用准备
    // 1,时间戳
    var timeStamp = new Date()
    timeStamp = timeStamp.getTime()/1000
    console.log('时间戳', timeStamp)

    // 2,生成32位随机字符串
    function randomString(len) {
      len = len || 32
      // 默认去掉了容易混淆的字符oOLl,9gq,Vv,Uu,I1
      var chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678';
      var charsLen = chars.length;
      var pwd = '';
      for (var i=0;i<len;i++) {
        pwd += chars.charAt(Math.floor(Math.random() * charsLen))
      }
      return pwd
    }
    console.log('nonceStr,32位随机字符串', randomString())

    // 3,package,统一下单接口返回的prepay_id 参数值

    // 4,paySign:微信签名
    function wxSignFunc() {
      // 4.1,将参数改写成 key=value&key2=value2 形式,需要按照参数名ASCII字典序排序
      var stringA = 'appId=' + appId
            +'&nonceStr=' + randomString()
            +'&package=prepay_id=u802345jgfjsdfgsdg888'
            +'&signType=MD5'
            +'&timeStamp=' + timeStamp

      ///// 4.2,拼接API 密钥
      var stringSignTemp = stringA + '&key=192006250b4c09247ec02edce69f6a2d' //注:key为商户平台设置的密钥key
      var sign = hex_md5(stringSignTemp).toUpperCase()
      return sign
    }

    console.log(wxSignFunc())

    //////////// 微信接口实例
    function onBridgeReady(){
     WeixinJSBridge.invoke(
        'getBrandWCPayRequest', {
          "appId": appId,   //公众号名称,由商户传入   
          "timeStamp": timeStamp,     //时间戳,自1970年以来的秒数   
          "nonceStr": randomString(), //随机串   
          "package":"prepay_id=u802345jgfjsdfgsdg888",  // 统一下单接口返回的prepay_id 参数值 
          "signType":"MD5",     //微信签名方式:   
          "paySign": wxSignFunc() //微信签名 
        },
        function(res){
          if(res.err_msg == "get_brand_wcpay_request:ok" ){
            // 使用以上方式判断前端返回,微信团队郑重提示:
            // res.err_msg将在用户支付成功后返回ok,但并不保证它绝对可靠。
            console.log(111)
          }
        }
      )
    }

    // 调用微信接口
    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();
    }
  </script>

</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery ready函数源代码研究
Dec 06 Javascript
jQuery + Flex 通过拖拽方式动态改变图片的代码
Aug 03 Javascript
JS简单编号生成器实现方法(附demo源码下载)
Apr 05 Javascript
JS键盘版计算器的制作方法
Dec 03 Javascript
Vue2递归组件实现树形菜单
Apr 10 Javascript
vue的事件绑定与方法详解
Aug 16 Javascript
Vue.js组件通信的几种姿势
Oct 23 Javascript
vue单页应用加百度统计代码(亲测有效)
Jan 31 Javascript
Node.js readline 逐行读取、写入文件内容的示例
Mar 01 Javascript
微信小程序实现swiper切换卡内嵌滚动条不显示的方法示例
Dec 20 Javascript
vue给对象动态添加属性和值的实例
Sep 09 Javascript
JavaScript实现简单的计算器
Jan 16 Javascript
详解在Node.js中发起HTTP请求的5种方法
Jan 10 #Javascript
vue实现压缩图片预览并上传功能(promise封装)
Jan 10 #Javascript
微信小程序地图(map)组件点击(tap)获取经纬度的方法
Jan 10 #Javascript
最简单的JS实现json转csv的方法
Jan 10 #Javascript
puppeteer实现html截图的示例代码
Jan 10 #Javascript
其实你可以少写点if else与switch(推荐)
Jan 10 #Javascript
微信小程序提取公用函数到util.js及使用方法示例
Jan 10 #Javascript
You might like
PHP调用Webservice实例代码
2011/07/29 PHP
PHP读取大文件的多种方法介绍
2016/04/04 PHP
php实现计算百度地图坐标之间距离的方法
2016/05/05 PHP
thinkPHP5框架导出Excel文件简单操作示例
2018/08/03 PHP
php生成静态页面并实现预览功能
2019/06/27 PHP
document对象execCommand的command参数介绍
2006/08/01 Javascript
JS window.opener返回父页面的应用
2009/10/24 Javascript
JS中toFixed()方法引起的问题如何解决
2012/11/20 Javascript
jquery实现图片灯箱明暗的遮罩效果
2013/11/15 Javascript
JavaScript学习笔记之JS事件对象
2015/01/22 Javascript
Bootstrap图片轮播组件使用实例解析
2016/06/30 Javascript
浅析Angular2子模块以及异步加载
2017/04/24 Javascript
分析javascript原型及原型链
2018/03/18 Javascript
Angularjs之如何在跨域请求中传输Cookie的方法
2018/06/01 Javascript
mpvue项目中使用第三方UI组件库的方法
2018/09/30 Javascript
jQuery实现为table表格动态添加或删除tr功能示例
2019/02/19 jQuery
express如何解决ajax跨域访问session失效问题详解
2019/06/20 Javascript
Vue的transition-group与Virtual Dom Diff算法的使用
2019/12/09 Javascript
js实现单元格拖拽效果
2020/02/10 Javascript
[07:31]DOTA2卡尔工作室 英雄介绍主宰篇
2013/06/25 DOTA
[03:40]DOTA2亚洲邀请赛小组赛第二日 赛事回顾
2015/01/31 DOTA
python简单猜数游戏实例
2015/07/09 Python
解决python3 urllib中urlopen报错的问题
2017/03/25 Python
NumPy 如何生成多维数组的方法
2018/02/05 Python
Python处理CSV与List的转换方法
2018/04/19 Python
python使用rpc框架gRPC的方法
2018/08/24 Python
在Keras中实现保存和加载权重及模型结构
2020/06/15 Python
俄罗斯首家面向中国消费者的一站式购物网站:Wruru
2020/05/08 全球购物
客服工作职责
2013/12/11 职场文书
校园自助餐厅的创业计划书
2013/12/26 职场文书
2014年百日安全生产活动总结
2014/05/04 职场文书
演讲稿的写法
2014/05/19 职场文书
七一讲话心得体会
2014/09/05 职场文书
信用卡逾期证明示例
2014/09/13 职场文书
2015年世界环境日活动方案
2015/05/05 职场文书
房产电话营销开场白
2015/05/29 职场文书