WeChat Mini Program Development Tutorial Sorting out the process of WeChat payment

##Recommended: WeChat Mini Program Program Development Tutorial

JSAPI payment: WeChat webpage payment requires WeChat activation Service number
• Mini program payment: To pay in the mini program, you need to open the mini program
• H5 payment: Pay on the web page in the mobile browser (exit WeChat intranet)

WeChat Payment-Access Guide
• WeChat Payment-Development Document

The applet requests to create an order interface, and the backend places an order to obtain
1. orderId and returns
The applet obtains it through wx.login () Get
2. code
The applet uses this
3. code and orderId to request the backend interface and obtain the data required for payment
After obtaining the data required for payment, the applet calls the wx.requestPayment() interface and directly calls the payment page
4. Logic to determine whether payment is successful

async?function?wxPay(goodId)?{
??//?1.?創(chuàng)建訂單?獲取orderId
??let?orderId?=?await?ajax("POST",?"/api/OrderProgram/CreateTheOrder",?{
????goodId,?//?商品id
??});
??//?2.?獲得?code
??let?code?=?await?wxlogin();?//?基于pr封裝的wx.login()方法
??//?3.?獲取支付的數(shù)據(jù)
??let?payData?=?await?ajax("POST",?"/api/OrderProgram/WxXcxPay",?{
????orderId,
????code,
??});
??//?4.?發(fā)起支付
??let?res?=?await?payment(payData);?//?基于pr封裝的wx.requestPayment()方法
??//?5.?判斷是否支付成功
??let?payResult?=?res.errMsg;
??if?(payResult?==?"requestPayment:ok")?{
????console.log("支付成功");
??}?else?if?(payResult?==?"requestPayment:fail?cancel")?{
????console.log("用戶取消支付");
??}?else?{
????console.log("支付失敗");
??}
}

Apply for a WeChat mini program account
1. If you apply successfully, you can get the AppID (mini program id) and AppSecret (mini program key)
   The application type is Enterprise nature, otherwise you cannot access WeChat Payment
   
WeChat Mini Program Authentication
2. Only mini programs that have passed the certification can access WeChat Payment and bind the merchant platform
   
Apply for a merchant platform account
3. The AppID that needs to be applied for in the first step
   If the application is successful, you can get MchID (merchant id) and MchKey (merchant key)
   
The merchant number associated with the WeChat mini program
4. After both WeChat and the merchant are successfully authenticated, Connect in the WeChat payment menu in the WeChat background
   
Access to WeChat payment
5. Connect in the WeChat payment menu in the WeChat background
   

The front-end requests to create an order interface, and the back-end places an order uniformly to obtain the
1. orderId and returns
The front-end requests payment with
2. orderId Interface, get mweb_url,
and then jump to
3. mweb_url will jump to WeChat and automatically call WeChat payment
After payment, return to the payment page to determine whether to pay. Successful (need to send request to backend query)
4. 4.1 Refresh the page to obtain the latest payment (order) status.
   4.2 Set a button "I have paid" to allow users to click to automatically check the status.
   

async?function?wxH5Pay(goodId)?{
??//?1.?創(chuàng)建訂單?獲取orderId
??let?orderId?=?await?ajax("POST",?"/api/OrderProgram/CreateTheOrder",?{
????goodId,?//?商品id
??});
??//?2.?獲取支付跳轉(zhuǎn)的URL
??let?mweb_url?=?await?ajax("POST",?"/api/OrderProgram/WxH5Pay",?{?orderId?});
??//?3.?跳轉(zhuǎn)URL去微信支付
??if?(mweb_url)?{
????location.href?=?mweb_url;
??}?else?{
????console.log("回調(diào)地址出錯(cuò)");
??}
??//?4.?支付后返回支付頁，判斷是否支付成功
??//?4.1?刷新頁面，獲取最新的訂單(商品)狀態(tài)。
??//?4.2?設(shè)置一個(gè)"我已支付"的按鈕，讓用戶點(diǎn)擊之后查詢狀態(tài)。
}

Set the correct payment domain name on the merchant platform
• Debugging needs to be online. If you are in trouble, you can use intranet penetration (Ngrok or peanut shell)
• Need to
• redirect_urlurlencodeprocess
H5 payment cannot be made directly on WeChat customers To load it within the client, please load it in an external browser.

WeChat payment-H5 payment-development steps

Product page

Create an order on the front-end product page, and obtain the
1. orderId# after placing the unified order on the back-end ##The front end jumps to the payment page with
orderId
2. ,

Get
1. code
   Enter the page for the first time, determine whether there is
   code
   1. in the path, but not
   code
   2. , and request data jump On the sub-authorization page, code will be returned together through the callback address. gets the
   code
   3. and sends it to the backend, which parses it to openid ,keep properly.
Click the Confirm Payment button to trigger the
2. wxPay()

   method

   Send
   orderId
   1. to the post terminal, obtain the data of wx.config and wx.chooseWXPay contained in
   wxData
   2. wxData. First call
   wx.config()
   3. and then call wx.chooseWXPay(). If everything is normal, the payment page will pop up.
   The payment status is queried through the backend
3. Pseudo code

• //?1.?創(chuàng)建訂單?獲取orderId
  let?orderId?=?await?ajax("POST",?"/api/OrderProgram/CreateTheOrder",?{
  ??goodId,?//?商品id
  });
  //?2.?攜帶id?跳轉(zhuǎn)到支付頁
  this.$router.push({?name:?"wx_pay_page",?params:?{?orderId:?id?}?});

main.js
• )

  //?main.js?引入?js-sdk
  import?wx?from?"weixin-js-sdk";

Payment page HTML

• <template>
  ??<p>
  ????<button @click="wxPay">點(diǎn)擊支付</button>
  ??</p>
  </template>

//?Vue
data(){
????return?{
????????orderId:?this.$route.params.orderId,?//?訂單id
????????url:?'',//?獲取code的url
????????wxData:?null,//?js-sdk接口所需的數(shù)據(jù)
????}
},
mounted(){
????//?判斷是否有code
????this.getCode()
}
methods:?{
????getCode()?{
????????var?code?=?this.getUrlPram("code");
????????if?(code?!=?null)?{
????????????this.code?=?code;
????????????//?拿到?code?發(fā)給?后端
????????????this.sendCode(code);
????????}?else?{
????????????//?去拿code
????????????this.getUrl();
????????}
????},
????getUrl()?{
????????//?請(qǐng)求后端拿到url所需數(shù)據(jù)，然后跳轉(zhuǎn)頁面在通過回調(diào)地址返回，獲取code.
????????this.axios
????????????.post("/api/OrderProgram/GetOpenidAndAccessToken",?{
????????????????orderId:?this.orderId,
????????????})
????????????.then((data)?=>?{
????????????????this.url?=?`https://open.weixin.qq.com/connect/oauth2/authorize?appid=${data.appId}&redirect_uri=${data.redirect_uri}&response_type=${data.response_type}&scope=${data.scope}&state=${data.state}`;
????????????????window.location.href?=?this.url;
????????????})
????????????.catch((err)?=>?{
????????????????console.log(err);
????????????});
????},
????sendCode(code)?{
????????//?發(fā)送code給后端?后端解析出openid
????????this.axios
????????????.post("/api/OrderProgram/GetOpenidAndAccessTokenFromCode",?{
????????????????code:?code,
????????????})
????????????.then((res)?=>?{
????????????????console.log(res);
????????????})
????????????.catch((err)?=>?{
????????????????console.log(err);
????????????});
????},
????wxPay:?async?function()?{
????????//?發(fā)送orderid，獲取wx.chooseWXPay和wx.config所需的參數(shù)
????????this.wxData?=?await?this.axios.post(
????????????"/api/OrderProgram/WxJSAPIPay",
????????????{?orderId:?this.orderId?}
????????);
????????let?wxConfigData?=?this.wxData.wxConfigData?//?獲取wx.chooseWXPay()所需數(shù)據(jù)
????????let?wxPayData?=?this.wxData.wxPayData;//?獲取wx.config()所需數(shù)據(jù)
????????this.$wx.config({
????????????debug:?false,?//?開啟調(diào)試模式,調(diào)用的所有api的返回值會(huì)在客戶端alert出來，若要查看傳入的參數(shù)，可以在pc端打開，參數(shù)信息會(huì)通過log打出，僅在pc端時(shí)才會(huì)打印。
????????????appId:?wxConfigData.appId,?//?必填，公眾號(hào)的唯一標(biāo)識(shí)
????????????timestamp:?wxConfigData.timeStamp,?//?必填，生成簽名的時(shí)間戳
????????????nonceStr:?wxConfigData.nonceStr,?//?必填，生成簽名的隨機(jī)串
????????????signature:?wxConfigData.paySign,?//?必填，簽名
????????????jsApiList:?[
????????????????"chooseWXPay",
????????????],
????????});
????????//?執(zhí)行支付
????????this.$wx.chooseWXPay({
????????????timestamp:?wxPayData.timeStamp,?//?支付簽名時(shí)間戳，注意微信jssdk中的所有使用timestamp字段均為小寫。但最新版的支付后臺(tái)生成簽名使用的timeStamp字段名需大寫其中的S字符
????????????nonceStr:?wxPayData.nonceStr,?//?支付簽名隨機(jī)串，不長于?32?位
????????????package:?wxPayData.package,?//?統(tǒng)一支付接口返回的prepay_id參數(shù)值，提交格式如：prepay_id=\*\*\*）
????????????signType:?wxPayData.signType,?//?簽名方式，默認(rèn)為'SHA1'，使用新版支付需傳入'MD5'
????????????paySign:?wxPayData.paySign,?//?支付簽名
????????????success:?(res)?=>?{
????????????????this.$toast("支付成功");
????????????},
????????????fail:?(err)?=>?{
????????????????this.$toast("支付失敗");
????????????},
????????});
????},
}

//?在創(chuàng)建訂單之后，就判斷環(huán)境使用哪種方法支付。
if?(isWx())?{
??this.WXPay(orderId);?//?帶著orderId跳轉(zhuǎn)到支付頁邏輯
}?else?{
??this.H5Pay(orderId);?//?執(zhí)行上面H5支付中的創(chuàng)建訂單之后的邏輯
}
//?判斷是否是微信瀏覽器
function?isWx()?{
??let?uAgent?=?navigator.userAgent.toLowerCase();
??reutrn(/micromessenger/.test(uAgent))???true?:?false;
}

https://open.weixin.qq.com/connect/oauth2/authorize
?appid=你的appid
&redirect_uri=你的回調(diào)地址（拿到code后返回）
&response_type=code（返回類型，默認(rèn)code）
&scope=snsapi_base（授權(quán)范圍，靜默授權(quán)拿到openid）
&state=STATE(自定義狀態(tài)，非必填)
#wechat_redirect（重定向使用必須攜帶）

The above is the detailed content of Sorting out the WeChat payment process from a front-end perspective. For more information, please follow other related articles on the PHP Chinese website!