vue h5 对接支付宝,微信支付,微信js支付

请叫我海龟先生 等级 1092 1 1

vue h5 实现支付(支付宝,微信)

h5端实现支付难度不大,只是有些小的点需要注意下,其他的看文档撸就行了。 支付宝很简单,后端返回一个 html ,前端插入调用就行了,微信支付分两种:1、微信内支付(jsapi,微信内浏览器)2、微信外支付(h5支付)。

一、支付宝支付

// 前端啥都不用管,交给后端去干,返回 html 调用点击就好了
// 插入 v-html
this.alipayWap = payRes.data.body
// dom 就绪
await this.$nextTick()
// 调用点击
this.$refs.alipayWap.children[0].submit()

支付宝支付,支付成功后,后端可以配置回跳地址( 貌似ios和微信一样,需要用户自己去返回 ),但是没法在url上拼接参数( 我的后端是这么说多,咱不管 ),可以单独设置一个支付成功页面

二、微信支付 ---- h5 微信外

微信外其他浏览器支付也简单,由后端去干,返回一个 url 前端去跳转,然后拉起微信支付,同时可以在url上拼接支付成功后回跳的地址( 需要 encode 编码,有个点要注意,文档描述,当没有调起微信支付,或者超过5s,微信任然会跳转到拼接的地址上,关于这点文档有详细描述,同时 vue 哈希路由模式,微信回跳会把 # 后全部干掉,等于直回跳个域名,所以能不用哈希就不用哈希模式

// tips: 如果实在用了 哈希模式,可以自己拼接,把#省去,浏览器在访问时,会自动加上
let redirect_url = `${this.w_origin}/xxx/?PayType=h5wx`
window.location.replace(`${payRes.url}&redirect_url=${encodeURIComponent(redirect_url)}`)
// 同时,尽量用 window.location.replace

三、微信内支付

微信内支付就简单多了,利用微信内置对象,加上后端返回的一些信息就可以了,前提是要微信授权获取openid (这个也分两种,1、跳转授权页 2、静默授权,只获取code,后端凭借code换取openid,也称静默授权,其实看的到登录的 loding 圈),获取code和微信外支付差不多,都是跳转微信提供的地址,拼接回调地址,所以哈希永远的痛

// 调用微信内支付
        callWxPay(data) {
            let that = this
            if (typeof WeixinJSBridge == "undefined") {
                if (document.addEventListener) {
                    document.addEventListener('WeixinJSBridgeReady', that.onBridgeReady(data), false);
                } else if (document.attachEvent) {
                    document.attachEvent('WeixinJSBridgeReady', that.onBridgeReady(data));
                    document.attachEvent('onWeixinJSBridgeReady', that.onBridgeReady(data));
                }
            } else {
                this.onBridgeReady(data);
            }
        },
        // 微信浏览器支付
        onBridgeReady(payData) {
            let that = this
            WeixinJSBridge.invoke('getBrandWCPayRequest', {
                "appId": payData.appId,
                //公众号名称,由商户传入     
                "timeStamp": payData.timeStamp,
                //时间戳,自1970年以来的秒数     
                "nonceStr": payData.nonceStr,
                //随机串     
                "package": payData.packageString,
                "signType": payData.signType,
                //微信签名方式:     
                "paySign": payData.paySign //微信签名 
            },
            function(res) {
                that.$router.push( { name: "PayInfo"} )
                // if (res.err_msg == "get_brand_wcpay_request:ok") {
                //     // 使用以上方式判断前端返回,微信团队郑重提示:
                //     //res.err_msg将在用户支付成功后返回ok,但并不保证它绝对可靠。
                //     that.$router.push( { name: "PayInfo"} )
                // }else{
                //     // 微信支付失败
                //     that.$router.push({ name:"PayInfo"})
                // }
            });
        }
收藏
评论区

相关推荐

教你用200行代码写一个爱豆拼拼乐H5小游戏(附源码)
前言 本文将带大家一步步实现一个H5拼图小游戏,考虑到H5游戏的轻量级和代码体积,我没有使用react或vue这些框架,而采用我自己写的dom库和原生javascript来实现业务功能,具体库代码可见我的文章如何用不到200行代码写一款属于自己的js类库(https://juejin.im/post/6844903880707293198),构建工具我采
Android webview 与 js(Vue) 交互
js 与原生交互分为两种情况:js 调用原生方法,原生调用 js 方法。 本文将对这两种情况分别讲解,H5 端用 vue 实现。 一、前期准备(Vue项目准备) 本文的 H5 端用Vue 实现,所以在正式开始前先把 Vue 项目环境准备好。 项目写好后,执行 npm run serve 命令启动项目,启动成功后会在命令
Taro 入门教程
简介 Taro 是一个遵循 React 语法规范的开放式跨端跨框架解决方案,支持使用 React/Vue/Nerv 等框架来开发微信/京东/百度/
vue h5 对接支付宝,微信支付,微信js支付
vue h5 实现支付(支付宝,微信) h5端实现支付难度不大,只是有些小的点需要注意下,其他的看文档撸就行了。 支付宝很简单,后端返回一个 html ,前端插入调用就行了,微信支付分两种:1、微信内支付(jsapi,微信内浏览器)2、微信外支付(h5支付)。 一、支付宝支付 // 前端啥都不用管,交给后端去干,返回 html 调用点击就好了 /
Vue和微信小程序的区别
_写了vue项目和小程序,发现二者有许多相同之处,在此想总结一下二者的共同点和区别。_一、生命周期先贴两张图: vue生命周期 小程序生命周期相比之下,小程序的钩子函数要简单得多。vue的钩子函数在跳转新页面时,钩子函数都会触发,但是小程序的钩子函数,页面不同的跳转方式,触发的钩子并不一样。 onLoad
java版本springcloud+springboot+mybatis 分布式 微服务 多租户 电子商务 直播带货 短视频带货 社交电商平台
涉及平台:平台管理(包含自营店面)、商家端(PC端、手机端)、买家平台(PC端、H5/公众号、小程序、APP端(IOS/Android)、微服务平台(业务服务) 核心架构:Spring Cloud、Spring Boot、Mybatis、Redis、SFTP 前端框架:VUE、Uniapp、Bootstrap/H5/CSS3、IOS、Android、小程
H5开发遇到的问题,以及苹果兼容的一些坑
1.H5的localStorage第二次打开的时候不会清除,例如: 微信公众号第一次登陆之后存一个 localStorage.setItem("login","true"); 然后关闭微信,再重新进去,获取 localStorage.getItem("login"); 这个打印出来的值是为true的。 2.苹果手机微信用的WKWebview
HTML5基础知识(一)
Web网页的开发主要包括H5+CSS+JS三个部分,这里先学习一下H5的基础知识。 一、基础语法 ====== 1\. html的基本格式 ------------- <!DOCTYPE html> <html lang="en"> <!--根标签--> <head> <!--头部
HTML5游戏开发凭什么这么火?看了你就知道了...
很多人都会问[H5游戏](https://www.oschina.net/action/GoToLink?url=http%3A%2F%2Fedu.51cto.com%2Fcourse%2Fcourse_id-1307.html)有前途吗?其实我个人是比较看好H5的前景,尤其是在这个移动互联网的时代,Web技术的触角必然会深入到各个领域. 当然H5目前仍然
h5 接入微信支付
我们公司,现在用ping++ 做h5接入,用的是 h5"壹收款" 准备: === 如果公司,现在还没有公众号的话,支付宝。 可以把这些工作,给ping++ 来做这些事情  1. 注册微信公众号,开通支付功能。 2. 注册ping++  (如果是自己 开开通的微信 支付,要填写相关信息) 3. 微信设置[网页授权获取用户基本信
2019年前端面试题总结以及一些面试心得(附答案)
**前沿** 小编在这几年的前端开发过程中,经历了由js,jquery到vue,由操作dom到数据驱动页面,由只写pc网站,到写移动端网页,再到移动端app,再到微信公众号,小程序,可谓是风云变幻,不得不感叹H5的能力越来越强,正所谓学到老,活到老大概说的就是程序员吧。在悲催的经历了互联网公司一家又一家倒闭,带来的是我也经历了无数次的面试,也算是系统的过了
2019年前端面试题总结以及一些面试心得(附答案)
**前沿** 小编在这几年的前端开发过程中,经历了由js,jquery到vue,由操作dom到数据驱动页面,由只写pc网站,到写移动端网页,再到移动端app,再到微信公众号,小程序,可谓是风云变幻,不得不感叹H5的能力越来越强,正所谓学到老,活到老大概说的就是程序员吧。在悲催的经历了互联网公司一家又一家倒闭,带来的是我也经历了无数次的面试,也算是系统的过了
ExMobi+Agile Lite开发内置浏览器APP
微信对内置浏览器的定制封装,使得H5的流量入口再次重新被定义。在原生程序中使用H5也成为非常必要的一种搭配。这也得益于H5对于简单的浏览性质的内容可以很好的进行展现和传播。 由于在实际项目中有需要在移动端使用到H5,而大部分H5页面都是来源于网络的,所以这里尝试使用[ExMobi](https://www.oschina.net/action/GoToLi
SpringBoot+Vue实现文件上传+预览
从松哥的微信公众号上面看到了[SpringBoot+Vue实现文件上传+预览](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Fmp.weixin.qq.com%2Fs%2FKi6sJbAS-24OPn9YcnrZhQ)的视频教程,如下图所示: ![SpringBoot+Vue实现文件上
SpringBoot+Vue实现文件上传+预览
从松哥的微信公众号上面看到了[SpringBoot+Vue实现文件上传+预览](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Fmp.weixin.qq.com%2Fs%2FKi6sJbAS-24OPn9YcnrZhQ)的视频教程,如下图所示: ![SpringBoot+Vue实现文件上