微信支付(详解)

一. 介绍------------------------------------------------------------------

 

 

 

 

微信支付官方开发文档:  https://pay.weixin.qq.com/wiki/doc/api/index.html

 

二.配置

 

 

 下面俺 就来说讲   经常使用的三种微信支付,    

 

固然!!   首先你要去微信平台  配置在微信商户平台（pay.weixin.qq.com）设置您的JSAPI支付支付目录     h5支付   等等!!

(例子jsapi  官方地址  开发步骤:https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=7_3)  下图👇

 

 

 

三.经常使用的三种支付  详解 ( jsapi支付(微信内部浏览器)  /   小程序支付   /  h5支付 (微信外部浏览器) !!)

1.小程序支付 (很简单,  环境====>  微信 环境)

首先  调用  后台下单接口,    下单成功以后   会返回   支付的参数

　　　　　　　　　　　//   res:{
                  //     appid: "wxXXXXX"
                  //     error: "00"
                  //     msg: "下单成功"
                  //     nonceStr: "xxxxx"
                  //     orderNum: "20191102150216"
                  //     package: "prepay_id=wx33333333"
                  //     paySign: "14CF8AE4666666E8D1CAF"
                  //     timeStamp: "1666187704"
                  //   }

 

小程序  文档  https://developers.weixin.qq.com/miniprogram/dev/api/open-api/payment/wx.requestPayment.html

wx.requestPayment({
  timeStamp: '',
  nonceStr: '',
  package: '',
  signType: 'MD5',
  paySign: '',
  success (res) {成功跳转什么界面 ,本身定}, 
　　fail (res) {失败跳转什么界面, 本身定 } 
})

2. jsapi支付  (环境 微信 内部 浏览器)  

引用  JSSDK:   <script src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>

注意:   web-view  内嵌 h5   目前不支持支付!!!   web-view   功能有限,  能够参考官方文档  https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html

　　jsapi支付  :用户经过微信扫码、关注公众号等方式进入商家H5页面，并在微信内调用JSSDK完成支付

　　

//WeixinJSBridge 是微信内置对象，支付功能只能在微信端才能使用 调用这个方法 wxpay 购买就行 
　　wxPay(appId,timeStamp,nonceStr,package,paySign){
              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 {
                    //执行下面方法
                    //传入下面参数,这些参数须要从后台获取 (下单接口获取, 问后台要)
                    this.onBridgeReady(appId,timeStamp,nonceStr,package,paySign)
              }
      },
                    //jsapi方法
      onBridgeReady(appId,timeStamp,nonceStr,package,paySign) {
              WeixinJSBridge.invoke(
                    'getBrandWCPayRequest', {
                    "appId": appId, //须要在微信绑定商户号，成功以后会生成有appid 
                    "timeStamp": timeStamp, //时间戳，自1970年以来的秒数，前端须要从后台获取该数据 
                    "nonceStr": nonceStr, //随机串，前端须要从后台获取该数据 
                    "package": package,//前端须要从后台获取该数据 
                    "signType": "MD5", //微信签名方式,默认为"MD5",也能够从后台获取
                    "paySign": paySign //微信签名，前端须要从后台获取该数据 
              },
                    function(res) {
                    //这个步骤很是重要，调试期间会报上相应的错误信息，由于微信调试工具是没法实际支付的，而且微信上是没法调试的，只能在这里alert
                      console.log(res.err_msg);
                      if(res.err_msg == "get_brand_wcpay_request:ok") {
                      
                      console.log("购买成功")
                    } // 使用以上方式判断前端返回,微信团队郑重提示：res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
                    else{
                      console.log("购买失败")
   
   
                    }
                }
            );
          }

 

 

 

3. H5支付  (环境===> 微信 外部 浏览器)    更简单了,  基本都交给后台,   下单以后 后台会返给你连接,   你点击连接 就跳转支付了

　　解释: 用户在微信之外的手机浏览器请求微信支付的场景唤起微信支付

　　微信官方体验连接：https://wxpay.wxutil.com/mch/pay/h5.v2.php，请在微信外浏览器打开。

　　H5支付参考连接:https://www.jianshu.com/p/6b9acdd10de6

====>

 

 

 

 

  res:{          
             code: "200",
             msg: "下单成功",
             mweb_url: "https://wx.tenpay.com/cgi-bin/mmpayweb-bin/checkmweb?prepay_id=wx20161110163838f231619da20804912345&package=1037687096"
   }

 

 

点击连接就会唤起微信支付;

大体的流程就和微信的文档一致。若是看不懂的话，那就通俗的来说就是：你在下单时，要给后台发请求，后台经过拿到的参数请求微信后台去生成订单并同时返给你一个路径mweb_url，这个路径就是用来调起微信应用发起支付操做的。（这里要说明的就是因为h5支付不能主动回调，因此须要个主动查询的操做，这时会须要你又一个确认界面来进行主动查询订单状态。这里是个坑一下子再说），调起支付界面以后进行支付操做，期间你什么都不用管，由于这都是微信的事。你须要的就是在你付完钱以后查看你的钱买你要的东西到底有没有成功（你要是不加的话，谁知道成功没，估计顾客会打死你，付完钱就茫然了，不知道到底钱到哪去了→_→）

常见错误

1、回调页面

正常流程用户支付完成后会返回至发起支付的页面，如需返回至指定页面，则能够在MWEB_URL后拼接上redirect_url参数，来指定回调页面。
如，您但愿用户支付完成后跳转至https://www.wechatpay.com.cn，则能够作以下处理：
假设您经过统一下单接口获到的MWEB_URL= https://wx.tenpay.com/cgi-bin/mmpayweb-bin/checkmweb?prepay_id=wx20161110163838f231619da20804912345&package=1037687096
***则拼接后的地址为MWEB_URL= https://wx.tenpay.com/cgi-bin/mmpayweb-bin/checkmweb?prepay_id=wx20161110163838f231619da20804912345&package=1037687096&redirect_url=https%3A%2F%2Fwww.wechatpay.com.cn***

(有颜色的部分就是你要添加最后想要跳转进行别的操做的页面，通常就是确认订单状态的页面)
注意：
1.需对redirect_url进行urlencode处理
2.因为设置redirect_url后,回跳指定页面的操做可能发生在：
1,微信支付中间页调起微信收银台后超过5秒
2,用户点击“取消支付“或支付完成后点“完成”按钮。所以没法保证页面回跳时，支付流程已结束，因此商户设置的redirect_url地址不能自动执行查单操做，应让用户去点击按钮触发查单操做。回跳页面展现效果可参考下图

 

 

----------------------------------------------------------------------------------------------------------------------------------------------------

有问题和建议均可以留言哦,俺常常会看的

感谢 各位老板  小额打赏:   (有问题call俺)

 

              

"购买成功"