微信公众号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 相关文章推荐
User Scripts: Video Download by User Scripts
May 14 Javascript
jQuery弹出层插件简化版代码下载
Oct 16 Javascript
关于jquery ajax 调用带参数的webservice返回XML数据一个小细节
Jul 31 Javascript
jquery 插件学习(四)
Aug 06 Javascript
jquery easyui滚动条部分设置介绍
Sep 12 Javascript
javascript设计模式之工厂模式示例讲解
Mar 04 Javascript
JavaScript获得表单target属性的方法
Apr 02 Javascript
对JavaScript客户端应用编程的一些建议
Jun 24 Javascript
JavaScript数组基于交换的排序示例【冒泡排序】
Jul 21 Javascript
webpack4 处理CSS的方法示例
Sep 03 Javascript
JS异步执行结果获取的3种解决方式
Feb 19 Javascript
Vue 自定义标签的src属性不能使用相对路径的解决
Sep 17 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
Win2000+Apache+MySql+PHP4+PERL安装使用小结
2006/10/09 PHP
JS的递增/递减运算符和带操作的赋值运算符的等价式
2007/12/08 Javascript
浅谈javascript六种数据类型以及特殊注意点
2013/12/20 Javascript
jquery中EasyUI使用技巧小结
2015/02/10 Javascript
Javascript优化技巧之短路表达式详细介绍
2015/03/27 Javascript
如何用js 实现依赖注入的思想,后端框架思想搬到前端来
2015/08/03 Javascript
js实现当复选框选择匿名登录时隐藏登录框效果
2015/08/14 Javascript
Angularjs中controller的三种写法分享
2016/09/21 Javascript
JavaScript正则表达式实例详解
2016/10/16 Javascript
详解微信小程序 页面跳转 传递参数
2016/12/08 Javascript
微信小程序 图片宽高自适应详解
2017/05/11 Javascript
浅析node应用的timing-attack安全漏洞
2018/02/28 Javascript
element-ui表格列金额显示两位小数的方法
2018/08/24 Javascript
JavaScript数组去重的方法总结【12种方法,号称史上最全】
2019/02/28 Javascript
微信小程序webview与h5通过postMessage实现实时通讯的实现
2019/08/20 Javascript
微信小程序中网络请求缓存的解决方法
2019/12/29 Javascript
jQuery实现视频展示效果
2020/05/30 jQuery
[38:41]2014 DOTA2国际邀请赛中国区预选赛 LGD VS CNB
2014/05/22 DOTA
跟老齐学Python之关于类的初步认识
2014/10/11 Python
Python实现股市信息下载的方法
2015/06/15 Python
python3正则提取字符串里的中文实例
2019/01/31 Python
Python Django Cookie 简单用法解析
2019/08/13 Python
使用pandas库对csv文件进行筛选保存
2020/05/25 Python
Python如何批量生成和调用变量
2020/11/21 Python
新加坡交友网站:be2新加坡
2019/04/10 全球购物
意大利奢侈品零售商:ilDuomo Novara
2019/09/11 全球购物
管理科学大学生求职信
2013/11/13 职场文书
医院实习接收函
2014/01/12 职场文书
大学活动邀请函
2014/01/28 职场文书
幼儿园保育员责任书
2014/07/22 职场文书
幼儿园六一儿童节活动总结
2015/02/10 职场文书
2015年五一劳动节演讲稿
2015/03/18 职场文书
公司借款担保书
2015/09/22 职场文书
MySQL8.0.18配置多主一从
2021/06/21 MySQL
JavaWeb Servlet实现网页登录功能
2021/07/04 Java/Android
Docker与K8s关系介绍不会Docker也可以使用K8s
2022/06/25 Servers