vue 微信公众号支付接口_vue项目，调用微信支付。

相信程序猿们都开发过电商类的项目，那就会有支付功能。

我听说，微信有很多坑，我好慌……

一、设置支付目录

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

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

二、设置授权域名

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

三、微信内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即是一样。

有兴趣可以微信扫一扫关注公众号哦。