h5网站接入微信支付

微信内部浏览器 H5 支付(JSAPI 支付)和微信外部浏览器 H5 支付总结

微信内部浏览器 H5 支付(JSAPI 支付)

使用场景：用户通过微信扫码、关注公众号等方式进入商家 H5 页面，并在微信内调用 JSSDK 完成支付。

调用微信支付和微信分享有一个区别，微信支付必须要获取 openid，而分享不需要。

微信公众平台：openid 是微信用户在公众号 appid 下的唯一用户标识（appid 不同，则获取到的 openid 就不同），可用于永久标记一个用户，同时也是微信 JSAPI 支付的必传参数。

在微信浏览器 H5 支付有两种方式：

• 使用微信浏览器特有的内置对象WeixinJSBridge（注意：WeixinJSBridge 内置对象在其他浏览器中无效）中的方法调用微信支付
• 使用微信 JS-SDK，调用微信支付请求接口wx.chooseWXPay接口

第一种方法：使用微信浏览器内置对象WeixinJSBridge调起微信支付

微信内 H5 调起支付，使用该方法具体代码如下：

// data为网页端接口请求参数列表 function onBridgeReady(data) { WeixinJSBridge.invoke( "getBrandWCPayRequest", { // 公众号名称，由商户传入 appId: data.appId, // 时间戳，自1970年以来的秒数 timeStamp: data.timeStamp, // 随机串 nonceStr: data.nonceStr, package: data.package, // 微信签名方式： signType: "MD5", // 微信签名 paySign: data.paySign, }, function (res) { if (res.err_msg == "get_brand_wcpay_request:ok") { // 使用以上方式判断前端返回,微信团队郑重提示： // res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。 } } ); } 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(); } 

第二种方法：使用微信 JS-SDK 调用微信支付

JSSDK 使用步骤

微信 JS-SDK 是微信公众平台 面向网页开发者提供的基于微信内的网页开发工具包。

通过使用微信 JS-SDK，网页开发者可借助微信高效地使用拍照、选图、语音、位置等手机系统的能力，同时可以直接使用微信分享、扫一扫、卡券、支付等微信特有的能力，为微信用户提供更优质的网页体验。

步骤一：绑定域名

先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS 接口安全域名”。

备注：登录后可在“开发者中心”查看对应的“接口权限”。

如图：

配置“JS 接口安全域名”

接口权限，有些接口公众号必须微信认证才能使用，比如分享接口、支付接口等，微信认证公众号主体必须是企业，个人不能认证

步骤二：引入 JS 文件

在需要调用 JS 接口的页面引入如下 JS 文件，我这里引入的是 1.2.0 版本的，每个版本可能有区别，有些接口可能被废弃掉了，具体以微信 JS-SDK 说明文档为准

步骤三：通过 config 接口注入权限验证配置

所有需要使用 JS-SDK 的页面必须先注入配置信息，否则将无法调用（同一个 url 仅需调用一次，对于变化 url 的 SPA 的 web app 可在每次 url 变化时进行调用,目前 Android 微信客户端不支持 pushState 的 H5 新特性，所以使用 pushState 来实现 web app 的页面会导致签名失败，此问题会在 Android6.2 中修复）。

wx.config({ debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。 appId: "", // 必填，公众号的唯一标识 timestamp: "", // 必填，生成签名的时间戳 nonceStr: "", // 必填，生成签名的随机串 signature: "", // 必填，签名 jsApiList: [], // 必填，需要使用的JS接口列表 }); 

步骤四：通过 ready 接口处理成功验证

wx.ready(function () { // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。 }); 

步骤五：使用微信 JS-SDK 接口 chooseWXPay 调用微信支付

使用微信 JS-SDK 发起微信支付请求，具体代码如下：

wx.chooseWXPay({ timestamp: 0, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符 nonceStr: "", // 支付签名随机串，不长于 32 位 package: "", // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*） signType: "", // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5' paySign: "", // 支付签名 success: function (res) { // 支付成功后的回调函数 }, }); 

注意：prepay_id 通过微信支付统一下单接口拿到，paySign 采用统一的微信支付 Sign 签名生成方法，注意这里 appId 也要参与签名，appId 与 config 中传入的 appId 一致，即最后参与签名的参数有 appId, timeStamp, nonceStr, package, signType。

微信外部浏览器 H5 支付

使用场景：用户在微信以外的手机浏览器请求微信支付的场景唤起微信支付

提醒：H5 支付不建议在 APP 端使用，如需要在 APP 中使用微信支付，请接 APP 支付

内嵌 app 的 H5 页面使用微信 H5 支付，支付成功回调会有问题：

• 安卓手机 app 内嵌的 H5 页面使用微信 H5 支付：支付成功没有跳转到指定的支付成功页，（我们遇到的问题是跳转到了首页），而且回跳发生在调取微信支付之后，支付完成之前
• ios 手机 app 内嵌的 H5 页面使用微信 H5 支付：支付成功会回跳到指定的支付成功页，但是回跳页面会触发在调取微信支付之后，支付完成之前

解决方案：

通过保存待支付的订单号，调用后台接口每隔数秒轮询该订单的支付状态(也可以设置轮询多少秒以后提供一个按钮，让用户自己手动去刷新支付状态)

在 ios 手机内嵌 app 的 H5 页面使用微信 H5 支付，还有遇到过一个问题：

• ios 手机 H5 页面内嵌到第三方 app => 使用微信 H5 支付 => 支付成功 => 点击“完成”，苹果手机会跳出第三方 app 打开默认浏览器 Safari，然后会回跳到指定支付成功页面
• 由于之前的订单号、渠道编号、登录态都需要通过附加在支付成功的回调地址上，所以导致回调地址 frontUrl 携带参数过多导致调不起微信 H5 支付和银联支付的 bug
• 但是这些参数又是必须携带的，否则在 Safari 浏览器打开的支付成功页会因缺少参数，调用接口报错

目前解决的方案是：

1. 判断是否为 ios 手机
2. 通过历史记录长度history.length是否小于某个值（比如：小于 3），来判断是不是由 app 自动打开 Safari 浏览器的(这里可能会有 bug，比如用户之前已经在 Safari 打开过好几个页面了)
3. 如果满足上面两个条件则进行特殊处理，给出一个提示框，让用户返回 app 继续操作，用户点击“确定”按钮，关闭提示弹窗和当前页面
4. JS 关闭浏览器当前页面的方法：window.open("about:blank","_self").close();

开发步骤&常见问题

官方体验 demo

微信官方体验链接：wxpay.wxutil.com/mch/pay/h5.…

兼容微信内部 JSAPI 支付和微信外部 H5 支付用法

/ * @desc 微信内H5调起支付 * @param configObj 微信jsapi支付参数 * @param successCb 支付成功回调函数 * @param failCb 支付失败回调函数 */ wxJSPay(configObj, successCb, failCb) { function onBridgeReady() { WeixinJSBridge.invoke( 'getBrandWCPayRequest', { // "appId": "wx2421b1c4370ec43b", //公众号名称，由商户传入 // "timeStamp": "", //时间戳，自1970年以来的秒数 // "nonceStr": "e61463f8efa94090b1f366cccfbbb444", //随机串 // "package": "prepay_id=ujgfjsdfgsdg888", // "signType": "MD5", //微信签名方式： // "paySign": "70EAE4BB79628FBCA90534C63FF7FADD89" //微信签名 "appId": configObj.appid, //公众号名称，由商户传入 "timeStamp": configObj.timestamp || (Date.now() / 1000) + "", //时间戳，自1970年以来的秒数 "nonceStr": configObj.nonce_str, //随机串 "package": `prepay_id=${configObj.prepay_id}`, "signType": "MD5", //微信签名方式： "paySign": configObj.sign //微信签名 }, function (res) { if (res.err_msg == "get_brand_wcpay_request:ok") { // 使用以上方式判断前端返回,微信团队郑重提示： //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。 successCb && successCb(); } }); } 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(); } } / * @desc 兼容微信内部JSAPI支付和微信外部H5支付用法 * @param payEnvironment 支付环境：微信浏览器 JSAPI 微信外部浏览器 WX_WAP * @param successRedirectUrl 支付成功回调地址 */ function wxJSApiAndH5Pay (payEnvironment, successRedirectUrl) { // 微信内使用JSAPI支付，微信浏览器外使用H5支付 if (payEnvironment === 'WX_WAP') { console.log('微信外部H5支付'); let redirect_url = data.mweb_url + '&redirect_url=' + encodeURIComponent(successRedirectUrl); window.location.href = redirect_url; } else { console.log('微信JSAPI支付'); function successCb () { // 支付成功回调地址 window.location.href = decodeURIComponent(successRedirectUrl); }; wxJSPay(data, successCb); } } 

微信支付开发文档

本文由mdnice多平台发布