外观
一个微商城的项目,前端用的是vue.js,涉及到微信支付的前端代码大概是这样子的:
const mixinPay = {
computed: {
...mapGetters(["l", "user", "config", "mock"]),
},
methods: {
payByWechat({ shoppingOrderId, successCallback }) {
const _this = this;
const endPoint = "/pay/getWeixinPayInfo.action";
_this.wait(true);
const requestData = {
openId: _this.user.openid,
id: shoppingOrderId,
};
return doPost(endPoint, requestData)
.done((data) => {
if (data.status === "200" && !data.errorCode) {
const options = {
appId: data.responseBody.appid,
timeStamp: data.responseBody.timestamp,
nonceStr: data.responseBody.nonceStr,
package: data.responseBody.package,
signType: "MD5",
paySign: data.responseBody.paySign,
};
// _this.alert({ text: JSON.stringify(options) })
if (typeof window.WeixinJSBridge === "undefined") {
if (window.document.addEventListener) {
window.document.addEventListener(
"WeixinJSBridgeReady",
onBridgeReady.bind(null, options),
false,
);
} else if (window.document.attachEvent) {
window.document.attachEvent(
"WeixinJSBridgeReady",
onBridgeReady.bind(null, options),
);
window.document.attachEvent(
"onWeixinJSBridgeReady",
onBridgeReady.bind(null, options),
);
}
} else {
onBridgeReady(options);
}
} else if (data.errorCode) {
_this.alert({ text: `${data["errorMsg" + _this.l]}` });
} else {
_this.alert({
text:
_this.l === "En"
? "Server responds abnormally"
: "服务器响应异常",
});
}
})
.fail((jqXHR, textStatus, errorThrown) => {
_this.alert({
text:
_this.l === "En"
? "Failed to payment parameters"
: "微信支付参数失败",
});
})
.always(() => {
_this.wait(false);
});
function onBridgeReady(options) {
window.WeixinJSBridge.invoke(
"getBrandWCPayRequest",
options,
function (data) {
if (data && data.err_msg === "get_brand_wcpay_request:ok") {
_this.toUpdateReceipt(shoppingOrderId, successCallback);
} else if (
data &&
(data.err_msg === "get_brand_wcpay_request:cancel" ||
data.err_msg === "get_brand_wcpay_request:fail")
) {
_this.alert({
text: _this.l === "En" ? "Failed to pay" : "未成功支付",
});
} else if (data && data.err_desc) {
_this.alert({ text: data.err_desc });
} else {
_this.alert({
text: _this.l === "En" ? "Failed to pay" : "支付失败",
});
}
},
);
}
},
toUpdateReceipt(shoppingOrderId, successCallback) {
const _this = this;
const endPoint = "/orderInfo/updateReceipt.action";
_this.wait(true);
const requestData = {
id: shoppingOrderId,
status: 4,
};
doPost(endPoint, requestData)
.done((data) => {
if (data.status === "200" && !data.errorCode) {
_this.alert({
text: _this.l === "En" ? "Paid successfully" : "支付成功",
callback() {
if (successCallback && typeof successCallback === "function") {
successCallback();
}
},
});
} else {
_this.alert({
text:
_this.l === "En"
? "Paied successfully, but failed to update order status, please contact the service"
: "付款成功,送货单状态更新失败,请联系客服",
callback() {
if (successCallback && typeof successCallback === "function") {
successCallback();
}
},
});
}
// else if (data.errorCode) {
// _this.alert({ text: `${data['errorMsg' + _this.l]}` })
// } else {
// _this.alert({ text: JSON.stringify(data) })
// }
})
.fail(() => {
_this.alert({
text:
_this.l === "En"
? "Paied successfully, but failed to update order status, please contact the service"
: "付款成功,送货单状态更新失败,请联系客服",
callback() {
if (successCallback && typeof successCallback === "function") {
successCallback();
}
},
});
})
.always(() => {
_this.wait(false);
});
},
...mapActions(["alert", "wait"]),
},
};这里的【微信内H5调起支付】的官网参考文档地址为https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=7\_7&index=6&pass\_ticket=EiPbYJmbbMTWltjRY8XQq5dwQ4DbztpbsIE0i11BE6JDeykgQ3arpgnA55tR3RZC 大体的支付流程: