H5微信支付

@H5微信支付前端處理流程

背景

基於項目的須要，須要作一個H5端的商城，天然少不了支付，鑑於微信的社交能力，咱們前期只考慮了微信支付，在此過程當中遇到的一些問題，簡單整理下。
這裏我只說前端須要處理的，其它的配置及參數什麼的後端會給你整好因此不作介紹。

支付方式

1.微信內經過WeixinJSBridge（jsApi）來接入支付，具體方式能夠查看文檔
2.微信環境外（好比瀏覽器）吊起微信支付，具體方式能夠查看文檔

jsApi方式支付

1.此種方式只能在微信環境內支付，經過WeixinJSBridge（微信內置對象）來吊起支付。
2.支付流程，須要先去微信獲取受權換取openid，（建議進入支付頁面前先拿好openid,由於我在開發過程當中發如今當前頁面獲取的話用戶刷新頁面 會報錯，用戶受權獲取到的code只能用一次。）
咱們的項目採用的React。因此經過window.WeixinJSBridge來判斷是否有WeixinJSBridge不然代碼會報錯。

// 外界調用 直接引入 wxPay.js 傳入支付參數 以及跳轉頁面路由
  // 首先封裝具體的封裝方法
  // 參數說明 history ：路由 方便支付成功後能夠跳轉制定頁面。
  // params: 支付須要的餓參數
  function onBridgeReady(params, history) {
  if (window.WeixinJSBridge) {
    window.WeixinJSBridge.invoke(
      'getBrandWCPayRequest',
      {
        appId: params.appId, // 公衆號名稱，由商戶傳入
        timeStamp: params.timeStamp, // 時間戳，自1970年以來的秒數
        nonceStr: params.nonceStr, // 隨機串
        package: params.package,
        signType: params.signType, // 微信簽名方式：
        paySign: params.paySign, // 微信簽名
      },
      function(res) {
        if (res.err_msg === 'get_brand_wcpay_request:ok') {
          history.replace({
            pathname: params.pathname,
          });
        }
      },
    );
  }
}

export default function wxPay(params, history) {
  console.log('支付功能', params);

  if (typeof WeixinJSBridge === 'undefined') {
    if (document.addEventListener) {
      document.addEventListener('WeixinJSBridgeReady', onBridgeReady(params, history), false);
    } else if (document.attachEvent) {
      document.attachEvent('WeixinJSBridgeReady', onBridgeReady(params, history));
      document.attachEvent('onWeixinJSBridgeReady', onBridgeReady(params, history));
    }
  } else {
    onBridgeReady(params, history);
  }
}

非微信環境內支付

1.這種方法支付完成後微信建議增長二次確認彈窗，用於確認用戶是否支付完成，爲何這樣作開發文檔上有體現。
2.關於支付完成後回調地址 建議採用前端本身寫好傳給後端，這樣回調地址就會變得靈活多變，方便開發及測試。
ps注意
1.因爲各個廠商瀏覽器機制不一樣，部分手機在支付完成後經過配置的redirect_url回退到二次確認頁面的時候，瀏覽器會刷新，因此你的彈框可能會顯示不正確，因此本身能夠採起一些方式（增長參數/本地存儲）來判斷。
2.ios手機瀏覽器一定會從新刷新。

//微信環境外支付後端會直接返回一個url,直接拿這個結果在當前頁面打開，就能夠喚醒微信，吊起支付。
 window.location.href = res.data.mwebUrl;

else

1.調試時微信支付是不支持本地IP的，因此請配好開發及正式域名。
2.建議項目不要用hash（#）路由模式，這會給你帶來意想不到的BUG.
3.哪裏寫錯的地方請你們評論指正。