微信開發(fā)中如何實(shí)現(xiàn)微信支付接入

小編給大家分享一下微信開發(fā)中如何實(shí)現(xiàn)微信支付接入，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

今早收到微信通知，昨天申請的微信支付的接入申請已經(jīng)通過，顧早上的時候就順便把微信支付給接入了。由于之前我就使用 Ping++ 接入了支付寶的即時到賬服務(wù)，所以在這個基礎(chǔ)上增加一個微信支付的接入，想想就是分分鐘的事情。

配置 Ping++ 后臺

待你申請的微信支付通過之后，你會拿到四個非常關(guān)鍵的信息。

配置正確之后，需要簡單地修改后端發(fā)起支付的代碼，因?yàn)橹Ц秾毢臀⑿胖Ц对?Ping++ 的系統(tǒng)中是有細(xì)微的差別的，具體是 extra 這個參數(shù)的區(qū)別：使用支付寶即時到賬的時候，在 extra 部分需要傳入  success_url 作為同步跳轉(zhuǎn)需要，而微信支付則需要在 extra 字段傳入對于的 product_id ,這部分的代碼可以這樣：

switch ( $channel ) {    case 'alipay_pc_direct' :      
 $extra['success_url'] = url('/payment/done');       
  break;    case 'wx_pub_qr':       
   $extra['product_id'] = $this->wechatOrder();    
       break;    default:      
         //more extra comes here}

這部分我認(rèn)為是一分鐘就可以搞定！

修改前端代碼

到這里，其實(shí)只留了兩分鐘給前端了，不過這個足矣。因?yàn)槲抑笆褂?Vuejs 重構(gòu)了支付的組件，所以在增加微信之后的時候就是加一些條件判斷就OK，不過需要特別注意一點(diǎn)就是，微信支付是只支持掃碼的，并沒有什么跳轉(zhuǎn)鏈接的概念，所以我們需要一個處理二維碼的庫，這里就可以直接使用我之前推薦的 vue-qrcode 的了。

then((response) => {
    if(this.channel === 'wx_pub_qr') {
      this.status = 'paying';
      this.qrcodeUrl = 
           response.data.credential.wx_pub_qr;
      this.timeId = setInterval(() => {
          if (this.status == 'success') {
              clearInterval(this.timeId);
          }
          this.checkPaymentDone(response.data.id);
       }, 5000)
    }
 }
 
checkPaymentDone(chargeId) {
    axios.post('/payment/check', {
        chargeId: chargeId
    }).catch(error => {
        this.status = 'exception';
    }).then(response => {
        if (response.data.finished) {
            this.status = 'success';
        }
    })
},

這樣在展示二維碼的時候就可以這樣：

<div v-show="status == 'paying'">
    <p v-show="channel == 'wx_pub_qr'">
        <qrcode 
         :value="qrcodeUrl"
         v-if="qrcodeUrl"
        :options="{ size: 170 }">
        </qrcode>
    </p>
    <p>請使用微信掃碼支付</p>
</div>

這樣用戶就可以在選擇微信支付的時候，正確看到微信收款的二維碼了！兩分鐘！

以上是“微信開發(fā)中如何實(shí)現(xiàn)微信支付接入”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道！