ミニプログラムはミニプログラムクラウドを使用して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コマンドを使用して数字のシーケンスを生成します(推奨)

推薦する

React Router 5.1.0 はページジャンプナビゲーションを実装するために useHistory を使用します

目次1. withRouterコンポーネントを使用する2. ルートタグを使用するReactRoute...

魔法のMySQLデッドロックトラブルシューティング記録

背景MySQL のデッドロックについて言えば、私は以前 MySQL のロックに関する基本的な紹介記事...

MySQL 8.0 の統計が不正確である理由

序文Oracle であれ MySQL であれ、新バージョンで導入された新機能は、一方では製品の機能性...

JS ES6 変数分割代入の詳細な説明

目次1. 脱構築とは何か? 2. 配列の分割3. 配列モードと代入モードの統一4. デフォルト値の構...

VirtualBoxにOpenSuseをインストールする方法

仮想マシンはホストマシンにインストールされます。 CPU とメモリはホスト マシンと共有する必要があ...

HTML コード作成ガイド

共通コンベンションタグ自己終了タグ。閉じる必要はありません (例: img input br hr ...

ウェブページのフッターで注意すべきことのまとめ

たくさんのリンクおそらく、このようなサイトをたくさん見たことがあるでしょう。ページの下部に 50 個...

HTML テーブルのオーバーフローの解決方法

テーブルが広い場合は、あふれてしまう可能性があります。たとえば、左と右の 2 つの div がありま...

nginx サーバーでの 502 不正なゲートウェイ エラーの原因のトラブルシューティング

パブリックアカウントのファンデータを同期してバッチプッシュするときに、サーバーがエラー502を報告し...

Vueエンジニアがカプセル化しなければならない埋め込み命令の知識のまとめ

目次序文指導の基本フック機能フック関数のパラメータ文章使い方とアイデア成し遂げる汎用性を高める要約す...

フローチャートとUIフローの違い

UI デザインにおける多くの概念は言葉で言えば似ているように見えるかもしれませんが、実際には大きく異...

MySQL シリーズ 12 バックアップとリカバリ

目次チュートリアルシリーズ1. バックアップ戦略の説明1. バックアップの種類2. バックアップで考...

ウェブページ経由で jar パッケージを Nexus にアップロードする方法

Maven を使用してプロジェクトを管理する場合、jar パッケージをプライベート ウェアハウスにア...

Docker 経由で wsl の tar ファイルを作成する方法

最近VScodeのリモート開発機能をいじっています。Dockerのコンテナに接続できるほか、WSLに...

Mybatis マッパー動的プロキシの原理の分析

序文動的プロキシの原理を説明する前に、まず、mybatis を統合した後の dao 層の 2 つの実...