微信小程式開發(fā)教學(xué)梳理微信支付的流程

#推薦：#微信小程式開發(fā)教學(xué)

因?yàn)闃I(yè)務(wù)需要，開發(fā)微信支付功能，涉及三種支付方式：

• JSAPI 支付：微信內(nèi)網(wǎng)頁支付，需要開通微信服務(wù)號碼
• 小程式支付：在小程式中支付，需要開通小程式
• H5 支付：在手機(jī)瀏覽器（出微信內(nèi)網(wǎng)爺）中網(wǎng)頁支付

使用微信支付的前提必開通微信商家號，要使用到那種的支付方式要前需在商家平臺(tái)開通（要審核）。

支付的錢最終都會(huì)到商戶號碼裡（一般由公司財(cái)務(wù)開通）。

開發(fā)微信支付的過程中大大小小坑還是踩了不少，終於做完了，整理下開發(fā)流程。

參考：

• 微信支付-存取指引
• 微信支付-開發(fā)文件

小程式支付

開發(fā)流程

1. 小程式端請求建立訂單接口，後端統(tǒng)一下單取得orderId 並返回
2. 小程式端取得透過wx.login ()取得code
3. 小程式端拿這code和orderId請求後端接口，取得支付所需資料
4. 取得支付所需資料之後，小程式端呼叫wx.requestPayment()接口，直接呼叫起支付頁面
5. 判斷是否支付成功後的邏輯

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("支付失敗");
??}
}

注意事項(xiàng)

1. 申請微信小程式帳號
   申請成功可拿到AppID（小程式id）和AppSecret（小程式金鑰）
   申請類型為企業(yè)性質(zhì)，否則無法接入微信支付
2. 微信小程式認(rèn)證
   通過認(rèn)證的小程式才能接入微信支付和綁定商家平臺(tái)
3. 申請商家平臺(tái)帳號
   需要第一步驟申請的AppID
   申請成功可拿到MchID（商家id）和MchKey（商家金鑰）
4. 信小程式關(guān)聯(lián)商家號碼
   微信與商家都認(rèn)證成功後，在微信後臺(tái)微信支付選單中進(jìn)行關(guān)聯(lián)
5. 存取微信支付
   在微信後臺(tái)微信支付選單中進(jìn)行存取

H5 支付

開發(fā)流程

1. 前端端請求創(chuàng)建訂單接口，後端統(tǒng)一下單獲取orderId# 並返回
2. #前端帶著orderId 請求支付接口，獲得mweb_url，
3. 然後跳轉(zhuǎn)mweb_url 會(huì)跳轉(zhuǎn)微信自動(dòng)調(diào)用微信支付
4. 支付後返回支付頁，判斷是否支付成功（需發(fā)送請求後端查詢）
   4.1 重新整理頁面，取得最新的付款（訂單）狀態(tài)。
   4.2 設(shè)定一個(gè)的按鈕"我已付款"，讓使用者點(diǎn)擊自動(dòng)查詢狀態(tài)。

偽代碼

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)。
}

注意事項(xiàng)

• 在商家平臺(tái)設(shè)定正確的支付網(wǎng)域
• 偵錯(cuò)需要在線上，如果嫌麻煩可以使用內(nèi)網(wǎng)穿透（Ngrok 或花生殼）
• 需對redirect_url進(jìn)行urlencode處理
• H5 付款不能直接在微信客戶端內(nèi)調(diào)起，請?jiān)谕獠繛g覽器調(diào)起。

參考

• 微信支付-H5 支付-開發(fā)步驟

JSAPI 支付（微信內(nèi)網(wǎng)頁支付）

#開發(fā)流程

• 商品頁

1. 前端商品頁建立訂單，在後端統(tǒng)一下單後取得orderId
2. 前端帶著orderId 跳到支付頁，

• 支付頁

1. #取得

   code

   第一次進(jìn)入頁面，判斷是否路徑中有
   1. code
   #沒有
   2. code，請求資料跳轉(zhuǎn)授權(quán)頁面，code 會(huì)透過回呼位址一起回傳回來
   拿到
   3. code，傳送給後端，後端解析到openid ，保存好。
2. 點(diǎn)擊確定支付按鈕，觸發(fā)

   wxPay() 方法

   發(fā)送
   1. orderId 給後端，取得wxData
   2. wxData 中包含wx.config 和wx.chooseWXPay 兩個(gè)介面的資料。
   先呼叫
   3. wx.config()然後在呼叫 wx.chooseWXPay()，如果一切正常，付款頁面就會(huì)彈出。
支付狀態(tài)透過後端去查詢

商品頁

//?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";

• #付款頁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()?{
????????//?請求后端拿到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,?//?必填，公眾號的唯一標(biāo)識
????????????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（重定向使用必須攜帶）

以上是從前端的角度來整理微信支付的流程的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！