H5 微信支付的WeixinJSBridge.invoke 方法

前一篇已经说过H5支付有哪些方法了 ,在这里就不废话了连篇了,直接进入主题


第一种方法
H5微信支付-优快云博客文章浏览阅读195次,点赞3次,收藏2次。H5进行静默微信授权_微信h5静默授权 state-优快云博客在H5公众号项目中使用的是uniapp进行开发,在开发中需要用到一些微信的支付、扫码等功能,这些都需要进行一个微信授权获取到code,由于uniapp的方法不支持h5直接获取code,所以只能使用微信授权链接进行获取,但是根据需求获取还需要不能显示授权页,所以就使用一个静默授权的操作项目我们要用到自己appid和当前线上地址的回调页面,根据自己需求进行设置不同的回调页面。_微信h5静默授权 state。https://blog.youkuaiyun.com/liwei19950803/article/details/141124278

 使用WeixinJSBridge.invoke 进行微信支付

此方法不用什么引入,在微信浏览器中就可以直接使用
 

export  const wxpayPice=(res)=>{
	return new Promise(resolve=>{
		//支付余额
		WeixinJSBridge.invoke(
			"getBrandWCPayRequest", {
				appId: res.appId, //公众号名称,由商户传入
				timeStamp: res.timeStamp, //时间戳,自1970年以来的秒数
				nonceStr: res.nonceStr, //随机串
				package: res.packageValue,
				signType: res.signType, //微信签名方式:
				paySign: res.paySign //微信签名
			},
			function(res) {
				if (res.err_msg == "get_brand_wcpay_request:ok") {
					uni.showToast({
						title: '支付成功',
						icon: 'none'
					})
				} else if (res.err_msg == "get_brand_wcpay_request:cancel") {
					uni.showToast({
						title: '取消付款',
						icon: 'none'
					})
				} else if (res.err_msg == "get_brand_wcpay_request:fail") {
					uni.showToast({
						title: '支付失败',
						icon: 'none'
					})
					WeixinJSBridge.call("closeWindow");
				}
				 resolve(res)
			}
		);
	})
}

### 集成微信支付与支付宝支付于H5页面 #### 微信支付集成方法 对于在H5页面中集成微信支付,主要依赖于JSAPI接口来实现。当用户访问由商户提供的H5页面时,该页面需调用微信支付所提供的JSAPI接口以启动微信支付模块完成交易过程[^1]。 具体来说,在开发过程中需要先获取预支付订单信息,这通常涉及到服务器端向微信支付平台发起请求获得必要的参数,如`prepay_id`等。之后前端利用这些参数并通过JavaScript API `wx.chooseWXPay()` 来唤起用户的微信客户端进行支付操作[^3]。 ```javascript // 前端代码片段用于调用微信支付 WeixinJSBridge.invoke( 'getBrandWCPayRequest', { "appId": "", // 公众号名称,由商户传入 "timeStamp": "", // 时间戳,自1970年以来的秒数 "nonceStr": "", // 随机串 "package": "", // 统一支付接口返回的 prepay_id 参数值,提交格式如:prepay_id=*** "signType": "", // 签名方式,默认为'SHA1',使用新版支付需传入'MD5' "paySign": "" // 支付签名 }, function(res){ if(res.err_msg == "get_brand_wcpay_request:ok"){ alert('支付成功'); }else{ alert('支付失败'); } } ); ``` 值得注意的是,如果是在微信环境之外(即非微信内置浏览器),则应采用统一下单接口得到`mweb_url`链接地址,并引导用户跳转至此URL来进行安全支付处理[^2]。 #### 支付宝支付集成方法 针对支付宝支付,则可以通过其官方提供的SDK或直接调用相应的RESTful API服务来达成目的。一般情况下会经历以下几个环节: - **创建订单**:应用程序发送HTTP POST请求给支付宝网关,传递商品详情以及回调通知等相关配置; - **重定向到支付页**:依据上一步骤所取得的结果数据构建HTML表单自动提交动作或者直接构造URL让客户点击前往付款界面; - **接收异步消息**:设置好服务器监听来自支付宝的通知以便及时更新本地数据库状态记录。 以下是简化版的PHP示例代码展示了如何初始化一笔新的支付宝交易: ```php <?php // PHP SDK 初始化实例化对象... $alipaySdk = new AlipayTradeService($config); // 构建业务请求参数数组 $data = array ( 'out_trade_no' => uniqid(), // 商家订单编号 'total_amount' => $_POST['amount'], // 订单金额 'subject' => $_POST['title'] // 商品主题描述 ); // 调用网页快捷支付接口wap/alipay.trade.wap.pay $result = $alipaySdk->pagePay($data, 'https://yourdomain.com/callback'); header("Location:" . $result); // 将用户导向至支付宝支付页面 ?> ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值