导读：
使用过微信支付商户的应该都知道，微信H5支付是比较难申请的，而且费率比较高，微信H5通道的风控也相对比较严，搞不好商户就会被风控清退。本文的思路就是通过微信JSAPI支付（公众号支付）接口来实现H5支付的功能。
有些小白可能会问“H5支付有啥用”？
H5支付用处非常大，很多网站和游戏都需要使用这个H5支付，方便玩家手机支付时，能自动跳转到微信APP，启用微信的支付功能。正是因为H5支付的重要性，所以H5支付通道的风控才比扫码支付要严。
准备工作：
已认证的微信小程序（可以淘宝找人代认证，永久免费，不需要每年都年审）；拥有SSL证书的https安全域名；思维图：
关键代码：
一、后端使用H5拉起小程序
//微信小程序appid$appid=config("wxapp.appid");//微信小程序secret$secret=config("wxapp.secret");//缓存名称$cahcename ="weixinAccessToken-".$appid;//1.获取微信接口调用凭证$access_token = getWeixinAccessToken($appid,$secret);if(!$access_token){exit("获取微信接口调用凭证失败");}//2.H5跳转到小程序$url = "https://api./wxa/generatescheme?access_token=" . $access_token;$path = "/lionfish_comshop/pages/pay/index";//小程序支付页面//传给小程序的参数$arr = array("number" => $params["pay_id"],"money" => $params["money"]);$post_data = ["jump_wxa" => ["path" => $path,"query" => http_build_query($arr)],"expire_type" => 0,"expire_time" => time()+300 //scheme 码的失效时间（5分钟）];$post_data = json_encode($post_data);$result = weixin_curl_post($url, $post_data);//对json数据解码$json = json_decode($result);$arr = get_object_vars($json);if($arr["errcode"]!=0){//凭证过期，重新获取Cache::rm($cahcename);exit("请求微信接口失败，请重新提交订单！");//printLog("请求微信接口失败，Error：".$arr["errmsg"]);}//小程序scheme码$pay_url = $arr["openlink"];if(isMobile()){//手机端跳转到小程序echo buildRequestForm(url('@h5/jump'),["url"=>$pay_url,"number"=>$params['pay_id'],"type"=>2]);}else{//电脑端显示扫码$params['pay_url'] = $pay_url;echo buildRequestForm(url('@h5/weixinh5'),$params);}
获取微信接口调用凭证
//获取微信接口调用凭证function getWeixinAccessToken($appid,$secret){$cahcename ="weixinAccessToken-".$appid;$access_token = Cache::get($cahcename);if(empty($access_token)){$url = 'https://api./cgi-bin/token?grant_type=client_credential&appid='.$appid.'&secret='. $secret;//发送HTTPs请求并获取返回的数据$info = file_get_contents(trim($url));//对json数据解码$json = json_decode($info);$arr = get_object_vars($json);if(isset( $arr['access_token'])){$access_token = $arr['access_token'];$expires_in = $arr['expires_in'];//凭证有效时间，单位秒//设置缓存Cache::set($cahcename,$access_token,$expires_in);}}return $access_token;}
需要用到的公共函数方法
/*** 建立跳转请求表单* @param string $url 数据提交跳转到的URL* @param array $data 请求参数数组* @param string $method 提交方式：post或get 默认post* @return string 提交表单的HTML文本*/function buildRequestForm($url, $data, $method = 'post', $button_name = '确定', $show = false) {//如果要跳转到链接是当前域名，就验证httpsif(strpos($url,"http://") !== false && strpos($url,$_SERVER['HTTP_HOST']) !== false){if(isHttps()){$url = str_replace("http://","https://",$url);}}$html = "<form id='requestForm' name='requestForm' action='" . $url . "' method='" . $method . "'>";foreach ($data as $key => $val) {$html.= "<input type='hidden' name='" . $key . "' value='" . $val . "' />";}$display = $show ? "style='display:block;'" : "style='display:none;'";$html.= "<input type='submit' value='" . $button_name . "' " . $display . "></form>";$html.= "<script>document.forms['requestForm'].submit();</script>";return $html;}/*** 发起POST请求微信接口* https://api./wxa/generatescheme?access_token=ACCESS_TOKEN* 返回结果*/function weixin_curl_post($url, $data){$ch = curl_init();$header = ["Accept-Charset" => "utf-8"];curl_setopt($ch, CURLOPT_URL, $url);curl_setopt($ch, CURLOPT_CUSTOMREQUEST, "POST");curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, false);curl_setopt($ch, CURLOPT_HTTPHEADER, $header);curl_setopt($ch, CURLOPT_USERAGENT, 'Mozilla/5.0 (compatible; MSIE 5.01; Windows NT 5.0)');curl_setopt($ch, CURLOPT_FOLLOWLOCATION, 1);curl_setopt($ch, CURLOPT_AUTOREFERER, 1);curl_setopt($ch, CURLOPT_POSTFIELDS, $data);curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);$tmpInfo = curl_exec($ch);if (curl_errno($ch)) {return false;} else {return $tmpInfo;}}/*** 判断是不是手机访问*/function isMobile(){$agent = $_SERVER['HTTP_USER_AGENT'];if(strpos($agent,"comFront") || strpos($agent,"iPhone") || strpos($agent,"MIDP-2.0") || strpos($agent,"Opera Mini") || strpos($agent,"UCWEB") || strpos($agent,"Android") || strpos($agent,"Windows CE") || strpos($agent,"SymbianOS")){return true;}return false;}
二、微信小程序端js代码
// index.js// 获取应用实例const app = getApp()Page({data: {showWebview: true,apiurl: "",openid: "",order_no: "",money: 0,tips: "正在拉起微信支付，请稍候！",},/*** 生命周期函数--监听页面加载*/onLoad(options) {var that = this;//获取页面传递过来的参数if(!that.isEmpty(options.number)){that.setData({order_no: options.number}); }if(!that.isEmpty(options.money)){that.setData({money: options.money}); }if(!that.isEmpty(that.data.order_no)){that.login();}},login() {var that = this;wx.login({success: function(res) {if (res.code) {//console.log("微信登录凭证："+res.code);wx.request({url: that.data.apiurl+"/Index/Weixin/getopenid.html",method: 'POST',dataType: 'json',data: {'appid':wx.getAccountInfoSync().miniProgram.appId,//当前小程序APPid'code': res.code},success(res) {if(res.data.code==1){//console.log("获取到的openid："+res.data.openid);that.setData({openid: res.data.openid,showWebview: false});that.onPay();}}});} else {//console.log('用户登录失败' + res.errMsg)}}}) },onPay() {var that = this;if(that.isEmpty(that.data.openid)){return;}if(that.isEmpty(that.data.order_no)){return;}//console.log("openid："+that.data.openid);//console.log("订单编号："+that.data.order_no);/*----------------------向元宝支付平台发起支付请求--------------------*/wx.request({url: that.data.apiurl+"/Index/Weixin/wxapp.html",method: 'POST',dataType: 'json',data: {openid: that.data.openid,number: that.data.order_no},success(res) {//success回调的res已经是解析好的json对象，无需再次JSON.parse，二次parse导致的错误产生let result = res.data; //小程序拉起支付if(result.code == 1){wx.requestPayment({'timeStamp': result.payinfo.timeStamp,'nonceStr': result.payinfo.nonceStr,'package': result.payinfo.package,'signType': result.payinfo.signType,'paySign': result.payinfo.paySign,'success': function(res) {that.setData({tips: "支付成功",showWebview: true});},'fail': function(res) {that.setData({tips: "支付失败，请重新提交支付订单！",showWebview: true});},'complete': function(res) {that.setData({tips: "支付完成",showWebview: true});}})}else{wx.showModal({title: '',content: result.msg,confirmText: '好的',showCancel: false,success(result) {//如果用户点击了确定按钮if(result.confirm) {that.setData({showWebview: true,order_no: "",money:0}); }}})}}}) /*----------------------向元宝支付平台发起支付请求--------------------*/},isEmpty(content){if(content==null || typeof(content)=="undefined" || content=="") {return true;}else{return false;}},})
三、获取微信openid
//获取微信openidpublic function getopenid(){$data = input('');try{!isset($data['code']) && $this->error('缺少code参数');!isset($data['appid']) && $this->error('缺少appid参数');$code = trim($data['code']);$appid = trim($data['appid']);empty($code) && $this->error('code不能为空');empty($appid) && $this->error('appid不能为空');//根据appid去数据库查找secret密钥$wxapp =Db::name("weixinapp")->field('appsecret')->where('appid',$appid)->find();$appsecret = $wxapp['appsecret'];$url = "https://api./sns/jscode2session?appid={$appid}&secret={$appsecret}&js_code={$code}&grant_type=authorization_code";$open_str = file_get_contents($url);$data = json_decode($open_str, true);if(isset($data['openid'])){$result = array('code' => 1,'openid' =>$data['openid']);echo json_encode($result);die();}else{outputError($data['errmsg']);}} catch (\Exception $e) {}}
四、微信小程序发起支付接口
//微信JSAPI支付请求public function wxapp(){/*** 这里的代码省略，请参考下面分享的代码来实现*///下面的$jsApiParameters参数是公众号支付获取到的结果$data = array("code" => 1,"msg" => "success","payinfo" => $jsApiParameters);//printLog("返回给微信小程序的数据：".json_encode($data, JSON_UNESCAPED_UNICODE));header('Content-Type:application/json; charset=utf-8');echo json_encode($data, JSON_UNESCAPED_UNICODE);die();}
<?phpheader('Content-type:text/html; Charset=utf-8');$mchid = 'xxxxx';//微信支付商户号 PartnerID 通过微信支付商户资料审核后邮件发送$appid = 'xxxxx'; //微信支付申请对应的公众号的APPID$appKey = 'xxxxx'; //微信支付申请对应的公众号的APP Key$apiKey = 'xxxxx'; //https://pay. 帐户设置-安全设置-API安全-API密钥-设置API密钥//①、获取用户openid$wxPay = new WxpayService($mchid,$appid,$appKey,$apiKey);$openId = $wxPay->GetOpenid();//获取openidif(!$openId) exit('获取openid失败');//②、统一下单$outTradeNo = uniqid();//你自己的商品订单号$payAmount = 0.01;//付款金额，单位:元$orderName = '支付测试'; //订单标题$notifyUrl = '/wx/notify.php';//付款成功后的回调地址(不要有问号)$payTime = time();//付款时间$jsApiParameters = $wxPay->createJsBizPackage($openId,$payAmount,$outTradeNo,$orderName,$notifyUrl,$payTime);$jsApiParameters = json_encode($jsApiParameters);?><html><head><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1"/><title>微信支付样例-支付</title><script type="text/javascript">//调用微信JS api 支付function jsApiCall(){WeixinJSBridge.invoke('getBrandWCPayRequest',<?php echo $jsApiParameters; ?>,function(res){WeixinJSBridge.log(res.err_msg);if(res.err_msg=='get_brand_wcpay_request:ok'){alert('支付成功！');}else{alert('支付失败：'+res.err_code+res.err_desc+res.err_msg);}});}function callpay(){if (typeof WeixinJSBridge == "undefined"){if( document.addEventListener ){document.addEventListener('WeixinJSBridgeReady', jsApiCall, false);}else if (document.attachEvent){document.attachEvent('WeixinJSBridgeReady', jsApiCall);document.attachEvent('onWeixinJSBridgeReady', jsApiCall);}}else{jsApiCall();}}</script></head><body><br/><font color="#9ACD32"><b>该笔订单支付金额为<span style="color:#f00;font-size:50px"><?php echo $payAmount?>元</span>钱</b></font><br/><br/><div align="center"><button style="width:210px; height:50px; border-radius: 15px;background-color:#FE6714; border:0px #FE6714 solid; cursor: pointer; color:white; font-size:16px;" type="button" onclick="callpay()" >立即支付</button></div></body></html><?phpclass WxpayService{protected $mchid;protected $appid;protected $appKey;protected $apiKey;public $data = null;public function __construct($mchid, $appid, $appKey,$key){$this->mchid = $mchid; //https://pay. 产品中心-开发配置-商户号$this->appid = $appid; //微信支付申请对应的公众号的APPID$this->appKey = $appKey; //微信支付申请对应的公众号的APP Key$this->apiKey = $key; //https://pay. 帐户设置-安全设置-API安全-API密钥-设置API密钥}/*** 通过跳转获取用户的openid，跳转流程如下：* 1、设置自己需要调回的url及其其他参数，跳转到微信服务器https://open./connect/oauth2/authorize* 2、微信服务处理完成之后会跳转回用户redirect_uri地址，此时会带上一些参数，如：code* @return 用户的openid*/public function GetOpenid(){//通过code获得openidif (!isset($_GET['code'])){//触发微信返回code码$scheme = $_SERVER['HTTPS']=='on' ? 'https://' : 'http://';$uri = $_SERVER['PHP_SELF'].$_SERVER['QUERY_STRING'];if($_SERVER['REQUEST_URI']) $uri = $_SERVER['REQUEST_URI'];$baseUrl = urlencode($scheme.$_SERVER['HTTP_HOST'].$uri);$url = $this->__CreateOauthUrlForCode($baseUrl);Header("Location: $url");exit();} else {//获取code码，以获取openid$code = $_GET['code'];$openid = $this->getOpenidFromMp($code);return $openid;}}/*** 通过code从工作平台获取openid机器access_token* @param string $code 微信跳转回来带上的code* @return openid*/public function GetOpenidFromMp($code){$url = $this->__CreateOauthUrlForOpenid($code);$res = self::curlGet($url);//取出openid$data = json_decode($res,true);$this->data = $data;$openid = $data['openid'];return $openid;}/*** 构造获取open和access_toke的url地址* @param string $code，微信跳转带回的code* @return 请求的url*/private function __CreateOauthUrlForOpenid($code){$urlObj["appid"] = $this->appid;$urlObj["secret"] = $this->appKey;$urlObj["code"] = $code;$urlObj["grant_type"] = "authorization_code";$bizString = $this->ToUrlParams($urlObj);return "https://api./sns/oauth2/access_token?".$bizString;}/*** 构造获取code的url连接* @param string $redirectUrl 微信服务器回跳的url，需要url编码* @return 返回构造好的url*/private function __CreateOauthUrlForCode($redirectUrl){$urlObj["appid"] = $this->appid;$urlObj["redirect_uri"] = "$redirectUrl";$urlObj["response_type"] = "code";$urlObj["scope"] = "snsapi_base";$urlObj["state"] = "STATE"."#wechat_redirect";$bizString = $this->ToUrlParams($urlObj);return "https://open./connect/oauth2/authorize?".$bizString;}/*** 拼接签名字符串* @param array $urlObj* @return 返回已经拼接好的字符串*/private function ToUrlParams($urlObj){$buff = "";foreach ($urlObj as $k => $v){if($k != "sign") $buff .= $k . "=" . $v . "&";}$buff = trim($buff, "&");return $buff;}/*** 统一下单* @param string $openid 调用【网页授权获取用户信息】接口获取到用户在该公众号下的Openid* @param float $totalFee 收款总费用 单位元* @param string $outTradeNo 唯一的订单号* @param string $orderName 订单名称* @param string $notifyUrl 支付结果通知url 不要有问号* @param string $timestamp 支付时间* @return string*/public function createJsBizPackage($openid, $totalFee, $outTradeNo, $orderName, $notifyUrl, $timestamp){$config = array('mch_id' => $this->mchid,'appid' => $this->appid,'key' => $this->apiKey,);//$orderName = iconv('GBK','UTF-8',$orderName);$unified = array('appid' => $config['appid'],'attach' => 'pay', //商家数据包，原样返回，如果填写中文，请注意转换为utf-8'body' => $orderName,'mch_id' => $config['mch_id'],'nonce_str' => self::createNonceStr(),'notify_url' => $notifyUrl,'openid' => $openid, //rade_type=JSAPI，此参数必传'out_trade_no' => $outTradeNo,'spbill_create_ip' => '127.0.0.1','total_fee' => floatval($totalFee) * 100, //单位 转为分'trade_type' => 'JSAPI',);$unified['sign'] = self::getSign($unified, $config['key']);$responseXml = self::curlPost('https://api.mch./pay/unifiedorder', self::arrayToXml($unified));//禁止引用外部xml实体libxml_disable_entity_loader(true); $unifiedOrder = simplexml_load_string($responseXml, 'SimpleXMLElement', LIBXML_NOCDATA);if ($unifiedOrder === false) {die('parse xml error');}if ($unifiedOrder->return_code != 'SUCCESS') {die($unifiedOrder->return_msg);}if ($unifiedOrder->result_code != 'SUCCESS') {die($unifiedOrder->err_code);}$arr = array("appId" => $config['appid'],"timeStamp" => "$timestamp", //这里是字符串的时间戳，不是int，所以需加引号"nonceStr" => self::createNonceStr(),"package" => "prepay_id=" . $unifiedOrder->prepay_id,"signType" => 'MD5',);$arr['paySign'] = self::getSign($arr, $config['key']);return $arr;}public static function curlGet($url = '', $options = array()){$ch = curl_init($url);curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);curl_setopt($ch, CURLOPT_TIMEOUT, 30);if (!empty($options)) {curl_setopt_array($ch, $options);}//https请求 不验证证书和hostcurl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, false);$data = curl_exec($ch);curl_close($ch);return $data;}public static function curlPost($url = '', $postData = '', $options = array()){if (is_array($postData)) {$postData = http_build_query($postData);}$ch = curl_init();curl_setopt($ch, CURLOPT_URL, $url);curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);curl_setopt($ch, CURLOPT_POST, 1);curl_setopt($ch, CURLOPT_POSTFIELDS, $postData);curl_setopt($ch, CURLOPT_TIMEOUT, 30); //设置cURL允许执行的最长秒数if (!empty($options)) {curl_setopt_array($ch, $options);}//https请求 不验证证书和hostcurl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, false);$data = curl_exec($ch);curl_close($ch);return $data;}public static function createNonceStr($length = 16){$chars = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';$str = '';for ($i = 0; $i < $length; $i++) {$str .= substr($chars, mt_rand(0, strlen($chars) - 1), 1);}return $str;}public static function arrayToXml($arr){$xml = "<xml>";foreach ($arr as $key => $val) {if (is_numeric($val)) {$xml .= "<" . $key . ">" . $val . "</" . $key . ">";} else$xml .= "<" . $key . "><![CDATA[" . $val . "]]></" . $key . ">";}$xml .= "</xml>";return $xml;}public static function getSign($params, $key){ksort($params, SORT_STRING);$unSignParaString = self::formatQueryParaMap($params, false);$signStr = strtoupper(md5($unSignParaString . "&key=" . $key));return $signStr;}protected static function formatQueryParaMap($paraMap, $urlEncode = false){$buff = "";ksort($paraMap);foreach ($paraMap as $k => $v) {if (null != $v && "null" != $v) {if ($urlEncode) {$v = urlencode($v);}$buff .= $k . "=" . $v . "&";}}$reqPar = '';if (strlen($buff) > 0) {$reqPar = substr($buff, 0, strlen($buff) - 1);}return $reqPar;}}
