相信程序猿们都开发过电商类的项目,那就会有支付功能。
我听说,微信有很多坑,我好慌……
一、设置支付目录
请确保实际支付时的请求目录与后台配置的目录一致(现在已经支持配置根目录,配置后有一定的生效时间,一般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即是一样。
有兴趣可以微信扫一扫关注公众号哦。