用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

微客吧 首页 教程 微信小程序 新手教程 查看内容

微信小程序支付简单小结与梳理

纸飞机 2018-3-8 09:35

作者:Catcher8,来自原文地址前言公司最近在做微信,被分配到做支付这一块,现在对这一块做一个简单的总结和梳理。支付,对于购物来说,可以说是占据了十分重要的一块,毕竟能收到钱才是重点。当然在开发之前,我们 ...

作者:Catcher8,来自

原文地址

前言

公司最近在做微信,被分配到做支付这一块,现在对这一块做一个简单的总结和梳理。

支付,对于购物来说,可以说是占据了十分重要的一块,毕竟能收到钱才是重点。

当然在开发之前,我们需要有下面这些东西:

  • appId
  • 密钥(小程序配置界面)
  • 商户号
  • api密钥(商家后台自己设置)

当然这些是不用我们自己申请的,公司会有人申请好,然后要什么跟这个人说,让他提供就可以了。

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


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

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

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

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

支付的简单实现

小程序的实现

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

  1. class="container">
  2. type="text" bindinput="getOrderCode" style="border:1px solid #ccc;" />
  3. bindtap="pay">立即支付

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

  1. Page({
  2. data: {
  3. txtOrderCode: ''
  4. },
  5. pay: function () {
  6. var ordercode = this.data.txtOrderCode;
  7. wx.login({
  8. success: function (res) {
  9. if (res.code) {
  10. wx.request({
  11. url: 'https://www.yourdomain.com/pay',
  12. data: {
  13. code: res.code,//要去换取openid的登录凭证
  14. ordercode: ordercode
  15. },
  16. method: 'GET',
  17. success: function (res) {
  18. console.log(res.data)
  19. wx.requestPayment({
  20. timeStamp: res.data.timeStamp,
  21. nonceStr: res.data.nonceStr,
  22. package: res.data.package,
  23. signType: 'MD5',
  24. paySign: res.data.paySign,
  25. success: function (res) {
  26. // success
  27. console.log(res);
  28. },
  29. fail: function (res) {
  30. // fail
  31. console.log(res);
  32. },
  33. complete: function (res) {
  34. // complete
  35. console.log(res);
  36. }
  37. })
  38. }
  39. })
  40. } else {
  41. console.log('获取用户登录态失败!' + res.errMsg)
  42. }
  43. }
  44. });
  45. },
  46. getOrderCode: function (event) {
  47. this.setData({
  48. txtOrderCode: event.detail.value
  49. });
  50. }
  51. })

可以看到,在这里Catcher先通过wx.login这个API先取到了登录的凭证code,并把这个凭证code做为请求参数用wx.request这个API发起一个网络请求。

在这个网络请求处理后会返回小程序支付所需要的相关参数。拿到这些参数后,再调用wx.requestPayment这个支付API,此时才算是真正的发起支付。

至此,小程序这边的事已经做完了,接下来就是要去处理接口那边的事了,其实接口要做的就是返回小程序需要的几个参数。但是要拿到这几个参数还是需要做不少事情的。

接口的实现

据悉最新版的Senparc.Weixin.MP已经支付了小程序相关的内容,但是公司用的版本还是比较低

并且近期也没有打算对这个组件进行升级。所以就从白纸一张开始了。

鲜花
鲜花
握手
握手
雷人
雷人
路过
路过
鸡蛋
鸡蛋
分享至 : QQ空间
收藏