検索
ホームページウェブフロントエンドjsチュートリアルNodejs環境でWeChatコードスキャン決済機能を実装するにはどうすればよいですか?

この記事では、コード例を使用して、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 までご連絡ください。
Python vs. JavaScript:コミュニティ、ライブラリ、リソースPython vs. JavaScript:コミュニティ、ライブラリ、リソースApr 15, 2025 am 12:16 AM

PythonとJavaScriptには、コミュニティ、ライブラリ、リソースの観点から、独自の利点と短所があります。 1)Pythonコミュニティはフレンドリーで初心者に適していますが、フロントエンドの開発リソースはJavaScriptほど豊富ではありません。 2)Pythonはデータサイエンスおよび機械学習ライブラリで強力ですが、JavaScriptはフロントエンド開発ライブラリとフレームワークで優れています。 3)どちらも豊富な学習リソースを持っていますが、Pythonは公式文書から始めるのに適していますが、JavaScriptはMDNWebDocsにより優れています。選択は、プロジェクトのニーズと個人的な関心に基づいている必要があります。

C/CからJavaScriptへ:すべてがどのように機能するかC/CからJavaScriptへ:すべてがどのように機能するかApr 14, 2025 am 12:05 AM

C/CからJavaScriptへのシフトには、動的なタイピング、ゴミ収集、非同期プログラミングへの適応が必要です。 1)C/Cは、手動メモリ管理を必要とする静的に型付けられた言語であり、JavaScriptは動的に型付けされ、ごみ収集が自動的に処理されます。 2)C/Cはマシンコードにコンパイルする必要がありますが、JavaScriptは解釈言語です。 3)JavaScriptは、閉鎖、プロトタイプチェーン、約束などの概念を導入します。これにより、柔軟性と非同期プログラミング機能が向上します。

JavaScriptエンジン:実装の比較JavaScriptエンジン:実装の比較Apr 13, 2025 am 12:05 AM

さまざまなJavaScriptエンジンは、各エンジンの実装原則と最適化戦略が異なるため、JavaScriptコードを解析および実行するときに異なる効果をもたらします。 1。語彙分析:ソースコードを語彙ユニットに変換します。 2。文法分析:抽象的な構文ツリーを生成します。 3。最適化とコンパイル:JITコンパイラを介してマシンコードを生成します。 4。実行:マシンコードを実行します。 V8エンジンはインスタントコンピレーションと非表示クラスを通じて最適化され、Spidermonkeyはタイプ推論システムを使用して、同じコードで異なるパフォーマンスパフォーマンスをもたらします。

ブラウザを超えて:現実世界のJavaScriptブラウザを超えて:現実世界のJavaScriptApr 12, 2025 am 12:06 AM

現実世界におけるJavaScriptのアプリケーションには、サーバー側のプログラミング、モバイルアプリケーション開発、モノのインターネット制御が含まれます。 2。モバイルアプリケーションの開発は、ReactNativeを通じて実行され、クロスプラットフォームの展開をサポートします。 3.ハードウェアの相互作用に適したJohnny-Fiveライブラリを介したIoTデバイス制御に使用されます。

next.jsを使用してマルチテナントSaaSアプリケーションを構築する(バックエンド統合)next.jsを使用してマルチテナントSaaSアプリケーションを構築する(バックエンド統合)Apr 11, 2025 am 08:23 AM

私はあなたの日常的な技術ツールを使用して機能的なマルチテナントSaaSアプリケーション(EDTECHアプリ)を作成しましたが、あなたは同じことをすることができます。 まず、マルチテナントSaaSアプリケーションとは何ですか? マルチテナントSaaSアプリケーションを使用すると、Singの複数の顧客にサービスを提供できます

next.jsを使用してマルチテナントSaaSアプリケーションを構築する方法(フロントエンド統合)next.jsを使用してマルチテナントSaaSアプリケーションを構築する方法(フロントエンド統合)Apr 11, 2025 am 08:22 AM

この記事では、許可によって保護されたバックエンドとのフロントエンド統合を示し、next.jsを使用して機能的なedtech SaaSアプリケーションを構築します。 FrontEndはユーザーのアクセス許可を取得してUIの可視性を制御し、APIリクエストがロールベースに付着することを保証します

JavaScript:Web言語の汎用性の調査JavaScript:Web言語の汎用性の調査Apr 11, 2025 am 12:01 AM

JavaScriptは、現代のWeb開発のコア言語であり、その多様性と柔軟性に広く使用されています。 1)フロントエンド開発:DOM操作と最新のフレームワーク(React、Vue.JS、Angularなど)を通じて、動的なWebページとシングルページアプリケーションを構築します。 2)サーバー側の開発:node.jsは、非ブロッキングI/Oモデルを使用して、高い並行性とリアルタイムアプリケーションを処理します。 3)モバイルおよびデスクトップアプリケーション開発:クロスプラットフォーム開発は、反応および電子を通じて実現され、開発効率を向上させます。

JavaScriptの進化:現在の傾向と将来の見通しJavaScriptの進化:現在の傾向と将来の見通しApr 10, 2025 am 09:33 AM

JavaScriptの最新トレンドには、TypeScriptの台頭、最新のフレームワークとライブラリの人気、WebAssemblyの適用が含まれます。将来の見通しは、より強力なタイプシステム、サーバー側のJavaScriptの開発、人工知能と機械学習の拡大、およびIoTおよびEDGEコンピューティングの可能性をカバーしています。

See all articles

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

AtomエディタMac版ダウンロード

AtomエディタMac版ダウンロード

最も人気のあるオープンソースエディター

VSCode Windows 64 ビットのダウンロード

VSCode Windows 64 ビットのダウンロード

Microsoft によって発売された無料で強力な IDE エディター

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

DVWA

DVWA

Damn Vulnerable Web App (DVWA) は、非常に脆弱な PHP/MySQL Web アプリケーションです。その主な目的は、セキュリティ専門家が法的環境でスキルとツールをテストするのに役立ち、Web 開発者が Web アプリケーションを保護するプロセスをより深く理解できるようにし、教師/生徒が教室環境で Web アプリケーションを教え/学習できるようにすることです。安全。 DVWA の目標は、シンプルでわかりやすいインターフェイスを通じて、さまざまな難易度で最も一般的な Web 脆弱性のいくつかを実践することです。このソフトウェアは、