h5 微信支払い

この記事では、支払いを呼び出すための WeChat の組み込みブラウザー、支払いを呼び出すための外部ブラウザー、および WeChat 支払い方法を含む、h5 プロジェクトで WeChat 支払いを使用する方法について説明します。

1: 問題の分類

1：WeChatの組み込みブラウザかどうかの判断方法は？

2: 外部ブラウザから呼び出された場合、支払いを実現するにはどうすればよいですか?

3: WeChat での支払い方法は何ですか?

2: 問題解決

1: ブラウザの種類を決定する

ブラウザーが異なれば、WeChat 支払いを呼び出す方法も異なるため、最初にブラウザーの種類を特定する必要があります。


         isWX(){
          var wx = window.navigator.userAgent.toLowerCase();
          if (wx.match(/MicroMessenger/i) == 'micromessenger'){
            return true;
          } else {
            return false;
          }
        },

2: 外部ブラウザが支払いを呼び出す

外部ブラウザが支払いを呼び出し、アクセスインターフェイスを介して呼び出し、インターフェイスに従ってインターフェイスによって返された URL を取得し、この URL にジャンプして支払いを行うのは比較的簡単です。

let res = await wxPay(params)
            if(res.code==200){
              window.location.replace(res.url)//res.url支付地址
            }

3：WeChatブラウザ振込決済

WeChat ブラウザで支払いを呼び出すには、js-sdk を使用する方法とjsapiを使用する方法の 2 つがあります。

方法 1: js-sdk を使用する

1: インストール: jssdk:

npm install weixin-js-sdk -S

2: マウント:

import jssdk from "weixin-js-sdk"
//可全局，可局部，根据具体情况来引入

３：インタフェースを介して検証情報を取得するここでは、検証情報を取得するためのバックエンドインタフェースにアクセスして、検証情報を取得します。

4: 構成インターフェースを介して許可検証構成を注入します (同期的に行う必要があります。構成は、検証情報が取得された後にのみ注入できます。そうしないと、検証は失敗します)

wx.config({

  debug: true, // 开启调试模式

  appId: '', // 必填，公众号的唯一标识

timestamp: , // 必填，生成签名的时间戳

nonceStr: '', // 必填，生成签名的随机串

signature: '', // 必填，签名

jsApiList: ["chooseWXPay"] // 必填，需要使用的JS接口列表

});

5: WeChat決済

wx.ready(function () {
        // 进行微信支付
        wx.chooseWXPay({
          appId: '',
          timestamp: '', // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
          nonceStr: '', // 支付签名随机串，不长于 32 位
          package: '', // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=***）
          signType: '', // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
          paySign: '', // 支付签名
          success: function (res) {
            // 支付成功后的回调函数
            if (res.errMsg == 'chooseWXPay:ok') {
            } else {
              Notify({ type: 'error', message: '支付失败',duration:2000 });
            }
          },
          cancel: function (res) {
          },
          fail: function (res) {
            Notify({ type: 'error', message: '支付失败',duration:2000 });
          }
        })
      })
//Success：接口调用成功时执行的回调函数。
//Fail：接口调用失败时执行的回调函数。
//Cancel：用户点击取消时的回调函数，仅部分有用户取消操作的api才会用到。
//Complete：接口调用完成时执行的回调函数，无论成功或失败都会执行。
//Trigger：监听menu中的按钮点击时触发的方法，该方法仅支持menu中的相关接口。

方法 2: JSAPIを使用する

function onBridgeReady(){
    WeixinJSBridge.invoke(
        'getBrandWCPayRequest',{
            "appId": "appId", //公众号名称，由商户传入     
            "timeStamp": "timeStamp", //时间戳，自1970年以来的秒数     
            "nonceStr": "nonceStr", //随机串     
            "package": "package",
            "signType": "MD5", // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
            "paySign": "paySign" //微信签名  
        },
        function(res) {
            // 支付成功
            if (res.err_msg == "get_brand_wcpay_request:ok") {
            }
            // 支付过程中用户取消
            if (res.err_msg == "get_brand_wcpay_request:cancel") {

            }
            // 支付失败
            if (res.err_msg == "get_brand_wcpay_request:fail") {

            }
            /**
             * 其它
             * 1、请检查预支付会话标识prepay_id是否已失效
             * 2、请求的appid与下单接口的appid是否一致
             * */
            if (res.err_msg == "调用支付JSAPI缺少参数：total_fee") {

            }
        })
}
// 检测支付环境中的 WeixinJSBridge
if (typeof WeixinJSBridge == "undefined") {
    if (document.addEventListener) {
        document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
    } else if (document.attachEvent) {
        document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
        document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
    }
} else {
    this.onBridgeReady();
}

三：終わり

参考記事：クスノキの行方（cnblogs.com）https://www.cnblogs.com/zxk5211/p/14040310.html