微信公众号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中的Window窗口对象
Jan 16 Javascript
IE Firefox 使用自定义标签的区别
Oct 15 Javascript
写出更好的JavaScript之undefined篇(上)
Nov 22 Javascript
JavaScript this调用规则说明
Mar 08 Javascript
js实现运动logo图片效果及运动元素对象sportBox使用方法
Dec 25 Javascript
细说javascript函数从函数的构成开始
Aug 29 Javascript
Javascript中Date类型和Math类型详解
Feb 27 Javascript
利用jQuery插件imgAreaSelect实现获得选择域的图像信息
Dec 02 Javascript
纯原生js实现table表格的增删
Jan 05 Javascript
Vue-Router实现页面正在加载特效方法示例
Feb 12 Javascript
js常用的继承--组合式继承
Mar 06 Javascript
JavaScript cookie原理及使用实例
May 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
世界咖啡生产者论坛呼吁:需要立即就咖啡价格采取认真行动
2021/03/06 咖啡文化
PHP array操作10个小技巧分享
2011/06/23 PHP
php时区转换转换函数
2014/01/07 PHP
thinkphp中空模板与空模块的用法实例
2014/11/26 PHP
PHP常见漏洞攻击分析
2016/02/21 PHP
WordPress中设置Post Type自定义文章类型的实例教程
2016/05/10 PHP
PHP购物车类Cart.class.php定义与用法示例
2016/07/20 PHP
Yii2实现让关联字段支持搜索功能的方法
2016/08/10 PHP
运用Windows XP附带的Msicuu.exe、Msizap.exe来彻底卸载顽固程序
2007/04/21 Javascript
简单通用的JS滑动门代码
2008/12/19 Javascript
点击下载链接 弹出页面实现代码
2009/10/01 Javascript
flash 得到自身url参数的代码
2009/11/15 Javascript
js替换字符串的所有示例代码
2013/07/23 Javascript
jQuery插件MixItUp实现动画过滤和排序
2015/04/12 Javascript
JS获取input file绝对路径的方法(推荐)
2016/08/02 Javascript
利用Jquery队列实现根据输入数量显示的动画
2016/09/01 Javascript
angular.js之路由的选择方法
2016/09/24 Javascript
基于BootStrap栅格栏系统完成网站底部版权信息区
2016/12/23 Javascript
HTML的select控件美化
2017/03/27 Javascript
vue省市区三联动下拉选择组件的实现
2017/04/28 Javascript
vue cli webpack中使用sass的方法
2018/02/24 Javascript
axios如何利用promise无痛刷新token的实现方法
2019/08/27 Javascript
Layer+Echarts构建弹出层折线图的方法
2019/09/25 Javascript
使用 Vue-TCB 快速在 Vue 应用中接入云开发的方法
2020/02/10 Javascript
对vue生命周期的深入理解
2020/12/03 Vue.js
跟老齐学Python之一个免费的实验室
2014/09/14 Python
Python自动发送邮件的方法实例总结
2018/12/08 Python
Python爬虫抓取技术的一些经验
2019/07/12 Python
django 自定义过滤器(filter)处理较为复杂的变量方法
2019/08/12 Python
python 调整图片亮度的示例
2020/12/03 Python
HTML5 本地存储之如果没有数据库究竟会怎样
2013/04/25 HTML / CSS
高级3D打印市场:Gambody
2019/12/26 全球购物
澳大利亚美容产品及化妆品在线:Activeskin
2020/06/03 全球购物
未中标通知书
2015/04/17 职场文书
入门学习Go的基本语法
2021/07/07 Golang
MySQL 逻辑备份 into outfile
2022/05/15 MySQL