微信小程序接入微信支付实现过程详解

网友投稿 947 2023-11-10

目录一、基本介绍二、配置信息三、编码实现四、流程总结

一、基本介绍

1、支付场景:点击支付按钮唤起微信支付弹窗,输入正确密码后完成支付。

微信小程序接入微信支付实现过程详解

2、基本流程:点击支付按钮首先生成一个订单,然后在后端调用微信api接口进行统一下单,将接口返回的数据回传到前端拉起支付操作,然后异步通知支付结果。

二、配置信息

1、微信公众平台配置

点击功能 – 微信支付,关联一下 注册好的微信商户平台

1、微信商户平台配置

(1)设置证书和密钥

登录微信商户平台,点击账户中心 – API安全,设置证书和两个密钥(此处两个密钥设置为相同的。

(2)申请JSAPI支付

①点击产品中心 – 我的产品 ,点击申请JSAPI支付。

②填写支付授权目录

开发配置中需要填写支付授权目录(后端服务器域名)

三、编码实现

1、获取用户的openId

必须要有微信用户的openid才可以唤醒支付功能。openid由微信公众号提供,是对于消费者微信产生的唯一用户身份标识。

获取方法:传送门

2、获取prepay_id和支付签名验证paySign

商户在小程序中先调用接口在微信支付服务后台生成预支付交易单,返回正确的预支付交易后调起支付。

(1)调用接口生成预支付订单拿到订单id

?
1
2
3
4
5
6
7
8
9
10
orderInsert(data).then(res => {
if (res.data.code === 1) {
this.getPayInfo(res.data.data.id)
} else {
wx.showToast({
title: res.data.msg,
icon: none
})
}
})

(2)通过订单id调用接口获取用户支付所需参数

(3)通过wx.requestPayment方法调用起支付功能

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
payMoney(moneyData) {
wx.requestPayment({
timeStamp: moneyData.timeStamp,
nonceStr: moneyData.nonceStr,
package: moneyData.packageValue,
signType: moneyData.signType,
paySign: moneyData.paySign,
success(res) {
},
fail(res) {
wx.showToast({
title: "支付失败!",
icon: "error"
})
}
})
}

四、流程总结

(1)小程序获取微信openId以及订单号传给后台

(2)后台根据openId和订单号进行签名post微信统一下单接口

(3)后台获取微信返回的xml字符串解析二次签名后返回给前端

(4)前端调起微信支付API

您可能感兴趣的文章:小程序开发调用微信支付以及微信回调地址配置微信小程序云开发实现微信支付功能业务逻辑可靠小程序通过小程序云实现微信支付功能实例小程序调用微信支付的方法小程序微信支付功能配置方法示例详解【基于thinkPHP】微信小程序调用微信支付接口的实现方法微信小程序微信支付接入开发实例详解

版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

上一篇:信创电子系统: 打造全方位智能解决方案的领先企业
下一篇:微信小程序 登录的简单实现
相关文章

 发表评论

暂时没有评论,来抢沙发吧~