vue 移动端H5微信支付和支付宝支付

最新推荐文章于 2024-09-06 18:02:25 发布

ahwangzc

最新推荐文章于 2024-09-06 18:02:25 发布

阅读量7k

点赞数 3

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/ahwangzc/article/details/121549436

版权

vue 专栏收录该内容

49 篇文章 3 订阅

订阅专栏

一、移动端支付宝支付
1.支付宝中的H5支付和PC端的一样，主要是后端的工作量，后端完成订单的生成之后返给前端的是form表单，前端只需要负责做页面的跳转即可：

 	//立即支付按钮
      onSubmit() {
        if (this.payWay == 1) {
        	//支付宝支付
          	this.$router.push({path: '/aliPay', query: {orderId: this.orderId}});
        } else if (this.payWay == 2) {
         //微信支付，这里跳转到本文的微信支付模块的3.步骤handelPay方法
        }
      },

2.选择支付宝方式之后进入支付宝承载页面：

<template>
  <div v-html="html"></div>
</template>
<script>
    export default {
      data(){
        return{
          html:''
        }
      },
      methods:{
        fetchVideoPay(){
          let param={
            orderId: this.$route.query.orderId
          };
          this.$api.orderpage.videoAliPay(param).then( res => {
            this.html = res.data;
            this.$nextTick(() => {
              document.forms[0].submit()   //渲染支付宝支付页面
            })
          })
        }
      },
      mounted(){
        this.fetchVideoPay()
      }
    }
</script>

当然不想写承载页的还有其他方法调起支付，具体逻辑具体分析，根据不同的业务类型去变通比如：

const div = document.createElement('div');
div.innerHTML = (res.data);  //res.data是返回的表单
document.body.appendChild(div);
document.forms.alipaysubmit.submit();

二、移动端微信支付

在移动端微信支付分为微信内支付和微信外支付。
1.在订单组件中选择支付方式之后在支付页面先去判断是否是在微信内：

//判断是否微信
        is_weixn(){
          var ua = window.navigator.userAgent.toLowerCase();
          if (ua.match(/MicroMessenger/i) == 'micromessenger'){
            return true;
          } else {
            return false;
          }
        },

2.触发立即支付方法，根据微信内外的不同请求后端不同的接口，如果是微信外支付非常简单了~
3.【微信外支付】下面先看微信外支付，官方文档也写的很清楚，后端返回一个url地址，前端的工作就是拿到这个url地址进行跳转就可以了，看一下2-3步代码：

 handelPay() {
          if(this.wechatpayType == 'wxpay'){
           // console.log("微信内支付")
            let data={
              amount:this.number,
            }
            this.$http.insideWeChatPay(data).then( res => {
              if(res.data.code === 200){
                this.weChatParameter=res.data.data
               // console.log(this.weChatParameter,"微信内支付需要参数")
                this.weixinPay()
              }else{
                Toast({
                  message: res.data.msg,
                  position: 'middle',
                  duration: 1000
                });
              }
            });
          } else if(this.wechatpayType == 'wxpay_php'){
           // console.log("微信外支付")
            let data={
              amount:this.number,
            }
            this.$http.outsideWeChatPay(data).then( res => {
              if(res.data.code === 200){
                let url=res.data.data
                window.location.replace(url)   //这里是后端返回的URL直接进行跳转即可完成微信外支付
              }else{
                Toast({
                  message: res.data.msg,
                  position: 'middle',
                  duration: 1000
                });
              }
            });
          }
        },

4.在调起支付的页面监听从其他页面返回的事件，进行一些刷新业务逻辑的实现即可，至此微信外支付已经完成。

document.addEventListener("visibilitychange", function() {
    //需要的操作
});

5.【微信内支付】微信内支付比起微信外支付稍微复杂一点，但是也不难，（3步骤代码里面已经请求支付方式接口拿到了微信内支付所需要的参数）根据官方API
微信内置js对象 WeixinJSBridge，进行开发，至此微信浏览器内支付已经完成

		 //解决微信内置对象报错
        weixinPay(data){
          var vm= this;
          if (typeof WeixinJSBridge == "undefined"){
            if( document.addEventListener ){
              document.addEventListener('WeixinJSBridgeReady', vm.onBridgeReady(data), false);
            }else if (document.attachEvent){
              document.attachEvent('WeixinJSBridgeReady', vm.onBridgeReady(data));
              document.attachEvent('onWeixinJSBridgeReady',vm.onBridgeReady(data));
            }
          }else{
            vm.onBridgeReady();
          }
        },
        //微信内置浏览器类，weChatParameter对象中的参数是3.步骤代码中从后端获取的数据
        onBridgeReady(){
          var  vm = this;
          var timestamp=Math.round(vm.weChatParameter.timeStamp).toString();
          WeixinJSBridge.invoke(
            'getBrandWCPayRequest',{
              debug:true,
              "appId":vm.weChatParameter.appId,     //公众号名称，由商户传入
              "timeStamp":timestamp, //时间戳，自1970年以来的秒数
              "nonceStr":vm.weChatParameter.nonceStr, //随机串
              "package":vm.weChatParameter.package,
              "signType":vm.weChatParameter.signType, //微信签名方式：
              "paySign":vm.weChatParameter.paySign, //微信签名
              jsApiList: [
                'chooseWXPay'
              ]
            },
            function(res){
              // 使用以上方式判断前端返回,微信团队郑重提示：res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
              if(res.err_msg == "get_brand_wcpay_request:ok" ){
                Toast({
                  message: '支付成功',
                  position: 'middle',
                  duration: 3000
                });
                vm.number=null
                vm.$router.go(-1)
                //window.location.href = vm.BASE_URL + 'index.html#/depositResult'
              }else{
                Toast({
                  message: '支付失败',
                  position: 'middle',
                  duration: 3000
                });
              }
            }
          );
        },

三、常见问题

1、回调页面

正常流程用户支付完成后会返回至发起支付的页面，如需返回至指定页面，则可以在MWEB_URL后拼接上redirect_url参数，来指定回调页面。

如，您希望用户支付完成后跳转至https://www.wechatpay.com.cn，则可以做如下处理：

//假设您通过统一下单接口获到的
MWEB_URL= https://wx.tenpay.com/cgi-bin/mmpayweb-bin/checkmweb?prepay_id=wx20161110163838f231619da20804912345&package=1037687096

//则拼接后的地址为
MWEB_URL= https://wx.tenpay.com/cgi-bin/mmpayweb-bin/checkmweb?prepay_id=wx20161110163838f231619da20804912345&package=1037687096&redirect_url=https%3A%2F%2Fwww.wechatpay.com.cn

2、注意

1）.需对redirect_url进行urlencode处理

2）.由于设置redirect_url后,回跳指定页面的操作可能发生在：1,微信支付中间页调起微信收银台后超过5秒 2,用户点击“取消支付“或支付完成后点“完成”按钮。因此无法保证页面回跳时，支付流程已结束，所以商户设置的redirect_url地址不能自动执行查单操作，应让用户去点击按钮触发查单操作。回跳页面展示效果可参考下图

四、其它常见错误

序号	错误描述	解决方法
1	网络环境未能通过安全验证，请稍后再试	1. 商户侧统一下单传的终端IP(spbill_create_ip)与用户实际调起支付时微信侧检测到的终端IP不一致导致的，这个问题一般是商户在统一下单时没有传递正确的终端IP到spbill_create_ip导致，详细可参见客户端ip获取指引 2. 统一下单与调起支付时的网络有变动，如统一下单时是WIFI网络，下单成功后切换成4G网络再调起支付，这样可能会引发我们的正常拦截，请保持网络环境一致的情况下重新发起支付流程
2	商家参数格式有误，请联系商家解决	1. 当前调起H5支付的referer为空导致，一般是因为直接访问页面调起H5支付，请按正常流程进行页面跳转后发起支付，或自行抓包确认referer值是否为空 2. 如果是APP里调起H5支付，需要在webview中手动设置referer，如( Map extraHeaders = new HashMap(); extraHeaders.put("Referer", "商户申请H5时提交的授权域名");//例如 http://www.baidu.com ))
3	商家存在未配置的参数，请联系商家解决	1，当前调起H5支付的域名（微信侧从referer中获取）与申请H5支付时提交的授权域名不一致，如需添加或修改授权域名，请登陆商户号对应的商户平台--"产品中心"--"开发配置"自行配置 2，如果设置了回跳地址redirect_url，请确认设置的回跳地址的域名与申请H5支付时提交的授权域名是否一致
4	支付请求已失效，请重新发起支付	统一下单返回的MWEB_URL生成后，有效期为5分钟，如超时请重新生成MWEB_URL后再发起支付
5	请在微信外打开订单，进行支付	H5支付不能直接在微信客户端内调起，请在外部浏览器调起