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

最近在工作中，有个H5页面需要实现微信支付和支付宝支付的功能，现在已经完成，抽个时间写出来，分享给有需要的人。

第一步：先判断当前环境

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

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_requestif (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.dataconst div = document.createElement('div')div.id = 'alipay'div.innerHTML = resDatadocument.body.appendChild(div)document.querySelector('#alipay').children[0].submit() // 执行后会唤起支付宝}}).catch((err) => {})

H5页面中调用微信和支付宝支付相关推荐

iOS H5 调用微信、支付宝支付无法返回app 解决方案
最新项目中遇到H5页面中调用微信.支付宝客户端支付的需求,虽然这并不是推荐的做法,但是需求确实存在...加载h5页面点击支付调起需要支付的客户端(微信或者支付宝). 微信支付解决方案: 1.首先要设置 ...
陪玩系统源码开发，H5页面中调用支付功能的实现
最近在陪玩系统源码开发工作中,有个H5页面需要实现微信支付和支付宝支付的功能,现在已经完成,抽个时间写出来,分享给有需要的人. 第一步:先判断当前环境判断陪玩系统源码中用户所属环境,根据环境不同,执 ...
在H5页面中禁止微信分享转发按钮-mugeda
在H5页面中禁止微信分享转发按钮(mugeda) 在页面脚本中插入以下代码方法一: 加一段js代码 document.addEventListener('WeixinJSBridgeReady', ...
在H5页面中禁止微信分享转发按钮
在H5页面中禁止微信分享转发按钮(mugeda) 在页面脚本中插入以下代码方法一: 加一段js代码 document.addEventListener('WeixinJSBridgeReady', ...
Android H5页面调起微信和支付宝付款
一.前提条件:后端已经生成了支付链接微信是支持H5在非微信内核的浏览器调起支付的,只是流程很麻烦,需要企业账号申请才行,并且周期较长.微信官方开通说明申请入口:登录商户平台–>产品中心–&g ...
关于Java调用微信、支付宝支付提现
前言: 本篇文章介绍关于自己写的一个集成微信.支付宝的支付.提现等功能的介绍,本项目已在码云上进行开源,欢迎大家一起来进行改造,使进行更好的创新供大家使用:也有对应的pom文件坐标可以导入,因目前不知 ...
如何在h5页面中调用摄像头来完成拍照之类的操作
一.该案例情况框架:vue: 运行环境:PC; 二.准备在pc端中需要使用https地址才可以访问到摄像头流信息, 所以在生产环境中,我们可以通过vue.config.js来配置localhost ...
H5页面中添加微信公众号关注链接
用下面地址做个链接,点击就会跳转到公众号关注页面,点击关注按钮,就能直接关注 https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz ...
微信小程序webview(H5页面)调用微信小程序支付
1.业务描述:微信小程序商城入口进入的页面是商城H5页面,在H5页面进行微信支付如何实现: 2.微信小程序(webview访问H5页面)必须使用微信小程序支付: 如何实现以及实现方式以及支付后页面返回 ...

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

第一步：先判断当前环境

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

第三步：

H5页面中调用微信和支付宝支付相关推荐

最新文章

热门文章