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

请叫我海龟先生
• 阅读 1813

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"})
                // }
            });
        }
点赞
收藏
评论区
推荐文章
展菲 展菲
1年前
iOS 微信支付开发(最新版)
1. 介绍 本文为以前做的项目总结,由于相关支付 SDK 迭代,原文已经不满足需求,故作如下更新,供大家参考,另外增加常见问题总结。 项目中要用到支付功能,需要支付宝支付、微信支付、银联支付、Apple_pay,所以打算总结一下,方便以后的查阅,也方便大家, 用到的地方避免再次被坑。 今天我们就主要介绍一下微信支付,其他支付介绍后面会尽快更新出来。
翼
1年前
微信支付 (JSSDK支付)
官方文档 微信支付 https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter7_7&index6 微信授权获取code https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JSSDK.html58 准备工作 微信公
blmius blmius
1年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录 问题 用navicat导入数据时,报错: 原因这是因为当前的MySQL不支持datetime为0的情况。 解决修改sql\mode: sql\mode:SQL Mode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。 全局s
展菲 展菲
1年前
iOS 支付宝支付开发(最新版)
1. 介绍 本文为以前做的项目总结,由于相关支付 SDK 迭代,原文已经不满足需求,故作如下更新,供大家参考,另外增加常见问题总结。 今天我们就主要介绍一下支付宝支付,其他支付介绍后面会尽快更新出来。 在做支付之前,在网上也查寻了资料,大多都说,支付接入坑太多,微信坑最多,银联文档太复杂。 其实如果接入的多的话,那些套路都可以绕着走。 网上的经验什么的
小森森 小森森
6天前
校园表白墙微信小程序V1.0 SayLove -基于微信云开发-一键快速搭建,开箱即用
后续会继续更新,敬请期待2.0全新版本 欢迎添加左边的微信一起探讨!项目地址:](https://www.aliyun.com/activity/daily/bestoffer?userCodesskuuw5n) \2. Bug修复更新日历 2. 情侣脸功能大家不要使用了,现在阿里云的接口已经要收费了(土豪请随意), \ \ 和 注意
Stella981 Stella981
11个月前
KVM调整cpu和内存
一.修改kvm虚拟机的配置 1、virsh edit centos7 找到“memory”和“vcpu”标签,将 <name>centos7</name> <uuid>2220a6d1-a36a-4fbb-8523-e078b3dfe795</uuid>
Easter79 Easter79
11个月前
thinkcmf+jsapi 实现微信支付
首先从小程序端接收订单号、金额等参数,然后后台进行统一下单,把微信支付的订单号返回,在把订单号发送给前台,前台拉起支付,返回参数后更改支付状态。。。 回调 public function notify() { $wechat=Db::name('wechat')->where('status',1)->find();
Wesley13 Wesley13
11个月前
MySQL查询按照指定规则排序
1.按照指定(单个)字段排序 select * from table_name order id desc; 2.按照指定(多个)字段排序 select * from table_name order id desc,status desc; 3.按照指定字段和规则排序 selec
Wesley13 Wesley13
11个月前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
#### 背景描述 # Time: 2019-01-24T00:08:14.705724+08:00 # User@Host: **[**] @ [**] Id: ** # Schema: sentrymeta Last_errno: 0 Killed: 0 # Query_time: 0.315758 Lock_
helloworld_34035044 helloworld_34035044
2个月前
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。 uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid() 或 uuid(sep)参数说明:sep 布尔值,生成的uuid中是否包含分隔符'',缺省为