前言
考慮到網(wǎng)絡(luò)上微信的h5支付都是講解原生app的，ionic3的基本沒有专钉，我自己總結(jié)下累铅。
大致流程
- 1、用戶在商戶側(cè)完成下單娃兽，使用微信支付進(jìn)行支付
- 2、由商戶后臺(tái)向微信支付發(fā)起下單請(qǐng)求（調(diào)用統(tǒng)一下單接口）注：交易類型trade_type=MWEB
- 3第练、統(tǒng)一下單接口返回支付相關(guān)參數(shù)給商戶后臺(tái)玛荞，如支付跳轉(zhuǎn)url（參數(shù)名“mweb_url”），商戶通過mweb_url調(diào)起微信支付中間頁(yè)
- 4勋眯、中間頁(yè)進(jìn)行H5權(quán)限的校驗(yàn)下梢，安全性檢查（此處常見錯(cuò)誤請(qǐng)見下文）
- 5怔球、如支付成功浮还，商戶后臺(tái)會(huì)接收到微信側(cè)的異步通知
- 6、用戶在微信支付收銀臺(tái)完成支付或取消支付,返回商戶頁(yè)面（默認(rèn)為返回支付發(fā)起頁(yè)面）
- 7钧舌、商戶在展示頁(yè)面，引導(dǎo)用戶主動(dòng)發(fā)起支付結(jié)果的查詢
- 8,9崭歧、商戶后臺(tái)判斷是否接到收微信側(cè)的支付結(jié)果通知撞牢，如沒有，后臺(tái)調(diào)用我們的訂單查詢接口確認(rèn)訂單狀態(tài)
- 10屋彪、展示最終的訂單支付結(jié)果給用戶
大致的流程就和微信的文檔一致。如果看不懂的話仔粥，那就通俗的來講就是：你在下單時(shí)蟹但，要給后臺(tái)發(fā)請(qǐng)求，后臺(tái)通過拿到的參數(shù)請(qǐng)求微信后臺(tái)去生成訂單并同時(shí)返給你一個(gè)路徑mweb_url麦向，這個(gè)路徑就是用來調(diào)起微信應(yīng)用發(fā)起支付操作的。這里要說明的就是由于h5支付不能主動(dòng)回調(diào)，所以需要個(gè)主動(dòng)查詢的操作嫌蚤，這時(shí)會(huì)需要你有一個(gè)確認(rèn)界面來進(jìn)行主動(dòng)查詢訂單狀態(tài)。調(diào)起支付界面之后進(jìn)行支付操作，期間你什么都不用管呵燕，因?yàn)檫@都是微信的事件相。你需要的就是在你付完錢之后查看你的錢買你要的東西到底有沒有成功氧苍。（在ionic中泛范，支付完成后，我是跳轉(zhuǎn)到首頁(yè)）
常見錯(cuò)誤
一赡突、回調(diào)頁(yè)面
正常流程用戶支付完成后會(huì)返回至發(fā)起支付的頁(yè)面区赵，如需返回至指定頁(yè)面，則可以在MWEB_URL后拼接上redirect_url參數(shù)笼才，來指定回調(diào)頁(yè)面。
如昂羡，您希望用戶支付完成后跳轉(zhuǎn)至https://www.wechatpay.com.cn摔踱，則可以做如下處理：
假設(shè)您通過統(tǒng)一下單接口獲到的MWEB_URL= https://wx.tenpay.com/cgi-bin/mmpayweb-bin/checkmweb?prepay_id=wx20161110163838f231619da20804912345&package=1037687096
***則拼接后的地址為MWEB_URL= https://wx.tenpay.com/cgi-bin/mmpayweb-bin/checkmweb?prepay_id=wx20161110163838f231619da20804912345&package=1037687096&redirect_url=https%3A%2F%2Fwww.wechatpay.com.cn***
(有顏色的部分就是你要添加最后想要跳轉(zhuǎn)進(jìn)行別的操作的頁(yè)面昌渤，一般就是確認(rèn)訂單狀態(tài)的頁(yè)面)
注意：
1.需對(duì)redirect_url進(jìn)行urlencode處理
2.由于設(shè)置redirect_url后,回跳指定頁(yè)面的操作可能發(fā)生在：
1,微信支付中間頁(yè)調(diào)起微信收銀臺(tái)后超過5秒
2,用戶點(diǎn)擊“取消支付“或支付完成后點(diǎn)“完成”按鈕憔四。因此無法保證頁(yè)面回跳時(shí)，支付流程已結(jié)束了赵，所以商戶設(shè)置的redirect_url地址不能自動(dòng)執(zhí)行查單操作，應(yīng)讓用戶去點(diǎn)擊按鈕觸發(fā)查單操作冗酿。
ionic3中解決方案
需要在iframe中打開MWEB_URL络断，支付完成還是會(huì)返回到原來的界面，這里你可以在原來界面的生命周期里重新刷新一下支付狀態(tài)貌笨；當(dāng)然锥惋，如果需要回調(diào)跳轉(zhuǎn)到指定頁(yè)面也是可以的开伏，在后面拼接上redirect_url參數(shù)就可以了（實(shí)際用的時(shí)候記得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: "支付結(jié)果",
url: loadUrl
}
});
首頁(yè)接收到傳遞過來的參數(shù)進(jìn)行后續(xù)操作（想跳轉(zhuǎn)到哪里都可以，我這里就彈出一個(gè)對(duì)話框巫玻，提示用戶支付成功）
const urlParams = getURLSearchParamsByHref();
console.log("urlParams===",urlParams);
if(urlParams.get("name") == "WX"){//支付成功跳轉(zhuǎn)過來
//彈窗警告
let alert = this.alertCtrl.create({
title: '提示',
subTitle: '支付成功困介！',
buttons: [
{
text: '取消',
handler: data => {
console.log('Cancel clicked');
}
},
{
text: '確定',
handler: data => {
console.log('Saved clicked');
}
}
] });
alert.present();
}
