web支付篇

支付宝支付

<button onclick="fnAlipay">点击支付</button>

function fnAlipay(){
	//模拟接口返回（ resForm表单数据实为接口返回 ）
	let resForm = "<form id='alipaysubmit' name='alipaysubmit' action='https://openapi.alipay.com/gateway.do?charset=UTF-8' method='POST'>"+
	                      "<input type='hidden' name='biz_content' value='{\"productCode\":\"QUICK_WAP_PAY\",\"subject\":\"橙园24°\",\"out_trade_no\":\"201807201006587430\",\"total_amount\":0.01,\"timeout_express\":\"1m\"}'/>"+
	                      "<input type='hidden' name='app_id' value='2018070760510577'/>"+
	                      "<input type='hidden' name='version' value='1.0'/>"+
	                      "<input type='hidden' name='format' value='json'/>"+
	                      "<input type='hidden' name='sign_type' value='RSA2'/>"+
	                      "<input type='hidden' name='method' value='alipay.trade.wap.pay'/>"+
	                      "<input type='hidden' name='timestamp' value='2018-07-20 10:06:59'/>"+
	                      "<input type='hidden' name='alipay_sdk' value='alipay-sdk-php-20161101'/>"+
	                      "<input type='hidden' name='notify_url' value='http://orange24.msqsoft.net/index.php/api/Order/orderAliPayNotify'/>"+
	                      "<input type='hidden' name='return_url' value='http://orange24.msqsoft.net/index.html#/app/orders?index=0'/>"+
	                      "<input type='hidden' name='charset' value='UTF-8'/>"+
	                      "<input type='hidden' name='sign' value='ioGI8wwaP6L81+RpW6mdd9aprN5HtpB/JWaaXCx6wtGF0tZKinMFqt79z21wkdgu/ZiY4bYPe73Q6joS/vMe3i+n5AaCYB/6KgKQzy++En8nJZVi6OaNhnrFUH8LUNEfVHZXS25Agzu7zZ/QqP1mUizNsRnCT65G2lrhsK1wv7sfq1/FIggjiGYiqCE2KzQwaXp3McMTNS7mH2HcIkmAELx1U9EeU0RDM7veJjZObXndxim/zXojQ2e8nye8k9bwfgZAfnFR7zSGyw7kxyVTtsw/nT5p51bUxYRPpO7fjTWULQkZwS+kJ1jKDPKKBVxzxaNxF52i2NTORL/AdB1iWA=='/>"+
	                      "<input type='submit' value='ok' style='display:none;'>"+
	                    "</form>";
	
	//支付使用
	const div = document.createElement('div');
	div.innerHTML = resForm;
	document.body.appendChild(div);
	document.forms.alipaysubmit.submit();
}

//OK

微信jsapi支付（微信公众号支付）

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{
     onBridgeReady();
 }
 
 function onBridgeReady(){
     WeixinJSBridge.invoke(
         "getBrandWCPayRequest", {
             "appId": "wxxxxxxxxxxxxxxxxxxxxxxx",
             "timeStamp": timeStamp, // 支付签名时间戳
             "nonceStr": nonceStr, // 支付签名随机串，不长于 32 位
             "package": packageStr, // 统一支付接口返回的prepay_id参数值
             "signType": signType, // 签名方式使用新版支付需传入'MD5'
             "paySign": paySign // 支付签名
         },
         function(res){
             if(res.err_msg == "get_brand_wcpay_request:ok" ){
                 // this.vant.Toast('支付成功')
                 // 接口轮询（订单处理中...）
                 this.$emit('showPayOverLoading',res.data.order)
             }
             else if( res.err_msg == "get_brand_wcpay_request:cancel" ){
                 // this.vant.Toast('取消支付')
                 // 取消支付
                 this.$emit('showPayOverLoadingCancel',res.data.order)
             }
             else if( res.err_msg == "get_brand_wcpay_request:fail" ){
                 // this.vant.Toast('支付失败')
                 // 支付失败
                 this.$emit('showPayOverLoadingCancel',res.data.order)
             }
         }
     ); 
}

微信h5支付

let xml = res.data.html.split('<mwebUrl>')[1];
let mwebUrl = xml.split('</mwebUrl>')[0];  //https://wx.tenpay.com/cgi-bin/mmpayweb-bin/checkmweb?prepay_id=wx20161110163838f231619da20804912345&package=1037687096
let url = window.location.href;
// 记住 进入分享页面url传参以payback为分角线（payback=只包括payback，paytime）
if( window.location.href.indexOf('payback=') != -1 ){
    url = window.location.href.split('payback=')[0]
}
let redirect_url = encodeURIComponent(url+'&payback=payCallBack&paytime='+new Date().getTime()+'payorder='+res.data.order);

window.location.href = mwebUrl + '&redirect_url='+redirect_url

// 支付完成后跳转到 redirect_url赋值页面，在该页面支付轮询，查看订单状态