vue接入微信jsapi支付

在h5中接入微信jsapi支付JSAPI支付是用户在微信中打开商户的H5页面，商户在H5页面通过调用微信支付提供的JSAPI接口调起微信支付模块完成支付。应用场景有：◆ 用户在微信公众账号内进入商家公众号，打开某个主页面，完成支付◆ 用户的好友在朋友圈、聊天窗口等分享商家页面连接，用户点击链接打开商家页面，完成支付◆ 将商户页面转换成二维码，用户扫描二维码后在微信浏览器中打开页面后完成支付...

zb981027

3021人浏览 · 2020-01-03 14:51:51

zb981027 · 2020-01-03 14:51:51 发布

在h5中接入微信jsapi支付

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

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

用户授权（获取openId）

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

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

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

到这微信中jsapi支付就全部完成了

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^