如何集成微信支付 · 豆信2.0开发手册

## 微信支付基本设置 #### **1、在微信支付插件中填写公众号商户平台等信息。其中商户号和支付秘钥需要登录微信商户平台进行查看。** ![](https://box.kancloud.cn/2016-01-04_568a0fb39d444.png) #### **2、开发配置** 登录微信公众号后台，在微信支付功能中配置支付授权目录。 ![](https://box.kancloud.cn/2016-01-04_568a0fb3be451.png) ## 微信支付集成豆信封装了微信支付基本逻辑，只需要调用给定的函数即可完成微信支付。具体操作请参考以下案例： > **功能演示** 在微信公众号中输入“demo”即可查看功能演示。如下图所示，当点击“JSAPI支付”时即可调起微信支付，输入支付密码后即可完成支付。 ![](https://box.kancloud.cn/2016-01-04_568a10387373c.png) ![](https://box.kancloud.cn/2016-01-04_568a103886d26.png) ![](https://box.kancloud.cn/2016-01-04_568a10389b6a1.png) > **实现步骤** #### (1)继承jssdk模板。 `<extend name="Base/jssdk_common" /> <block name="html"> <!DOCTYPE html> <html> ..... ..... </html> </block>` > **代码解析：** 要使用豆信封装的快速实现微信支付的函数，首先必须要继承豆信的jssdk模板。 #### (2)绑定一个html对象，即点击此html元素时调起微信支付。 `<h4 id="wechat_pay_jsapi">JSAPI支付</h4>` #### (3)为html对象绑定js事件，调起支付。 `$("#wechat_pay_jsapi").click(function(){ var price = 0.01; // 支付金额 var orderid = new Date().getTime(); // 订单号 var params = new Array(); params['price'] = price; params['orderid'] = orderid; params['content'] = '加油哦'; pay(price,orderid,params,payok,paycancel,payfail); // 发起支付 });` > **代码解析：** ##### 上面贴出的代码中，为html元素绑定了click事件，当用户点击“JSAPI支付”时，调用豆信封装好的js函数pay()调起支付，pay()函数需要6个参数，其中： price：支付的金额，float类型 orderid：订单号，string类型 params：回调数据集合，array类型，当支付成功后调用回调函数进行订单状态更改时需要用到这个数组。 payok：支付成功时的处理函数，function类型，用户支付成功后在这个函数里面进行订单状态更改、短信通知等操作。 paycancel：支付取消时的处理函数，function类型，当用户取消支付时进行处理的函数 payfail：支付失败时的处理函数，function类型，用支付失败时进行处理的函数 #### **4、支付结果处理。** `function payok(params){ alert("支付成功，订单号是："+params['orderid']); // TODO } function paycancel(params){ alert("支付取消") } function payfail(params){ alert("支付失败"); }` > **代码解析：** ##### 上面贴出的三个函数分别对支付成功、支付取消、支付失败三种状态进行处理，传递的params参数数组中包含了发起支付的订单号、金额、说明等内容。如果用在电商行业商品购买时的支付逻辑，如果用户下单成功并完成了支付，就可以在payok回调函数里面对用户购买的商品进行一个状态更新，设置其为购买成功状态，并给用户发送短信通知，其中params数组中包含的订单号就可以定位到发起支付的订单。 > **总结** 豆信对微信支付功能进行了高度封装，开发者在开发插件时需要用到微信支付功能的时候只需要参照上面的步骤，即可轻松整合微信支付功能。具体实现过程可以参考随豆信框架一起开源发布的Example插件和Donations插件。