微信公众号中调用支付宝支付需要在浏览器中打开支付链接然后调用支付才可以。
具体方法:
1、文件
2、
我们使用的是post方法提交。
下面是在vue.js中使用的方法总结
1、创建alipay页面路由,调起浏览器支付提示页面。(样式太多,省略)
<template>
<div>
<div class="J-weixin-tip weixin-tip" ref="myWeixinTip">
<div class="weixin-tip-content" ref="myWeixinTipContent">
请在菜单中选择在浏览器中打开,<br/>
以完成支付
</div>
</div>
<div class="J-weixin-tip-img weixin-tip-img"></div>
</div>
</template>
<script>
export default {
data() {
return {
}
},
mounted() {
if (location.hash.indexOf('error') != -1) {
alert('参数错误,请检查');
} else {
var ua = navigator.userAgent.toLowerCase();
let tip = this.$refs.myWeixinTip;
let tipImg = this.$refs.myWeixinTipContent;
if (ua.indexOf('micromessenger') != -1) {
tip.style.display = 'block';
tipImg.style.display = 'block';
if (ua.indexOf('iphone') != -1 || ua.indexOf('ipad') != -1 || ua.indexOf('ipod') != -1) {
tipImg.className = 'J-weixin-tip-img weixin-tip-img iphone';
} else {
tipImg.className = 'J-weixin-tip-img weixin-tip-img android';
}
} else {
var getQueryString = function (url, name) {
var reg = new RegExp("(^|\\?|&)" + name + "=([^&]*)(\\s|&|$)", "i");
if (reg.test(url)) return RegExp.$2.replace(/\+/g, " ");
};
var param = getQueryString(location.href, 'goto') || '';
location.href = param != '' ? _AP.decode(param) : 'pay.htm#error';
}
}
},
}
2、页面确认支付获取支付表单。
3、
if(self.payWay == "AliPay"){ //支付宝支付
const div = document.createElement('div');
div.innerHTML = response.data.data;
document.body.appendChild(div);
//document.forms[0].alipaysubmit.submit();
// document.forms[0].submit();
var queryParam = '';
Array.prototype.slice
.call(
document
.querySelectorAll("input[type=hidden]"))
.forEach(
function(ele) {
queryParam += ele.name
+ "="
+ encodeURIComponent(ele.value)
+ '&';
});
var url = document
.getElementsByName("punchout_form")[0].action
+ '&' + queryParam;
_AP.pay(url);
Response.data.data为后台获取的form表单html。