前言

考虑到网络上微信的h5支付都是讲解原生app的，ionic3的基本没有，我自己总结下。

大致流程

1、用户在商户侧完成下单，使用微信支付进行支付

2、由商户后台向微信支付发起下单请求(调用统一下单接口)注：交易类型trade_type=MWEB

3、统一下单接口返回支付相关参数给商户后台，如支付跳转url(参数名“mweb_url”)，商户通过mweb_url调起微信支付中间页

4、中间页进行H5权限的校验，安全性检查(此处常见错误请见下文)

5、如支付成功，商户后台会接收到微信侧的异步通知

6、用户在微信支付收银台完成支付或取消支付,返回商户页面(默认为返回支付发起页面)

7、商户在展示页面，引导用户主动发起支付结果的查询

8,9、商户后台判断是否接到收微信侧的支付结果通知，如没有，后台调用我们的订单查询接口确认订单状态

10、展示最终的订单支付结果给用户

大致的流程就和微信的文档一致。如果看不懂的话，那就通俗的来讲就是：你在下单时，要给后台发请求，后台通过拿到的参数请求微信后台去生成订单并同时返给你一个路径mweb_url，这个路径就是用来调起微信应用发起支付操作的。这里要说明的就是由于h5支付不能主动回调，所以需要个主动查询的操作，这时会需要你有一个确认界面来进行主动查询订单状态。调起支付界面之后进行支付操作，期间你什么都不用管，因为这都是微信的事。你需要的就是在你付完钱之后查看你的钱买你要的东西到底有没有成功。(在ionic中，支付完成后，我是跳转到首页)

常见错误

一、回调页面

(有颜色的部分就是你要添加最后想要跳转进行别的操作的页面，一般就是确认订单状态的页面)

注意：

1.需对redirect_url进行urlencode处理

2.由于设置redirect_url后,回跳指定页面的操作可能发生在：

1,微信支付中间页调起微信收银台后超过5秒

2,用户点击“取消支付“或支付完成后点“完成”按钮。因此无法保证页面回跳时，支付流程已结束，所以商户设置的redirect_url地址不能自动执行查单操作，应让用户去点击按钮触发查单操作。

ionic3中解决方案

需要在iframe中打开MWEB_URL，支付完成还是会返回到原来的界面，这里你可以在原来界面的生命周期里重新刷新一下支付状态；当然，如果需要回调跳转到指定页面也是可以的，在后面拼接上redirect_url参数就可以了(实际用的时候记得urlencode一下，我这里为了讲解方便直接贴出来了redirect_url=http://localhost:8100?name=WX)

var loadUrl = "https://wx.tenpay.com/cgi-bin/mmpayweb-bin/checkmweb?prepay_id=wx20161110163838f231619da20804912345&package=1037687096](https://wx.tenpay.com/cgi-bin/mmpayweb-bin/checkmweb?prepay_id=wx20161110163838f231619da20804912345&package=1037687096)`&redirect_url=http://localhost:8100?name=WX"

this.navCtrl.push(BrowserPage, {

browser: {

title: "支付结果",

url: loadUrl

}

});

首页接收到传递过来的参数进行后续操作(想跳转到哪里都可以，我这里就弹出一个对话框，提示用户支付成功)

image.png

const urlParams = getURLSearchParamsByHref();

console.log("urlParams===",urlParams);

if(urlParams.get("name") == "WX"){//支付成功跳转过来

//弹窗警告

let alert = this.alertCtrl.create({

title: '提示',

subTitle: '支付成功！',

buttons: [

{

text: '取消',

handler: data => {

console.log('Cancel clicked');

}

},

{

text: '确定',

handler: data => {

console.log('Saved clicked');

}

}

] });

alert.present();

}

注意：你h5的app访问的域名和后台申请h5支付的时候填写的h5支付的域名必须一样，不然会报“商家存在未配置的参数，请联系商家解决“。