クラウド決済を実装するWeChatミニプログラムについて

クラウド決済を実装するWeChatミニプログラムについて

1. はじめに

WeChat ミニプログラム クラウド開発を試したことのある人なら誰でも、WeChat ミニプログラム クラウド開発が現在クラウド決済をサポートしていることをご存知でしょう。

では、クラウド決済機能がサポートされると、支払いプロセス全体はどのようになるのでしょうか?

たとえば、ユーザーが支払いを開始する前、開始中、開始後の論理的な処理はどのようになっているべきでしょうか。より安全でエラーの可能性を減らすために、どのように設計すればよいでしょうか。

この記事では、主にクラウド決済の使用方法と、クラウド決済での注文システムと支払いプロセスを設計する方法について説明します。

ちなみに、WeChatの支払い機能は法人による通話のみをサポートしています

2. 思考分析

クラウド決済の呼び出しプロセスは、大きく分けて以下の4つのステップに分かれます。

1. 認証不要のパラメータを取得する

ミニプログラムは、金額や製品情報などの基本パラメータを渡した後、クラウド関数を呼び出して認証不要のパラメータを取得します。

2. ミニプログラム側の決済APIに認証不要のパラメータを渡す

クラウド関数は認証不要のパラメータを返します。このパラメータはミニプログラム側の支払い API の入力パラメータとして使用されます。

3. ユーザーの支払い

WeChat Payを呼び出し、ユーザーが支払いを行う/支払いをキャンセルする

4. WeChatは指定されたクラウド関数をコールバックします

このクラウド関数は、支払いが成功した後にコールバックされます。

ユーザーが支払いをキャンセルした場合、このクラウド関数はコールバックされません。

次に、上記の 4 つの手順に基づいて、注文がいつ作成されたか、注文の支払いステータスがいつ変更されたかを分析できます。

注文の作成は、最初のステップで認証不要のパラメータを取得するときに行う必要があります。認証不要のパラメータを取得した後、注文番号やその他の情報をデータベースに挿入する必要があります。

この時点での注文の支払いステータスは支払い保留中になります。

同時に、注文の支払いステータスの変更は 4 番目のステップで行う必要があることもわかります。支払いが成功した場合は、注文の支払いステータスを支払い成功に変更します。

関連する公式ドキュメントのリンク:

  • クラウド決済ドキュメント
  • クラウド決済コールバックドキュメント
  • ミニプログラムで支払いAPIドキュメントを呼び出す

3. クラウド決済のケーススタディ

1. クラウド機能

1-1. 認証不要のパラメータ取得クラウド機能(wxPay)

このクラウド関数は主に、支払い API に必要なパラメータを取得し、データベースに挿入する注文を作成するために使用されます。

成功した通話例の結果のスクリーンショット

実装コード

// クラウド関数エントリファイル const cloud = require('wx-server-sdk')

クラウド.init({
  環境: cloud.DYNAMIC_CURRENT_ENV
})

定数db = cloud.database()

exports.main = async (イベント) => {

  const wxContent = cloud.getWXContext() // openid とその他の情報 const openid = wxContent.OPENID
  定数 appid = wxContent.APPID

  const totalFee = event.totalFee // 支払い金額(単位:セント)
  const body = event.body // 商品名 const outTradeNo = createOutTradeNo() // 注文番号 // 認証不要の支払いパラメータを取得 const payMent = await cloud.cloudPay.unifiedOrder({
    「本文」:本文、
    "outTradeNo": アウトトレードNo、
    "spbillCreateIp": "127.0.0.1",
    "subMchId": "加盟店番号", //加盟店番号 "totalFee": totalFee,
    "envId": "対応するクラウド環境 ID", // クラウド環境 ID
    "functionName": "payCallBack" // 支払いコールバック クラウド関数})

  // 注文を作成する const nowTime = new Date().getTime()
  定数orderObj = {
    _openid: オープンID、
    アプリID: アプリID、
    アウトトレード番号: アウトトレード番号、
    合計手数料: 合計手数料 * 0.01、
    支払いステータス: '待機'、
    作成時刻: 現在時刻、
    更新時刻: 現在時刻、
    削除時間: null、
  }
  addOrder(orderObj) を待機します。

  返金
}

/** ランダムな一意の順序番号 (32 ビット) を作成します */
const createOutTradeNo = () => {
  let outTradeNo = new Date().getTime() // 現在の 13 桁のタイムスタンプを取得します。let numStr = '0123456789';
  randomStr = '' とします。
  (i = (32 - 13); i > 0; --i) の場合 {
    randomStr += numStr[Math.floor(Math.random() * numStr.length)];
  }
  outTradeNo += ランダムStr
  返品 outTradeNo
}

/** データベースに注文を作成する */
定数addOrder = async(orderObj) => {
  戻り値: db.collection('order') を待機します。
    。追加({
      データ:orderObj
    })
    .then(res => {
      console.log("注文が正常に作成されました=====>", res, orderObj)
    })
    .catch(エラー => {
      console.log("注文例外の作成 =====>", err, orderObj)
    })
}

1-2. 支払いコールバッククラウド関数(payCallBack)

ユーザーが正常に支払いを済ませると、WeChat サーバーはこのクラウド関数を呼び出し、支払者の注文番号、OpenID、AppID などの情報を伝えます。

開発者はこれを使用して、現在コールバックされている注文を判別できます。

コールバックのドキュメント

成功したコールバック結果のスクリーンショットの例

実装コード

// クラウド関数エントリファイル const cloud = require('wx-server-sdk')

クラウド.init({
  環境: cloud.DYNAMIC_CURRENT_ENV
})

定数db = cloud.database()

// クラウド関数エントリ関数 exports.main = async (event) => {
  console.log("コールバック戻りオブジェクト =====>", イベント)
	// 判定条件 if (event.returnCode == 'SUCCESS') {
    イベント結果コードが '成功' の場合
      // クエリ条件 const whereObj = {
        appid: event.subAppid, // ミニプログラムの APPID
        _openid: event.subOpenid, // ミニプログラムユーザーの openid
        outTradeNo: event.outTradeNo, // 販売業者番号の注文番号}
      // オブジェクトを更新 const updateObj = {
        transactionId: event.transactionId, // WeChat の注文番号 totalFee: event.totalFee * 0.01, // WeChat の受取金額 timeEnd: event.timeEnd, // 支払い終了時刻 payStatus: 'success',
        更新時間: 新しい Date().getTime()
      }
      // 順序を更新する await updateOrder(whereObj, updateObj)
    }
  }
  // 支払いコールバックのプロトコルと入力プロトコルを返します(この構造は返される必要があります。詳細についてはドキュメントを参照してください)
  戻る {
    エラーコード: 0,
    エラー: イベント.結果コード
  }
}

/** 注文の支払いステータスを更新します */
定数 updateOrder = async (whereObj, updateObj) => {
  戻り値: db.collection('order') を待機します。
    .where(オブジェクト)
    。アップデート({
      データ:updateObj
    })
}

2. ミニプログラム側(jsコード)

// ページ/wxPay/wxPay.js
ページ({

  /**
   * ページの初期データ */
  データ: {

  },

  /**
   * ライフサイクル機能 - ページの読み込みをリッスンする*/
  onLoad() {},

  /**
   * ライフサイクル機能 - モニターページ表示 */
  onShow() {},

  /**支払いクリックの監視*/
  非同期ペイタップ(){
    定数合計手数料 = 2
    const body = '支払いテスト'
    wx.showLoading({
      タイトル: 「WeChat決済開始」
      マスク: 真
    })

    // 支払い認証不要のパラメータを取得する const payMentRes = await this.getPayMent(totalFee, body)
    wx.hideLoading({
      成功: (res) => {},
    })
    // ミニプログラム支払い API
    const payRes = this.wxPay(payMentRes.result.payment) を待機します
    //支払いAPIの戻り結果 print console.log(payRes)
  },

  /**
   * ミニプログラム決済API
   * @param {object} 支払い認証不要パラメータ*/
  wxPay(支払い) {
    新しい Promise を返します ((resolve, 拒否) => {
      wx.requestPayment({
        ...支払い、
        成功(res) {
          解決する({
            ステータス: '成功'、
            解像度: 解像度
          })
        },
        失敗(エラー) {
          解決する({
            ステータス: '失敗'、
            回答: エラー
          })
        }
      })
    })
  },

  /**
   * 支払い認証不要のパラメータを取得します* @param {number} totalFee 支払い金額、単位: セント* @param {string} body 商品名*/
  getPayMent(totalFee, 本文) {
    新しい Promise を返します ((resolve, 拒否) => {
      wx.cloud.callFunction({
        名前: 'wxPay',
        データ: {
          合計料金、
          体
        },
        成功(res) {
          解決する
        },
        失敗(エラー) {
          解決(エラー)
        }
      })
    })
  },

})

3. 支払い結果

ユーザー側

商人側

4. コードディレクトリ構造

4. なぜこのように書くのか

学生の中にはWeChatクラウドペイメントを使ったことがある人もいるかもしれないが、上記のものを使ったことがない人もいるだろう。支払いコールバック クラウド関数。

ただし、ユーザーの支払い結果を取得することも可能です。

下記の通り

実際、 API( wx.requestPayment())現在の支払い結果を返すこともできます。実際、このコールバックの結果を使用して、支払いが成功したかどうかを判断することが可能です。

この場合、支払い結果を取得するために支払いコールバック クラウド関数を記述する必要があるのはなぜでしょうか?

これを確認すると、実装プロセス全体が完了したことも意味します。なぜこのように実装されているのか疑問に思う場合は、自分で答えを見つけることができるはずです。

開発仕様や最適化に関する些細な問題はさておき、非常に致命的な理由をお伝えしたいと思います。

WeChatミニプログラム決済API( wx.requestPayment())には iOS 側で致命的な問題があります。

ユーザーが支払いを済ませると、次のページが表示されます。

ユーザーが完了ボタンをクリックしない場合は、WeChatミニプログラムの支払いAPI( wx.requestPayment() コールバックはトリガーされません。

つまり、ミニプログラム自体はユーザーの支払い結果を取得することはできません。

ユーザーが WeChat を直接終了すると、ミニプログラムは破棄されます。このとき、注文ステータスはどのように変更されますか?

ヒント: この問題は Android 側では発生しません。興味のある学生は自分で以下のことを実践することができます。

V. 結論

これはアイデアですが、注文挿入の失敗、更新の失敗、その他の例外の問題など、一部の例外処理は開発プロセス中に開発者自身が処理する必要があります。確率は低いですが、通話記録が印刷されているので、問題があれば通話記録や関連情報も確認できます。

WeChatミニプログラムでクラウド決済を実装する方法についての記事はこれで終わりです。WeChatミニプログラムクラウド決済に関する関連コンテンツについては、123WORDPRESS.COMで過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも123WORDPRESS.COMをよろしくお願いいたします。

以下もご興味があるかもしれません:
  • WeChatミニプログラム - WeChatログイン、WeChat支払い、テンプレートメッセージの詳細な説明
  • WeChat アプレット支払いバックエンド Java 実装例
  • PHP: WeChat アプレット WeChat 決済サーバー統合例の詳細な説明とソースコードのダウンロード
  • WeChatミニプログラム決済機能開発エラーのまとめ
  • WeChatミニプログラムの支払いの簡単な例と注意点
  • WeChatミニプログラムの支払いと払い戻しのプロセスの詳細説明
  • WeChatアプレット決済機能実装PHP例詳細説明
  • WeChatアプレットWeChat支払いアクセス開発例詳細説明
  • WeChat支払いインターフェースを呼び出すWeChatアプレットを実装する方法
  • WeChatアプレット決済機能の実装(フロントエンド)

<<:  MySQL ステートメントの実行順序と書き込み順序の例の分析

>>:  Docker を使用した SQL Server の実行の実装

推薦する

Javascript で関数のカリー化とデカリー化を実装する方法

関数のカリー化(黒い疑問符の顔)? ? ?カレー(黒い疑問符の顔)? ? ?これは完璧な中国語翻訳で...

VMware Workstation のインストール Linux システム

始める段階から初心者になるまで、Linux オペレーティング システムは不可欠です。最初のステップは...

Linux サーバー上で複数の SVN リポジトリを構成するプロセスの詳細な説明

1. 指定されたディレクトリにリポジトリを作成し、ディレクトリ全体を保存してください。この記事のサン...

Mysql はテーブル内の古いデータを定期的にクリアし、いくつかのデータを保持します (推奨)

以下の目標を達成するため: Mysql データベースは、一定の間隔 (2 時間または 1 日、カスタ...

Nginx で何ができるかの包括的な分析

序文この記事は、サードパーティのモジュールをロードせずにNginxで処理できることのみに焦点を当てて...

HTML テーブルタグチュートリアル (27): セルの背景画像属性 BACKGROUND

セルの背景画像を設定でき、任意の GIF または JPEG 画像ファイルを使用できます。基本的な構文...

MySQLのExcelへのエクスポート方法の分析

この記事では、MySQL を使用してデータを Excel にエクスポートする方法について説明します。...

Xshellの一般的な問題と関連する設定の詳細な説明

この記事では、Xshell と関連する構成の一般的な問題について説明します。この記事の構成は、主に ...

VMware Workstation 14 Pro のインストールとアクティベーションのグラフィック チュートリアル

この記事では、VMware Workstation 14 Proのインストールとアクティベーションに...

ElementUIカスタムCSSスタイルが有効にならない問題を解決する

例えば、入力ボックスがあります <el-入力 ref="mySearch"...

CSS でフローティングにより親要素の高さが崩れる問題を解決するいくつかの方法

以前は、フロートはレイアウトによく使用されていましたが、フローティングレイアウトを使用すると親要素の...

ウォーターフォールレイアウト+ダイナミックレンダリングの実装

目次典型的なウォーターフォールウェブサイトウォーターフォールフローレイアウトの原則一般的な考え方具体...

MySQL 5.6.23 のインストールと設定環境変数のチュートリアル

この記事では、MySQL 5.6.23のインストールと設定のチュートリアルを参考までに紹介します。具...

Navicatは機能ソリューション共有を作成できません

初めて MySQL FUNCTION を書いたとき、エラーが何度も発生しました。 Err] 1064...

Nginx 急ぎ購入 電流制限構成 実装分析

ビジネス上のニーズにより、急ぎの購入が発生することが多いため、ロード バランシング フロント エンド...