微信JSAPI支付

原创

安德玛

发布于 2022-03-05 14:02:32

2.1K00

代码可运行

文章被收录于专栏：Cordova封装H5 APPCordova封装H5 APP

运行总次数：0

代码可运行

一、支付逻辑

1.和H5、Native扫码支付略微有点不同，JSAPI主要适用于微信内支付的场景，就是在微信内置浏览器中实现的H5支付

2.JSAPI支付首先要获取用户的openid并保存在数据库

getAutu获取授权接口返回给客户端授权地址

/**
 * 获取微信网页授权
 */
public function getAutu()
{
if(!IS_POST){
    $this->res['code'] = 100;
    $this->res['msg'] = '请用post方法请求接口';
    $this->response($this->res,'json');
}    
//拼接网页授权地址
$redirect_url = C("SITE_URL");
$url_encode_redirect_url = urlencode($redirect_url);
$autu_url = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid='.C('appid').'&redirect_uri='.$url_encode_redirect_url.'&response_type=code&scope=snsapi_base&state=STATE#wechat_redirect';
$this->res['data']['autu_url'] = $autu_url;
$this->res['code'] = 200;
$this->response($this->res,'json');
}

客户端根据这个地址截取到code

export function getQueryString(name) {
  var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
  var r = window.location.search.substr(1).match(reg);
  if (r != null){
    return unescape(r[2]);
  }else{
    return null;
  }
}

利用这个code再去请求获取openid并存入数据库

if($code){
	$openid = getOpenidByCode($code);
	if($openid){
		$data['openid'] = $openid;
		$info = $m
			   ->data($data)
		       ->where($where)
		       ->save();
	}
}

getOpenidByCode方法:

/**
 * 根据code获取openid
 */
function getOpenidByCode($code)
    {
        //缓存access_token  open_id
        Log::write("appid+++++++".C('appid'),'DEBUGE');
        $url = "https://api.weixin.qq.com/sns/oauth2/access_token?appid=".C('appid')."&secret=".C('secret')."&code=".$code."&grant_type=authorization_code";
        $weixin = vget($url);//通过code换取网页授权access_token
        Log::write("weixin+++++++".$weixin,'DEBUGE');
        $jsondecode = json_decode($weixin, true); //对JSON格式的字符串进行编码
        $openid = $jsondecode['openid'];//输出openid
        return $openid;
    }

vget方法：

function vget($url){
         try{
        $info=curl_init();
        curl_setopt($info,CURLOPT_RETURNTRANSFER,true);
        curl_setopt($info,CURLOPT_ENCODING,"");
        curl_setopt($info,CURLOPT_MAXREDIRS,3);
        curl_setopt($info,CURLOPT_TIMEOUT,0);
        curl_setopt($info,CURLOPT_FOLLOWLOCATION,true);
        curl_setopt($info,CURLOPT_SSL_VERIFYPEER, false);                
        curl_setopt($info, CURLOPT_SSL_VERIFYHOST, false);
        curl_setopt($info,CURLOPT_HTTP_VERSION,CURL_HTTP_VERSION_1_1);
        curl_setopt($info,CURLOPT_CUSTOMREQUEST,"GET");
        curl_setopt($info,CURLOPT_URL,$url);
        $output= curl_exec($info);
        curl_close($info);
          }catch(Exception $e){
            var_dump("catch");
           $result= $client->__getMessage();
        }  
       
        return $output;
    }

从数据库获取openid并请求微信统一下单

重要参数：

$params['openid'] = $openid;
$trade_type = 'JSAPI';//交易类型，微信H5支付时固定为MWEB、电脑支付Native

获取统一下单返回的prepay_id

$prepay_id = $result['prepay_id'];

4.拼接参数返回给客户端

$prepay_id = $result['prepay_id'];
$nonce_str=MD5($order_no);//随机字符串
$package = 'prepay_id='.$prepay_id;
Log::write("打印JSAPI返回++++++".var_export($result, true),'DEBUGE');
$params['appId'] = C('appid');
$params['timeStamp'] = strval(time());
$params['nonceStr'] = $nonce_str;
$params['package'] = $package;
$params['signType'] = 'MD5';
$sign = $this->MakeSign($params);
$params['sign'] = $sign;
$this->res['data']['pay_flag'] = 2;
$this->res['data']['params'] = $params;
$this->response($this->res,'json');

.客户端拿到后台返回的参数并利用js调起微信支付

拿到返回的参数

 this.params = this.payInfo.params
 this.onBridgeReady();

js利用参数调起微信

 onBridgeReady(){
         WeixinJSBridge.invoke(
            'getBrandWCPayRequest', {
               "appId":this.params.appId,     //公众号ID，由商户传入
               "timeStamp":this.params.timeStamp,         //时间戳，自1970年以来的秒数
               "nonceStr":this.params.nonceStr, //随机串
               "package":this.params.package,
               "signType":this.params.signType,         //微信签名方式：
               "paySign":this.params.sign //微信签名
            },
            function(res){
            if(res.err_msg == "get_brand_wcpay_request:ok" ){
            // 使用以上方式判断前端返回,微信团队郑重提示：
                  //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
              this.$router.push({path:'/'})
            }
         });
      },

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

微信