H5使用微信支付（微信内部浏览器和其他浏览器）

一、微信内部浏览器

1、获取openId
参考微信文档需要通过跳转地址重定向获取code，再通过code后端处理获取openId

location.href ='https://open.weixin.qq.com/connect/oauth2/authorize?appid=appid&redirect_uri=redirect_uri&response_type=code&scope=snsapi_base&state=100&connect_redirect=1#wechat_redirect'

appId是公众号配置的appId, redirect_uri是你需要重定向的地址，我实际开发的时候这个地址是后端接口，后端处理code之后返回的地址，重定向后路径参数是这样的

redirect_uri+openId

ps:如果和你对接的后端没有把重定向的地址写成接口的话，就需要你用重定向后的code去调后端接口获取openId。

2、配置支付参数调后端支付接口

let data = {wxOpenId: this.openId,body: this.payLi[0].name,message: "",method: 1,payRecordGoodsList: [{name: this.payLi[0].name,payConfigId:  this.payLi[0].id,price:  this.payLi[0].price,sale:  this.payLi[0].sale}],money: this.payLi[0].sale,discount: 1,};

使用配置参数调后端支付接口，请求成功后使用微信环境里的WeixinJSBridge.invoke()方法唤起微信支付，到此微信的整个支付流程就结束了。

this.$http({url: api ,header: {type: "application/json"},data: data}).then((res)=> {if(res.data.code==200){WeixinJSBridge.invoke('getBrandWCPayRequest', {appId: res.data.data.appId,timeStamp: res.data.data.timeStamp,nonceStr: res.data.data.nonceStr,package: res.data.data.package,signType: res.data.data.signType,paySign: res.data.data.paySign,},function(res_b) {if (res_b.err_msg == "get_brand_wcpay_request:ok") {uni.showModal({title: '提示',content: `支付成功`})} else {uni.showModal({title: '提示',content: `支付失败`})}});}else{}})

二、微信外部浏览器

微信外部浏览器就相对简单些，微信外部不需要openId,所以直接调后端的支付接口，后端会返回一个支付地址，直接跳转支付就行。
如果需要查询订单状态的话，我的处理方式是把订单id存在本地，从支付页面返回的时候再用订单id查订单状态。

this.$http({url: api ,header: {type: "application/json"},data: data        }).then((res)=> {if(res.data.code=200){this.wxOrderId=res.data.data.wxOrderId;//存到本地方便支付完成后查询订单状态uni.setStorageSync('wxOrderId',res.data.data.wxOrderId);if(res.data.data.mweb_url){//后端返回的支付地址location.href = res.data.data.mweb_url;}}})

H5使用微信支付（微信内部浏览器和其他浏览器）相关推荐

微信支付—微信H5支付「微信内部浏览器」
前言微信支付-微信H5外部浏览器支付微信支付-微信H5内部浏览器支付「本文」微信支付-PC端扫码支付「待写」本篇是微信支付系列的第二篇.微信H5内部浏览器支付,关于微信H5外部浏览器唤起微信A ...
微信支付—微信H5支付「非微信内部浏览器-QQ/UC浏览器等」
前言微信支付-微信H5外部浏览器支付「本文」微信H5内部浏览器支付「待写」 PC端扫码支付「待写」一直计划着写一写微信支付相关的文章,希望能加深一下自己的印象,拖了一天又一天- 最近终于空出时间 ...
微信支付—微信H5支付「PC端扫码支付」
前言微信支付-微信H5外部浏览器支付微信支付-微信H5内部浏览器支付微信支付-PC端扫码支付「本文」本篇是微信支付系列的第三篇,PC端扫码支付. 开发环境:Java + SpringBoot ...
微信（jspai版本即公众号h5版）支付-微信下单支付及企业转账到零钱
微信(jspai版本即公众号h5版)支付-微信下单支付及企业转账到零钱一.后端前置条件二.配置h5 devServer 三.后端开发代码四.前端开发代码(uniapp) 一.后端前置条件准备好 ...
微信支付微信授权
盛派网络:微信支付微信授权类库下载微信小程序支付后台代码配置:<add key="ServiceAppID" value= ...
python微信库有哪些_GitHub - zwczou/weixin-python: 微信SDK - 包括微信支付,微信公众号,微信登陆,微信消息处理等...
微信SDK 提供微信登陆,公众号管理,微信支付,微信消息的全套功能文档目录如果需要单独使用其中的某些模块,可以见文档目录的具体模块如果需要组合在一起可以参考快速开始目录安装使用pip su ...
微信开发（一）：用JSAPI做微信支付+微信卡包(代金券)
做微信支付前期准备: 1,服务好开通微信支付. 2,公众账号ID:AppId. 3,公众账号密钥:AppSecret. 4,微信支付密钥:Key. 第一步:获取用户信息并跳转到需要微信支付的页面 pu ...
vue前端实现微信支付-微信公众号JSSDK
最近在做支付功能,微信支付准备工作之类的请参考官方说明,注意个人申请的测试号不支持,要申请企业号,还要商户号,开通支付权限,配置域名,JSSDK的权限问题,尽可能都开通吧! 官方地址可参考这里:接入准 ...
微信支付~微信手机网站支付（mweb）
这次做微信h5支付(Mweb)时发现很多时间都花费在需申请和配置的操作上,所以整体记录下这次h5支付(Mweb)的流程作为备忘录. 1.申请h5支付的权限申请入口:登录微信商户平台-->产品中 ...
微信支付——微信退款实战教程（Java版）
微信支付之微信申请退款实战(Java版) 微信支付业务场景一.注意事项二.微信支付退款案例 1.微信退款案例二.微信支付官方说明总结微信支付业务场景当交易发生之后一年内,由于买家或者卖家的 ...

H5使用微信支付（微信内部浏览器和其他浏览器）

H5使用微信支付（微信内部浏览器和其他浏览器）

一、微信内部浏览器

二、微信外部浏览器

H5使用微信支付（微信内部浏览器和其他浏览器）相关推荐

最新文章

热门文章