vue pc端web页面微信支付和支付宝支付

2024-03-27 02:04:36

业务场景介绍：

pc端支持微信支付 [ Native支付官方API] && 支付宝支付 [电脑网站支付官方API ]

订单生成逻辑：前端请求后端提交订单，后端去和微信或者支付宝对接生成订单（后续支付都是这个逻辑进行的对接）

一、vue中pc端微信支付怎么去玩？

这里大部分工作量是后端的事情，订单的生成由后端去和腾讯对接的，前端只需要负责将后端返回来的支付二维码（由后端生成的，有些情况也可以前端去对接订单生成之后由前端自己生成二维码，这种情况比较少）展示在终端供用户扫码即可：
1.二维码展现窗口

2.请求后端的支付二维码接口

3.唤起二维码支付页面

4.扫码完成支付即可，后续完成支付就是项目中的业务逻辑了。至此微信PC端支付已完成，前端的工作量是不是很少~

二、vue中pc端支付宝支付怎么玩？

上述微信支付这么简单，同理pc端的支付宝支付也很简单，因为业务层与支付宝做订单交互还是后端处理的，所以前端的工作量就相当简单。
1.这里需要一个承载页面，来承载后端与支付宝完成交互之后，请求后端支付接口会返回一个from表单，前端只需要负责把它展现给用户扫码即可，承接页面如下（为了方便ctrl+c这里贴代码）：

<template><div v-html="html"></div>
</template><script>import { videoPay } from '@/api/pay.js'export default {data(){return{html:''}},methods:{fetchVideoPay(){let param={orderId: this.$route.query.orderId};videoPay(param).then( res => {this.html = res.data;this.$nextTick(() => {document.forms[0].submit()})})}},mounted(){this.fetchVideoPay()}}
</script>

2.到达承载页面之后会出来支付宝的二维码页面：

3.用户扫码完成之后，进入支付宝倒计时页面后续就是业务逻辑处理了，至此支付宝PC支付也已经完成。

移动端H5支付（微信+支付宝）点击查看

vue pc端web页面微信支付和支付宝支付相关推荐

【vue+pc端】实现微信扫码登录pc端，后端通过微信开发平台，前端生成二维码（仅供参考）
这两周的需求是通过微信扫码登录pc端,刚定下需求原型图还没出来前,后端特意发了微信开发平台的链接给我,关于如何生成二维码的文档,以及扫码跳转后如何传code给他. 请戳这里准备工作|微信开放文档我最 ...
微信 PC 端h5页面打开的内置浏览器开发者工具界面
困境项目开发的h5页面需要在微信端支持转发.分享功能,以及企业微信授权等相关权限功能,h5页面功能开发可以直接在Chrome浏览器的移动端模式开发,但是涉及微信权限时的一些功能,则需要在微信和企业微 ...
Vue app安卓端移动端实现微信支付和支付宝支付
当前项目借助调用安卓和ios方法跳转第三方支付平台实现微信支付和支付宝支付涉及到的安卓方法: window.AndroidFunction.wxpay('传递的参数') // 点击确认支付hand ...
前端app调起摄像头只显示在页面_猫也能看得懂的教程之一分钟使用Vue搭建简单Web页面...
本教程适合人群: 已经了解过过html.js.css,想深入学习前端技术的小伙伴有前端开发经验.但是没有使用过Vue的小伙伴有过其他编程经验,对前端开发感兴趣的小伙伴学习本教程之后你将会: 了解 ...
vue移动端html5页面根据屏幕适配的四种解决方法
最近做了两个关于h5页面对接公众号的项目,不得不提打开微信浏览器内置地图导航的功能确实有点恶心.下次想起来了的话,进行总结分享一下如何处理.在vue移动端h5页面当中,其中适配是经常会遇到的问题,这块 ...
移动端web和PC端web的区别汇总笔记
页面的适配性: 传统PC端的页面开发一般都会选择给页面设定一个固定宽度,两侧有留白,但是移动端的页面由于其载体手机屏幕比PC要小很多,一般都会选择尽可能多的在手机屏幕上显示内容,这就要求移动端页面要能 ...
vue PC 端使用腾讯地图定位
vue PC 端使用腾讯地图定位需求:希望网站显示当前城市腾讯前端定位组件解决的方法定义一个文件,加载定位js 在vue页面中使用需求:希望网站显示当前城市腾讯前端定位组件 key的申请, ...
Win10环境前后端分离项目基于Vue.js+Django+Python3实现微信(wechat)扫码支付流程(2021年最新攻略)
原文转载自「刘悦的技术博客」https://v3u.cn/a_id_182 之前的一篇文章:mpvue1.0+python3.7+Django2.0.4实现微信小程序的支付功能,主要介绍了微信小程序内 ...
Win10环境前后端分离项目基于Vue.js+Tornado+Python3实现微信(wechat)扫码支付流程
在生活具有广泛性.高效性.使用方便性的支付方式是扫码支付,扫码的优点在于推广成本低,上至钓鱼台国宾馆,下至发廊地摊都能用,打印出来就完事了,而相比其他支付方式,现金的找零及假钞问题,信用卡的办理门槛. ...

最新文章

热门文章