微信小程序中实现微信支付

26 篇文章 0 订阅
8 篇文章 1 订阅
最近做小程序,涉及到微信支付,看了看微信小程序开发文档,尽管之前做过微信支付,还是有点懵逼,不过好在之前研究过,不然真的是无从下手。对比了一下发现,其实小程序中做支付比公众号支付要省事很多,因为不需要支付授权目录,也不需要授权域名,但是支付流程却比公众号多了一步,就是统一下单是预支付,然后需要对预支付的结果再次签名之后,才调起支付。

前期准备:
1.开通了微信支付,并且小程序绑定了微信支付;
2.准备好小程序的appid,微信支付的商户号,支付秘钥。

商户系统和微信支付系统主要交互:
1、小程序内调用登录接口,获取到用户的openid
此步骤在小程序内完成,也很简单,方法见:【 小程序登录API

2、调用商户服务器支付统一下单接口,进行预支付

/**
 * 预支付请求接口(POST)
 * @param string $openid 	openid
 * @param string $body 		商品简单描述
 * @param string $order_sn  订单编号
 * @param string $total_fee 金额
 * @return  json的数据
 */
public function prepay(){
	$config = $this->config;
	
	$openid = I('post.openid');
	$body = I('post.body');
	$order_sn = I('post.order_sn');
	$total_fee = I('post.total_fee');
	
	//统一下单参数构造
	$unifiedorder = array(
		'appid'			=> $config['appid'],
		'mch_id'		=> $config['pay_mchid'],
		'nonce_str'		=> self::getNonceStr(),
		'body'			=> $body,
		'out_trade_no'	=> $order_sn,
		'total_fee'		=> $total_fee * 100,
		'spbill_create_ip'	=> get_client_ip(),
		'notify_url'	=> 'https://'.$_SERVER['HTTP_HOST'].'/Api/Wxpay/notify',
		'trade_type'	=> 'JSAPI',
		'openid'		=> $openid
	);
	$unifiedorder['sign'] = self::makeSign($unifiedorder);
	//请求数据
	$xmldata = self::array2xml($unifiedorder);
	$url = 'https://api.mch.weixin.qq.com/pay/unifiedorder';
	$res = self::curl_post_ssl($url, $xmldata);
	if(!$res){
		self::return_err("Can't connect the server");
	}
	// 这句file_put_contents是用来查看服务器返回的结果 测试完可以删除了
	//file_put_contents(APP_ROOT.'/Statics/log1.txt',$res,FILE_APPEND);
	
	$content = self::xml2array($res);
	if(strval($content['result_code']) == 'FAIL'){
		self::return_err(strval($content['err_code_des']));
	}
	if(strval($content['return_code']) == 'FAIL'){
		self::return_err(strval($content['return_msg']));
	}
	self::return_data(array('data'=>$content));
	//$this->ajaxReturn($content);
}
3、调用商户服务器再次签名接口,返回支付数据
/**
 * 进行支付接口(POST)
 * @param string $prepay_id 预支付ID(调用prepay()方法之后的返回数据中获取)
 * @return  json的数据
 */
public function pay(){
	$config = $this->config;
	$prepay_id = I('post.prepay_id');
	
	$data = array(
		'appId'		=> $config['appid'],
		'timeStamp'	=> time(),
		'nonceStr'	=> self::getNonceStr(),
		'package'	=> 'prepay_id='.$prepay_id,
		'signType'	=> 'MD5'
	);
	
	$data['paySign'] = self::makeSign($data);
	
	$this->ajaxReturn($data);
}
4、小程序内完成支付,商户服务器接收支付回调通知

小程序端代码:

wx.requestPayment({
   'timeStamp': '',
   'nonceStr': '',
   'package': '',
   'signType': 'MD5',
   'paySign': '',
   'success':function(res){
   },
   'fail':function(res){
   }
})
服务器回调通知:
//微信支付回调验证
public function notify(){
	$xml = $GLOBALS['HTTP_RAW_POST_DATA'];
	
	// 这句file_put_contents是用来查看服务器返回的XML数据 测试完可以删除了
	//file_put_contents(APP_ROOT.'/Statics/log2.txt',$res,FILE_APPEND);
	
	//将服务器返回的XML数据转化为数组
	$data = self::xml2array($xml);
	// 保存微信服务器返回的签名sign
	$data_sign = $data['sign'];
	// sign不参与签名算法
	unset($data['sign']);
	$sign = self::makeSign($data);
	
	// 判断签名是否正确  判断支付状态
	if ( ($sign===$data_sign) && ($data['return_code']=='SUCCESS') && ($data['result_code']=='SUCCESS') ) {
		$result = $data;
		//获取服务器返回的数据
		$order_sn = $data['out_trade_no'];			//订单单号
		$openid = $data['openid'];					//付款人openID
		$total_fee = $data['total_fee'];			//付款金额
		$transaction_id = $data['transaction_id']; 	//微信支付流水号
		
		//更新数据库
		$this->updateDB($order_sn,$openid,$total_fee,$transaction_id);
		
	}else{
		$result = false;
	}
	// 返回状态给微信服务器
	if ($result) {
		$str='<xml><return_code><![CDATA[SUCCESS]]></return_code><return_msg><![CDATA[OK]]></return_msg></xml>';
	}else{
		$str='<xml><return_code><![CDATA[FAIL]]></return_code><return_msg><![CDATA[签名失败]]></return_msg></xml>';
	}
	echo $str;
	return $result;
}
我将完整的接口代码封装成了一个类文件,可以直接引入项目更改一下配置参数就可以使用的,源码下载: http://download.csdn.net/detail/sinat_35861727/9879682
小程序端完整代码如下:
/**
 * 支付函数
 * @param  {[type]} _payInfo [description]
 * @return {[type]}          [description]
 */
pay:function(_payInfo,success,fail){
	var payInfo = {
		body:'',
		total_fee:0,
		order_sn:''
	}
	Object.assign(payInfo, _payInfo);
	if(payInfo.body.length==0){
		wx.showToast({
			title:'支付信息描述错误'
		})
		return false;
	}
	if(payInfo.total_fee==0){
		wx.showToast({
			title:'支付金额不能0'
		})
		return false; 
	}
	if(payInfo.order_sn.length==0){
		wx.showToast({
			title:'订单号不能为空'
		})
		return false; 
	}
	var This = this;
	This.getOpenid(function(openid){
		payInfo.openid=openid;
		This.request({
			url:'api/pay/prepay',
			data:payInfo,
			success:function(res){
				var data = res.data;
				console.log(data);
				if(!data.status){
					wx.showToast({
						title:data['errmsg']
					})
					return false;
				}
				This.request({
					url:'api/pay/pay',
					data:{prepay_id:data.data.data.prepay_id},
					success:function(_payResult){
						var payResult = _payResult.data;
						console.log(payResult);
						wx.requestPayment({
							'timeStamp': payResult.timeStamp.toString(),
							'nonceStr': payResult.nonceStr,
							'package': payResult.package,
							'signType': payResult.signType,
							'paySign': payResult.paySign,
							'success': function (succ) {
								success&&success(succ);
							},
							'fail': function (err) {
								fail&&fail(err);
							},
							'complete': function (comp) { 

							}
						}) 
					}
				})
			}
		})
	})
}
  • 22
    点赞
  • 124
    收藏
    觉得还不错? 一键收藏
  • 49
    评论
老规矩,先看本节效果图我们实现这个支付功能完全是借助小程序云开发实现的,不用搭建自己的服务器,不用买域名,不用备案域名,不用支持https。只需要一个简单的云函数,就可以轻松的实现微信小程序支付功能。核心代码就下面这些一,创建一个云开发小程序关于如何创建云开发小程序,这里我就不再做具体讲解。不知道怎么创建云开发小程序的同学,可以去翻看我之前的文章,或者看下我录制的视频:https://edu.csdn.net/course/play/9604/204528创建云开发小程序有几点注意的1,一定不要忘记在app.js里初始化云开发环境。2,创建完云函数后,一定要记得上传二, 创建支付的云函数1,创建云函数pay三,引入三方依赖tenpay我们这里引入三方依赖的目的,是创建我们支付时需要的一些参数。我们安装依赖是使用里npm 而npm必须安装node,关于如何安装node,我这里不做讲解,百度一下,网上一大堆。1,首先右键pay,然后选择在终端打开2,我们使用npm来安装这个依赖。在命令行里执行 npm i tenpay安装完成后,我们的pay云函数会多出一个package.json 文件到这里我们的tenpay依赖就安装好了。四,编写云函数pay完整代码如下//云开发实现支付 const cloud = require('wx-server-sdk')cloud.init() //1,引入支付的三方依赖 const tenpay = require('tenpay'); //2,配置支付信息 const config = ;exports.main = async(event, context) => 一定要注意把appid,mchid,partnerKey换成你自己的。到这里我们获取小程序支付所需参数的云函数代码就编写完成了。不要忘记上传这个云函数。出现下图就代表上传成功五,写一个简单的页面,用来提交订单,调用pay云函数。这个页面很简单,1,自己随便编写一个订单号(这个订单号要大于6位)2,自己随便填写一个订单价(单位是分)3,点击按钮,调用pay云函数。获取支付所需参数。下图是官方支付api所需要的一些必须参数。下图是我们调用pay云函数获取的参数,和上图所需要的是不是一样。六,调用wx.requestPayment实现支付下图是官方的示例代码这里不在做具体讲解了,完整的可以看视频。实现效果1,调起支付键盘2,支付完成3,log日志,可以看出不同支付状态的回调上图是支付成功的回调,我们可以在支付成功回调时,改变订单支付状态。下图是支付失败的回调,下图是支付完成的状态。到这里我们就轻松的实现微信小程序支付功能了。是不是很简单啊,完整的讲解可以看视频。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 49
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值