ミニプログラムはミニプログラムクラウドを使用してWeChatの支払い機能を実装します

ミニプログラムはミニプログラムクラウドを使用してWeChatの支払い機能を実装します

1. WeChat Payを開く

1.1 アフィリエイト加盟店番号

\微信公眾號平臺\功能\微信支付\商戶號管理\關聯商戶號

ここに画像の説明を挿入

1.2 加盟店番号を追加する

\云開發平臺\設置\其他設置\微信支付配置\添加商戶號

ここに画像の説明を挿入

1.3 管理者権限

1.2 その画像で、「承認」をクリックします。管理者の WeChat にプロンプ​​トが表示されるので、クリックして承認を確認します。

そうでない場合、これを使用すると、 sub_mch_id與sub_appid不匹配示すエラー メッセージが表示されます。

2. クラウド機能開発

2.1 新しいクラウド関数を作成する

ここに画像の説明を挿入

ここに画像の説明を挿入

2.2 クラウド関数コード

\pay\index.js

const クラウド = require('wx-server-sdk')
クラウド.init({
  環境: cloud.DYNAMIC_CURRENT_ENV
})

exports.main = async (イベント、コンテキスト) => {    
const res = cloud.cloudPay.unifiedOrder({
    "本文" : イベント本文、
    "outTradeNo" : イベント.outTradeNo、
    "spbillCreateIp" : "127.0.0.1",
    "subMchId" : "0000000000", //注意: キーはサブマーチャント ID ですが、実際には通常のマーチャント ID です
    "totalFee" : parseInt(event.totalFee), // 2 番目の落とし穴: 数値でなければならないことに注意してください。数値でない場合は、エラーが報告されます: unifiedOrder:fail wx api error: -202
    "envId": "ooo-xxxxxxxxxxxxxxxxxx", //これはコールバック関数が属するクラウド環境 ID です
    "functionName": "payCallBack", //これはコールバック関数名です"nonceStr":event.nonceStr, //3つ目の落とし穴:公式ドキュメントの該当クラウド関数コードにはnonceStrとtradeTypeがありません。テストすると、nonceStrが存在しないというエラーが報告されます。ドキュメントを調べたところ、これは必須項目であることがわかりました。直接貼り付けた後、次の2つのパラメータを追加する必要があります"tradeType":"JSAPI"
  })
  戻り値
}

2.3 クラウド関数のアップロードとデプロイ

ここに画像の説明を挿入

ここに画像の説明を挿入

3. ミニプログラムコール

3.1 統一された順序付け

  • WeChat で注文した後に取得したデータは、まずデータベースに保存し、バックアップとして保管する必要があります。
  • 次にWeChatの支払いインターフェースを呼び出します
//クラウド関数、WeChat統合注文を呼び出すcloudPay(){
    var _this = これ
    this.setData({
      本文: "請求書支払い-xxxxx",
      アウトトレード番号: this.data.id+"-"+util.uuid(16),
      totalFee: this.data.totalCost*100 //支払い単位: セント})
    app.showLoading(true)
    wx.cloud.callFunction({
      名前: 「支払う」、
      データ: {
        本文: _this.data.body,
        アウトトレード番号: _this.data.outTradeNo,
        合計料金: _this.data.totalFee、
        nonceStr:util.uuid(32)//独自のuuid関数を呼び出す},
      成功(res) {
        // エラーコード: 0
        // エラーメッセージ: "cloudPay.unifiedOrder:ok"
        // 戻りコード: "FAIL"
        // returnMsg: "total_fee が空です。"
        console.log("送信成功", res.result)
        if(res.result.returnCode!="SUCCESS"){
          app.showToast(res.result.returnMsg)
          戻る
        }
        _this.unifiedOrder(res.result)
        // _this.requestPayment(res.result)
      },
      失敗(res) {
        console.log("送信に失敗しました", res)
      }
    })
  },

3.2 WeChat決済インターフェースを開く

  //公式の標準支払い方法。支払いインターフェースを呼び出します requestPayment(payData) {
    var _this = これ;
    const payment = payData.payment //前の関数の結果は、ここで使用するパラメータを直接統合していることに注意してください。これを直接展開して、wx.requestPayment({
      ...payment、//...は変数を展開するための構文です success(res) {
        console.log("支払いが成功しました", res)
        _this.paySuccess()
      },
      失敗(res) {
        console.log("支払いに失敗しました", res)
      }
    })
  },

3.2 支払い成功コールバック

  • requestPaymentの成功コールバック関数で支払い成功操作を直接実行することは推奨されません。
  • 別のクラウド関数payCallBackを作成する方が良いでしょう
  • このクラウド関数payCallBackは、自社構築サーバーのインターフェースを呼び出して、支払い成功操作を実行します。
  • これには、クラウド関数で http インターフェースを呼び出す方法が関係します。これについては後で説明します。

ミニプログラムクラウドを通じてミニプログラムでWeChat決済機能を使用する方法についての記事はこれで終わりです。ミニプログラムでのWeChat決済の詳細については、123WORDPRESS.COMの以前の記事を検索するか、以下の関連記事を引き続き閲覧してください。今後とも123WORDPRESS.COMをよろしくお願いいたします。

以下もご興味があるかもしれません:
  • ミニプログラムからWeChat決済を呼び出す方法
  • WeChat支払いインターフェースを呼び出すWeChatアプレットを実装する方法
  • WeChatアプレットとPHPを使用したWeChat支払いの簡単な例
  • WeChatアプレットWeChat支払いアクセス開発例詳細説明
  • WeChat支払いのためのWeChatミニプログラムの手順
  • WeChatミニプログラム - WeChatログイン、WeChat支払い、テンプレートメッセージの詳細な説明

<<:  MySQL でタイムゾーンを表示および変更する方法

>>:  Linuxのseqコマンドを使用して数字のシーケンスを生成します(推奨)

推薦する

MySql インデックスはクエリ速度を向上させる一般的な方法のコード例

インデックスを使用してクエリを高速化する1. はじめにWeb 開発には、ビジネス テンプレート、ビジ...

Apache の一般的な仮想ホスト設定方法の分析

1. Apacheサーバーのインストールと設定yum インストール httpd -y systemc...

IE で UTF8 エンコードされたページで行が理由もなく空白のままになり、UTF8 ページが表示されない問題の解決方法

理由は、すべてのファイルが utf8 でエンコードされているためです。ファイルがインクルードされると...

vuex で履歴を実装するためのサンプルコード

私は最近、ユーザー操作を元に戻す、またはやり直す機能を備えたビジュアル操作プラットフォームを開発して...

動的なテーブル効果を実現するJavaScript

この記事では、動的なテーブル効果を実現するためのJavaScriptの具体的なコードを参考までに紹介...

rpm を使用して指定されたバージョンの docker (1.12.6) をインストールする詳細な手順

1. 理由システムが Centos7.3 の場合、yum install docker を使用して直...

インタラクティブデザインでページングと読み込みのどちらを選択するかについての説明

この記事の著者@子木yoyoが個人ブログに投稿したものです。 Web ページでもモバイル アプリでも...

Docker コンテナのマウントディレクトリ操作の表示

Dockerコンテナのマウントディレクトリ情報のみを表示する docker 検査 --format ...

Tomcat9 Windows サービスのインストールに関する詳細なチュートリアル

1. 準備1.1 service.bat を含む tomcat 圧縮パッケージをダウンロードします。...

ウェブ開発におけるクロスドメインの理由に対する複数のソリューション

目次クロスドメインの理由JSONP Nginxソリューションバックエンドソリューションクロスドメイン...

Linux で Nginx 1.16.0 をインストールするための詳細なチュートリアル

最近 Linux をいじっていたので、nginx の新しいバージョンをインストールしたいと思いました...

行間隔が広い場合の解決策(IE では 5 ピクセル多い)

コードをコピーコードは次のとおりです。 li {幅:300px; 高さ:23px; 行の高さ:24p...

Linux Centos でスクリプトを使用して Docker をインストールする方法

Dockerの主な機能は何ですか?現在、Docker には少なくとも次のアプリケーション シナリオが...

DIVのぼかし機能を実装する方法

マウスを動かしたときにDIVが消えるように手ぶれ補正を使用するdiv タグ自体は onblur イベ...

uniapp エントリーレベル nvue クライミングピット記録の分析

目次序文こんにちは世界画像 境界線の半径を設定する実ピクセルを設定する外部CSSをインポートttfフ...