uniapp前端实现微信支付(小程序、公众号H5、app)

UU-阿Q 2024-08-14 08:33:07 阅读 77

这段时间通过uniapp开发一个三端合一的项目,涉及到不同平台的支付方式,这里为大家简单介绍一下,希望能有所帮助;

阅读: 微信支付文档

一、微信小程序支付

通过wx.login()获取code、调用后端接口获取openid;

wx.login({ -- -->

success (res) {

if (res.code) {

//发起网络请求获取openid,一般是访问后端封装好的接口,也可以通过访问微信官方接口获取

uni.request({

url: '后端接口地址,获取openid',

method: 'GET',

success(res) {

//获取openid:用户真实唯一id进行保存

console.log(res.data.openid)

}

})

} else {

console.log('登录失败!' + res.errMsg)

}

}

})

调用后端接口创建订单,获取orderId;

uni.request({

url: '后端接口地址,获取订单id',

method: 'POST',

data: { 传入接口需要的参数,如商品金额,商品个数等 },

success(res) {

console.log(res.data.orderId)

}

})

调用后端接口获取支付核心参数,预支付;

uni.request({

url: '后端接口地址,获取支付核心数据',

method: 'POST',

data: { 传入接口需要的参数,如订单ID,openId等 },

success(res) {

console.log(res.data)

//接口会返回以下核心参数

//timeStamp 时间戳

//nonceStr 随机字符串

//package 统一下单接口返回的 prepay_id 参数值

//signType 签名算法

//paySign 签名

}

})

通过支付核心参数调用wx.requestPayment()发起支付;

//调用微信官方支付接口弹出付款界面,输入密码扣款

wx.requestPayment({

timeStamp, //时间戳

nonceStr, //随机字符串

package, //prepay_id

signType, //签名算法MD5

paySign, //签名

success (res) {

if (res.errMsg == "requestPayment:ok"){

console.log('支付成功', res)

}else{

console.log('支付失败')

}

},

fail (res) {

console.log('支付失败', res)

}

})

二、公众号H5支付

支付方式可以参考两种方式:

JSAPI 支付:通过JSAPI下单接口获取到发起支付的必要参数prepay_id,然后使用微信支付提供的前端JS方法调起公众号支付

在获取订单id、openid后,调用预支付,获取JSAPI核心参数;

uni.request({

url: '后端接口地址,获取支付核心数据',

method: 'POST',

data: { 传入接口需要的参数,如订单ID,openId等 },

success(res) {

//调用下方支付方法

wxpay(res.data)

console.log(res.data)

//接口会返回以下核心参数

//appId 公众号ID

//timeStamp 时间戳

//nonceStr 随机字符串

//package 统一下单接口返回的 prepay_id 参数值

//signType 微信签名方式RSA

//paySign 微信签名

}

})

通过JSAPI核心参数发起支付;

// 检测支付环境中的 WeixinJSBridge

function wxpay(data) {

if (typeof WeixinJSBridge == "undefined") {

if (document.addEventListener) {

document.addEventListener('WeixinJSBridgeReady', onBridgeReady(data), false);

} else if (document.attachEvent) {

document.attachEvent('WeixinJSBridgeReady', onBridgeReady(data));

document.attachEvent('onWeixinJSBridgeReady', onBridgeReady(data));

}

} else {

onBridgeReady(data);

}

}

function onBridgeReady(data) {

WeixinJSBridge.invoke(

'getBrandWCPayRequest', {

// 传入第一步后端接口返回的核心参数

"appId": data.appId, //公众号

"timeStamp": data.timeStamp, //时间戳

"nonceStr": data.nonceStr, //随机串

"package": data.package, //prepay_id

"signType": data.signType, //微信签名方式RSA

"paySign": data.paySign //微信签名

},

function(res) {

// 支付成功

if (res.err_msg == "get_brand_wcpay_request:ok") {

// 使用以上方式判断前端返回,微信团队郑重提示:

//res.err_msg将在用户支付成功后返回ok,但并不保证它绝对可靠。

}

// 支付过程中用户取消

if (res.err_msg == "get_brand_wcpay_request:cancel") {

}

// 支付失败

if (res.err_msg == "get_brand_wcpay_request:fail") {

}

/**

* 其它

* 1、请检查预支付会话标识prepay_id是否已失效

* 2、请求的appid与下单接口的appid是否一致

* */

if (res.err_msg == "调用支付JSAPI缺少参数:total_fee") {

}

});

}



声明

本文内容仅代表作者观点,或转载于其他网站,本站不以此文作为商业用途
如有涉及侵权,请联系本站进行删除
转载本站原创文章,请注明来源及作者。