前端微信支付与支付宝支付


一、微信支付

在移动端微信支付分为微信内支付和微信外支付。

  1. 在订单组件中选择支付方式之后在支付页面先去判断是否在微信内:
//判断是否微信
        is_weixn(){
          var ua = window.navigator.userAgent.toLowerCase();
          if (ua.match(/MicroMessenger/i) == 'micromessenger'){
            return true;
          } else {
            return false;
          }
        },

  1. 触发立即支付方法,根据微信内外的不同请求后端不同的接口
  2. 微信外支付的话,后端返回一个url,前端进行跳转,在调起支付的页面监听从其他页面返回的事件,进行一些刷新业务逻辑。
 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
                });
              }
            });
          }
        },


  1. 在调起支付的页面监听从其他页面返回的事件,进行一些刷新业务逻辑。

微信内支付根据官方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.支付宝中的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();

3.进入到支付宝支付页(至此但有一个问题,调起支付后,用户中途取消支付或者点返回键会整个网页一起关闭退出,或者一直在进入支付页面,不知道有没有更好的SEO方案)

  • 1
    点赞
  • 8
    收藏
  • 打赏
    打赏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:1024 设计师:我叫白小胖 返回首页
评论 1

打赏作者

她的鼻孔有星辰

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值