微信小程序充值操作流程

微信小程序的充值流程与 H5 或 公众号大致差不多,这里简单说一下前端在充值时候的一些操作流程。

用户在小程序中发起充值请求时,一般会先请求自己的服务器,将充值的参数发送给后端,然后后端会去请求微信充值,得到微信返回的统一下单的参数再返回给前端。前端调用 wx.requestPayment API 即可唤起微信小程序的支付页面,此时用户输入正确的支付密码即可支付成功。具体流程如下:

1. 比如说页面上有一个充值按钮,点击充值按钮时可以获取到用户请求充值的参数。  

wx.request({

  url: "后端的充值接口",

method: "POST",

dataType: "json",

header: {

'content-type': 'application/x-www-form-urlencoded'

},

data: {

amount: amount, // 充值金额

token: token,

openId: openId

},

success: function (res) {

if (res.data.code == '1') {

that.setData({

payParams: res.data.data // 后端从微信得到的统一下单的参数

})

that.xcxPay(); // 拿到统一下单的参数后唤起微信支付页面

}

}

})

2. 调用 wx.requestPayment 唤起微信支付界面。

wx.requestPayment({

  'timeStamp': that.data.payParams.timestamp.toString(), // 时间戳必须是字符串,否则会报错

'nonceStr': that.data.payParams.str,

'package': 'prepay_id=' + that.data.payParams.prepay_id, // 这里的值必须是 prepay_id=XXXXXXXXX 的格式,否则也会报错

'signType': 'MD5',

'paySign': that.data.payParams.sign,

'success': function (res) {

    // 这里应该是 res.errMsg , 跟公众号的支付返回的参数不一样,公众号是 err_msg, 就因为没注意到这个,折腾了很长时间

  if(res.errMsg == "requestPayment:ok"){ // 调用支付成功

  wx.redirectTo({

url: '../chargelist/chargelist' // 充值成功后的处理,可以跳转,也可以根据自己的需要做其他处理

})

}else if(res.errMsg == 'requestPayment:cancel'){

      // 用户取消支付的操作

    }

},

'fail': function (res) {

  return false;

},

'complete': function (res) { }

})

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏北京马哥教育

【Python】windows下Eclipse中安装集成webpy框架

作者:JueDream 来源:http://blog.csdn.net/qq_35731570/article/details/62221021?locatio...

3149
来自专栏WindCoder

Windows 7下硬盘安装Ubuntu 13.10图文教程

之前一直在虚拟机里玩Linux了,昨天忽然兴起想往真机里装一个,昨天找到的方法,今天折腾了半天终于装好啦。

2091
来自专栏静晴轩

生成lua的静态库.动态库.lua.exe和luac.exe

前些日子准备学习下关于lua coroutine更为强大的功能,然而发现根据lua 5.1.4版本来运行一段代码的话也会导致 “lua: attempt to ...

94111
来自专栏云计算教程系列

如何使用Ubuntu 16.04的Django一键安装镜像

Django是一个用于快速开发Web应用程序的高级Python框架。Django一键安装程序通过Django,Nginx,Gunicorn和Postgres为您...

1735
来自专栏陈树义

高效开发技巧:为什么你下载Git项目这么慢?

笔者所在公司采用的是 GitLab 进行版本管理,但许多同事下载 Git 项目的路径是这样的: 打开浏览器 -> 输入网址 -> 查找项目地址 -> 复制项目...

3614
来自专栏我有一个梦想

Python 项目实践三(Web应用程序)第五篇

 接着上节继续学习,在这一节,我们将建立一个用户注册和身份验证系统,让用户能够注册账户,进而登录和注销。我们将创建一个新的应用程序,其中包含与处理用户账户相关的...

2238
来自专栏前端之路

web安全之XSS攻击

1593
来自专栏跟着阿笨一起玩NET

将Log4net的配置配置到的独立文件中

本文转载:http://blog.csdn.net/wanzhuan2010/article/details/7587780

942
来自专栏云鼎实验室的专栏

Hadoop Yarn REST API未授权漏洞利用挖矿分析

1K6
来自专栏乐沙弥的世界

Virtual Box下安装Oracle Linux 6.3

      Oracle Linux 6.3已经发布快2年了,其功能有很大的提升,增强了KVM,文件卷的在线resizing,LVM支持 raid4, 5, 6...

692

扫码关注云+社区

领取腾讯云代金券