5 分鐘實現微信支付接入教學課程

其實在一個網站或 App 服務中接入支付並不是什麼難事，只要你不害怕去做，認真去了解整個支付的交互流程，實現起來真的是最多半個小時的事情。本文是在使用 Ping++ 整合支付功能的基礎之上，實現微信支付，大概只需要五分鐘。

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

配置 Ping++ 後台

待你申請的微信支付通過之後，你會拿到四個非常關鍵的資訊。

配置正確之後，需要簡單地修改後端發起支付的程式碼，因為支付寶和微信支付在Ping++ 的系統中是有細微的差別的，具體是extra 這個參數的區別：使用支付寶即時到帳的時候，在extra 部分需要傳入 success_url 作為同步跳轉需要，而微信支付則需要在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}

這部分我認為是一分鐘就可以搞定！

修改前端程式碼

到這裡，其實只留了兩分鐘給前端了，不過這個足矣。因為我之前使用Vuejs 重構了支付的組件，所以在增加微信之後的時候就是加一些條件判斷就OK，不過需要特別注意一點就是，微信支付是只支持掃碼的，並沒有什麼跳轉鏈接的概念，所以我們需要一個處理二維碼的函式庫，這裡就可以直接使用我之前推薦的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 == &#39;paying&#39;">
    <p v-show="channel == &#39;wx_pub_qr&#39;">
        <qrcode 
         :value="qrcodeUrl"
         v-if="qrcodeUrl"
        :options="{ size: 170 }">
        </qrcode>
    </p>
    <p>请使用微信扫码支付</p>
</div>

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

以上內容就是關於5 分鐘實現微信支付接入教學方法，希望能幫助大家。

相關推薦：

用h5做出微信的支付過程的實作步驟

Thinkphp整合微信支付功能詳解

微信小程式開發之總結支付功能錯誤

#

以上是5 分鐘實現微信支付接入教學課程的詳細內容。更多資訊請關注PHP中文網其他相關文章！