Rumah >applet WeChat >pembangunan WeChat >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 == 'paying'"> <p v-show="channel == 'wx_pub_qr'"> <qrcode :value="qrcodeUrl" v-if="qrcodeUrl" :options="{ size: 170 }"> </qrcode> </p> <p>请使用微信扫码支付</p> </div>
这样用户就可以在选择微信支付的时候,正确看到微信收款的二维码了!两分钟!
以上内容就是关于5 分钟实现微信支付接入教程方法,希望能帮助到大家。
相关推荐:
Atas ialah kandungan terperinci 5 分钟实现微信支付接入教程. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!