微信h5支付/jsapi支付/小程序支付

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

微信支付官方开发文档: 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支付不能主动回调，所以需要个主动查询的操作，这时会需要你又一个确认界面来进行主动查询订单状态。这里是个坑一会儿再说），调起支付界面之后进行支付操作，期间你什么都不用管，因为这都是微信的事。你需要的就是在你付完钱之后查看你的钱买你要的东西到底有没有成功（你要是不加的话，谁知道成功没，估计顾客会打死你，付完钱就茫然了，不知道到底钱到哪去了→_→）

常见错误

一、回调页面

正常流程用户支付完成后会返回至发起支付的页面，如需返回至指定页面，则可以在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地址不能自动执行查单操作，应让用户去点击按钮触发查单操作。回跳页面展示效果可参考下图