让你的微信小程序具有在线支付

迈不过友情╰ 2022-04-02 04:24 181阅读 0赞

> **小编推荐：**[Fundebug][]专注于JavaScript、微信小程序、微信小游戏，Node.js和Java实时BUG监控。真的是一个很好用的bug监控费服务，众多大佬公司都在使用。

最近需要在微信小程序中用到在线支付功能，于是看了一下官方的文档，发现要在小程序里实现微信支付还是很方便的，如果你以前开发过服务号下的微信支付，那么你会发现其实小程序里的微信支付和服务号里的开发过程如出一辙，下面我就具体说一下小程序里微信支付的开发流程和注意点。

![Image 1][]

**1.开通微信支付和微信商户号**  
这个过程就和开通服务号的微信支付过程一样，没有什么可以说的。

![Image 1][]

**2.获得用户的openid**  
首页我们需要在小程序的客户端js中获取当前用户的openid,通过调用wx.login方法可以得到用户的code,然后开发者服务器使用登录凭证 code 获取 openid。

wx.login({
          success: function(res) {
            if (res.code) {
              //发起网络请求
              wx.request({
                url: 'https://yourwebsit/onLogin',
                method: 'POST',
                data: {
                  code: res.code
                },
                success: function(res) {
                    var openid = res.data.openid;
                },
                fail: function(err) {
                    console.log(err)
                }
              })
            } else {
              console.log('获取用户登录态失败！' + res.errMsg)
            }
          }
        });

**3.获取prepay\_id和支付签名验证paySign**  
这一步的过程就和服务号里的微信支付过程一样，分为客户端和服务器端  
首先来看一下客户端js  
在服务号里，我们是通过如下的代码来调起支付功能

在小程序里，我们是通过wx.requestPayment方法来调起支付功能，当然在这之前，我们先要获取prepay\_id。

wx.request({
                        url: 'https://yourwebsit/service/getPay', 
                        method: 'POST',
                        data: {
                          bookingNo:bookingNo,  /*订单号*/
                          total_fee:total_fee,   /*订单金额*/
                          openid:openid
                        },
                        header: {
                            'content-type': 'application/json'
                        },
                        success: function(res) {
                            wx.requestPayment({
                              'timeStamp':timeStamp,
                              'nonceStr': nonceStr,
                              'package': 'prepay_id='+res.data.prepay_id,
                              'signType': 'MD5',
                              'paySign': res.data._paySignjs,
                              'success':function(res){
                                  console.log(res);
                              },
                              'fail':function(res){
                                  console.log('fail:'+JSON.stringify(res));
                              }
                            })
                        },
                        fail: function(err) {
                            console.log(err)
                        }
                    })

那在服务器端主要要实现的是prepay\_id的获取和签名paySign

下面是用到的函数

这样简单3步，小程序的微信支付功能就接上了，下面是测试的支付效果图

![Image 1][]

作者：IT小C  
链接：https://www.jianshu.com/p/72f5c1e3f8a5

## 关于Fundebug ##

[Fundebug][]专注于JavaScript、微信小程序、微信小游戏、支付宝小程序、React Native、Node.js和Java实时BUG监控。 自从2016年双十一正式上线，Fundebug累计处理了9亿+错误事件，得到了Google、360、金山软件、百姓网等众多知名用户的认可。欢迎免费试用！

[![2018121912254161][]][2018121912254161]

[Fundebug]: https://www.fundebug.com/
[Image 1]: 
[2018121912254161]: /images/20220402/e633db6af7fd4d11bd8f5f5e8dabd456.png