vue项目，调用微信支付。

相信程序猿们都开发过电商类的项目，那就会有支付功能。
我听说，微信有很多坑，我好慌......

一、设置支付目录

请确保实际支付时的请求目录与后台配置的目录一致（现在已经支持配置根目录，配置后有一定的生效时间，一般5分钟内生效），否则将无法成功唤起微信支付。

在微信商户平台（pay.weixin.qq.com）设置您的JSAPI支付支付目录，设置路径：商户平台-->产品中心-->开发配置，如图7.7所示。JSAPI支付在请求支付的时候会校验请求来源是否有在商户平台做了配置，所以必须确保支付目录已经正确的被配置，否则将验证失败，请求支付不成功。`

image.png

二、设置授权域名

开发JSAPI支付时，在统一下单接口中要求必传用户openid，而获取openid则需要您在公众平台设置获取openid的域名，只有被设置过的域名才是一个有效的获取openid的域名，否则将获取失败。具体界面如图7.8所示：

image.png

三、微信内H5调起支付

在微信浏览器里面打开H5网页中执行JS调起支付。接口输入输出数据格式为JSON。 注意：WeixinJSBridge内置对象在其他浏览器中无效。 getBrandWCPayRequest参数以及返回值定义：

• 1、网页端接口请求参数列表（参数需要重新进行签名计算，参与签名的参数为：appId、timeStamp、nonceStr、package、signType，参数区分大小写。）

名称	变量名	必填	类型	示例值	描述
公众号id	appId	是	String(16)	wx8888888888888888	商户注册具有支付权限的公众号成功后即可获得
时间戳	timeStamp	是	String(32)	1414561699	当前的时间，其他详见时间戳规则
随机字符串	nonceStr	是	String(32)	5K8264ILTKCH16CQ2502SI8ZNMTM67VS	随机字符串，不长于32位。推荐随机数生成算法
订单详情扩展字符串	package	是	String(128)	prepay_id=123456789	统一下单接口返回的prepay_id参数值，提交格式如：prepay_id=***
签名方式	signType	是	String(32)	MD5	签名类型，默认为MD5，支持HMAC-SHA256和MD5。注意此处需与统一下单的签名类型一致
签名	paySign	是	String(64)	C380BEC2BFD727A4B6845133519F3AD6	签名，详见签名生成算法

• 2、返回结果值说明

返回值	描述
get_brand_wcpay_request:ok	支付成功
get_brand_wcpay_request:cancel	支付过程中用户取消
get_brand_wcpay_request:fail	支付失败
调用支付JSAPI 少参数：total_fee	1、请检查预支付会话标识prepay_id是否已失效 2、请求的appid与下单接口的appid是否一致

注：JS API的返回结果get_brand_wcpay_request:ok仅在用户成功完成支付时返回。由于前端交互复杂，get_brand_wcpay_request:cancel或者get_brand_wcpay_request:fail可以统一处理为用户遇到错误或者主动放弃，不必细化区分。

---

示例代码如下

// 在你需要的地方复制下面代码
 // 这里需要的签名等字段，前端开发者只需要调用后端指定的接口返回即可。
// 如果你全干，那也是OK的。 
// 你是大佬。
function onBridgeReady(){
 window.WeixinJSBridge.invoke(
   'getBrandWCPayRequest', {
     'appId': res.data.appId, // 公众号名称，由商户传入
     'timeStamp': res.data.timeStamp, // 时间戳，自1970年以来的秒数
     'nonceStr': res.data.nonceStr, // 随机串
     'package': res.data.package,
     'signType': res.data.signType, // 微信签名方式：
     'paySign': res.data.paySign // 微信签名
   },
   function (res) {
     alert(JSON.stringify(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();
}

当你出现下图这种方法，说明你的授权域名配置有误，记住，区分 http 和 https 的，如果配置的是 http请使用 http访问，https即是一样。

image.png

---

有问题，咱一起分享讨论。