Vue app安卓端移动端实现微信支付和支付宝支付

138 篇文章 7 订阅

当前项目借助调用安卓和ios方法跳转第三方支付平台实现微信支付和支付宝支付 

涉及到的安卓方法:

 

window.AndroidFunction.wxpay('传递的参数')

 

// 点击确认支付
    handleSurePay(){
      //判断是否在微信内支付,需要在微信外支付
      if(this.$utils.isWeiXin()){
        this.$toast.fail("请选择在微信外支付");
        return;
      }else if(this.payType=="1"){
        // 微信支付 App
        console.log(this.payType,"选择支付方式");
        let payParams = {
          goodsId:this.goodsId,
          buyUserId:this.id,
          terminal:this.terminal
        }
        wxCreateOrder(payParams).then(res=>{
          if(res.code == 200){
            this.isShowVip= false;
            this.isShoosePayType = false;
            console.log(res,"支付微信");
            // let payData = JSON.stringify(res.data);
            let [appId,partnerId,prepayId,nonceStr,timeStamp,packageValue,sign] = [res.data.appId,res.data.partnerId,res.data.prepayId,res.data.nonceStr,res.data.timeStamp,res.data.packageValue,res.data.sign];
            // 调用安卓方法
            if(this.$utils.isAndroid_ios() == "andriod"){
              window.AndroidFunction.wxpay(appId,partnerId,prepayId,nonceStr,timeStamp,packageValue,sign);
              this.wxpayBack(payResult);
            }
          }else{
            this.$toast.fail("请求失败");
          }
        })
      }else if(this.payType=="2"){
        // 支付宝支付 app 跳转页面 
        // this.$router.push({path:"/memberCenter/aliPay"});
        let alipayParams = {
          buyUserId:this.id,
          goodsId:this.goodsId,
          terminal:this.terminal
        }
        alipayPay(alipayParams).then(res=>{
          this.isShowVip= false;
          this.isShoosePayType = false;
          console.log(res,"支付宝支付");
          if(res.code == 200){
            let bizContent = res.data.bizContent;
            // 调用安卓方法
            let [
              timeout_express,
              product_code,
              total_amount,
              subject,
              body,
              out_trade_no,
              timestamp
            ] = [
              bizContent.timeout_express,
              bizContent.product_code,
              bizContent.total_amount,
              bizContent.subject,
              bizContent.body,
              bizContent.out_trade_no,
              bizContent.timeStamp
            ];
            // alert(res.data.notifyUrl)
            if(this.$utils.isAndroid_ios() == "andriod"){
              window.AndroidFunction.alipay(timeout_express,product_code,total_amount,subject,body,out_trade_no,timestamp,res.data.notifyUrl);
              this.alipayBack(payResult,payInfo);
            }
          }else{
            this.$toast.fail("请求失败");
          }
        })
      }
    },
// 处理安卓微信支付后返回的结果
    wxpayBack(payResult){
      if(payResult=="0"){
        this.queryMinePageFun();//支付成功后更新页面信息
        this.$toast.success("支付成功");
        // this.$router.replace({path:"/memberCenter/paySuccess",query:{payResult}});
      }else if(payResult=="-2"){
        this.$toast.fail("支付取消");
        // this.$router.replace({path:"/memberCenter/openMember"});
      }else if(payResult=="-1"){
        this.$toast.fail("支付失败");
        // this.$router.replace({path:"/memberCenter/payError"});
      }
    },
    // 处理安卓支付宝支付后返回的结果
    alipayBack(payResult,payInfo){
      // let infos = JSON.parse(payInfo);
      if(payResult=="9000"){
        
        this.queryMinePageFun();//支付成功后更新页面信息
        this.$toast.success("支付成功");
      }else if(payResult=="8000"){
        this.$toast.fail("正在处理中");
      }else if(payResult=="4000"){
        this.$toast.fail("支付失败");
      }else if(payResult=="6001"){
        this.$toast.fail("订单取消");
      }else if(payResult=="6002"){
        this.$toast.fail("网络连接出错");
      }else if(payResult=="5000"){
        this.$toast.fail("重复请求");
      }else if(payResult=="6004"){
        this.$toast.fail("支付完成");
      }else{
        this.$toast.fail("支付错误");
      }
    },

如果有疑问,可以评论、留言。

发文不易,点赞、评论、收藏、关注支持一下呗!

 

  • 3
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
要在 Vue PC页面实现微信扫码支付,你需要使用微信支付的 Native 支付模式。具体步骤如下: 1. 向服务器获取支付二维码链接:你需要向服务器发送请求,获取支付二维码的链接。 2. 生成支付二维码:你可以使用第三方库 `qrcode` 来生成支付二维码,并将生成的二维码显示在页面上。 ```javascript import QRCode from 'qrcode' export default { data() { return { qrCodeUrl: '' // 存储二维码链接 } }, mounted() { this.getPayQrCode() }, methods: { getPayQrCode() { // 向服务器获取支付二维码链接 axios.get('/api/getPayQrCode') .then(res => { const qrCodeUrl = res.data.qrCodeUrl // 生成二维码 QRCode.toDataURL(qrCodeUrl, { errorCorrectionLevel: 'H', margin: 1 }) .then(dataUrl => { this.qrCodeUrl = dataUrl }) .catch(err => { console.error(err) }) }) .catch(err => { console.error(err) }) } } } ``` 以上代码中,`getPayQrCode` 方法向服务器获取支付二维码链接,然后使用 `qrcode` 库生成二维码,并将二维码链接存储在 `qrCodeUrl` 变量中,你可以将该变量绑定到一个 `img` 标签上来显示二维码。 3. 轮询支付状态:使用轮询的方式来查询支付状态,如果支付成功,则弹出支付成功的提示框。 ```javascript checkPayStatus() { setInterval(() => { axios.get('/api/checkPayStatus') .then(res => { const status = res.data.status if (status === 'success') { // 支付成功 this.showPaySuccess() } }) .catch(err => { console.error(err) }) }, 3000) }, showPaySuccess() { // 弹出支付成功的提示框 alert('支付成功!') } ``` 以上代码中,`checkPayStatus` 方法使用轮询的方式查询支付状态,每隔 3 秒发送一次请求,如果支付成功,则调用 `showPaySuccess` 方法弹出支付成功的提示框。 4. 调起微信扫码支付界面:在支付成功后,你需要调用微信扫码支付界面,在微信扫描支付二维码后完成支付。 ```javascript startNativePay() { const qrCodeUrl = '支付二维码的链接' const userAgent = window.navigator.userAgent.toLowerCase() if (userAgent.indexOf('micromessenger') === -1) { // 不在微信中,跳转到支付链接 window.location.href = qrCodeUrl } else { // 在微信中,调起微信扫码支付界面 window.location.href = 'weixin://wxpay/bizpayurl?url=' + encodeURIComponent(qrCodeUrl) this.checkPayStatus() } } ``` 以上代码中,`startNativePay` 方法判断当前是否在微信中,如果在微信中,则使用 `weixin://wxpay/bizpayurl?url=` 协议调起微信扫码支付界面,并将支付二维码的链接作为参数传递给微信支付界面。支付成功后,使用轮询的方式查询支付状态,如果支付成功,则弹出支付成功的提示框。 希望这能帮助到你。如果你有其他问题,请随时提出。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

船长在船上

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

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

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

打赏作者

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

抵扣说明:

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

余额充值