h5 微信支付，支付宝支付

程序员文章站 2024-01-22 11:06:52

...

微信支付：

微信支付文档

https://pay.weixin.qq.com/wiki/doc/api/index.html

首先需要明白你需要那种支付类型，很多人在这里是懵的

h5 微信支付，支付宝支付

就用了上面的两种

第一种H5支付:

description:

意思就是你可在非微信浏览器里面可以打开微信的app 调用他的原生支付。其实文档也写的很清楚。

example:
用户点击按钮跟后台定义好后台需要的参数，也就是后台去微信那边下单需要的参数，

上面这句话是废话看不懂的话就不看了

用户点击按钮>>后台下单>>拿到后台返回的参数>>拼装参数>>然后用window起微信的app done

let jsons=JSON.parse(res.responseData.requestData);
let linkData=jsons.mweb_url +"&redirect_url="+decodeURIComponent(window.location.origin+""+window.location.pathname);
window.location.href = linkData;

第二种JSAPI支付：

description:

这种方法只能用在微信浏览器内，也就是那种嵌入公众号之类的，

所有的这些参数都是找后拿。

example:

function onBridgeReady(){
   WeixinJSBridge.invoke(
      'getBrandWCPayRequest', {
         "appId":"wx2421b1c4370ec43b",     //公众号名称，由商户传入     
         "timeStamp":"1395712654",         //时间戳，自1970年以来的秒数     
         "nonceStr":"e61463f8efa94090b1f366cccfbbb444", //随机串     
         "package":"prepay_id=u802345jgfjsdfgsdg888",     
         "signType":"MD5",         //微信签名方式：     
         "paySign":"70EA570631E4BB79628FBCA90534C63FF7FADD89" //微信签名 
      },
      function(res){
      if(res.err_msg == "get_brand_wcpay_request:ok" ){
      // 使用以上方式判断前端返回,微信团队郑重提示：
            //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
      } 
   }); 
}
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();
}

支付宝支付：

type:移动端

相对于微信支付来说支付宝就简单多了

文档地址：https://openhome.alipay.com/developmentDocument.htm

h5 微信支付，支付宝支付

let payjson = JSON.parse(_data.payJson);
let reqData = _data.requestData;
let txt = "";
let parm = getUrlParam("?" + reqData);//将url参数转成json
let obj = reqData.split("&");
obj = obj.filter(function(el){//去除java返回参数里面的biz_content  这个参数需要单独post提交
	return el.indexOf("biz_content") < 0;
})
txt = obj.join("&");
let form = document.forms["alipay_form"];
form.action = 'https://openapi.alipay.com/gateway.do?' + txt;
form["biz_content"].value = decodeURIComponent(parm.biz_content);
form.submit();

我这里是用一个form 表单提交的数据，把后台返回的数据放在form表单提交。

type:pc端

跟移动端调用支付的方式是一样的也是用form

只是传递给后台的支付类型时有所区分

我们这里使用applyType 来区分是移动端还是pc端。

移动端：调用app

pc端：调用一个网页

有些fellow 可能会疑问那如何跳转回来呢？

调用后台接口的时候添加一个returnUrl的字段，支付成功以后就会跳转回来，有一个比较坑的地方就是url地址不允许有问号或特殊字符

我的解决方案是用rest风格的url

购买回调页面：/voucherCenter/1

平常进入页面：/voucherCenter/0

支付宝：

'returnUrl': window.location.origin + `/voucherCenter/1`

微信支付：

也是差不多的方式

个人感觉这种方式不是很好，不知各位客官如何写。有好的方式多谢分享。

我也有写过与app交互式的支付，有时间就在写一个。

h5 微信支付，支付宝支付