Recently, I used wechat and Alipay to pay for the mall project. Sum up the document

I. wechat Pay

Wechat Pay uses JSAPI payment, that is, directly invokes payment in wechat’s built-in browser. The detailed steps are as follows

(1) Preparation before access to obtain authorization code

It is divided into payment authorization and web domain name authorization

1. Payment authorization, configure the domain name of your project, the top-level domain name is ok.

2. Web domain name authorization is the domain name of the backend interface that you request. Note: domain names are not allowed with parameters

(2) Front-end code writing

The writing of the code is divided into two parts: 1. Obtain openID

onLoad() { this.isWeixin = this.isWechat(); If (this.isweixin){// Get code let code = this.geturlCode ('code'); Uni. ShowToast ({title: code}) / / in WeChat open the payment link, will determine whether there is a code if (code = = = null | | code = = = ' ') {enclosing checkWechatCode (); }else{// If you get code, use this code to request the API provided by the back end to get the openId uni.request({method: "POST", url: `${url_config}/crm/v1/wx/query/openId/gzh`, data: { code: code }, success: (res) => { this.openId = res.data.openid; Console. log(res.data.openid)}})}}}, methods(){// methods: Used to determine whether WeChat built-in browser isWechat () {return String (the navigator. UserAgent. ToLowerCase () the match (/ MicroMessenger/I)) = = = "micromessenger"; }, checkWechatCode(){ let local = encodeURIComponent(`${url_config}/h5/index.html); Let appId = the appID of your official account // After obtaining the code through wechat official interface, Will refresh again set the callback address window. The redirect_uri 】 【 location. The href = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=" + appid +  "&redirect_uri=" + local + "&response_type=code&scope=snsapi_base&state=1#wechat_redirect"; }, getUrlCode (name) { return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;] +? (& # | |; |$)').exec(location.href) || [, ''])[1].replace(/\+/g, '%20')) || null }, }Copy the code

To initiate a payment request, there are two parts. First, you need to take the OpenID to the backend, and ask the backend to return the following value to you, and then initiate the payment request after receiving the value. Note: the values in the picture are!!!!! returned by the backend

Initiating request code

Uni. request({URL: '${url_config}/pay', // The back-end API is only an example, not a real interface address. data: { openId:openId, ..... }, header: { 'content-type': 'application/json' }, method:'POST', success: If (res.statusCode == 200){WeixinJSBridge. Invoke ('getBrandWCPayRequest', {"appId": Res.data. appid, // public id passed by merchant "timeStamp":res.data.timeStamp, // timeStamp" nonceStr":res.data.nonce_str, // random string "package": "Prepay_id =" + res.data.prepay_id, "signType":"MD5", // "PaySign ":res.data.paySign // wechat signature}, function(ress) { if (ress.err_msg == "get_brand_wcpay_request:ok") { uni.showToast({ icon: 'success', title: NavigateBack ({// delta:2 //}) navigateTo({url: '/pages/success '}); }, 500); } else if (ress.err_msg == "get_brand_wcpay_request:cancel") { uni.showToast({ icon: "none", title: "' cancelled payment '})} else {uni. ShowToast ({icon: "none", title: NavigateBack ({// delta:2 //}) navigateTo({url: '/pages/error/error'}); }, 500); }}); } }, fail() { } });Copy the code