首页 > 其他分享 >微信公众号h5调用微信支付

微信公众号h5调用微信支付

时间:2023-09-12 17:48:02浏览次数:46  
标签:调用 必填 微信 h5 支付 nonceStr data

微信公众号h5调用微信支付其实就是 JSAPI支付
目前jsapi支付分v2和v3,现在尽量接v3的api。因为v2前端调用wx.chooseWXPay的时候成功没有回调,导致后续业务逻辑跳转有问题(原因就是可恨的点金计划)点金计划就是支付成功之后跳转到一个官方小票+广告的页面,点金计划开通的门槛稍微有点高,所以建议大家直接接入v3的微信支付。

this.$wx.config({
					debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
					appId: this.$appConfig.appid, // 必填,公众号的唯一标识
					timestamp: data.timeStamp, // 必填,生成签名的时间戳
					nonceStr: data.nonceStr, // 必填,生成签名的随机串
					signature: data.signature, // 必填,签名
					jsApiList: ['getBrandWCPayRequest'] // 必填,需要使用的JS接口列表});
				})
				this.$wx.ready(() => {
					this.$wx.invoke('getBrandWCPayRequest', {
							appId: this.$appConfig.appid, //公众号ID,由商户传入     
							timeStamp: data.timeStamp, //时间戳,自1970年以来的秒数     
							nonceStr: data.nonceStr, //随机串     
							package: data.package,
							signType: data.signType, //微信签名方式:     
							paySign: data.paySign
						},
						function(res) {
							if (res.err_msg == "get_brand_wcpay_request:ok") {
                                // 判断支付成功跳转到支付后续的业务的页面
								uni.navigateTo({
									url: `/pages/xxxx/xxxx`
								})
							}
						});
				})

代码中的appIdtimeStampnonceStrpackagesignTypepaySign参数均由后端返回。
其实前端调用支付特别简单,调一下方法就可以了。

标签:调用,必填,微信,h5,支付,nonceStr,data
From: https://www.cnblogs.com/mynl/p/17690157.html

相关文章

  • Open Feign调用返回值失败: feign.codec.DecodeException: syntax error, pos 1
    【问题描述】使用OpenFeign调用第三方微服务的时候,可以找到对应的微服务和方法,只是在返回数据的时候报错了,具体报错信息如下:2023-09-0809:42:42.035INFO7---[http-nio-8233-exec-9]c.c.common.config.seata.FeignDecoder:feign调用响应:app-websocket-test2023-09-0809......
  • H5的优势有哪些?
    H5可以用来做网页端、移动端、微信小程序以及APP等各种用户界面和功能,达到用户想要的需求。那么,H5的优势有哪些?1.从开发角度来讲,H5具有良好的跨平台性,开发者只需要开发一个版本,就可以在各类平台上投入使用,进而极大的节省开发和运维的成本。2.从整个移动互联网产业发展角度来讲,H5......
  • 在线CAD(H5网页CAD SDK)实现阵列功能
    前言在线CADSDK的集成过程中,甲方客户可能有阵列功能的需求,作为开发者如何利用WEBCADSDK展现此功能效果呢?本章节我们重点讲述一下。首先看一下在线CAD的DEMO:https://demo.mxdraw3d.com:3000/mxcad/,阵列功能如下图: 环境搭建首先按照mxcad入门文档(https://mxcadx.gitee.io/......
  • Spring Boot 中调用外部接口的 3 种方式
    ......
  • Ajax 和 axios 调用接口的使用
     一、前提了解:服务器:负责存放和对外提供资源的电脑‘请求-处理-响应’客户端:在上网过程中,负责获取和消费资源的电脑URL:统一资源定位符,协议域名端口号资源的请求方式: 1.get:获取服务器资源 2.post:向服务器提交数据 3.其他:put修改、delete删除、fetch批量二、Ajax的......
  • 利用html5调用本地摄像头拍照上传图片
    测试只有PC上可以,手机上不行<!DOCTYPEHTML><HTML><HEAD><TITLE>NewDocument</TITLE><METANAME="Generator"CONTENT="EditPlus"><METANAME="Author"CONTENT=""><METANAME="Key......
  • 调用一个方法继续之前的等待
    exportfunctioncollectWatchFn(callBack){letstatus='';letarrFn=[];if(status==='ing'){return;}returnfunction(...args){returnnewPromise(async(resolve,reject)=>{if(status==='i......
  • react18-webchat网页聊天实例|React Hooks+Arco Design仿微信桌面端
    React18Hooks+Arco-Design+Zustand仿微信客户端聊天ReactWebchat。react18-webchat基于react18+vite4.x+arco-design+zustand等技术开发的一款仿制微信网页版聊天实战项目。实现发送带有emoj消息文本、图片/视频预览、红包/朋友圈、局部模块化刷新/美化滚动条等功能。使用技术......
  • uniapp微信小程序对话框取消确认按钮
    uniapp微信小程序对话框实现,样式用scss写的,标题+内容+按钮效果图data(){ return{ refundMask:false,}}<viewclass="refund-button"><buttonclass="refund-button-btnplain"@click="handleRefund()">申请退款</button></vi......
  • 基于微信小程序的高校宿舍报修系统-计算机毕业设计源码+LW文档
    一、研究背景及意义研究背景:学生宿舍是学生学习,生活,休息,交往的重要场所,做好宿舍管理工作,构建安全校园,是校园管理的一项重要任务。目前我们传统的宿舍管理存在一些弊端,传统考勤制度,信息传达不及时,依赖人工管理,人员管理过程冗杂,无精准数据分析,宿舍安全隐患,家校无法互通等问题。在我......