温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

微信开发中如何实现微信支付接入

发布时间:2021-03-06 14:40:14 来源:亿速云 阅读:205 作者:小新 栏目:移动开发

小编给大家分享一下微信开发中如何实现微信支付接入,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!

今早收到微信通知,昨天申请的微信支付的接入申请已经通过,顾早上的时候就顺便把微信支付给接入了。由于之前我就使用 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 == 'paying'">     <p v-show="channel == 'wx_pub_qr'">         <qrcode           :value="qrcodeUrl"          v-if="qrcodeUrl"         :options="{ size: 170 }">         </qrcode>     </p>     <p>请使用微信扫码支付</p> </div>

这样用户就可以在选择微信支付的时候,正确看到微信收款的二维码了!两分钟!

以上是“微信开发中如何实现微信支付接入”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注亿速云行业资讯频道!

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI