h5网页使用微信支付JSAPI(申请微信服务号配置域名、获取用户code、配置JSAPI授权目录）

场景：

要在别人家的微信公众号内放入我们的h5网页，涉及到支付只能使用JSAPI支付。从一无所有到成功上线的记录……真难
官方链接地址

1. 微信服务号配置

前提：必须要有一个`微信服务号`，而且要完成微信认证需要三百大洋，认证过后，登录后台找到`接口权限`中的`网页授权用户基本信息`

没有微信认证的时候，当前网页授权是未获得。
认证人家还得审核给你打电话确认啥的……

1.1 配置授权域名

注意要在你配置的域名比如www.baidu.com下放入人家让你下载的txt文件，将下载好的文件放入你的域名下，可以通过www.baidu.com/MP_verify_gucIIseQvV9CvXmu.txt访问就可以了，你会看到有一段内容。
域名填写：不要写http或者https开头，直接www开头……

1.2 获取APPID

点击左侧的基本配置，点击右侧列表中的称为开发者。在这里获取服务号的appid，这个appid后台需要，前端支付也需要……

微信服务号的配置到此结束，记得如果你要改了你的H5域名，一定要记得回来改掉~。

2. 微信授权具体介绍

前提：需要弄好appid、redirect_url

微信授权官方流程介绍

在网页授权回调的地址中可以获取到用户的code，然后让后台去解析可以得到用户的openid。这个code微信官方在你的授权地址中直接把code发给你了，在你的页面中接收即可。
比如我在访问首页的时候就需要授权拿到code，此处使用的是静默授权。
h5可以直接使用window.location.href=‘链接地址’。授权获取code。

redirect_uri授权回调的页面需要urlEncode编码，比如授权回调页是https://www.baidu.com/index.html

根据这个链接，直接可以测试了，填写好服务号的appid和刚刚encode后的url

最后生成的链接这个样子
https://open.weixin.qq.com/connect/oauth2/authorize?appid=你的APPID&redirect_uri=https%3A%2F%2Fwww.baidu.com%2Findex.html&response_type=code&scope=SCOPE&state=STATE#wechat_redirect
如果都配置好了，可以在微信内打开你生成的链接试下，成功会自动跳转到你的授权回调页面。在你授权回调的页面内比如https://www.baidu.com/index.html接收当前code测试下。

https://www.baidu.com/index.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<body>接收的code是<div class="code"></div><!-- 接收code的页面 --><script>getParams(name)function getParams(name){var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");var r = window.location.search.substr(1).match(reg);//截取?后面的参数console.log(r,'接收的参数是');if(r!=null){return r[2]}}(function(){var code=getParams('code')// var code=getParams('state')$('.code').html(code)})()</script>
</body>
</html>

关于授权回调页面的基本配置到这里了就……

3. 前台支付

前提：拿到code后，在确认支付页面，还需要登录微信商户平台配置下`JSAPI`的授权目录，填写你的确认支付页面的`URL`地址。不配置在确认支付的时候会提示你当前url未注册。

比如添加：https://www.baidu.com/pay.html

拿到code发送给后端，他们去解析获取用户openId，然后这里在用户确认支付的时候只需要拿到你需要的一些基本参数即可，然后根据这些基本参数就可以调用onBridgeReady()直接支付了。

稍微注意下package字段中prepay_id这个一定要加，后面的才是你要填写的预支付ID
我们后端直接把整个请求参数发我了，直接将参数填上更方便。

这段代码在微信浏览器内才会生效。（测试会比较麻烦点……要在微信内测）

       // 调起微信支付function onBridgeReady(data) {WeixinJSBridge.invoke('getBrandWCPayRequest',{appId: '填写你的公众号appid', //公众号ID，由商户传入timeStamp: data.timeStamp, //时间戳，自1970年以来的秒数nonceStr: data.nonceStr, //随机串package: `prepay_id=${data.prepay_id}`, //微信下单返回的支付ID是从后端获得的signType: 'MD5', //微信签名方式：paySign: data.paySign //微信签名},function (res) {if (res.err_msg == 'get_brand_wcpay_request:ok') {// 支付成功了,跳转到成功页面window.open('成功页面地址')} else {// 支付失败了window.open('失败页面地址')}});}

其它:

判断在微信环境内打开（网上找的……）

      /* 在微信内打开只能使用JSAPI支付的方式-只有微信支付 */var ua = navigator.userAgent.toLowerCase();var isWeixin = ua.indexOf('micromessenger') != -1;if(isWeixin){console.log('微信内打开');}

h5网页使用微信支付JSAPI(申请微信服务号配置域名、获取用户code、配置JSAPI授权目录）相关推荐

在线支付系列【9】微信支付之申请微信公众号
有道无术,术尚可求,有术无道,止于术. 文章目录前言申请微信公众号前言由于微信支付的产品体系全部搭载于微信的社交体系之上,所以直连商户或服务商接入微信支付之前,都需要有一个微信社交载体,该载体 ...
c#实现微信公众号开发--服务号通过oauth2获取用户信息
2018年春节策划了一个"带现金红包的贺年卡"微信号推广活动,先说下效果:2个小时实现新增关注用户4万多户,活动页面PV达到16.8万,后因红包预算费用原因结束活动. 实现原理:每 ...
php网站接入微信支付,PHP接入微信H5支付的方法示例
开发前配置进行代码接入前,需在微信后台填写授权回调域名,此域名必须经过icp备案开发主要流程用户下单时选择微信支付商户进行业务逻辑处理并调用微信统一下单接口,微信h5交易类型为:trade_t ...
vue h5网页点击按钮 -- 跳到微信小程序 wx-open-launch-weapp；onMenuShareAppMessage 分享图片不显示，且方法已废弃
h5网页点击按钮,唤醒微信小程序是否可以做? 可以!!,就是有点限制. 通过wx-open-launch-weapp就可以实现,但是限制微信服务号才可以使用.也就是说必须是微信环境下. 文章最下边, ...
java微信支付v3系列——7.微信支付之申请退款
目录 java微信支付v3系列--1.微信支付准备工作 java微信支付v3系列--2.微信支付基本配置 java微信支付v3系列--3.订单创建准备操作 java微信支付v3系列--4.创建订单的封 ...
微信支付接口怎么申请微信支付接口申请教程
微信支付接口:点击进去一直让大家翘首以盼的微信最核心的杀手锏--"微信支付"终于开放申请了!今天微信团队在官网发布消息,微信公众平台支付功能已正式开放申请,已开通公众号的 ...
微信WeixinJSBridge支付，H5微信支付，react 微信支付
微信支付分为以下几步: 官网api地址:https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=7_7&index=6 1,登录的时候 ...
PHP微信支付开发，微信外浏览器实现WAP微信支付
准备工作 1.申请服务号,目前只有企业才能申请 2.申请微信支付 3.已备案的域名和服务器公众号支付公众号支付即在微信内调用微信支付的方式,即JSAPI支付.此方法不适用于在微信外部浏览器. 1. ...
C# MVC 微信支付教程系列之公众号支付
微信支付教程系列之公众号支付今天,我们接着讲微信支付的系列教程,前面,我们讲了这个微信红包和扫码支付.现在,我们讲讲这个公众号支付.公众号支付的应用环境常见的用户通过公众号,然后再通过公众号里面 ...
微信支付开发认清微信支付v2和v3
微信支付现在分为v2版和v3版 2014年9月10号之前申请的为v2版(旧版本),之后申请的为v3版. V2版中的参数有 AppID AppSecret 支付专用签名串PaySignKey 商户号Pa ...

h5网页使用微信支付JSAPI(申请微信服务号配置域名、获取用户code、配置JSAPI授权目录）

场景：

1. 微信服务号配置

前提：必须要有一个`微信服务号`，而且要完成微信认证需要三百大洋，认证过后，登录后台找到`接口权限`中的`网页授权用户基本信息`

1.1 配置授权域名

1.2 获取APPID

2. 微信授权具体介绍

前提：需要弄好appid、redirect_url

3. 前台支付

前提：拿到code后，在确认支付页面，还需要登录微信商户平台配置下`JSAPI`的授权目录，填写你的确认支付页面的`URL`地址。不配置在确认支付的时候会提示你当前url未注册。

其它:

h5网页使用微信支付JSAPI(申请微信服务号配置域名、获取用户code、配置JSAPI授权目录）相关推荐

最新文章

热门文章

h5网页使用微信支付JSAPI(申请微信服务号配置域名、获取用户code、配置JSAPI授权目录）

场景：

1. 微信服务号配置

前提：必须要有一个微信服务号，而且要完成微信认证需要三百大洋，认证过后，登录后台找到接口权限中的网页授权用户基本信息

1.1 配置授权域名

1.2 获取APPID

2. 微信授权具体介绍

前提： 需要弄好appid、redirect_url

3. 前台支付

前提：拿到code后，在确认支付页面，还需要登录微信商户平台配置下JSAPI的授权目录，填写你的确认支付页面的URL地址。不配置在确认支付的时候会提示你当前url未注册。

其它:

h5网页使用微信支付JSAPI(申请微信服务号配置域名、获取用户code、配置JSAPI授权目录）相关推荐

最新文章

热门文章

前提：必须要有一个`微信服务号`，而且要完成微信认证需要三百大洋，认证过后，登录后台找到`接口权限`中的`网页授权用户基本信息`

前提：需要弄好appid、redirect_url

前提：拿到code后，在确认支付页面，还需要登录微信商户平台配置下`JSAPI`的授权目录，填写你的确认支付页面的`URL`地址。不配置在确认支付的时候会提示你当前url未注册。