如何实现微信小程序的支付

大家都知道如今已经是无纸化的生活了,就连现金也是少见的物品,移动支付已经越来越普及,在路边买个水果都是二维码,以此可以看出移动支付的重要性。但是如此便捷的微信支付是怎样实现的呢?今天我就带大家来了解一下。

首先来看一下官方给出的业务流程时序图

 

这个图很清晰的表达了在小程序支付中的整个流程,每一步要做些什么。

一个完整的支付,一般情况下都是包含了下面三个主要的点;

  • 支付(正常是支付平台提供的h5页面让用户操作,主要是输密码)
  • 通知(用户完成一笔支付了,支付平台要通知商家支付结果,商家收到结果后进行一些相应的处理)
  • 查询(与第二点有点反过来的意思,商家自己主动去支付平台查询支付的结果,然后根据结果做相应的处理)

下面就重点来简单实现一下上面说的第一点,支付,也是可以进行下面两步的在大前提。

小程序的实现

简单起见,在index.wxml中添加一个输入框和一个button,绑定一下相应的事件,输入框主要是用于输入订单号,按钮用于模拟提交一个订单并发起支付。

<!--index.wxml--><view class="container">

    <input type="text" bindinput="getOrderCode" style="border:1px solid #ccc;"  />

    <button bindtap="pay">立即支付</button></view>

然后在index.js中写上一小段代码,主要是处理上面按钮的点击事件。

Page({

    data: {

        txtOrderCode: ''

    },

    pay: function () {

        var ordercode = this.data.txtOrderCode;

        wx.login({

          success: function (res) {

            if (res.code) {

              wx.request({

                url: 'https://www.yourdomain.com/pay',

                data: {

                  code: res.code,//要去换取openid的登录凭证

                  ordercode: ordercode

                },

                method: 'GET',

                success: function (res) {

                  console.log(res.data)

                  wx.requestPayment({

                    timeStamp: res.data.timeStamp,

                    nonceStr: res.data.nonceStr,

                    package: res.data.package,

                    signType: 'MD5',

                    paySign: res.data.paySign,

                    success: function (res) {

                      // success

                      console.log(res);

                    },

                    fail: function (res) {

                      // fail

                      console.log(res);

                    },

                    complete: function (res) {

                      // complete

                      console.log(res);

                    }

                  })

                }

              })

            } else {

              console.log('获取用户登录态失败!' + res.errMsg)

            }

          }

        });

    },

    getOrderCode: function (event) {

        this.setData({

          txtOrderCode: event.detail.value

        });

    }

})

可以看到,在这里Catcher先通过wx.login这个API先取到了登录的凭证code,并把这个凭证code做为请求参数用wx.request这个API发起一个网络请求。在这个网络请求处理后会返回小程序支付所需要的相关参数。拿到这些参数后,再调用wx.requestPayment这个支付API,此时才算是真正的发起支付。

至此,小程序这边的事已经做完了,接下来就是要去处理接口那边的事了

接口的实现

首先是获取到登录凭证后发起的这个网络请求。这个网络请求是决定了这次支付能否成功的第一步!

下面要做的是用登录凭证去换我们要的openid。

要换取openid,就要向微信提供的地址发起一个网络请求,并在URL带上appid,secret和凭证code这三个参数。

然后就可以拿到一个json形式的字符串

拿到之后自然就是要对这个字符串进行json的反序列化,这里用到了json.net这个包。

根据时序图,下面要调用统一下单这个接口了。

上面的代码,在统一下单这一块,又分为下面几个步骤

  1. 处理统一下单的参数(签名和组装xml)
  2. 发起POST请求
  3. 解析请求得到的结果

这里要注意一点,由于我们的传的trade_type是JSAPI,所以这里必须是要加上openid进行处理的。

然后就是解析统一下单返回的XML了,说是解析,其实也就是要拿到我们需要的数据罢了。这里最后会得到一个小程序支付API需要的参数实体。

还有最后一步就是要返回一个序列化的对象给小程序,以供小程序使用。

到这里,后台接口也已经OK了,现在就用真机扫描二维码,点击立即支付按钮,此时就会弹出要你输入密码的框框,输入你的微信支付密码然后就会提示支付成功

 

老规矩,先看本节效果图我们实现这个支付功能完全是借助小程序云开发实现的,不用搭建自己的服务器,不用买域名,不用备案域名,不用支持https。只需要一个简单的云函数,就可以轻松的实现微信小程序支付功能。核心代码就下面这些一,创建一个云开发小程序关于如何创建云开发小程序,这里我就不再做具体讲解。不知道怎么创建云开发小程序的同学,可以去翻看我之前的文章,或者看下我录制的视频:https://edu.csdn.net/course/play/9604/204528创建云开发小程序有几点注意的1,一定不要忘记在app.js里初始化云开发环境。2,创建完云函数后,一定要记得上传二, 创建支付的云函数1,创建云函数pay三,引入三方依赖tenpay我们这里引入三方依赖的目的,是创建我们支付时需要的一些参数。我们安装依赖是使用里npm 而npm必须安装node,关于如何安装node,我这里不做讲解,百度一下,网上一大堆。1,首先右键pay,然后选择在终端中打开2,我们使用npm来安装这个依赖。在命令行里执行 npm i tenpay安装完成后,我们的pay云函数会多出一个package.json 文件到这里我们的tenpay依赖就安装好了。四,编写云函数pay完整代码如下//云开发实现支付 const cloud = require('wx-server-sdk')cloud.init() //1,引入支付的三方依赖 const tenpay = require('tenpay'); //2,配置支付信息 const config = ;exports.main = async(event, context) => 一定要注意把appid,mchid,partnerKey换成你自己的。到这里我们获取小程序支付所需参数的云函数代码就编写完成了。不要忘记上传这个云函数。出现下图就代表上传成功五,写一个简单的页面,用来提交订单,调用pay云函数。这个页面很简单,1,自己随便编写一个订单号(这个订单号要大于6位)2,自己随便填写一个订单价(单位是分)3,点击按钮,调用pay云函数。获取支付所需参数。下图是官方支付api所需要的一些必须参数。下图是我们调用pay云函数获取的参数,和上图所需要的是不是一样。六,调用wx.requestPayment实现支付下图是官方的示例代码这里不在做具体讲解了,完整的可以看视频。实现效果1,调起支付键盘2,支付完成3,log日志,可以看出不同支付状态的回调上图是支付成功的回调,我们可以在支付成功回调时,改变订单支付状态。下图是支付失败的回调,下图是支付完成的状态。到这里我们就轻松的实现微信小程序支付功能了。是不是很简单啊,完整的讲解可以看视频。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值