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": "/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 <form action=\"/gateway.do?app_id=062560415987&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¬ify_url=https%3A%2F%%2Fapi%2Fsm%2FaliPayPaymentCallback&return_url=%5Bobject%20Promise%5D&sign_type=RSA2×tamp=-02-02%%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=\"062560415987\" /><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=\"-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=\"/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页面的代码，添加之后将会自动向支付宝提交这个表单数据：
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支付文档
