微信公众号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 相关文章推荐
javascript 浏览器判断 绑定事件 arguments 转换数组 数组遍历
Jul 06 Javascript
jQuery UI-Draggable 参数集合
Jan 10 Javascript
javascript插入样式实现代码
Feb 22 Javascript
JavaScript获取FCK编辑器信息的具体方法
Jul 12 Javascript
js中对象的声明方式以及数组的一些用法示例
Dec 11 Javascript
Bootstrap编写一个兼容主流浏览器的受众巨幕式风格页面
Jul 01 Javascript
Node.js 回调函数实例详解
Jul 06 Javascript
JS中Safari浏览器中的Date
Jul 17 Javascript
vue scroller返回页面记住滚动位置的实例代码
Jan 29 Javascript
Node.js进阶之核心模块https入门
May 23 Javascript
vue2中,根据list的id进入对应的详情页并修改title方法
Aug 24 Javascript
微信小程序实现商品属性联动选择
Feb 15 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 api函数实现数组的交换排序示例
2014/04/13 PHP
PHP dirname简单使用代码实例
2020/11/13 PHP
解析arp病毒背后利用的Javascript技术附解密方法
2007/08/06 Javascript
jquery select(列表)的操作(取值/赋值)
2009/08/06 Javascript
Jquery 动态循环输出表格具体方法
2013/11/23 Javascript
jquery ajax传递中文参数乱码问题及解决方法说明
2014/02/07 Javascript
jQuery实现购物车数字加减效果
2015/03/14 Javascript
javascript截取字符串小结
2015/04/28 Javascript
用canvas 实现个图片三角化(LOW POLY)效果
2016/02/18 Javascript
AngularJs学习第八篇 过滤器filter创建
2016/06/08 Javascript
jQuery遍历节点树方法分析
2016/09/08 Javascript
Angular2 (RC5) 路由与导航详解
2016/09/21 Javascript
JavaScript注入漏洞的原理及防范(详解)
2016/12/04 Javascript
微信小程序 检查接口状态实例详解
2017/06/23 Javascript
JS实现瀑布流布局
2017/10/21 Javascript
jquery+ajaxform+springboot控件实现数据更新功能
2018/01/22 jQuery
LayUI动态设置checkbox不显示的解决方法
2019/09/02 Javascript
基于JS判断对象是否是数组
2020/01/10 Javascript
[05:31]DOTA2上海特级锦标赛主赛事第三日RECAP
2016/03/05 DOTA
[45:59]EG vs OG 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
python3学习之Splash的安装与实例教程
2018/07/09 Python
Python中栈、队列与优先级队列的实现方法
2019/06/30 Python
使用tensorflow实现VGG网络,训练mnist数据集方式
2020/05/26 Python
Python类的继承super相关原理解析
2020/10/22 Python
浅谈Python __init__.py的作用
2020/10/28 Python
使用CSS Grid布局实现网格的流动
2014/12/30 HTML / CSS
瑰珀翠美国官网:Crabtree & Evelyn美国
2016/11/29 全球购物
比利时的在线灯具店:Lampen24.be
2019/07/01 全球购物
英语三分钟演讲稿
2014/08/19 职场文书
党委班子剖析材料
2014/08/21 职场文书
群众路线教育实践活动个人对照检查材料
2014/09/22 职场文书
预备党员转正思想汇报
2014/09/26 职场文书
院党委组织查摆问题对照检查材料思想汇报2014
2014/10/08 职场文书
PHP控制循环操作的时间
2021/04/01 PHP
redis不能访问本机真实ip地址的解决方案
2021/07/07 Redis
Centos7中MySQL数据库使用mysqldump进行每日自动备份的编写
2021/08/02 MySQL