支付宝、微信核心代码

最新推荐文章于 2024-08-23 15:54:50 发布

April_zk

最新推荐文章于 2024-08-23 15:54:50 发布

阅读量480

点赞数 8

文章标签：微信 java 前端

本文链接：https://blog.csdn.net/qq_45747074/article/details/135865168

版权

本文详细描述了如何在前端处理微信支付和支付宝支付，包括轮询检查订单状态、微信支付的二维码获取以及支付宝支付后的重定向处理，特别关注了跨域和token验证问题。

摘要由CSDN通过智能技术生成

支付核心代码

1.判断是微信支付还是支付宝支付

2.微信支付需要进行轮询；支付宝配置支付成功后的重定向地址【注意地址是否跨域，token 是否失效】

if (flags === 'wechatPay') {
    //   微信支付
    await getWxCode()
    
    // 轮询查询订单状态
    timers.value = setInterval(async () => {
      //   查询订单是否支付成功
      await queryOrderStatus();
    }, 3000)

  } else {
    //   支付宝支付
    const res = await aliPayTransactions({orderId: targetOrderId.value})
    if (res.code !== 200) {
      ElMessage.error(res.message)
      return
    }
    dialogVisibleInner.value = true;
    let newTab = window.open();
    newTab.document.write(res.result);
  }

获取微信二维码

const getWxCode = async () => {
  await wxPayTransactions({type: "native", orderCode: targetOrderId.value}).then(res => {
    code_url_wx.value = res.code_url
    dialogVisible.value = true
  }).catch(err => {
    ElMessage.error(err)
  })
}

微信轮询订单

// 查询订单号 wx
const queryOrderStatus = async () => {
  const res = await wxPayQuery({orderNo: targetOrderId.value})
  if (res.trade_state === 'SUCCESS') {
    clearInterval(timers.value);
    //   三秒后跳转到支付成功的页面
    setTimeout(() => {
      router.push({path: '/personal/paySuccess', query: {orderNo: targetOrderId.value}})
    }, 3000)
  } else {
    console.log('等待支付中...')
  }
}