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

推薦する

HTMLのインライン要素とブロックレベル要素とは何か、またそれらの違いは何ですか

以前の就職面接で面接官が尋ねた質問を覚えています。「インライン要素とは何ですか。ブロックレベル要素と...

MySQL の従来のソート、カスタム ソート、中国語のピンイン文字によるソート

MySQL の通常のソート、カスタム ソート、中国語のピンイン文字によるソート。実際の SQL を記...

2021年の花火効果をJSで描画(ソースコードダウンロード付き)

この作品はフロントエンド開発(JSコンテンツ)の知識を使用していますが、フロント部分の後半部分の知識...

Apache Bench で Web ストレス テストを実装する方法

1. Apache Benchの紹介ApacheBench は、Apache サーバーに付属する W...

Vueプロジェクトを大画面に適応させる方法の例

レムの簡単な分析まず、remはCSS単位です。pxの固定ピクセル単位と比較すると、remはより柔軟性...

react-color を使用してフロントエンドのカラーピッカーを実装する方法

背景次の図に示すように、 react-color を使用してフロントエンド インターフェースのカラー...

無効にするとフォームの入力が送信できない問題の解決方法

以前、追加と変更を一緒に記述したテストプログラムを書いたことがあります。変更が必要な場合は、フォーム...

Angular構造ディレクティブモジュールとスタイルの詳細な説明

目次1. 構造指示モジュールforRoot()を書く3. スタイルの定義ドラッグ時の順序を調整するに...

Linux での NVIDIA GPU 使用状況の監視の詳細な説明

TensorFlow をディープラーニングに使うとビデオメモリ不足がよく起こるので、GPU 使用状況...

MYSQLデータベースの最適化段階を簡単に理解する

導入面接官がこんな質問をしたことはありませんか?データベースをどのように最適化しますか?では、この質...

Dockerを使用してphabricatorをインストールする方法

ここでは Ubuntu 16.04 システムを使用しています。 dockerを使用したインストールh...

Webフロントエンド開発経験の概要

XMLファイルは、可能な限りutf-8でエンコードする必要があります。gb2312には、?など、保存...

HTML 9グリッドレイアウトの実装方法

ウェブサイトのレイアウトの多様化は、当社のフロントエンドの得意分野です。最近、UC ブラウザのデフォ...

Vue v-model 関連の知識のまとめ

​v-model は、入力とフォーム データ間、または 2 つのコンポーネント間の双方向データ バイ...

MySQL 5.7.17 とワークベンチのインストールと設定のグラフィックチュートリアル

この記事では、MySQL 5.7.17ワークベンチのインストールと設定方法を参考までに紹介します。具...