微信公众号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中判断一个元素下面是否有内容或者有某个标签的判断代码
Feb 02 Javascript
JS控制文本框textarea输入字数限制的方法
Jun 17 Javascript
解析jQuery的三种bind/One/Live事件绑定使用方法
Dec 30 Javascript
JS脚本根据手机浏览器类型跳转WAP手机网站(两种方式)
Aug 04 Javascript
javascript针对cookie的基本操作实例详解
Nov 30 Javascript
深入浅析JavaScript中的constructor
Apr 19 Javascript
javascript css红色经典选项卡效果实现代码
May 17 Javascript
jQuery实现的右下角广告窗体跟随效果示例
Sep 16 Javascript
基于JavaScript实现淘宝商品广告效果
Aug 10 Javascript
如何在js代码中消灭for循环实例详解
Jul 29 Javascript
vue中使用rem布局代码详解
Oct 30 Javascript
vue-router的hooks用法详解
Jun 08 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中神奇的fastcgi_finish_request
2011/05/02 PHP
实用的PHP带公钥加密类分享(每次加密结果都不一样哦)
2014/08/20 PHP
php禁止直接从浏览器输入地址访问.php文件的方法
2014/11/04 PHP
PHP cURL获取微信公众号access_token的实例
2018/04/28 PHP
js实现的网页颜色代码表全集
2007/07/17 Javascript
javascript实现的使用方向键控制光标在table单元格中切换
2010/11/17 Javascript
JS数学函数Exp使用说明
2012/08/09 Javascript
JavaScript实现点击单选按钮改变输入框中文本域内容的方法
2015/08/12 Javascript
原生javascript实现addClass,removeClass,hasClass函数
2016/02/25 Javascript
JavaScript禁止复制与粘贴的实现代码
2016/05/16 Javascript
window.close(); 关闭浏览器窗口js代码的总结介绍
2016/07/14 Javascript
jQuery制作网页版选项卡
2016/07/28 Javascript
jquery表格datatables实例解析 直接加载和延迟加载
2016/08/12 Javascript
JavaScript对象封装的简单实现方法(3种方法)
2017/01/03 Javascript
SpringMVC简单整合Angular2的示例
2017/07/31 Javascript
JS中间件设计模式的深入探讨与实例分析
2020/04/11 Javascript
VSCode搭建React Native环境
2020/05/07 Javascript
Vue中用JSON实现刷新界面不影响倒计时
2020/10/26 Javascript
vue+elementUI动态增加表单项并添加验证的代码详解
2020/12/17 Vue.js
python3.5 email实现发送邮件功能
2018/05/22 Python
pandas ix &amp;iloc &amp;loc的区别
2019/01/10 Python
Python pip使用超时问题解决方案
2020/08/03 Python
python各种excel写入方式的速度对比
2020/11/10 Python
彻底解决pip下载pytorch慢的问题方法
2021/03/01 Python
CSS3的column-fill属性对齐列内容高度的用法详解
2016/07/01 HTML / CSS
HTML5中的Article和Section元素认识及使用
2013/03/22 HTML / CSS
图片上传插件ImgUploadJS:用HTML5 File API 实现截图粘贴上传、拖拽上传
2016/01/20 HTML / CSS
Styleonme中文网:韩国高档人气品牌
2017/06/21 全球购物
世界上最具创新性的增强型知名运动品牌:Proviz
2018/04/03 全球购物
大学生毕业鉴定
2014/01/31 职场文书
励志演讲稿范文
2014/04/29 职场文书
小学教师自我剖析材料
2014/09/29 职场文书
员工加薪申请报告
2015/05/15 职场文书
董事长助理工作总结2015
2015/07/23 职场文书
Java 多线程并发FutureTask
2022/06/28 Java/Android
css中:last-child不生效的解决方法
2022/08/05 HTML / CSS