# 开发 \| 小程序变现必备，支付功能快速接入

- 作者：知晓程序
- 发布时间：2017-11-24 20:00
- 原文：https://www.ifanr.com/minapp/944589

![](https://s3.ifanr.com/wp-content/uploads/2017/07/minapp-dev-final-feature.jpg)

文 \| 吕子谋

在前两篇文章中，已经为大家简单讲解了如何结合知晓云开发一个订单收集类小程序。

从产品框架搭建到页面设计，从数据库建立到核心功能实现，知晓云（cloud.minapp.com）为小程序开发者提供了不少的便捷，例如常用的电商数据表模版和简单好用的 API，省去了后端数据接口的设计和开发时间，快速开发自己的小程序。

回过头来，我们再一次分析下「北江纺织牛仔新时尚」小程序，在商品展示再到购物下单的流程中，是否还缺少我们常见的支付环节呢？

实际上「北江纺织牛仔新时尚」的交易业务属于线下操作，并不涉及到在线支付。而对于线上业务，就需要接入支付才能完成整个交易环节，**今天就给大家演示如何快速在小程序里实现在线支付功能**。

### 小程序微信支付

小程序开发文档已经提供了微信支付的 API：wx.requestPayment(OBJECT)

![](https://s3.ifanr.com/wp-content/uploads/2017/11/03weixin-pay.jpg)

从开发文档上看，想要成功调用微信支付 API 的必需参数有 5 个：***timeStamp，nonceStr，package，signType，paySign***。其中 nonceStr、package、paySign 的值是需要通过算法或调用接口后才能获取的。

- nonceStr 值可通过随机数生成算法生成；
- package 值所包含的 prepay\_id 参数值是调用统一下单接口后的返回值（调用微信支付前需要调用微信统一下单API）；
- paySign 的值需要通过一定的规则生成，点击小程序支付接口文档，我们可以看到 paySign 签名所需字段列表，再根据签名算法生成 paySign 值。

![](https://s3.ifanr.com/wp-content/uploads/2017/11/01weixin-pay-detail.jpg)

paySign 签名必需字段也是 5 个：***appId，timeStamp，nonceStr，package，signType***。除了 appId 参数，其余 4 个参数名都与微信支付 API 参数一样。

但需要注意的是，这里的签名方式 signType 需要与统一下单的签名类型一致，而不是与「微信支付 API」的签名类型一致。详细签名算法请参考签名算法 👇

![](https://s3.ifanr.com/wp-content/uploads/2017/11/02weixin-pay-sign.jpg)

知道每个参数值如何获取之后，就可以调用微信支付 API 了。

// 示例代码  
wx.requestPayment({  
‘timeStamp’: ”,  
‘nonceStr’: ”,  
‘package’: ”,  
‘signType’: ‘MD5’,  
‘paySign’: ”,  
‘success’:function(res){  
},  
‘fail’:function(res){  
}  
})

当然，实现以上微信支付功能的前提是先在微信后台开通微信支付功能，获取商户号等相关信息，具体开通流程请在微信商户平台查看接入指引。

可以加入知晓云开发交流群跟我交流沟通 👇

![](https://s3.ifanr.com/wp-content/uploads/2017/11/beijiang6.jpg)

### 使用知晓云快速接入微信支付

如果你觉得调用微信支付 APIwx.requestPayment(OBJECT) 有点复杂，接下来我会再介绍一种更简单的方法：**知晓云为开发者提供的微信支付 API：wx.BaaS.pay(OBJECT)**。

![](https://s3.ifanr.com/wp-content/uploads/2017/11/06zhixiao-pay.jpg)

从知晓云提供的微信支付开发文档上看，调用微信支付 API 必需参数只有 2 个：***totalCost，merchandiseDescription***。

- totalCost 值（支付总额）本身就是订单的必需参数值，通过购买商品价格和数量等计算出来的；
- merchandiseDescription 值则是我们自定义的字符串数据。

对比之下，免去了复杂的算法生成和接口回调，轻轻松松就可以使用微信支付了。而且知晓云的开发文档也介绍了使用场景、接口说明和示例代码。

关注「知晓程序」微信公众号，回复「知晓云」，获取知晓云开发文档。

现在我们再结合「北江纺织牛仔新时尚」小程序来进一步了解知晓云微信支付 API 的使用。

用户在下单时会生成订单 order，订单内包含每项商品数量价格的订单子单 orderItem ，订单子单包含订单子单标志 id、商品记录标识 productId、商品价格 price 和商品数量 quantity 等信息。

通过以上信息先可以计算出每项商品订单子单的金额，累加后得到必需参数总金额 totalCost 。在结合知晓云调用微信支付时，将支付总金额参数及其他非必需字段（选传）传进去就可以了。

// 支付示例代码  
// 假设 orderItems 为订单子单列表  
let params = {}  
params.totalCost = count(orderItems) // count 为开发者自定义的计算总金额方法，  
params.merchandiseDescription = ‘北江纺织牛仔裤’

wx.BaaS.pay(params).then((res) => {  
// success. 支付请求成功响应。  
/\* 如果支付成功, 则可以在 res 中拿到 transaction\_no 和支付结果信息  
如果支付失败, 则可以获取失败原因

注: 只要是服务器有返回的情况都会进入 success, 即便是 4xx，5xx 都会进入  
所以非系统级别错误导致的支付失败也会进入这里, 例如用户取消，参数错误等  
这是微信的处理方式与 BaaS 服务(器)无关  
\*/  
}, (err) => {  
// 未完成用户授权或发生网络异常等  
console.log(err)  
});

不过在你享受知晓云提供的微信支付便捷之前，请先在知晓云开发者「控制台-支付」为你的小程序绑定微信支付。

![](https://s3.ifanr.com/wp-content/uploads/2017/11/05zhixiao-pay-step.jpg)

在绑定完微信支付后，不仅可以轻松地在小程序中调用微信支付，还能很方便地管理小程序的支付记录，可以看到支付记录的状态和详情以及申请退款等。

![](https://s3.ifanr.com/wp-content/uploads/2017/11/09zhixiao-pay-mana.jpg)

到此，这个系列就结束了，回顾阅读

- [上篇 \| 适用场景广，表单收集类小程序开发案例复盘](https://mp.weixin.qq.com/s/pwvxoFGHsn2qjkE_q3faJw)
- [中篇 \| 类似淘宝的搜索及购物车功能，如何在小程序中实现？](http://mp.weixin.qq.com/s/SMhFJnBUNthCIknOld6A6A)

通过这三篇文章，为大家介绍了从商品展示到购物车、下单功能再到完成支付的整个电商流程。每个功能同时可以在不同的场景下独立应用。

当然，这几个都是应用最广也最基础的功能，我们后续还会进行更多营销功能的开发复盘。

![](https://s3.ifanr.com/wp-content/uploads/2017/11/gouzi066.jpg)  
**关注「知晓程序」公众号 ，在微信后台回复「开发」，获取小程序开发全套经验。**

![](https://s3.ifanr.com/wp-content/uploads/2017/09/bottomqrcode.gif)