微信小程序嵌套h5页面怎么实现小程序支付
小程序嵌套h5页面怎么实现小程序支付小程序中嵌套h5页面,但是不能再h5页面拉起小程序支付,这时是需要小程序方拉起支付
目前的流程,外链发送订单请求拿到预支付的prepay_id和其他参数,小程序这边只需要将它传过来的参数(wxJson)接收并解析完拼接到wx.requestPayment微信调起支付的接口参数中用来发起微信支付
<--interHosp.wxml-->
<view bindtap="gopay" style="color: red;">打开支付页面</view>
//interHosp.js
// 测试打开支付页面
gopay(){
var am={
success:1,
data:{
"sign":"A7BC1E3515F",
"result_code":
"SUCCESS",
"mch_id":"150022",
"timeStamp":1616142724,
"prepay_id":"w91610c0c90000",
"return_msg":"OK",
"appid":"e695d4",
"nonce_str":"PLiMflq5F2xDPtU2",
"return_code":
"SUCCESS",
"trade_type":"JSAPI"
}
}
wx.navigateTo({
url: `./../payhosp/payhosp?amount=${JSON.stringify(am)}`,
})
},
payhosp.js,payhosp.wxml的页面直接是空白的
onLoad: function (options) {
// 支付前需要prepay_id,
var res= JSON.parse(options.amount); //打开支付页面时,传过来的信息
console.log(res)
wx.requestPayment({
'timeStamp': res.data.timeStamp.toString(), //时间戳
'nonceStr': res.data.nonce_str, //随机字符串
'package': `prepay_id=${res.data.prepay_id}`, //prepay_id参数值
'signType': 'RSA', //签名类型
'paySign': res.data.sign, //签名,使用appId、timeStamp、nonceStr、package计算得出的签名值
'success': function (res) {
console.log(res)
//定义小程序页面集合
var pages = getCurrentPages();
//当前页面 (wxpay page)
var currPage = pages[pages.length - 1];
//上一个页面 (index page)
var prevPage = pages[pages.length - 2];
//通过page.setData方法使index的webview 重新加载url 有点类似于后台刷新页面
//此处有点类似小程序通过加载URL的方式回调通知后端 该订单支付成功。后端逻辑不做赘述。
wx.redirectTo({ url: '/pages/interHosp/interHosp' });
//小程序主动返回到上一个页面。即从wxpay page到index page。此时index page的webview已经重新加载了url 了
//微信小程序的page 也有栈的概念navigateBack 相当于页面出栈的操作
wx.navigateBack();
},
'fail': function (res) {
console.log("支付失败");
console.log(res);
var pages = getCurrentPages();
var currPage = pages[pages.length - 1];
var prevPage = pages[pages.length - 2];
console.log("准备修改数据");
// wx.redirectTo({ url: '/pages/index/index' });
wx.redirectTo({ url: '/pages/interHosp/interHosp' });
console.log("准备结束页面")
// wx.navigateBack();
},
complete:function(res){
}
})
},
注意:
在wx.requestPayment支付方法中不能用success来判断用户支付成功,在这里面只有用户点击了“完成”后,才会执行success函数,但是此时用户可能已经支付完成
那怎么判断用户已经支付成功了呢?
微信小程序支付文档中提到“支付通知”
https://pay.weixin.qq.com/wiki/doc/apiv3_partner/apis/chapter4_5_5.shtml
微信支付通过支付通知接口将用户支付成功消息通知给商户
注意:
• 同样的通知可能会多次发送给商户系统。商户系统必须能够正确处理重复的通知。 推荐的做法是,当商户系统收到通知进行处理时,先检查对应业务数据的状态,并判断该通知是否已经处理。如果未处理,则再进行处理;如果已处理,则直接返回结果成功。在对业务数据进行状态检查和处理之前,要采用数据锁进行并发控制,以避免函数重入造成的数据混乱。
• 如果在所有通知频率后没有收到微信侧回调,商户应调用查询订单接口确认订单状态。
**特别提醒:**商户系统对于开启结果通知的内容一定要做签名验证,并校验通知的信息是否与商户侧的信息一致,防止数据泄露导致出现“假通知”,造成资金损失。
-
支付通知是在基础下单接口中的请求参数“notify_url”来设置的,要求必须为https地址。请确保回调URL是外部可正常访问的,且不能携带后缀参数,否则可能导致商户无法接收到微信的回调通知信息。回调URL示例: “https://pay.weixin.qq.com/wxpay/pay.action”
-
用户支付完成后,微信会把相关支付结果和用户信息发送给商户,商户需要接收处理该消息,并返回应答。
-
支付通知是以post的方式,已json格式发送通知结果,通知的数据包括了加密的支付结果详情。
具体的通知参数详见微信文档
小程序拉起支付参考文档:https://blog.csdn.net/weixin_30378311/article/details/97171759