【uniapp】H5跳转微信支付和跳转支付宝支付
H5跳转微信支付和跳转支付宝支付
·
H5微信跳转
H5微信支付先分环境:
1,比如,复制链接到游览器,在游览器支付的叫做游览器支付环境,此时你可以直接使用跳转微信支付
2, 但是,如果你是h5在微信里面登录完,再支付,属于微信环境,这时候你如果使用跳转微信,会提醒你.“请到微信外进行支付”,这时候你的微信支付,应该采取微信环境下的h5支付
游览器环境下h5支付
步骤一:获取到后台返回的表单数据
背景:需要在H5微信支付的时候去相应的软件唤起支付
步骤二:渲染表单提交
//res.data.data.payDetail就是后台返回的数据
document.querySelector('body').innerHTML = res.data.data.payDetail;
// 调用submit方法
document.forms[0].submit()
最后,就会跳转到相应的平台进行支付了
微信环境下H5支付
- NPM安装方式(不会用NPM就不要用这种方式)
npm install jweixin-module --save- 或者你可以自己引入文件
<script>
var that
var wx = require('jweixin-module')
methods: {
pay(){
let obj = {
//下单时候的参数
}
api.order_pay(obj).then(res => {
console.log(res, "返回的签名各种的参数")
wx.config({
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
appId: res.data.data.payDetail.appId, // 必填,公众号的唯一标识
timestamp: res.data.data.payDetail.timeStamp, // 必填,生成签名的时间戳
nonceStr: res.data.data.payDetail.nonceStr, // 必填,生成签名的随机串
signature: res.data.data.payDetail.paySign, // 必填,签名
jsApiList: ['chooseWXPay'] // 必填,需要使用的JS接口列表
})
wx.ready(function() {
wx.chooseWXPay({
timestamp: res.data.data.payDetail.timeStamp, // 时间戳
nonceStr: res.data.data.payDetail.nonceStr, // 随机数
package: res.data.data.payDetail.package, //
signType: res.data.data.payDetail.signType,
paySign: res.data.data.payDetail.paySign, // 签名
success: function() {},
cancel: function() {
setTimeout(() => {
uni.showToast({
title:"取消支付",
icon: 'none'
})
}, 200)
uni.navigateBack({})
},
fail: function() {
setTimeout(() => {
uni.showToast({
title:"支付失败",
icon: 'none'
})
}, 200)
uni.navigateBack({})
}
})
})
})
},
</script>
H5支付宝跳转
步骤一:获取到后台返回的表单数据
背景:需要在H5支付宝支付的时候去相应的软件唤起支付
步骤二:渲染表单提交
//res.data.data.payDetail就是后台返回的数据
document.querySelector('body').innerHTML = res.data.data.payDetail;
// 调用submit方法
document.forms[0].submit()
最后,也就会跳转到相应的平台进行支付了
游览器环境下,跳转到微信和跳转到支付宝方式一样
更多推荐
已为社区贡献8条内容
所有评论(0)