H 5微信支払い

@H 5微信支払フロントエンド処理フロー
背景
プロジェクトの需要に基づいて、H 5端のショッピングモールを作る必要があります.もちろん支払いが欠かせません.微信の社交能力を考慮して、私たちは前期に微信の支払いしか考えていません.この過程で出会ったいくつかの問題は、簡単に整理します.ここではフロントエンドが処理する必要があるだけで、他の構成やパラメータなどのバックエンドが整っているので紹介しません.
支払い方法
1.微信内はWeixinJsBridge(jsApi)を通じて支払いにアクセスし、具体的にはドキュメントの表示.微信環境外(例えばブラウザ)は微信支払いを吊り上げることができ、具体的な方法はドキュメントの表示である.
jsApi方式支払い
1.この方式では、WeixinJsBridge(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.どこが間違っているのかコメントしてください.