5 分钟完成微信支付接入图文详细教程

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 == 'paying'">
    <p v-show="channel == 'wx_pub_qr'">
        <qrcode 
         :value="qrcodeUrl"
         v-if="qrcodeUrl"
        :options="{ size: 170 }">
        </qrcode>
    </p>
    <p>请使用微信扫码支付</p>
</div>
这样用户就可以在选择微信支付的时候，正确看到微信收款的二维码了！两分钟！
以上内容就是关于5 分钟实现微信支付接入教程方法，希望能帮助到大家。
相关推荐：
用h5做出微信的支付过程的实现步骤
Thinkphp整合微信支付功能详解
微信小程序开发之总结支付功能错误
以上就是5 分钟实现微信支付接入教程的详细内容，更多请关注php中文网其它相关文章！
				
				

					
微信
					
分享
				

微信提供公众平台、朋友圈、消息推送等功能，用户可以通过“摇一摇”、“搜索号码”、“附近的人”、扫二维码方式添加好友和关注公众平台，同时微信将内容分享给好友以及将用户看到的精彩内容分享到微信朋友圈。



  
关键词：5 分钟完成微信支付接入图文详细教程