H5网站 在微信小程序中,如果使用微信支付?
如果我们的网站,之前开发,是使用微信公众号里的" 微信支付 " 那么在微信小程序中,是无法再使用的,在微信小程序中只能使用小程序的微信支付才行。
那要怎么使 H5 页面中调起 小程序微信支付呢?其他也不难,我们可以建一个原生的pay.wxml 页面,里写个支付的按键,调起微信小程序的微信支付功能。
1. 假如我们的H5订单页面在跳转之前已经生成了预付订单,然后把订单号和一些其他相关参数传到 支付的页面,再传到服务器,返回参数再调起微信支付。
H5打开微信支付页面,把订单号传过去
wx.miniProgram.navigateTo({url:"pages/pay/pay?ordernum=5236612555&uid=02&key=m2566dfvvdf256dfdf"});
小程序 pay.wxml 页面,
<view class='body'>
<form bindsubmit="submitInfo" report-submit='true' >
<view class='body-title'><text>{{title}}</text></view>
<view class='body-view'><text >{{atm}}</text></view>
<view class='body-text'><text class='manyiwl'>混合APP开发社区</text> <text>收款方</text></view>
<view class="btn-area">
<button type="primary" form-type="submit">确认支付</button>
</view>
</form>
</view>
let numbers="";
Page({
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
this.setData({title:options.title,atm:options.atm});
numbers = options.num;
},
submitInfo: function (e)
{
console.log("FOMEID:"+e.detail.formId);
console.log("numbers:" + numbers);
let num = numbers;
let formId = e.detail.formId;
wx.showLoading({
title: '微信支付...',
mask: true
});
wx.request({
url: 'http://www.html5-app.com/pay.php', //接口地址
data: {
num: num,
formId: formId
},
success: function (res) {
console.log("DATA:" + JSON.stringify(res.data))
wx.hideLoading();
if (res.data.code == "000000") {
wx.requestPayment(
{
'timeStamp': res.data["wx"].timeStamp,
'nonceStr': res.data["wx"].nonceStr,
'package': res.data["wx"].package,
'signType': 'MD5',
'paySign': res.data["wx"].paySign,
'success': function (e) { //支付成功
wx.showToast({
title: '支付成功',
icon: 'success',
duration: 1200,
mask: true,
success: function ()
{
setTimeout(function () {
wx.navigateBack();
}, 1500);
}
});
},
'fail': function (e) { //支付取消或出错
// wx.navigateBack();
}
})
}
else {
wx.showToast({
title: '该订单已失效',
icon: 'success',
duration: 3000,
mask: true,
success: function () {
setTimeout(function () {
wx.navigateBack();
}, 1500);
}
})
}
}
});
}
})
然后用户点击 “确认支付” 触发 submitInfo 事件,调起微信支付。
加载更多