## 微信支付
### 使用场景
在插件开发过程中,微信支付是使用比较频繁的功能。利用豆信封装的方法,可以快速的在h5页面实现微信支付功能。
### 实现过程
1、在框架后台支付配置处填写公众号商户平台信息。
![](https://box.kancloud.cn/2016-08-12_57ad611a02b83.png)
2、在微信公众号后台支付配置处填写支付授权目录。
![](https://box.kancloud.cn/2016-08-12_57ad611a1c2b7.png)
3、在需要调用公众号支付的页面注册JSSDK。
~~~
<html>
<head>
<title>微信支付</title>
{:hook('jssdk', true)}
</head>
<body>
...
</body>
</html>
~~~
4、选定一个用于调起微信支付的DOM元素。
~~~
<a href="javascript:;" class="weui_btn weui_btn_plain_primary" id="donate">我要捐赠</a>
~~~
5、为微信支付触发元素绑定事件,并获取业务逻辑需要用到的数据。
~~~
<script>
$(document).on('click', '#donate', function() {
var price = $('input[name=money]');
var content = $('textarea[name=content]');
var is_anonymous = $('input[name=is_anonymous]');
if (!price.val()) {
alert('请填写你要捐赠的金额');
price.focus();
return false;
}
var reg = new RegExp('^[0-9]+(\.[0-9]{2})?$');
if (!reg.test(price.val())) {
alert('请正确填写你要捐赠的金额,整数或者包含两位小数的浮点数');
price.focus();
return false;
}
var data = {
price : price.val(),
is_anonymous : is_anonymous.val(),
content : content.val()
};
pre_donate(data);
});
</script>
~~~
6、在上一步骤中,获取到了业务逻辑需要用到的数据,并调用pre_donate()方法将数据写入数据库,此demo演示的为预捐赠过程。在电商功能中常用的是预支付功能,即把订单信息预先写入订单表,并设置订单的支付状态为0,稍后调起微信支付,用户支付成功后把支付成功的数据异步发送到一个处理方法,并设置订单的支付状态为1,业务完成。
~~~
/**
* 预捐赠(支付前写入捐赠数据)
* @author 艾逗笔<765532665@qq.com>
*/
function pre_donate(data) {
$.ajax({
url : "{:create_addon_url('pre_donate')}",
type : 'post',
dataType : 'json',
data : data,
success : function(res) {
if (res.errcode == 1) {
var price = res.money;
var orderid = res.orderid;
var notify = res.notify;
pay(price, orderid, notify, res, pay_ok); // 发起支付
} else {
alert(res.errmsg);
}
},
error : function() {
alert('捐赠失败');
}
});
}
~~~
>[info] pay()是豆信封装的调起微信支付的方法,只要按照`pay(price, orderid, notify, res, pay_ok)`的固定格式即可调起微信支付。其中price为支付的金额(单位:元)、orderid为自己定义的业务订单号、notify为支付完成后发送异步通知到并用来更新订单支付状态的地址、res为附加数据(例如发起支付前填写的备注信息、留言内容等)、pay_ok为异步处理支付成功推送消息后进行前端响应的方法。pay()方法所需的参数均在请求的`url : "{:create_addon_url('pre_donate')}"`中进行设置。
7、上一步提到需要用一个控制器方法来对数据进行支付前的处理。可以按照这种方式进行处理并返回调起支付所需的参数。
~~~
/**
* 预捐赠
* @author 艾逗笔<765532665@qq.com>
*/
public function pre_donate() {
$data['mpid'] = get_mpid();
$data['openid'] = get_openid();
$data['money'] = floatval(I('price'));
$data['is_anonymous'] = intval(I('is_anonymous'));
$data['pay_status'] = 0;
$data['create_time'] = time();
$data['content'] = I('content');
$data['is_show'] = 0;
$data['orderid'] = $data['mpid'] . time() . rand(100,999);
$res = M('idou_donate_list')->add($data);
if (!$res) {
$data['errcode'] = 0;
$data['errmsg'] = '捐赠失败';
} else {
$data['errcode'] = 1;
$data['errmsg'] = '捐赠成功';
$data['notify'] = create_addon_url('pay_ok');
$data['jump_url'] = create_addon_url('pay_ok');
}
$this->ajaxReturn($data);
}
~~~
>[info] 此步骤的关键是把数据写入到数据表并设置pay_status=0,处理完数据后返回notify=create_addon_url('pay_ok'),即接受支付成功异步通知的地址为同一控制器中的pay_ok方法。
8、完成前面所有步骤之后,用户端能够成功调起微信支付框。用户输入支付密码完成微信支付后,微信支付结果会异步发送到notify指定地址,即控制器中的pay_ok方法。支付完成后也会同步调用pay()方法最后一个参数指定的js方法,即调起微信支付的html页面中的js方法pay_ok。
9、异步处理(控制器方法)
~~~
/**
* 支付成功
* @author 艾逗笔<765532665@qq.com>
*/
public function pay_ok() {
if (I('out_trade_no')) {
$orderid = I('out_trade_no');
$mchid = I('mch_id');
$payStatus = M('mp_payment')->where([
'mchid' => $mchid,
'orderid' => $orderid
])->getField('status');
if ($payStatus == 1) {
$data['pay_status'] = 1;
$data['is_show'] = 1;
M('idou_donate_list')->where(['orderid'=>$orderid])->save($data);
}
}
$this->display();
}
~~~
>[info] 此步骤的关键是接受微信支付结果的异步通知,如果支付结果是SUCCESS,则把先前创建的订单的支付状态设置为1。
10、同步处理(视图中的js方法)
~~~
/**
* 支付成功后的回调函数
* @author 艾逗笔<765532665@qq.com>
*/
function pay_ok(data) {
if (data.errcode == 1) {
window.location.href = data.jump_url;
}
}
~~~
>[warning] 以上即为在插件中使用豆信封装的业务逻辑调起微信支付的全过程。理解起来可能有点困难,可以参考微捐赠插件实现的微信支付功能来加深对此文档的理解。
支付完成后,可以在框架后台>微信支付>支付记录页面插件支付记录
![](https://box.kancloud.cn/2016-08-12_57ad611a34f7d.png)
- 更新日志
- 入门
- 关于豆信
- 系统安装
- 功能介绍
- 公众号对接
- 小程序对接
- 系统架构
- 数据字典
- 框架目录结构
- 插件目录结构
- 运行流程
- 插件开发
- 新建插件
- info.php
- 设计数据表
- 插件控制器
- 后台管理控制器
- 移动端控制器
- 交互响应控制器
- 接口管理控制器
- 插件模型
- 插件视图
- 发布插件
- 自定义模型
- 通用增删改查
- common_lists
- common_add
- common_edit
- common_delete
- setMetaTitle
- setSubmitType
- setModel
- setListMap
- setListSearch
- setListOrder
- setListPer
- setEditMap
- setDeleteMap
- setFindMap
- addCrumb
- addNav
- addButton
- setTip
- 函数手册
- get_addon
- get_addon_settings
- tomedia
- get_fans_info
- 小程序开发专题
- 小程序对接插件.js
- 获取插件配置
- 获取用户信息
- 更新用户资料
- 公众号开发专题
- 获取粉丝信息
- 自定义分享
- 消息上下文
- 微信支付
- 企业付款
- 发送现金红包
- 发送模板消息
- 发送客服消息
- 引入前端资源
- 限制页面仅在微信浏览器访问
- 在插件页面中引入样式文件
- 在插件中创建跳转链接
- 数据预处理
- 插件开发实例
- 聊天机器人
- 留言板
- 常见问题解答