App 2.0开发模式的行业看法
467
2024-06-09
5 分钟接入微信支付教程
其实在一个网站或者 app 服务中接入支付并不是什么难事，只要你不害怕去做，认真去了解整个支付的交互流程，实现起来真的是最多半个小时的事情。本文是在使用 ping++ 集成支付功能的基础之上，实现微信支付，大概只需要五分钟。
今早收到微信通知，昨天申请的微信支付的接入申请已经通过，顾早上的时候就顺便把微信支付给接入了。由于之前我就使用 Ping++ 接入了支付宝的即时到账服务，所以在这个基础上增加一个微信支付的接入，想想就是分分钟的事情。
配置 Ping++ 后台
待你申请的微信支付通过之后，你会拿到四个非常关键的信息。
配置正确之后，需要简单地修改后端发起支付的代码，因为支付宝和微信支付在 Ping++ 的系统中是有细微的差别的，具体是 extra 这个参数的区别：使用支付宝即时到账的时候，在 extra 部分需要传入 success_url 作为同步跳转需要，而微信支付则需要在 extra 字段传入对于的 product_id ,这部分的代码可以这样：
1
2
3
4
5
6
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 的了。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
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';
}
})
},
登录后复制
这样在展示二维码的时候就可以这样：
1
2
3
4
5
6
7
8
9
10
<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 分钟实现微信支付接入教程的详细内容
版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。
相关文章
最近发表
推荐文章
热评文章
