vue接入微信jsapi支付

最新推荐文章于 2023-11-18 09:00:11 发布
最新推荐文章于 2023-11-18 09:00:11 发布
阅读量2.8k 收藏 11
点赞数 2
分类专栏： jsapi支付 文章标签： openid vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zb981027/article/details/103819754
版权

在h5中接入微信jsapi支付

JSAPI支付是用户在微信中打开商户的H5页面，商户在H5页面通过调用微信支付提供的JSAPI接口调起微信支付模块完成支付。应用场景有：

◆ 用户在微信公众账号内进入商家公众号，打开某个主页面，完成支付
◆ 用户的好友在朋友圈、聊天窗口等分享商家页面连接，用户点击链接打开商家页面，完成支付
◆ 将商户页面转换成二维码，用户扫描二维码后在微信浏览器中打开页面后完成支付

用户授权（获取openId）

我们公司的处理这块是后端请求微信官方接口给我一个url，点击这个url会去用户授权页面授权成功openId会附在地址栏上，这块前端唯一要处理的是当地址栏上出现openId的时候用户不用再去授权，然后把openId存在缓存中
在这里插入图片描述
这样写有时openId存不进localstorage中所以我加了一步在用户点击详情的时候存入localstorage
在这里插入图片描述

获取参数调用微信的官方方法

调用后端给我的接口传入（支付类型，订单编号，金额数目，openId），获取appid，签名等相应字段，
然后调用微信官方的getBrandWCPayRequest接口，发起微信支付请求，用户进入支付流程
在这里插入图片描述
在这里插入图片描述
到这微信中jsapi支付就全部完成了

zb981027
关注
  • 2
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
微信支付、公众号支付、JSAPI，vue 调取微信支付功能
01-20
JSAPI微信支付 （需要在公众号后台配置一下,paydatac变量需要后台返回 微信签名之类的） if (typeof WeixinJSBridge == undefined) { if (document.addEventListener) { document.addEventListener('WeixinJSBridgeReady', _self.onBridgeReady, false); } else if (document.attachEvent) {
vue 微信公众号支付 jssdk jsapi实现微信支付（完整版）
修炼中的小妖怪
04-02 2万+
很用心的在整理，是自己项目里支付功能测试成功后的源代码，希望能帮助到曾和我一样想找到有效参考借鉴的朋友们， 废话不多说，直接讲具体的操作规程及完整代码 代码部份： 一、vue的环境配置： 1. 先在当前项目的命令行工具里安装npm install weixin-jsapi 2. 在当前支付页面引用该weixin-jsapi import wx from 'weixin-jsapi' 二、调用后台...
Vue项目中调取微信分享api
Tom__cy的博客
05-16 1639
首先做微信网页都要接入微信sdk； 安装sdk npm install weixin-js-sdk --save 引入sdk vue是单页面项目，比如你想要接入微信分享功能，分享功能在每个路由地址都要有，因为每个路由的url是不一样的，就需要在每个路由地址都引入一遍 import wx from 'weixin-js-sdk' 在组建的生命周期creatd()和mounted()里面放代码 ...
vue 调微信jsapi
qq_43691078的博客
04-14 1242
vue调微信jsapi 1、引入微信jssdk 安装 npm install weixin-jsapi --save 我喜欢设置全局属性，所以在main.js文件里面引入： import wx from ‘weixin-jsapi’; 2、获取code init(){ let code= this.getUrlKey("code"); console.log("init",Date.now() ) if(code){
vue 微信公众号开发——微信支付（Jsapi支付）
qq_38388578的博客
02-26 4085
在公众号商户平台配置 点击立即支付：
uni-app在vue3中对接微信JSSDK
meng_xiaoxiao的博客
10-19 4088
import wx from "weixin-js-sdk"，挂载到全局app.config.globalProperties.$wx=wx;第三步：获取JSSDK在网页中的授权信息及初始化JSSDK，授权信息是后台发返回的。在项目的终运行命令：npm i weixin-js-sdk 如下图。在APP.vue里面调用getWxSignature。第二步，在项目人口文件导入微信jssdk。第一步：引入jssdk。
vue3接入微信扫码授权登录流程
m0_62857167的博客
05-23 4664
vue3、微信、登录、微信扫码登录
vue3前端实现微信支付
bxp447215774的博客
03-24 3801
(2) 在Vue3的mounted生命周期中，调用getWxPaySign方法获取微信支付SDK的签名。(3) 在resolve回调函数中调用wxPay方法发起微信支付。(1) 在页面中定义支付金额、用户id等相关参数。
Vue微信公众号H5调用jssdk jsapi，例如：微信扫一扫
alonePia
08-12 2075
官方文档地址 https://developers.weixin.qq.com/doc/offiaccount/Getting_Started/Overview.html 1、先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。 2、H5或Web项目下： 调用JS接口的页面引入如下JS文件，（支持https）：http://res.wx.qq.com/open/js/jweixin-1.6.0.js 3、Vue项目下： 3-1、安装 cnpm install weixin-j.
vue实现H5支付（微信，支付宝）
热门推荐
努力奔跑的小不点
02-23 2万+
vue实现H5支付（微信，支付宝）
vue项目前端微信JSAPI与外部H5支付相关实现过程及常见问题
11-20
web端的微信支付可分为JSAPI与H5 JSAPI使用场景为微信内部，而H5支付则是使用在非微信下的外部浏览器。 1.JSAPI 在微信内部可以直接唤起微信浏览器的内置对象 WeixinJSBridge 废话不多说直接上代码： // 调用后端...
vue.js 微信支付前端代码分享
10-18
下面小编就为大家分享一篇vue.js 微信支付前端代码。具有很好的参考价值。希望对大家有所帮助。一起跟随小编过来看看吧
vue项目使用微信公众号支付总结及遇到的坑
12-09
微信公众号支付 1. 使用jssdk调用微信支付，具体查看开发文档； 使用的vuex，在mutations中 wechatPay (state, data) { state.payObject = data console.log('微信支付开始请求') if (wechat) { wx....
详解vue项目接入微信JSSDK的坑
10-17
主要介绍了详解vue项目接入微信JSSDK的坑,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Vue 微信实现JSAPI签名认证
仗剑走天涯的博客
07-01 2298
准备工作： 1、申请微信公众号 可以使用微信测试的公众号：https://mp.weixin.qq.com/debug/cgi-bin/sandboxinfo?action=showinfo&t=sandbox/index 2、配置JS接口安全域名（正式账号还要设置IP访问白名单等） 3、得到appID和appsecret 4、关注公众号，绑定开发者 步骤如下： 1、获取access_token (服务端实现) 2、获取api_ticket（服务端实现） 3、使用url，timestamp，nonc
vue前端移动项目调用微信扫一扫的实现
shiqi236的博客
01-27 1286
vue前端移动项目调用微信扫一扫的实现 1安装插件 npm install weixin-jsapi --save 2在main.js中引入 // 在man.js中引入 import wx from "weixin-jsapi"; // 在man.js中注册 Vue.prototype.wx = wx 具体代码如下 bindingCarCode.vue页面 <template> <div class="moveCarService"> <!--头部--&gt
Vue3问题：如何实现微信扫码支付？全面！
最新发布
前端达人
11-18 337
前端功能问题系列文章，点击上方合集↑序言大家好，我是大澈！本文约2000+字，整篇阅读大约需要5分钟。本文主要内容分三部分，第一部分是需求分析，第二部分是实现步骤，第三部分是问题详解。如果您只需要解决问题，请阅读第一、二部分即可。如果您有更多时间，进一步学习问题相关知识点，请阅读至第三部分。1. 需求分析点击微信扫码支付按钮，会弹出扫码支付弹框，在弹框中部显示一个微信支付的二维码。用户打开微信扫码...
SpringBoot+Vue 微信支付API V3
mqq2502513332的博客
03-28 4507
SpringBoot+Vue 微信支付 gitee仓库链接,前后端和辅助资料都上传了 wxpaydemo 1.微信支付产品介绍 微信支付主要包括付款码支付,JSAPI支付,小程序支付,Native支付,APP支付,刷脸支付等场景,本次主要学习Native支付,适用于pc网站,常见的微信扫一扫支付方式. 2.前置工作 (1)获取微信商户号 微信商户平台：https://pay.weixin.qq.com/ 场景：Native支付 步骤：提交资料 => 签署协议 => 获取商户号 (2)在微信开放平
vue3项目（十）---支付
m0_61368323的博客
05-15 1326
支付模块-渲染基础数据。
uniapp 微信JSAPI支付 vue语法
07-15
在Vue语法中，实现UniApp中的微信JSAPI支付可以按照以下步骤进行操作： 1. 在需要实现支付的Vue组件中，引入微信公众号支付的SDK文件。可以通过在`index.html`文件中添加以下代码来引入： ```html <script src="https://res2.wx.qq.com/open/js/jweixin-1.6.0.js"></script> ``` 2. 编写Vue组件的模板和样式，以及相关的数据和方法。 ```html <template> <div> <!-- 支付按钮 --> <button @click="wxPay">微信支付</button> </div> </template> <script> export default { methods: { // 调用微信JSAPI支付 wxPay() { if (typeof WeixinJSBridge == "undefined") { if (document.addEventListener) { document.addEventListener('WeixinJSBridgeReady', this.onBridgeReady, false); } else if (document.attachEvent) { document.attachEvent('WeixinJSBridgeReady', this.onBridgeReady); document.attachEvent('onWeixinJSBridgeReady', this.onBridgeReady); } } else { this.onBridgeReady(); } }, // 支付回调方法 onBridgeReady() { const payParams = { appId: '...', timestamp: '...', nonceStr: '...', package: '...', signType: 'MD5', paySign: '...' }; WeixinJSBridge.invoke( 'getBrandWCPayRequest', { "appId": payParams.appId, "timeStamp": payParams.timestamp, "nonceStr": payParams.nonceStr, "package": payParams.package, "signType": payParams.signType, "paySign": payParams.paySign }, function(res) { if (res.err_msg == "get_brand_wcpay_request:ok") { // 支付成功回调 } else { // 支付失败回调 } } ); } } } </script> <style> /* 样式 */ </style> ``` 在上面的代码中，我们通过`@click`事件绑定了支付按钮的点击事件，当点击按钮时会执行`wxPay`方法。在`wxPay`方法中，我们判断`WeixinJSBridge`是否已定义，如果未定义则通过事件监听等待其准备就绪，如果已定义则直接调用`onBridgeReady`方法。在`onBridgeReady`方法中，我们获取支付参数并调用微信JSAPI支付。 请注意替换代码中的支付参数(`payParams`)为实际的支付参数，并根据实际需求处理支付成功和失败的回调。 这样，你就可以在Vue语法中实现UniApp中的微信JSAPI支付了。记得在页面加载时引入微信JSAPI的SDK文件，并确保支付接口的安全性和正确性。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值