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

请叫我海龟先生 等级 594 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),构建工具我采
每天学点 JS 编码规范(1):Types 和 References
每天学点 JS 编码规范(1):Types 和 References 前端大全 微信号 FrontDev 功能介绍 分享 Web 前端相关的技术文章、工具资源、精选课程、热点资讯 _前天_ 收录于话题 (给前端大全加星标,提升前端技能) 英文:AirBnB,翻译:Kak
Android webview 与 js(Vue) 交互
js 与原生交互分为两种情况:js 调用原生方法,原生调用 js 方法。 本文将对这两种情况分别讲解,H5 端用 vue 实现。 一、前期准备(Vue项目准备) 本文的 H5 端用Vue 实现,所以在正式开始前先把 Vue 项目环境准备好。 项目写好后,执行 npm run serve 命令启动项目,启动成功后会在命令
Taro 入门教程
简介 Taro 是一个遵循 React 语法规范的开放式跨端跨框架解决方案,支持使用 React/Vue/Nerv 等框架来开发微信/京东/百度/
微信小程序支付功能全流程实践
前言 微信小程序为电商类小程序,提供了非常完善、优秀、安全的支付功能。在小程序内可调用微信的API完成支付功能,方便、快捷。小程序开发者在开发小程序时,支付流程是必然要接触到,今天胡哥就小程序支付的全流程为大家一一细说,让小伙伴能快速得掌握小程序支付能力,避免踩坑! 知己知彼,方能百战不殆 小程序支付流程图 小程序支付交互流程图(https:/
Vue 组件通信方式及其应用场景总结
前言 相信实际项目中用过vue的同学,一定对vue中父子组件之间的通信并不陌生,vue中采用良好的数据通讯方式,避免组件通信带来的困扰。今天笔者和大家一起分享vue父子组件之间的通信方式,优缺点,及其实际工作中的应用场景 首先我们带着这些问题去思考 1 vue中到底有多少种父子组件通信方式? 2 vue中那种父子组件最佳通信方式是什么? 3
微信小程序modal
首先创建一个组件component,组件命名可以为modal modal.wxml的内容为 <view class'modalmask' wx:if'{{show}}' bindtap'clickMask' <view class'modalcontent' <scrollview scrolly class'mainc
微信小程序以及所有js小数计算位数问题
微信小程序计算小数出现小数点后重复精度问题 {{0.010.2}} 解决办法有两种: 方法一、使用toFixed(2) data:{
vue h5 对接支付宝,微信支付,微信js支付
vue h5 实现支付(支付宝,微信) h5端实现支付难度不大,只是有些小的点需要注意下,其他的看文档撸就行了。 支付宝很简单,后端返回一个 html ,前端插入调用就行了,微信支付分两种:1、微信内支付(jsapi,微信内浏览器)2、微信外支付(h5支付)。 一、支付宝支付 // 前端啥都不用管,交给后端去干,返回 html 调用点击就好了 /
【Electron】electron-vue 借助 element-ui UI 库助力桌面应用开发
前面文章我们讲过 electron 让可以用 HTML、JS、CSS 开发桌面应用程序。而 electronvue 是一个结合了 electron 与 vue 的套件。这样我们就能方便地使用 vue 快速开发桌面应用。但是,vue 只是在 js 这层面做了大量的便捷的操作。对 UI 并未过多涉及。此时如果您在开发过程中自己实现一套统一主题的 UI 视觉效果
微信小程序字符串展示为二维码
微信小程序中要将一个字符串展示为二维码的形式,需要引入该js文件 // Core code comes from https://github.com/davidshimjs/qrcodejsvar QRCode;(function () { / Get the type by string length
VUE3(七)vue项目抽离.vue文件中的js、css代码
平常再做开发的时候,一般情况下不会将html,js,css代码写到一个文件中。基本上都会写在各自对应的文件中,然后再引入即可。那么在VUE中我们如何抽离vue文件中的js,与css代码呢? 1:抽离javascriptHome.vue<template <div <div :style"{ padding: '24px', back
微信小程序 - 引入字体图标
网站图标要想做到清晰无锯齿,使用普通图片或者雪碧图都很难达到这个目的,一般我们都会引入字体图标(svg转font,使用图标像使用字体一样,详见《web页面使用字体图标》,那么如何在微信小程序中使用自定义图标呢?请看详细步骤:1、从上选择喜欢的图标加入购物车,在购物车弹窗中点击“下载代码”后,解压阿里图库 加入购物车购物车 下载代码图标文件内容2.、进入导入第
Vue和微信小程序的区别
_写了vue项目和小程序,发现二者有许多相同之处,在此想总结一下二者的共同点和区别。_一、生命周期先贴两张图: vue生命周期 小程序生命周期相比之下,小程序的钩子函数要简单得多。vue的钩子函数在跳转新页面时,钩子函数都会触发,但是小程序的钩子函数,页面不同的跳转方式,触发的钩子并不一样。 onLoad
微信小程序体验composition-api(类似vue3)
微信小程序compositionapi用该是什么样子? 使用使用起来应该像是这个样子wxue(options) setup配置应该是包含一个setup选项是一个函数,返回的函数可以this.xxx调用,返回的数据可以this.data.xxx用到,如下import wxue, reactive from 'wxue'wxue( setup(option