cover_image

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

cloud小程序微信支付开发电商知晓云订单
知晓程序

<p><img class="aligncenter size-full wp-image-872597" src="http://ifanr-cdn.b0.upaiyun.com/wp-content/uploads/2017/07/minapp-dev-final-feature.jpg" alt="" width="1200" height="750" srcset="http://www.ifanr.com/wp-content/uploads/2017/07/minapp-dev-final-feature.jpg 1200w, http://www.ifanr.com/wp-content/uploads/2017/07/minapp-dev-final-feature-360x225.jpg 360w, http://www.ifanr.com/wp-content/uploads/2017/07/minapp-dev-final-feature-768x480.jpg 768w, http://www.ifanr.com/wp-content/uploads/2017/07/minapp-dev-final-feature-1024x640.jpg 1024w" sizes="(max-width: 1200px) 100vw, 1200px" /></p> <p><span style="color: #808080;">文 | 吕子谋</span></p> <p>在前两篇文章中,已经为大家简单讲解了如何结合知晓云开发一个订单收集类小程序。</p> <p>从产品框架搭建到页面设计,从数据库建立到核心功能实现,知晓云(<span style="color: #605eac;">cloud.minapp.com</span>)为小程序开发者提供了不少的便捷,例如常用的电商数据表模版和简单好用的 API,省去了后端数据接口的设计和开发时间,快速开发自己的小程序。</p> <p>回过头来,我们再一次分析下「北江纺织牛仔新时尚」小程序,在商品展示再到购物下单的流程中,是否还缺少我们常见的支付环节呢?</p> <p>实际上「北江纺织牛仔新时尚」的交易业务属于线下操作,并不涉及到在线支付。而对于线上业务,就需要接入支付才能完成整个交易环节,<strong>今天就给大家演示如何快速在小程序里实现在线支付功能</strong>。</p> <h3>小程序微信支付</h3> <p>小程序开发文档已经提供了微信支付的 API:wx.requestPayment(OBJECT)</p> <p><img class="aligncenter size-full wp-image-944622" src="http://ifanr-cdn.b0.upaiyun.com/wp-content/uploads/2017/11/03weixin-pay.jpg" alt="" width="1000" height="657" srcset="http://www.ifanr.com/wp-content/uploads/2017/11/03weixin-pay.jpg 1000w, http://www.ifanr.com/wp-content/uploads/2017/11/03weixin-pay-360x237.jpg 360w, http://www.ifanr.com/wp-content/uploads/2017/11/03weixin-pay-768x505.jpg 768w" sizes="(max-width: 1000px) 100vw, 1000px" /></p> <p>从开发文档上看,想要成功调用微信支付 API 的必需参数有 5 个:<em><strong>timeStamp,nonceStr,package,signType,paySign</strong></em>。其中 nonceStr、package、paySign 的值是需要通过算法或调用接口后才能获取的。</p> <ul> <li>nonceStr 值可通过随机数生成算法生成;</li> <li>package 值所包含的 prepay_id 参数值是调用统一下单接口后的返回值(调用微信支付前需要调用微信统一下单API);</li> <li>paySign 的值需要通过一定的规则生成,点击小程序支付接口文档,我们可以看到 paySign 签名所需字段列表,再根据签名算法生成 paySign 值。</li> </ul> <p><img class="aligncenter size-full wp-image-944626" src="http://ifanr-cdn.b0.upaiyun.com/wp-content/uploads/2017/11/01weixin-pay-detail.jpg" alt="" width="1000" height="584" srcset="http://www.ifanr.com/wp-content/uploads/2017/11/01weixin-pay-detail.jpg 1000w, http://www.ifanr.com/wp-content/uploads/2017/11/01weixin-pay-detail-360x210.jpg 360w, http://www.ifanr.com/wp-content/uploads/2017/11/01weixin-pay-detail-768x449.jpg 768w" sizes="(max-width: 1000px) 100vw, 1000px" /></p> <p>paySign 签名必需字段也是 5 个:<em><strong>appId,timeStamp,nonceStr,package,signType</strong></em>。除了 appId 参数,其余 4 个参数名都与微信支付 API 参数一样。</p> <p>但需要注意的是,这里的签名方式 signType 需要与统一下单的签名类型一致,而不是与「微信支付 API」的签名类型一致。详细签名算法请参考签名算法 👇</p> <p><img class="aligncenter size-full wp-image-944627" src="http://ifanr-cdn.b0.upaiyun.com/wp-content/uploads/2017/11/02weixin-pay-sign.jpg" alt="" width="1000" height="350" srcset="http://www.ifanr.com/wp-content/uploads/2017/11/02weixin-pay-sign.jpg 1000w, http://www.ifanr.com/wp-content/uploads/2017/11/02weixin-pay-sign-360x126.jpg 360w, http://www.ifanr.com/wp-content/uploads/2017/11/02weixin-pay-sign-768x269.jpg 768w" sizes="(max-width: 1000px) 100vw, 1000px" /></p> <p>知道每个参数值如何获取之后,就可以调用微信支付 API 了。</p> <p>// 示例代码<br /> wx.requestPayment({<br /> &#8216;timeStamp&#8217;: &#8221;,<br /> &#8216;nonceStr&#8217;: &#8221;,<br /> &#8216;package&#8217;: &#8221;,<br /> &#8216;signType&#8217;: &#8216;MD5&#8217;,<br /> &#8216;paySign&#8217;: &#8221;,<br /> &#8216;success&#8217;:function(res){<br /> },<br /> &#8216;fail&#8217;:function(res){<br /> }<br /> })</p> <p>当然,实现以上微信支付功能的前提是先在微信后台开通微信支付功能,获取商户号等相关信息,具体开通流程请在微信商户平台查看接入指引。</p> <p>可以加入知晓云开发交流群跟我交流沟通 👇</p> <p><img class="aligncenter size-full wp-image-933264" src="http://ifanr-cdn.b0.upaiyun.com/wp-content/uploads/2017/11/beijiang6.jpg" alt="" width="1000" height="402" srcset="http://www.ifanr.com/wp-content/uploads/2017/11/beijiang6.jpg 1000w, http://www.ifanr.com/wp-content/uploads/2017/11/beijiang6-360x145.jpg 360w, http://www.ifanr.com/wp-content/uploads/2017/11/beijiang6-768x309.jpg 768w" sizes="(max-width: 1000px) 100vw, 1000px" /></p> <h3>使用知晓云快速接入微信支付</h3> <p>如果你觉得调用微信支付 APIwx.requestPayment(OBJECT)  有点复杂,接下来我会再介绍一种更简单的方法:<strong>知晓云为开发者提供的微信支付 API:wx.BaaS.pay(OBJECT)</strong>。</p> <p><img class="aligncenter size-full wp-image-944632" src="http://ifanr-cdn.b0.upaiyun.com/wp-content/uploads/2017/11/06zhixiao-pay.jpg" alt="" width="1000" height="537" srcset="http://www.ifanr.com/wp-content/uploads/2017/11/06zhixiao-pay.jpg 1000w, http://www.ifanr.com/wp-content/uploads/2017/11/06zhixiao-pay-360x193.jpg 360w, http://www.ifanr.com/wp-content/uploads/2017/11/06zhixiao-pay-768x412.jpg 768w" sizes="(max-width: 1000px) 100vw, 1000px" /></p> <p>从知晓云提供的微信支付开发文档上看,调用微信支付 API 必需参数只有 2 个:<em><strong>totalCost,merchandiseDescription</strong></em>。</p> <ul> <li>totalCost 值(支付总额)本身就是订单的必需参数值,通过购买商品价格和数量等计算出来的;</li> <li>merchandiseDescription 值则是我们自定义的字符串数据。</li> </ul> <p>对比之下,免去了复杂的算法生成和接口回调,轻轻松松就可以使用微信支付了。而且知晓云的开发文档也介绍了使用场景、接口说明和示例代码。</p> <p>关注「<span style="color: #605eac;">知晓程序</span>」微信公众号,回复「<span style="color: #605eac;">知晓云</span>」,获取知晓云开发文档。</p> <p>现在我们再结合「北江纺织牛仔新时尚」小程序来进一步了解知晓云微信支付 API 的使用。</p> <p>用户在下单时会生成订单 order,订单内包含每项商品数量价格的订单子单 orderItem ,订单子单包含订单子单标志 id、商品记录标识 productId、商品价格 price 和商品数量 quantity 等信息。</p> <p>通过以上信息先可以计算出每项商品订单子单的金额,累加后得到必需参数总金额 totalCost 。在结合知晓云调用微信支付时,将支付总金额参数及其他非必需字段(选传)传进去就可以了。</p> <p>// 支付示例代码<br /> // 假设 orderItems 为订单子单列表<br /> let params = {}<br /> params.totalCost = count(orderItems) // count 为开发者自定义的计算总金额方法,<br /> params.merchandiseDescription = &#8216;北江纺织牛仔裤&#8217;</p> <p>wx.BaaS.pay(params).then((res) =&gt; {<br /> // success. 支付请求成功响应。<br /> /* 如果支付成功, 则可以在 res 中拿到 transaction_no 和支付结果信息<br /> 如果支付失败, 则可以获取失败原因</p> <p>注: 只要是服务器有返回的情况都会进入 success, 即便是 4xx,5xx 都会进入<br /> 所以非系统级别错误导致的支付失败也会进入这里, 例如用户取消,参数错误等<br /> 这是微信的处理方式与 BaaS 服务(器)无关<br /> */<br /> }, (err) =&gt; {<br /> // 未完成用户授权或发生网络异常等<br /> console.log(err)<br /> });</p> <p>不过在你享受知晓云提供的微信支付便捷之前,请先在知晓云开发者「控制台-支付」为你的小程序绑定微信支付。</p> <p><img class="aligncenter size-full wp-image-944633" src="http://ifanr-cdn.b0.upaiyun.com/wp-content/uploads/2017/11/05zhixiao-pay-step.jpg" alt="" width="1000" height="583" srcset="http://www.ifanr.com/wp-content/uploads/2017/11/05zhixiao-pay-step.jpg 1000w, http://www.ifanr.com/wp-content/uploads/2017/11/05zhixiao-pay-step-360x210.jpg 360w, http://www.ifanr.com/wp-content/uploads/2017/11/05zhixiao-pay-step-768x448.jpg 768w" sizes="(max-width: 1000px) 100vw, 1000px" /></p> <p>在绑定完微信支付后,不仅可以轻松地在小程序中调用微信支付,还能很方便地管理小程序的支付记录,可以看到支付记录的状态和详情以及申请退款等。</p> <p><img class="aligncenter size-full wp-image-944709" src="http://ifanr-cdn.b0.upaiyun.com/wp-content/uploads/2017/11/09zhixiao-pay-mana.jpg" alt="" width="1000" height="479" srcset="http://www.ifanr.com/wp-content/uploads/2017/11/09zhixiao-pay-mana.jpg 1000w, http://www.ifanr.com/wp-content/uploads/2017/11/09zhixiao-pay-mana-360x172.jpg 360w, http://www.ifanr.com/wp-content/uploads/2017/11/09zhixiao-pay-mana-768x368.jpg 768w" sizes="(max-width: 1000px) 100vw, 1000px" /></p> <p>到此,这个系列就结束了,回顾阅读</p> <ul> <li><a style="color: #605eac;" href="https://mp.weixin.qq.com/s/pwvxoFGHsn2qjkE_q3faJw">上篇 | 适用场景广,表单收集类小程序开发案例复盘</a></li> <li><a style="color: #605eac;" href="http://mp.weixin.qq.com/s/SMhFJnBUNthCIknOld6A6A">中篇 | 类似淘宝的搜索及购物车功能,如何在小程序中实现?</a></li> </ul> <p>通过这三篇文章,为大家介绍了从商品展示到购物车、下单功能再到完成支付的整个电商流程。每个功能同时可以在不同的场景下独立应用。</p> <p>当然,这几个都是应用最广也最基础的功能,我们后续还会进行更多营销功能的开发复盘。</p> <p><img class="aligncenter size-full wp-image-944687" src="http://ifanr-cdn.b0.upaiyun.com/wp-content/uploads/2017/11/gouzi066.jpg" alt="" width="1000" height="500" srcset="http://www.ifanr.com/wp-content/uploads/2017/11/gouzi066.jpg 1000w, http://www.ifanr.com/wp-content/uploads/2017/11/gouzi066-360x180.jpg 360w, http://www.ifanr.com/wp-content/uploads/2017/11/gouzi066-768x384.jpg 768w" sizes="(max-width: 1000px) 100vw, 1000px" /><br /> <strong>关注「<span style="color: #605eac;">知晓程序</span>」公众号 ,在微信后台回复「<span style="color: #605eac;">开发</span>」,获取小程序开发全套经验。</strong></p> <p><img class="size-full wp-image-911397 aligncenter" src="http://ifanr-cdn.b0.upaiyun.com/wp-content/uploads/2017/09/bottomqrcode.gif" alt="" width="800" height="400" srcset="http://www.ifanr.com/wp-content/uploads/2017/09/bottomqrcode.gif 800w, http://www.ifanr.com/wp-content/uploads/2017/09/bottomqrcode-360x180.gif 360w, http://www.ifanr.com/wp-content/uploads/2017/09/bottomqrcode-768x384.gif 768w" sizes="(max-width: 800px) 100vw, 800px" /></p>