简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
ホームページ
記事
に質問
コース
特集
ダウンロード
ゲーム
辞書
最近の更新

ホームページ  >  記事  >  ウェブフロントエンド  >  Nodejs環境でWeChatコードスキャン決済機能を実装するにはどうすればよいですか?

Nodejs環境でWeChatコードスキャン決済機能を実装するにはどうすればよいですか?

亚连
亚连オリジナル
2018-06-05 17:18:481550ブラウズ

この記事では、コード例を使用して、nodejs を使用して WeChat スキャン コード支払い関数を作成する方法を詳しく説明します。興味のある友人は参照してください。

前書き

この記事は主に、WeChat スキャン コードの支払いプロセス中に私が遭遇した問題を記録し、皆様に参考にしていただけるよう願っています。お役に立てれば幸いです

開発環境

  • nodejs v8.1.0

  • egg v1.1.0

準備

WeChat public account-appid

WeChat 販売アカウント-mch_id

key 値 (署名アルゴリズムに必要です。実際には 32 ビットのパスワードです。md5 を使用できます) (キー設定パス: WeChat Merchant Platform (pay.weixin.qq.com)-->アカウント設定-->API セキュリティ-->キー設定)

QR コードをスキャンして支払い統合注文を行う

以下は必須です 比較的シンプルなため WeChat モード 2 が使用されます

  let MD5 = require('md5'),
    xml2js = require('xml2js'),
    url = "https://api.mch.weixin.qq.com/pay/unifiedorder",// 下单请求地址
    appid = '公众号id',
    mch_id = '微信商户号'；
    notify_url = '回调地址',
    out_trade_no = '自己设置的订单号',// 微信会有自己订单号、我们自己的系统需要设置自己的订单号
    total_fee = '订单金额',// 注意，单位为分
    body = '商品简单描述', 
    trade_type = 'NATIVE',// 交易类型，JSAPI--公众号支付、NATIVE--原生扫码支付、APP--app支付
    nonce_str = moment().format('YYYYMMDDHHmmssSSS'),// 随机字符串32位以下
    stringA = `appid=${公众号id}&body=${body}&mch_id=${微信商户号}&nonce_str=${nonce_str}&notify_url=${
    notify_url}&out_trade_no=${out_trade_no}&spbill_create_ip=${ctx.request.ip}&total_fee=${total_fee}&trade_type=${trade_type}`,
    stringSignTemp = stringA + "&key=xxxxxxxxxxxxxxxxx", //注：key为商户平台设置的密钥key
    sign = MD5(stringSignTemp).toUpperCase(); //注：MD5签名方式

上記は必要なパラメータの一部です

署名生成アルゴリズムについては、WeChat 公式を参照してください: https://pay.weixin.qq.com/ wiki/doc/api/native.php?chapter=4_3

spbill_create_ipは端末のIPアドレスです

すべてのパラメータはxmlに結合されます

  const formData = "<xml>";
    formData += "<appid>" + appid + "</appid>"; //appid
    formData += "<body>" + body + "</body>"; //商品或支付单简要描述
    formData += "<mch_id>" + mch_id + "</mch_id>"; //商户号
    formData += "<nonce_str>" + nonce_str + "</nonce_str>"; //随机字符串，不长于32位
    formData += "<notify_url>" + notify_url + "</notify_url>"; //支付成功后微信服务器通过POST请求通知这个地址
    formData += "<out_trade_no>" + out_trade_no + "</out_trade_no>"; //订单号
    formData += "<total_fee>" + total_fee + "</total_fee>"; //金额
    formData += "<spbill_create_ip>" + ctx.request.ip + "</spbill_create_ip>"; //ip
    formData += "<trade_type>NATIVE</trade_type>"; //NATIVE会返回code_url ，JSAPI不会返回
    formData += "<sign>" + sign + "</sign>";
    formData += "</xml>";
  // 这里使用了egg里面请求的方式
  const resultData = yield ctx.curl(url, {
      method: &#39;POST&#39;,
      content: formData,
      headers: {
        &#39;content-type&#39;: &#39;text/html&#39;,
      },
    });

  // xml转json格式
  xml2js.parseString(resultData.data, function (err, json) {
    if (err) {
      new Error("解析xml报错")
    } else {
      var result = formMessage(json.xml); // 转换成正常的json 数据
      console.log(result) //打印出返回的结果
    }
  })
  var formMessage = function (result) {
    var message = {};
    if (typeof result === &#39;object&#39;) {
      var keys = Object.keys(result);
      for (var i = 0; i < keys.length; i++) {
        var item = result[keys[i]];
        var key = keys[i];
        if (!(item instanceof Array) || item.length === 0) {
          continue;
        }
        if (item.length === 1) {
          var val = item[0];
          if (typeof val === &#39;object&#39;) {
            message[key] = formMessage(val);
          } else {
            message[key] = (val || &#39;&#39;).trim();
          }
        } else {
          message[key] = [];
          for (var j = 0, k = item.length; j < k; j++) {
            message[key].push(formMessage(itemp[j]));
          }
        }
      }
    }
    return message;
  }

eggリクエストメソッドは上記で使用されており、ネイティブノードはリクエストを使用できます

var request = require(&#39;request&#39;);
  request({
    url: url,
    method: "POST",
    body: formData
  }, function(error, response, body) {
    if (!error && response.statusCode == 200) {
    }
  });

リクエストが成功すると、最終的に XML が返され、code_url と out_trade_no を含む XML がフロントエンドに返され、QR コードが生成されます。支払いを完了するためにコードをスキャンするようにユーザーに表示します

支払いが成功したかどうかを監視します

上記の操作が完了した後、ユーザーはこのままになるため、ユーザーが支払いを完了したかどうかを知る必要がありますページで、ユーザーが支払いを完了した後、支払いが成功したことをユーザーに通知する必要があります。

まず、ユーザーが支払いを開始するときに、ユーザーがコードをスキャンして支払いできるようにするために、タイマーを設定し、時々リクエストを送信する必要があります。この時点で、ノードのバックグラウンドで注文をクエリするためのインターフェイスを作成する必要があります。これはシステム内の注文番号です。このデータをバックエンドの注文クエリ インターフェイスに送信します。バックエンドは WeChat クエリ インターフェイス アドレス https://api.mch.weixin.qq.com/pay/orderquery を要求します。プロセスは上記と同じですが、インターフェイス アドレスが WeChat によって返される XML とは異なります。フィールドには SUCCESS と NOTPAY のステータスが表示され、支払いが成功した後、ユーザーにメッセージが表示され、タイマーがオフになったかどうかを判断できます。

コールバックアドレス

これは非常に重要な部分であり、ほとんどの操作は実際にこれで完了できますが、ユーザーのコンピューターが切断されていてリクエストを送信できないが、ユーザーがモバイル経由で支払うなどの特殊な状況が発生します。そのため、ユーザーの支払い情報を記録することができません。このとき、コールバック アドレスは非常に重要です

コールバック アドレスを設定します

WeChat Merchant Center -> Product Center -> Development Configuration -> QR コードをスキャンして支払います

その後、必要なものpost を使用してバックエンドで受信することです WeChat によって送信される非同期コールバック情報も XML 形式であることに注意してください。XML の受信がサポートされていない場合は、空のデータを取得する可能性があります

ここで、保存中に注意する必要があります。ユーザーの支払い情報を確認するには、まず支払いを行うかどうかを確認し、注文を変更する必要があります。繰り返しの操作を避けるために、複数のレコードが挿入される可能性があります

この場合、WeChat スキャンコード支払いにはまだ落とし穴があります。初めての方は、次の点に注意する必要があります

署名アルゴリズムは正しく書かれていなければ成功しません。正しく結合する必要があります

  1. WeChat は XML でデータを返します。データを取得しやすいように、プラグインを介して json に変換する必要があります

  2. return code_url はフロントエンドの QR コードを生成するために使用され、その後タイマーが必要です。注文が支払われたかどうかを確認するように設定し、最後にユーザーに結果が通知されます

  3. コールバック アドレスは非常に重要です。バックエンドは WeChat から返されたコールバック情報を受信するためにポストし、情報を保存する必要があります。 , ただし、ユーザーの支払い情報を保存する前に、注文が繰り返し追加されることを避けるために、注文が保存されているかどうかを知る必要があります。また、返された XML データは、通常の方法では受信できないため、バックエンドで受信できるようにする必要があり、追加の設定が必要です。

  4. 上記は私があなたのためにまとめたものです。
関連記事:

Vueのv-forのデータグループ化例

vue2.0の計算例 リストループ後の累積値の計算例

vue.jsのネストループ、if判定、動的削除の例

以上がNodejs環境でWeChatコードスキャン決済機能を実装するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：JS でモーション バッファリング効果を実装する方法 (詳細なチュートリアル)次の記事：JS でモーション バッファリング効果を実装する方法 (詳細なチュートリアル)

関連記事

続きを見る