Get order Number
// Send back end parameters about the order
let data = {
phone,
/ / the amount
payPrice:
userName,
meritsRegion,
userAddress,
customVision,
id
};
// Call the background interface to get orderCode
let orderCode = await addActivity(data);
Copy the code
1. Pay treasure
The simplest is alipay payment, the background will return a form, we can use JS to submit
// Pay by Alipay
// Send the amount and order number to get the form
const form = await zfb_web_pay({
/ / order number
orderCode,
/ / the amount
amount
});
const div = document.createElement('div');
div.id = 'alipay';
div.innerHTML = form;
document.body.appendChild(div);
this.$nextTick(function() {
// Alipay will be invoked after execution
document
.getElementById('alipay')
.children[0].submit();
// Clear the previous payment form
document.body.removeChild(div);
});
Copy the code
2. Wechat external payment
Wechat external payment is to return a URL address to call up the wechat app for payment
// Wechat external payment
// Send the amount and order number to get the url of wechat Pay
const { mweb_url } = await wx_WEB({
/ / order number
orderCode,
/ / the amount
amount
});
window.location.href = mweb_url;
Copy the code
3. Wechat internal JSAPI payment
Wechat internal payment is the most troublesome, because the front end needs to jump to a URL to obtain the code, and then transfer the interface to exchange for openId according to this code
// Wechat internal JSAPI payment
// Jump to get code in the component's beforeRouteEnter navigation guard
beforeRouteEnter(to, from, next) {
next(vm= > {
// If it is wechat internal browser
if (isWxBrowser()) {
// If there is no code
if(! vm.code) {const url =
'https://open.weixin.qq.com/connect/oauth2/authorize?appid=$openId} {public platform & redirect_uri =' +
encodeURIComponent(window.location.href) +
'&response_type=code&scope=snsapi_base#wechat_redirect';
// Jump link to get code
window.location.href = url;
} else {
// Get code for openIdvm.getOpenId(vm.code); }}}); },computed: {
code() {
return getQueryString('code')}},methods: {// Call the interface to exchange code for openId
getOpenId(code) {
getOpenId({
code
})
.then(res= > {
this.openId = res;
})
.catch(err= > {
console.log(err);
});
},
getQueryString(name) {
var reg = new RegExp('(^ | &)' + name + '= (/ ^ & *) (& | $)'.'i')
var r = window.location.search.substr(1).match(reg)
if(r ! =null) return unescape(r[2])
return null}}const wxPayInfo = await wx_WEBNEI({
/ / order number
orderCode,
/ / the amount
openId: this.openId
});
weixinPay(wxPayInfo);
weixinPay(data) {
if (typeof WeixinJSBridge == 'undefined') {
if (document.addEventListener) {
document.addEventListener(
'WeixinJSBridgeReady',
onBridgeReady(data),
false
);
} else if (document.attachEvent) {
document.attachEvent(
'WeixinJSBridgeReady',
onBridgeReady(data)
);
document.attachEvent(
'onWeixinJSBridgeReady', onBridgeReady(data) ); }}else{ onBridgeReady(data); }}function onBridgeReady(data) {
window.WeixinJSBridge.invoke(
'getBrandWCPayRequest',
{
appId: data.appId, // The public id is passed in by the merchant
timeStamp: data.timeStamp, // Timestamp, the number of seconds since 1970
nonceStr: data.nonceStr, / / random string
package: data.package, // Order details extension string
signType: data.signType, // wechat signature:
paySign: data.sign // Wechat signature
},
function (res) {
if (res.err_msg == 'get_brand_wcpay_request:ok') {
Toast.success('Payment successful');
} else {
Toast.fail('Payment failed! '); }}); }Copy the code