vue支付功能怎么实现,vue 支付宝支付
本文主要介绍了vue项目中支付功能的实现(微信支付和支付宝支付)，通过实例代码进行了非常详细的介绍，具有一定的参考价值。感兴趣的朋友可以参考一下。
目录
项目中常见的支付方式支付宝支付微信支付
项目中常见的支付方式
支付支付宝微信支付尾款(也需要支付宝或微信充值)。注：本文仅从前端角度解释。
支付宝支付
项目困难：
页面h5是一个网页。用支付宝支付必须经过支付宝授权。调用支付宝的api。
(如何授权请参考调用支付宝api)
支付宝支付的一般流程是：
调用订单接口获取订单号、付款金额等。
将订单编号和金额传送至预付款接口。
后台会返回一个表格，然后提交表格自动跳转到支付宝支付页面。
支付流程：
下图是接口单据和付款接口。
当我们选择支付宝时，radio=1；
当我们单击pay按钮时，将执行pay()方法。
这时我们调用后端支付接口，接口文档需要字段、订单号、金额等。
后台发给我们一个{代码：201，数据： }；
此时，我们将表单注入我们的页面，让表单提交，跳转到支付宝页面。
topay(){
开关(this.radio){
案例“3”:
this . yuer()；
打破；
案例“1”:
this . Zhifu Bao()；
案例“0”:
this . getwechatcode()；
}
},
智付宝(){
payByZhifubao(
{
trade no: oct 20200909095646265303127 ，//商户订单号，商户网站订单系统中唯一的订单号，必输。确保商户端唯一。
主题：“移动网站支付测试”，//主题
产品代码： QUICK_WAP_WAY ，
正文：‘移动网站支付描述信息’，//产品描述，可以为空。
TotalAmount: 20 //付款金额，必填}
).然后(res={
console . log(RES)；
if (res.code===201) {
//将数据保存到vuex
//这个。$store.dispatch(addAliFrom ，res.data.data)
this.html=RES . data；
var form=res.data
const div=document . createelement( div )；
div.innerHTML=form//这里form是后台返回接收到的数据。
document . body . appendchild(div)；
文档.表单[0]。submit()；
//返回这个。$ router . push(/支付宝)
}否则{
返回警报(RES . data . msg)；
}
})
},
微信支付
步骤：
微信支付后台程序员给你一个地址。首先，我们需要安装qrcodejs2，将地址转换成二维码。我们需要先安装二维码JS2。
然后你需要一个div来存储这个微信二维码。可以用宽度和高度样式写在css里。我这里也加了一个加载，有需要可以自己加。
div id= we chat code v-loading= loading
Element-loading-text=拼命加载
element-loading-spinner= El-icon-loading
元素-加载-背景=rgba(0，0，0，0.8)
/div
导入模块
从“qrcode js2”导入代码/导入QR代码
下面是界面数据采集然后是二维码操作。
getWechatCode() {
模型。getModel(微信支付)。获取({
orderId:this.orderId
})。然后(res={
if(res.data.code==200){
this . we chat payurl=RES . data . result data
如果(！this.flag){
//重点就在这里，剩下的就是我的切换业务逻辑和接口了。
let wechatcode=new二维码( wechatcode ，{
宽度：200，
身高：200，
正文：this.wechatPayUrl，//二维码地址
color dark:“# 000”，
颜色灯： #fff ，
})
}
this.flag=true
this.loading=false
this.isWechatCodeShow=true
}
})
},
微信扫描支付完成后，后台工作人员才能得到支付成功的结果，并返回给前台工作人员，所以前台工作人员只能不断调整界面，查看是否已经支付。这里可以用生命周期做轮询，跳出后需要销毁。
已安装(){
this.getWechatCode()
//实现轮询
this . interval=window . setinterval(()={
setTimeout(this.getOrderStatus()，0)；
}, 3000);
},
销毁前(){
//清除轮询
clearInterval(this.interval)
this.interval=null
},
这里的getOrderStatus()方法用于查询后台支付状态。如果成功跳转到支付页面，做一个If else判断。
关于vue项目中支付功能(微信支付和支付宝支付)实现的这篇文章到此为止。更多vue项目相关支付内容，请搜索我们之前的文章或者继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。