做过微信公众号支付(JSAPI)的同学,会比较熟悉,调起微信支付所需要的六个必须参数:appId、timeStamp、nonceStr、package、signType。
JSAPI官方文档:https://pay.weixin.qq.com/wiki/doc/api/jsapi_sl.php?chapter=7_7&index=6
我们再来看一下小程序支付的官方介绍:https://pay.weixin.qq.com/wiki/doc/api/wxa/wxa_sl_api.php?chapter=7_7&index=5
你会发现,他们调起支付的参数是一致的,那么也就是说,
只要在小程序里面,可以拿到公众号支付下单所返回的参数,也可以调起支付。
ok,那么我们如何通过公众号支付下单,然后把参数传递到小程序里面?
首先引入<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
js代码如下:
function minipay (wxCode, chargeMoney) {
var outTime=$("#outTime").val();
// 统一下单返回JS调取支付所需参数
$.tenetAjax({
url: PATH + "/wxa/getPayOrderMini",
data: {'code':wxCode,'chargeMoney':chargeMoney},
async: false,
success: function(data){
if(data.payOrderMap==null){
$("#iformbtndID").html('<a class="btna bg1">支付失败,请返回重新进入</a>');
return;
}
var isPay = data.payOrderMap.isPay;
var errorMsg = data.payOrderMap.errorMsg;
if(isPay==null || isPay==0){
alert(errorMsg);
$("#iformbtndID").html('<a class="btna bg1">'+errorMsg+'</a>');
return;
} else if (isPay==2) {
$("#iformbtndID").html('<p>支付成功</p>');
return;
}
var payDataStr = encodeURIComponent(JSON.stringify(data.payOrderMap));//因为要吧参数传递给小程序,所以这里需要转为字符串
const url = '/pages/wePay/wePay?payDataStr=' + payDataStr;
wx.miniProgram.navigateTo({
url: url
});
}
});
}
然后在小程序端,写一个页面wepay,接收参数
也可以参考官方文档:https://pay.weixin.qq.com/wiki/doc/api/wxa/wxa_sl_api.php?chapter=7_7&index=5
以下是部分代码:
Page({
//h5传过来的参数
onl oad: function(options) {
console.log("webview传过来的参数", options)
//字符串转对象
let payData = JSON.parse(options.payDataStr)
console.log("payData", payData)
//支付
wx.requestPayment({
timeStamp: payData.timeStamp,
nonceStr: payData.nonceStr,
package: payData.package,
signType: 'MD5',
paySign: payData.paySign,
success(res) {
console.log("支付成功", res)
// 支付成功跳转页面
wx.navigateTo({
url: '/pages/paysuc',
})
},
fail(res) {
console.log("支付失败", res)
}
})
})
返回结果:
one more things ,再贴一下如何判断是否在小程序里面。
// 浏览器对象
var ua = getBrowser();
// 微信支付
if (ua.match("micromessenger")) {
var mini=0;
// ios的ua中无miniProgram,但都有MicroMessenger(表示是微信浏览器)
wx.miniProgram.getEnv((res) => {
if (res.miniprogram) {
// alert("在小程序里");
mini=1;
}
})
if (mini==1) {
minipay(wxCode, punitId, iden, chargeMoney, channelId);
return;
}
weixinpay(wxCode, punitId, iden, chargeMoney, channelId);
}
//获取浏览器对象
function getBrowser() {
var browser = {
versions : function() {
var a = navigator.userAgent, b = navigator.appVersion;
return {
trident : a.indexOf("Trident") > -1,
presto : a.indexOf("Presto") > -1,
webKit : a.indexOf("AppleWebKit") > -1,
gecko : a.indexOf("Gecko") > -1 && a.indexOf("KHTML") == -1,
mobile : !!a.match(/AppleWebKit.*Mobile.*/),
ios : !!a.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/),
android : a.indexOf("Android") > -1
|| a.indexOf("Linux") > -1,
iPhone : a.indexOf("iPhone") > -1,
iPad : a.indexOf("iPad") > -1,
webApp : a.indexOf("Safari") == -1
}
}(),
language : (navigator.browserLanguage || navigator.language)
.toLowerCase()
};
return navigator.userAgent.toLowerCase();//获取判断用的对象
}
ok,在仔细看文档,发现小程序支付,必须使用小程序的appid
这里我们使用的是服务商模式的小程序支付,所以我们把小程序的appid作为sub_appid参数,传入下单接口里面,再次支付,提示 “sub_appid和sub_mchid不匹配”,这个需要在服务商功能里面,找到sub_mchid,配置关联appid
配置完成之后,就可以支付成功了。。。。
支付可能存在的问题
特别提醒:对应主题不一样的appid添加,需要3方确认(服务商,特约商户,小程序)
特约商户方
小程序方