組み込みのbrowser_javascriptスキルを使用してH5ページ支払い用のWeChat支払いを実装する方法

プロジェクトの要件により、WeChat 支払いを H5 ページに追加する必要があるので、試してみましたが、特にデバッグが不便な場合には、非常に注意が必要です。

これは WeChat の公式 API ドキュメントです WeChat API

WeChat 決済の準備

パブリック アカウントを申請し、支払いを有効にするのは非常に簡単です。
申請後、WeChatパブリックプラットフォームページの「WeChat Payment」ページの「開発構成」タブで「支払い認証ディレクトリ」、「テスト認証ディレクトリ」、「テストホワイトリスト」を設定します
WeChat パブリック プラットフォーム ページの「デベロッパー センター」で「AppID (アプリケーション ID)」と「AppSecret (アプリケーション キー)」を見つけます
販売者プラットフォームで WeChat 支払いによって割り当てられた販売者番号を見つけ、販売者支払いキーを構成します

具体的な手順

まず、WeChat 決済 API を通じて支払い用の prepay_id を取得します。ここでは、上記の「AppID (アプリケーション ID)」、「AppSecret (アプリケーション キー)」、「WeChat 決済によって割り当てられた加盟店番号」を使用する必要があります。 " 「加盟店支払いキー」およびその他のパラメーター (詳細については WeChat 開発ドキュメントを参照してください) は、MD5 を使用して署名に暗号化されます (最初の署名)。prepay_id を取得した後、prepay_id およびその他のパラメーター (詳細については WeChat 開発ドキュメントを参照してください) を使用します。詳細については、WeChat 開発ドキュメントを参照してください) MD5 を使用して署名を暗号化します (2 番目の署名) 次に、フロントエンドで、WeChat の組み込みブラウザ WeixinJSBridge.invoke が提供する js API を使用して、WeChat のポップアップ ページを呼び出します。ここでは、上の 2 番目の署名を使用する必要があります

具体的なコードは次のとおりです

$.get('/xxx',function(data){
 if(data && data !== ""){
  var _data = $.parseJSON(data)[0];
  if(parseInt(_data.userAgent) < 5){
  alert('您的微信版本低于5.0，无法使用微信支付！');
  return false;
  }
  WeixinJSBridge.invoke('getBrandWCPayRequest',{
  'appId': _data.appId,
  'timeStamp': _data.timeStamp,
  'nonceStr': _data.nonceStr,
  'package': 'prepay_id=' + _data.packageOne,
  'signType': _data.signType,
  'paySign': _data.paySign
  },function(res){
   if(res.err_msg === 'get_brand_wcpay_request:ok'){
   alert('支付成功，返回订单列表！');
   }else if(res.err_msg === 'get_brand_wcpay_request:cancel'){
   alert('取消支付！');
   }
  });

 }
});

いくつかの簡単な失敗点に注意が必要です

支払いリンクが開発プラットフォームで設定されたリンクと一致しません

合計 2 つの署名が必要ですが、必要なパラメータが異なります。JS で使用される署名は 2 番目の署名です。パラメータを混同しないようにしてください。

本文内にエスケープする必要がある漢字がある場合、完全には解決されていない問題がいくつかあります。つまり、ポップアップ レイヤーの場合、位置支払いの妥当性を判断する時間がありません。 WeChat 支払いの滞留時間が長すぎるため、注文の有効期限が切れている可能性がありますが、この問題の解決方法をご存知の方がいらっしゃいましたら、解決策を教えていただければ幸いです