首页 > 其他分享 >H5页面中调用微信和支付宝支付

H5页面中调用微信和支付宝支付

时间:2023-07-26 16:26:01浏览次数:38  
标签:支付宝 微信 支付 H5 res document data

第一步:先判断当前环境

判断用户所属环境,根据环境不同,执行不同的支付程序。

if (/MicroMessenger/.test(window.navigator.userAgent)) {
            // alert('微信');
        } else if (/AlipayClient/.test(window.navigator.userAgent)) {
            //alert('支付宝');
        } else {
            //alert('其他浏览器');
        }

第二步:如果是微信环境,需要先进行网页授权

网页授权的详细介绍可以查看微信相关文档。这里不做介绍。

第三步:

1、微信支付

微信支付有两种方法: 1:调用微信浏览器提供的内置接口WeixinJSBridge 2:引入微信jssdk,使用wx.chooseWXPay方法,需要先通过config接口注入权限验证配置。 我这里使用的是第一种,在从后台拿到签名、时间戳这些数据后,直接调用微信浏览器提供的内置接口WeixinJSBridge即可完成支付功能。

 
getRequestPayment(data) {
				function onBridgeReady() {
					WeixinJSBridge.invoke(
						"getBrandWCPayRequest", {
							"appId": data.appId, //公众号ID,由商户传入     
							"timeStamp": data.timeStamp, //时间戳,自1970年以来的秒数     
							"nonceStr": data.nonceStr, //随机串     
							"package": data.package,
							"signType": data.signType, //微信签名方式:     
							"paySign": data.paySign //微信签名 
						},
						function(res) {
							alert(JSON.stringify(res));
							// get_brand_wcpay_request
							if (res.err_msg == "get_brand_wcpay_request:ok") {
								// 使用以上方式判断前端返回,微信团队郑重提示:
								//res.err_msg将在用户支付成功后返回ok,但并不保证它绝对可靠。
							}
						}
					);
				}
				if (typeof WeixinJSBridge == "undefined") {
					if (document.addEventListener) {
						document.addEventListener(
							"WeixinJSBridgeReady",
							onBridgeReady,
							false
						);
					} else if (document.attachEvent) {
						document.attachEvent("WeixinJSBridgeReady", onBridgeReady);
						document.attachEvent("onWeixinJSBridgeReady", onBridgeReady);
					}
				} else {
					onBridgeReady();
				}
			},

2、支付宝支付

支付宝支付相对于微信来说,前端这块工作更简单 ,后台会返回给前端一个form表单,我们要做的就是把这个表单进行提交即可。相关代码如下:

this.$api.alipayPay(data).then((res) => {
                // console.log('支付宝参数', res.data)
                if (res.code == 200) {
                    var resData =res.data
                    const div = document.createElement('div')
                    div.id = 'alipay'
                    div.innerHTML = resData
                    document.body.appendChild(div)
                    document.querySelector('#alipay').children[0].submit() // 执行后会唤起支付宝
                }

            }).catch((err) => {
            })

 

 微信支付文档链接:https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=7_7&index=6

标签:支付宝,微信,支付,H5,res,document,data
From: https://www.cnblogs.com/zhenfeng25/p/17582784.html

相关文章

  • H265格式兼容各个浏览器网页web端H5播放方案
    可能有很多朋友会遇到H265格式的视频流无法播放,毕竟现在很多相机都支持h265了,确实有很多优点,但是它最大的问题就是很多浏览器无法播放,也有部分浏览器能够兼容h265,但是总不能让用户指定浏览器使用吧,下面来说说怎么兼容各个浏览器播放无非两种方案,第一种就是使用ffmpeg进行转码,这种方......
  • 微信小程序request请求
    request.js //新建http文件夹的request.js//constbaseUrl=require("../utils/env1").dev;//测试环境constbaseURL="https://v.api.aa1.cn/api/pyq";//公用总路径地址//专属域名//暴露出去一个函数,并且接收一个外部传入的参数exportconstrequest=(params)......
  • 基于微信小程序的校园设备报修平台的设计与实现-计算机毕业设计源码+LW文档
    【摘要】随着互联网技术的发发展,计算机技术广泛应用在人们的生活中,逐渐成为日常工作、生活不可或缺的工具。在高校,各种管理系统层出不穷,为校园设备报修管理开发必要的系统,能够有效的提升管理效率。一直以来,校园设备报修一直没有进行系统化的管理,学生无法快速进行报修,由此提出开发基......
  • 个微微信API
    你可以用微信机器人api实现个性化微信功能(例:营销系统、机器人小助手、客服系统等),用来自动管理微信消息。能开发的功能包括但不限于:**好友管理**:添加好友、删除好友、修改备注、创建标签、获取好友列表、检测僵尸粉**消息管理**:发文本消息、图片消息、名片消息、动图表情、小......
  • 实习微信机器人API开发
    现在网络上资源聚集复杂,当我们想要实现一个功能时,我们已经没有必要像前辈们那样来进行繁重的造轮子的工作。目前,随着人教育体系的提高,培养出专业性人才,为解决繁重的工作带来质的飞越,也就是微信机器人的开发,帮我们抵抗了绝大部分繁重的压力。接下来向大家介绍的一所微信机器人其功......
  • 前端Vue仿支付宝自定义可滑动轮播分页宫格菜单组件,可支持九宫格 十二宫格 十五宫格
    背景介绍随着技术的不断发展,传统的开发方式使得系统的复杂度越来越高。在传统开发过程中,一个小小的改动或者一个小功能的增加可能会导致整体逻辑的修改,造成牵一发而动全身的情况。为了解决这个问题,我们采用了组件化的开发模式。通过组件化开发,可以有效地实现单独开发,单独维护,而且......
  • CH592 IWDG独立看门狗
    独立看门狗(IWDG)由专用的内部低速时钟(LSI)驱动,能够在低功耗模式下正常工作。 根据寄存器描述,IWDG最大时间可以是(0xFFF/(32K/512))=65.52s代码如下:#defineFEED_IWDG(){R32_IWDG_KR=0xAAAA;}//需要定时调用喂狗看门狗初始化voidIWDG_Enable(){R32_IWDG_KR=0......
  • 微信 8.0 来啦,炸裂!
    阅读本文大概需要2.3分钟。前两天微信公开课十年之约,相信不少人都看直播了,直播过程中,龙哥除了讲解了他一直坚持的产品理念之外,还透漏了一些微信新版本的功能,就在刚刚,微信8.0新版本来啦,话不多说,直接给大家简单解析下新版本有哪些炸裂的功能吧。1.先给大家来一波微信8.0的欢迎......
  • 个人微信E云管家API
    E云 是一套完整的的第三方服务平台,包含微信API服务、企微API服务、SCRM系统定制、企微系统定制、服务类软件定制等模块,本文档主要讲述个微API服务相关,以下简称API,它能处理用户微信中的各种事件,提供了开发者与个微对接的能力,技术上来讲是一款基于微信提供的个人开放性API,使用简单,......
  • PC微信 3.9.6 正式版终于来,大家一起来看看更新的功能
    今天给大家分享PC微信3.9.6 内测版本新增了哪些功能,带大家一起来看看吧!PC微信3.9.6内测官方更新日志PC微信内测依旧和之前一样,只有你有申请过之前版本的内测的话,获取到权限之后就可以一直进行体验内测的版本,不然你会没有权限进行体验。本次的PC微信3.9.6内测更新的日志:-可......