微信h5支付和公众号支付、支付宝h5支付 -少儿编程-信息学奥赛-宜宾少儿编程-宜宾市野牛网络科技有限公司

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

浏览次数：1668

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

1、微信h5支付：

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

后台返回的参数格式如下：
```javascript
{
    "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进行支付相关配置：
```javascript
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提供的支付方法：
```javascript
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就是支付参数的组装，然后再向支付宝提交这个表单,

这是返回的参数
```javascript
{
  "alipay_params": "\n    <form action=\"https://openapi.alipay.com/gateway.do?app_id=2018062560415987&biz_content=%7B%22out_trade_no%22%3A%225e364a4c1eacf0292973d2d9%22%2C%22subject%22%3A%22%E4%BA%AB%E5%83%8F%E6%B4%BE-%E4%BC%9A%E5%91%98%E5%85%85%E5%80%BC%22%2C%22total_amount%22%3A%220.01%22%2C%22product_code%22%3A%22FAST_INSTANT_TRADE_PAY%22%2C%22body%22%3A%22%E4%BA%AB%E5%83%8F%E6%B4%BE-%E4%BC%9A%E5%91%98%E5%85%85%E5%80%BC%22%2C%22timeout_express%22%3A%2210m%22%2C%22goods_type%22%3A%220%22%2C%22passback_params%22%3A%22photographer_alipay_RECHARGE_member%22%2C%22qr_pay_mode%22%3A%220%22%7D&charset=utf-8&format=JSON&method=alipay.trade.page.pay&notify_url=https%3A%2F%2Fxxx.yyy.com%2Fapi%2Fsm%2FaliPayPaymentCallback&return_url=%5Bobject%20Promise%5D&sign_type=RSA2&timestamp=2020-02-02%2012%3A04%3A28&version=1.0&sign=VQKbfRwpBMF8E2D05XvVgEP%2Fhcrljxdha4n6BeVhUIa8wU3G7TyHMBGAJxJEmpvxegVb7VTbg3BfYR66w0p8Fv5ZHaDHgBAwf0DPJfr1EZVAPFLdGulCoHP7O1REl094T2Ga3nJ8K8%2FhLNSqzlFbxUrlR7S4VBoT2qy3XlVPoI%2FS%2FtOz8vcklxVyisd8QFMooc%2Byyl9QBvG0WIAY24zgVDOW2Vz3Frulgw9kkZtKTLjAyKLXHUQWKcXojQ6YuTjRBLJcCDBCSaeO4wY8pLBp4vKmnf%2BpEZXRoERNWDfUIB%2FUZc0LuIE0mTC8P%2BWLyj3y9tyh3IvR%2BjSA8L5SGGGNHA%3D%3D\" method=\"post\" name=\"alipaySDKSubmit1580616268942\" id=\"alipaySDKSubmit1580616268942\">\n      <input type=\"hidden\" name=\"app_id\" value=\"2018062560415987\" /><input type=\"hidden\" name=\"method\" value=\"alipay.trade.page.pay\" /><input type=\"hidden\" name=\"format\" value=\"JSON\" /><input type=\"hidden\" name=\"charset\" value=\"utf-8\" /><input type=\"hidden\" name=\"sign_type\" value=\"RSA2\" /><input type=\"hidden\" name=\"timestamp\" value=\"2020-02-02 12:04:28\" /><input type=\"hidden\" name=\"version\" value=\"1.0\" /><input type=\"hidden\" name=\"biz_content\" value=\"{"out_trade_no":"5e364a4c1eacf0292973d2d9","subject":"xxx-会员充值","total_amount":"0.01","product_code":"FAST_INSTANT_TRADE_PAY","body":"xxx-会员充值","timeout_express":"10m","goods_type":"0","passback_params":"photographer_alipay_RECHARGE_member","qr_pay_mode":"0"}\" /><input type=\"hidden\" name=\"notify_url\" value=\"https://xxx.yyy.com/api/sm/aliPayPaymentCallback\" /><input type=\"hidden\" name=\"return_url\" value=\"[object Promise]\" />\n    </form>\n    <script>document.forms[\"alipaySDKSubmit1580616268942\"].submit();</script>\n  ",
  "transaction_id": "5e364a4c1eacf0292973d",
  "currency_amount": 199900
}
```
下面这是将返回的表单添加到html页面的代码，添加之后将会自动向支付宝提交这个表单数据：
```javascript
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支付和公众号支付、支付宝h5支付

留言条数·0