微信h5支付和公众号支付、支付宝h5支付

1、微信h5支付：

首先是支付参数的构建，这个需要通过后台进行组装，后台会跟微信进行数据的交互，而你所需要做的是拿到返回的数据，然后传递给微信的JSSDK，由微信的JSSDK进行后续操作，比如说先跳转到微信支付的网页，然后调起微信app的支付模块（如果手机存在微信app）。

后台返回的参数格式如下：

{
    "code": 0,
    "result": {
        "appid": "wx4186b3f66628E9Y3", //微信公众号的appid
        "partnerid": "1507492261",    
        "prepayid": "wx021134426698863910d9239312370778001", //预支付交易会话标识
        "package": "Sign=WXPay",
        "noncestr": "npjGIgSjwQhHytsgXyGjPW2uPkwDuzaS", //随机字符串
        "timestamp": 1580556882,
        "sign": "35E29C5645D6020F4E2E764CEFF194D3", //签名
        "transaction_id": "5e3643521eacf0292973d2", //自己后台生成的交易id，用来支付状态查询
        "currency_amount": 199900, //支付金额单位为分
        "mweb_url": "https://wx.tenpay.com/cgi-bin/mmpayweb-bin/checkmweb?prepay_id=wx021134426698863910d9239312370778001&package=172424361626" //支付跳转链接
    }
}

拿到这些参数之后，通过 window.location.href = payData.mweb_url ; 跳转到微信的支付页面，再需要通过引用的JSSDK进行支付相关配置：

wx.config({
    debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
    appId: payData.appid, // 必填，公众号的唯一标识
    timestamp: payData.timestamp, // 必填，生成签名的时间戳
    nonceStr: payData.noncestr, // 必填，生成签名的随机串
    signature: payData.sign, // 必填，调用js签名，
    jsApiList: ["chooseWXPay"] // 必填，需要使用的JS接口列表，这里只写支付的
});
wx.chooseWXPay({
    timestamp: payData.timestamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
    nonceStr: payData.noncestr, // 支付签名随机串，不长于 32 位
    package: "prepay_id=" + payData.prepayid, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=***）
    signType: "MD5", // 签名方式，默认为´SHA1´，使用新版支付需传入´MD5´
    paySign: payData.sign, // 支付签名
    success: function (res) {
       if (res.errMsg === "chooseWXPay:ok") {

       } else {
          console.log(res.errMsg);
                    }
       },
       cancel: function (res) {
          alert('取消支付');
          localStorage.setItem('cancel', 'wxcancel');
       },
       complete: function (res) {

       },
});

跳转到支付页面后，微信网页就会尝试调起微信app的支付模块，就是平常我们支付的所展示的页面。

支付返回到我们app后，我们就会根据交易id(transaction_id)进行支付状态的查询，在6s内查询3次。

2、微信公众号支付

微信公众号的支付参数跟微信h5支付的一样，只不过在调用微信支付页面的时候不需要重定向到支付链接，因为我们是在微信app直接打开的支付页面，所以可以直接调用它的JSAPI提供的支付方法：

WeixinJSBridge.invoke(
  'getBrandWCPayRequest', {
  'appId': payData.appId,     //公众号名称，由商户传入
  'timeStamp': payData.timeStamp + '',         //时间戳，自1970年以来的秒数
  'nonceStr': payData.nonceStr, //随机串
  'package': payData.package,
  'signType': "MD5",         //微信签名方式：
  'paySign': payData.sign, //微信签名
},
  function (res) {
      if (res.err_msg == "get_brand_wcpay_request:ok") {
          // 使用以上方式判断前端返回,微信团队郑重提示：
          //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
          toast('支付成功')
          setTimeout(() => {
              //进行支付结束后的相关业务处理
              that.$router.replace({ name: 'membershop', });
          }, 500)
      } else {
          toast('支付取消');
      }
});   

3、支付宝h5支付

支付宝h5支付是后台直接返回一个表单类型的代码,表单的action就是支付参数的组装，然后再向支付宝提交这个表单,

这是返回的参数

{
  "alipay_params": "\n    
\n      \n    
\n    \n  ",
  "transaction_id": "5e364a4c1eacf0292973d",
  "currency_amount": 199900
}

下面这是将返回的表单添加到html页面的代码，添加之后将会自动向支付宝提交这个表单数据：

let jsData = payData;
let formContainer = document.getElementById("alipayForm");
formContainer.innerHTML = jsData.alipay_params;

let oldScript = formContainer.getElementsByTagName("script")[0];
formContainer.removeChild(oldScript);
let newScript = document.createElement("script");
newScript.type = "text/javascript";
newScript.innerHTML = oldScript.innerHTML;
formContainer.appendChild(newScript);

如果手机有支付宝app，它将打开支付宝支付界面，否则是一个网页二维码支付的形式呈现。

 

微信支付文档

 

支付宝h5支付文档