微信公众号H5支付接口调用方法
本文实例为大家分享了 微信内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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
微信支付如何实现内置浏览器的H5页面支付
因为项目需要,要在H5页面中加入微信支付,所以便去尝试,只想说真的很坑,尤其调试起来不方便 这是微信的官方API文档 微信API 微信支付的准备工作 申请公众号,申请开通支付,这个很简单,自行百度 申请好之后 在微信公众平台页面的"微信支付"页面中的"开发配置"Tab上配置"支付授权目录","测试授权目录","测试白名单" 在微信公众平台页面的"开发者中心"中找到"AppID(
-
微信公众号支付H5调用支付解析
最近项目需要微信支付,然后看了下微信公众号支付,虽然不难,但是细节还是需要注意的,用了大半天时间写了个demo,并且完整的测试了一下支付流程,下面分享一下微信公众号支付的经验. 一.配置公众号微信支付 需要我们配置微信公众号支付地址和测试白名单. 比如:支付JS页面的地址为 http://www.xxx.com/shop/pay/ 那此处配置www.xxx.com/shop/pay/ 二.开发流程 借用微信公众号支付api(地址 http://pay.weixin.q
-
微信公众号H5支付接口调用方法
本文实例为大家分享了 微信内H5调用支付接口的具体代码,供大家参考,具体内容如下 官方文档地址 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>微信公众号H5接口调用</title> <script src='./js/md5.js'></script> </head>
-
php版微信公众号自定义分享内容实现方法
本文实例讲述了php版微信公众号自定义分享内容实现方法.分享给大家供大家参考,具体如下: 微信公众号号在手机中通过api接口可以实现自定义分享内容了,下面我们来看这个接口的实现步骤. 一.准备阶段 公众号一个,微网站一个. 二.绑定域名 先登录微信公众平台进入"公众号设置"的"功能设置"里填写"JS接口安全域名". 备注:登录后可在"开发者中心"查看对应的接口权限. 三.代码 <?php //curl获取请求文本内容 f
-
SpringBoot + 微信公众号JSAPI支付功能的实现
1.pom.xml依赖配置 <!-- 微信支付 --> <dependency> <groupId>com.egzosn</groupId> <artifactId>pay-java-wx</artifactId> <version>2.12.4</version> </dependency> 2.application.yml文件配置微信公众号的基础信息 #微信公众号支付配置 wechatpay:
-
.NET微信公众号客服接口
本文实例为大家分享了微信公众号客服接口.NET代码,供大家参考,具体内容如下 Kf_account.cs代码: public partial class Kf_account : Form { private readonly DataTable adt_user = new DataTable(); private readonly string as_INIFile = Application.StartupPath + "\\user.ini"; public Kf_accoun
-
Java实现微信公众号自定义菜单的创建方法示例
本文实例讲述了Java实现微信公众号自定义菜单的创建方法.分享给大家供大家参考,具体如下: 开发公众号的时候可能需要给一些自定义菜单添加事件,比如点击某菜单然后服务端给用户推送信息. 我们也可以使用微信提供的网页调试工具直接生成菜单,不过需要考虑是否影响用户问题. 注意:使用代码自定义菜单事件,手动添加的菜单会失效!谨慎使用! 官方文档 httpClientUtil工具类需要的话可以在前面微信公众号获取access_token中获取 public class WechatDIYMenuTest
-
微信公众号H5之微信分享常见错误和问题(小结)
url转码 官方文档描述: https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#62 确认url是页面完整的url(请在当前页面alert(location.href.split('#')[0])确认),包括'http(s)
-
微信公众号接入ChatGPT机器人的方法
目录 在云服务器上部署自定义消息处理服务 微信公众号配置自己的消息处理服务器 不难,代码总共也就25行,大致逻辑如下. 总共分为是下面两步 在云服务器上部署自定义消息处理服务 这里需要我们自定义来处理用户发送过来的消息 首先导入werobot,这是微信公众号官方让我们自定义消息处理的模块 pip install werobot 然后是一个样例,具体内容已经注释 注意,只能用80端口启动,如果有https可以用443端口来启动,至于为什么?后面会知道. import werobot # token
-
ASP.NET微信公众号客服接口
本文实例为大家分享了ASP.NET微信客服接口的具体代码,供大家参考,具体内容如下 Kf_account.cs代码: public partial class Kf_account : Form { private readonly DataTable adt_user = new DataTable(); private readonly string as_INIFile = Application.StartupPath + "\\user.ini"; public Kf_acc
-
微信公众号 客服接口的开发实例详解
微信平台更新之后,发现客服接口不错.研究了下 和大家分享下. 按照官方文档,是向客服接口发送规定的JSon 就可以了. 首先先封装下 JSon 的类: package com.lwz.wx.bean.kf; // 这个是最外层的 也可以说是基类吧. public class Basebean { private String touser; private String msgtype; public String getTouser() { return touser; } public vo
-
vue实现微信公众号h5跳转小程序的示例代码第1/3页
目录 项目概述 涉及知识点 实现 实现容器 computed 实现分页 项目概述 实现类似图中红色框框选中可以左右滑动的组件,点击可以跳转到对应的小程序页面. 涉及知识点 computed 实现分页 开放标签 wx-open-launch-weapp 使用 实现 实现容器 首先我们来实现两行可以左右滑动的容器. 这边为了省事,我是选择了 vue-awesome-swiper@2.6.7: npm i vue-awesome-swiper@2.6.7 -S main.js 引入 import Vu