uniapp项目订单支付

最新推荐文章于 2024-08-14 22:44:40 发布

南庐

最新推荐文章于 2024-08-14 22:44:40 发布

阅读量202

点赞数

文章标签： uni-app 微信 vue.js 前端

本文链接：https://blog.csdn.net/weixin_73184582/article/details/129885878

版权

文章描述了如何请求后台接口获取商品详情，特别是与支付相关的参数，如nonceStr、package、timeStamp和signType等。然后根据不同的平台环境（微信小程序和App）进行条件编译，构建相应的支付参数对象。最后，调用uniapp的requestPaymentAPI进行支付操作，处理成功或失败的回调函数。

摘要由CSDN通过智能技术生成

一.请求后台接口，拿到后台接口返回的商品详细信息

post("xxx", "xxx", {
							xxx: that.xxx,
							xxx: that.xxx,
						}).then(res => {
console.log(res)
})

二.后台返回的商品参数

//调用微信支付界面需要的参数
							/**
							 * nonceStr 签名随机字符串,
							 * package 商户订单号 ,
							 * timeStamp 时间戳,
							 * signType 签名类型,
							 * paySign 签名
							 * 
							 * */

三.条件编译

const {
								appId,
								nonceStr,
								packageValue,
								timeStamp,
								signType,
								paySign,
								parthnerId,
								prepayId,
								sign
							} = res.data;
//微信小程序支付
							// #ifdef MP-WEIXIN
							const payParam = {
								appId,
								nonceStr,
								package: packageValue,
								timeStamp,
								signType,
								paySign
							};
							// #endif
//app支付
							// #ifdef APP-PLUS
							const payParam = {
								appid: appId,
								noncestr: nonceStr,
								package: packageValue,
								prepayid: prepayId,
								parthnerid: parthnerId,
								timestamp: timeStamp,
								sign,
								signType: 'MD5',
							};
							// #endif

四.调用uniapp支付api

	// #ifdef MP-WEIXIN  || APP-PLUS 
							uni.requestPayment({
								provider: "wxpay",
								// #ifdef MP-WEIXIN
								...payParam,
								// #endif
								// #ifdef APP-PLUS
								orderInfo: payParam,
								// #endif
								success(res) {
									uni.redirectTo({
										url: '/ModuleA/success/success'
									})
								},
								fail(err) {
									uni.$u.toast('支付失败!')
								}
							})
							// #endif