微信内部 拉起微信支付

香菊网 发表于: 2019-06-28 分类: H5部分  软件soft  前端front  

可能有的时候的我们的需求是需要在微信内部的h5页面里面进行微信支付的环境 这时候需要我们用的微信内置的 顶级对象WeixinJSBridge, 在其他浏览器中无效。

本文介绍微信内部弹起支付 如果需要微信外部弹起微信支付请    点击 : 微信外部实现微信支付功能  

 

1 、微信内部h5页面支付场景:

    商户已有H5商城网站,用户通过消息或扫描二维码在微信内打开网页时,可以调用微信支付完成下单购买的流程。

2 、支付配置

    在微信商户平台(pay.weixin.qq.com)设置您的JSAPI支付支付目录,设置路径:商户平台-->产品中心-->开发配置,

    JSAPI支付在请求支付的时候会校验请求来源是否有在商户平台做了配置,所以必须确保支付目录已经正确的被配置,否则将验证失败,请求支付不成功。

微信支付配置

3 、设置授权域名:

开发JSAPI支付时,在统一下单接口中要求必传用户openid,而获取openid则需要您在公众平台设置获取openid的域名,只有被设置过的域名才是一个有效的获取openid的域名,否则将获取失败。

微信域名配置

4 、参数介绍

WeixinJSBridge属于微信内置对象 ,在其他浏览器中无效; 

getBrandWCPayRequest 是拉起支付的方法,参数如下:

getBrandWCPayRequest

 getBrandWCPayRequest 返回值如下:

getBrandWCPayRequest 返回

5 、代码部分

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

// 点击支付
topay = () => {
 if (typeof WeixinJSBridge == "undefined"){
   if( document.addEventListener ){
       document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
   }else if (document.attachEvent){
       document.attachEvent('WeixinJSBridgeReady', onBridgeReady); 
       document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
   }
 }else{
   onBridgeReady();
 }   
}

 

标签: H5部分软件soft前端front
Copyright © 2019 幻雨焉缘博客 | 浙ICP备19001843号-1
----------------------------------
种一棵树,最好的培养时间是十年前,其次是现在 加油  (ง •_•)ง。        ──── 前端攻城狮